DOM Element Variable in GTM – DOM Scraping Explained

The DOM (Document Object Model) Element Variable is a powerful Variable in Google Tag Manager to scrape content directly from your Website HTML markup.

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.

What is the DOM?

The DOM stands for Document Object Model. It is a hierarchical tree-like structure of your website’s HTML markup.

When you write HTML you are dealing with different opening and closing tags. Now often times these tags are actually encapsulated by other tags. The first tag that you normally write is the <html> tag and that surrounds your whole document.

Within that we have the <head> section, the <body> section and within the <body> section we have all our different elements.

Each node of the structure represents a part of the document. It allows you to manipulate the website document and pull, edit and add and remove the values of your website elements.

Screenshot from Wikipedia of a tree structure of the Document Object Model
source: https://wikipedia.org/

Try to open up Chrome Developer tools and you will be able to see this tree-like structure for yourself. Simple right-click on any web page and click Inspect to bring it up.

Screenshot of Chrome Developer Tools showing the tree structure of the Document Object Model

Each node here has a grey arrow to its left which you can click on. Doing this expands the tree branches to show more objects beneath it in the tree hierarchy. You can also directly double click on any node or element to edit it, remove it, or add something new entirely.

Note that doing so will dynamically change the content of your website, but just for you in your browser.

What is the DOM Element Variable?

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. This information then becomes available for use in tags, triggers, and 3rd party marketing tools.

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. In other words, this method is prone to failure with the slightest site change.

Other Options: Using a Data Layer

A more robust option would be to build a Data Layer and pull information from it using the Data Layer Variable in GTM. From there you can send this data on in the same way to other tools and for use in tags.

Let’s get started exploring the DOM Element Variable and how to pull data with it. 

How to Scrape with the DOM Element Variable

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.

In this case, let’s try to pull the price of this Flying Ninja poster (£12.00).

Screenshot of an ecommerce website product page

First of all, we will need to set up our DOM Element Variable to pull our price element.

You’ll find it in Google Tag Manager under Variables.

Screenshot of GTM Highlighting where to find Variables

Scroll down, and create a New Variable 

Screenshot of GTM shoing how to create a new Variable

Click on the Variable Configuration area. In the list that pops up, scroll down to the Page Elements section, and you’ll find the Dom Element Variable to your disposal. 

Screenshot of GTM showing how to select the DOM Element Variable type

I’ll name it Product Price. 

Screenshot showing how to name the GTM varaiable

We want to pull out the product price and we could either choose to do it with the ID or through CSS Selector. 

Screenshot of GTM showing how to select the ID as the Selection Method

Selection Method

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.

(Inspect if you are on Windows)

Screenshot of GTM showing how to inspect an element on a website

This will open up the Developer Tools Panel. 

Screenshot of the Chrome Developer Tools panel displaying the DOM tree

Look at DOM in Google Chrome Developer Tools

The first screen that pops up is already the HTML markup where we can see the Document Object Model. 

You can select the element that you want to pull out by enabling the Inspector Tool. 

Click 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. In our case, we need the $12.00 Price.

Screenshot of Chrome Developer Tool's inspector tool

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. 

Luckily we have the CSS Selector option which can be really really powerful. 

Back to GTM, we are going to select CSS Selector as the Selection Method.

Screenshot of GTM Variable configutation for selection method as CSS Selector

 And now we need to input an Element Selector. 

CSS Element Selector

Right now I’m giving for granted that you know CSS, and how to select an element through CSS. Then you probably understand the different notations that you find at the bottom of the Developer Tools and how to use them correctly.

Screenshot of Chrome Dev Tools showing javascript notation inside developer tools

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. 

So I’m going to click on Console and input a method that would select the right element for us. 

Screenshot of Chrome Dev Tools showing the console tab

Input a Method That Would Select the Right Element

Let’s go with document.querySelectorAll. This will match up any CSS Selector that I put into the parentheses.

Screenshot of Chrom Dev Tools showing the document query selector

As I insert our span.amount, we now see all the different elements that have these traits. 

Screenshot of Chrome Dev Tools showing span amount for CSS selection

On this page, there are more than one, and when we hover over them the tool highlights them on the page.  

For example, the first one corresponds to the amount at the top of the page

Screenshot of Chrome Dev Tools showing multiple span amounts visible on a page

So there are a lot of different prices on the page so we need to further refine our CSS Selector.

To do that we have to go back into our elements

Screenshot of Chrome Dev Tools showing the p class price for CSS selection

Now we can see that the element we are looking for is actually a child of the element <p class=“price”>, so let’s use that to refine our CSS Selector. 

Let’s go back to our console and press the up arrow. This will bring back up the last inputted function.

Screenshot of Chrome Dev Tools showing clicking the up arrow bringing back last input function

We’ll refine this by selecting all the <p> elements with the class price, so I’ll insert p.elements in the parenthesis and press enter.

Screenshot of Chrome Dev Tools showing the p.price span.amoun for CSS selection

Now we have two objects left. One would be the struck price

Screenshot of Chrome Dev Tools showing multiple p.class span.amounts on a page

So we need to further refine it. 

Back into our elements, we see that our span.amount is actually a child of the <ins> tag.

Screenshot of Chrome Dev Tools showing span.amount is child of the ins tag

Let’s also put this in our tag, at the right place

Screenshot of Chrome Dev Tools showing insert ins tag in your CSS selector

And press enter.

Screenshot of Chrome Dev Tools showing string found through CSS selection

Now we can see that only one element is left, which is the price we needed, and that would be what we put into our variable. 

So let’s copy our last string 

Screenshot of Chrome Dev Tools showing copy the string found through CSS selection

And input that into our Google Tag Manager as the Element Selector.

Screenshot of GTM showing the Element Selector

We can leave the attribute name free because there is no attribute with this element, and click Save

Testing

Now in order to see if this all worked correctly, let’s go into the Preview and Debug Mode

Screenshot of GTM showing DOM Element Variable test

Go back to the website, close the developer tools, and reload the page.

As the Debug Console pops up, we can select the DOM Ready event, and check our Variables. 

Screenshot of GTM showing preview and debug mode on the site

Scrolling down now we can see that in the ProductPrice Variable is reported the £12.00 pounds price. 

Screenshot of GTM showing product price being captured in the DOM Element Variable

Now that we know that our Dom Element Variable works we could transfer the product price into an event, a tag, or pass it on to other marketing tools. 

Summary

So, as I said earlier, the most robust way to send data to Google Tag Manager would be to build a Data Layer which doesn’t change when others update your website. Regardless, using the DOM Element Variable in one of the more straightforward approaches to scraping with GTM, so worth knowing. 

To learn more about the Data Layer, see our guide on pulling data from it here.

If you want to learn more advanced topics like using the Data Layer we have courses on this topic inside our membership.

Julian Juenemann
About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

guest
17 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Frank
Frank
3 years ago

Hey Julian,

Thanks for illustrating how to use the css selector but would it be possible for you to also demonstrate the element id that you skipped? I understand that in that example it wasn’t unique. I just can’t find any resource to help with element id.

Julian
3 years ago
Reply to  Frank

if you want to select an element that has an Id you can use # sign to select it. https://www.w3schools.com/cssref/css_selectors.asp

Julian
3 years ago

great resource, thanks

Oguzhan Soyer
Oguzhan Soyer
3 years ago

hey, you misspelled the tagmanager 🙂

Julian
3 years ago
Reply to  Oguzhan Soyer

where?

Oguzhan Soyer
Oguzhan Soyer
3 years ago
Reply to  Julian

at the bottom, where you set the links.

Stuart Clark
2 years ago
Reply to  Oguzhan Soyer

Think this is it – “https://tagmanger.google.com”

Frank
Frank
3 years ago

Hey Julian,

Thanks for illustrating how to use the css selector but would it be possible for you to also demonstrate the element id that you skipped? I understand that in that example it wasn’t unique. I just can’t find any resource to help with element id.

Julian
3 years ago
Reply to  Frank

if you want to select an element that has an Id you can use # sign to select it. https://www.w3schools.com/cssref/css_selectors.asp

Frank
Frank
3 years ago
Reply to  Julian

Hey Julian thanks. https://www.w3schools.com/cssref/trysel.asp this was also very helpful in my understanding

Julian
3 years ago

great resource, thanks

Oguzhan Soyer
Oguzhan Soyer
3 years ago

hey, you misspelled the tagmanager 🙂

Ganesh Bhandarkar
Ganesh Bhandarkar
19 days ago

Hi Julian,
 
Awesome read (as always).
 
One query: Is it possible to extract a dump of all product prices of an ecommerce site using GTM?
 
If so, I would like to use it on our site which would be very helpful in promotions.
 
Thanks
Ganesh