This will match up any CSS Selector that I put into the parentheses.Īs I insert our span.amount, we now see all the different elements that have these traits.
Input a Method That Would Select the Right Element So I’m going to click on Console and input a method that would select the right element for us. The element that we have selected has a span.amount as a CSS Selector, and before we input it into our Google Tag Manager Variable I want to actually try this out via JavaScript and try to select this element.
#Html using a variable as element id how to
Then you probably understand the different notations that you find at the bottom of the Developer Tools and how to use them correctly. Right now I’m giving for granted that you know CSS, and how to select an element through CSS. Luckily we have the CSS Selector option which can be really really powerful.īack to GTM, we are going to select CSS Selector as the Selection Method.Īnd now we need to input an Element Selector. Unfortunately, this element doesn’t have an ID, which would be unique to this element, so we won’t be able to use our ID option as the Selection Method. You can select the element that you want to pull out by enabling the Inspector Tool.Ĭlick on the icon, then hover over (or click on) the element that you’re looking for in order to find its position in the code. The first screen that pops up is already the HTML markup where we can see the Document Object Model. Look at DOM in Google Chrome Developer Tools This will open up the Developer Tools Panel. Now, if you use Google Chrome as the browser, since we are working with the Document Object Model we can look into it by right-clicking on our page and going to Inspect Element. We want to pull out the product price and we could either choose to do it with the ID or through CSS Selector. In the list that pops up, scroll down to the Page Elements section, and you’ll find the Dom Element Variable to your disposal. You’ll find it in Google Tag Manager under Variables.Ĭlick on the Variable Configuration area. In this case, let’s try to pull the price of this Flying Ninja poster ( £12.00).įirst of all, we will need to set up our DOM Element Variable to pull our price element. To demonstrate this method, I’ll be pulling the price from this product page in my Demo Shop here into GTM with the DOM Element Variable. How to Scrape a Website with the DOM Element Variable in GTM Let’s get started exploring the DOM Element Variable and how to pull data with it. From there you can send this data on in the same way to other tools and for use in tags. Other Options: Using a Data LayerĪ more robust option would be to build a Data Layer and pull information from it using the Data Layer Variable in GTM. In other words, this method is prone to failure with the slightest site change.
#Html using a variable as element id update
The downside with this method of pulling data from a site is that, if for any reason, the markup on your site changes - for example when a developer makes a change to the HTML or a site-wide update takes place changing a node’s name - this method won’t work anymore and you will need to go in and adjust the conditions you have defined. This information then becomes available for use in tags, triggers, and 3rd party marketing tools. The DOM Element Variable is a standard Variable in Google Tag Manager that allows you to pull or scrape information from your website’s HTML DOM markup using conditions that you define. Note that doing so will dynamically change the content of your website, but just for you in your browser. You can also directly double click on any node or element to edit it, remove it, or add something new entirely. Doing this expands the tree branches to show more objects beneath it in the tree hierarchy. Simple right-click on any web page and click Inspect to bring it up.Įach node here has a grey arrow to its left which you can click on. Try to open up Chrome Developer tools and you will be able to see this tree-like structure for yourself.
It allows you to manipulate the website document and pull, edit and add and remove the values of your website elements. Within that we have the section, the section and within the section we have all our different elements.Įach node of the structure represents a part of the document. The first tag that you normally write is the tag and that surrounds your whole document. Now often times these tags are actually encapsulated by other tags. When you write HTML you are dealing with different opening and closing tags. It is a hierarchical tree-like structure of your website’s HTML markup. The DOM stands for Document Object Model. Inspecting a website with Chrom Dev Tools.With its help, you can transfer any value from your website into a Variable and pass it on to your Marketing tools, as long as it is selectable in the DOM. The DOM (Document Object Model) Element Variable is a powerful Variable in Google Tag Manager to scrape content directly from your Website HTML markup.
0 kommentar(er)
