MeasureSchool logo
Search
Close this search box.
Search
Close this search box.

Using the DOM Element Variable in GTM to “Scrape” a Website

Last Modified on January 4, 2024

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.

An overview of this guide:

What is the DOM (Document Object Model)?

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: Wikipedia

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.

Use Cases for the DOM Element Variable

Here are some common use cases:

  1. Meta Tag Scraping: Extracting meta information like meta descriptions, canonical tags, or open graph tags for SEO and social media purposes.
  2. User-Generated Content: Capturing comments, reviews, or any other form of user-generated content to analyze sentiment or for other marketing purposes.
  3. Product Information: Scraping product details like price, stock status, or SKU from e-commerce websites.
  4. Form Data: Capturing data inputted by users in forms, especially when form submissions are hard to track.
  5. Page Attributes: Extracting specific attributes like page categories, publication dates, or author names.

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 a Website with the DOM Element Variable in GTM

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. 

Using the 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. 

FAQ

How can I set up the DOM Element Variable in GTM?

To set up the DOM Element Variable in GTM, navigate to the Variables section in GTM and create a new Variable. In the Variable Configuration area, select the DOM Element Variable type. You can then choose the selection method (ID or CSS Selector) and define the specific element you want to extract data from.

How do I find the appropriate CSS Selector for the DOM Element Variable?

To find the CSS Selector for the DOM Element Variable, you can use the browser’s developer tools (e.g., Chrome Developer Tools). By inspecting the desired element on the website, you can identify its position in the HTML markup and determine the appropriate CSS Selector to use in GTM.

Can I test the DOM Element Variable to ensure it is working correctly?

Yes, you can test the DOM Element Variable by enabling the Preview and Debug Mode in GTM. This mode allows you to simulate various events and actions on your website, and you can verify if the Variable is capturing the desired data correctly by checking the Variable values in the Debug Console.

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.

Another advanced GTM thing every marketer should learn is how to pull relative click data in GTM with a custom JavaScript variable.

Have you found this guide helpful? Are you using the DOM element variable in GTM to scrape your website? Let us know in the comments below!

MeasureMasters

REOPENED!

Master Data & Analytics with MeasureMasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
Subscribe
Notify of
guest
27 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Frank
Frank
7 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
Julian
7 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
Julian
7 years ago

great resource, thanks

Oguzhan Soyer
Oguzhan Soyer
7 years ago

hey, you misspelled the tagmanager 🙂

Julian
Julian
7 years ago
Reply to  Oguzhan Soyer

where?

Oguzhan Soyer
Oguzhan Soyer
7 years ago
Reply to  Julian

at the bottom, where you set the links.

Stuart Clark
Stuart Clark
6 years ago
Reply to  Oguzhan Soyer

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

Frank
Frank
7 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
Julian
7 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
7 years ago
Reply to  Julian

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

Julian
Julian
7 years ago

great resource, thanks

Oguzhan Soyer
Oguzhan Soyer
7 years ago

hey, you misspelled the tagmanager 🙂

Ganesh Bhandarkar
Ganesh Bhandarkar
3 years 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

Gajendra
Gajendra
2 years ago

Can you pls provide the solution to read all the prices or top 3, as I do require this solution for a particular requirement.

Andy
Andy
3 years ago

This is great thank you! Is it possible to then format the value? For instance, I’ve been able to pull the price using the method above, but rather than it displaying £11,750 can we convert this to just 11750 so that GA can accept?

Orsel
Orsel
5 months ago

what would that script look like, please?

Can’t figure out any other workaround for the string to value issue.

Thank you.

Deepak
Deepak
1 year ago

Thanks Julian,
It’s not working in my case. I tried for a product page which has variants. The site is hosted on Shopify

Humaira
Humaira
1 year ago

Hi Julain

very useful article you have here

I have a different document query which ends up in the console like below

document.querySelectorAll(‘article.acc-total-area.bg-light.p-3.px-xl-2.mt-2’)[0].lastElementChild.lastChild.innerText

How do I place it under DOM Element / selector method = css selector / element Selector

article.acc-total-area.bg-light.p-3.px-xl-2.mt-2.[0].lastElementChild.lastChild.innerText

but it is not pulling the innerText in google tag manager

can you guide?

kind regards

Sofiia Wycisk
Sofiia Wycisk
1 year ago
Reply to  Humaira

Hi Humaira!

You cannot actually place it under the DOM Element, as innerText is not an element yet a property of an element that represents its rendered text content. Thus you could use a custom JS variable with a few lines of code to get that value, or another solution could be a tool called GTM Variable Builder that could help you grab that value. Here’s a 1-minute video guide for you: https://www.youtube.com/watch?v=mrSmzIa4bYo. Let me know if you managed to implement it.

Regards, Sofiia

Himanshu Kumar
Himanshu Kumar
1 year ago

can we pass multiple css selector in dom element because i have two checkout on the basis of country. if this is possible then how we can pass two css selector. please suggest me.

Last edited 1 year ago by Himanshu Kumar
giulio
giulio
11 months ago

hi julian, i need to extract a dom element variable from a div container. It gives me the correct result by using this command in the console
document.querySelector(“div > span.price”).innerText

I need help to create the variable please

MeasureSchool Locker

Unlock our Free Tools, Templates and Resources

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.