Scraping Data with Chrome Developer Tools and GTM

Do you want to pull data from your website?

The most reliable and standard way is to utilize a data layer. However, not all websites have a data layer. You would need to contact a website developer to install a data layer if it is absent. But what can you do if you can’t reach any developer or wish to install it yourself? 

You might want to utilize the scraping method, which pulls out values directly from the document object model, which you can then use to create variables inside Google Tag Manager. 

However, this is quite limited, as any change to the website can introduce inconsistencies, causing your variables and the data that comes with it not to work anymore.

While this method has its downsides, it’s a quick and easy way to grab data from your website and transfer it to Google Tag Manager.

Here is an overview of what we’ll cover:

In this guide, we’ll teach you the method of scraping data with Chrome Developer Tools.

Pulling Page Data with Chrome Developer Tools

Let’s start by determining what to grab from our website. For this guide, we want to grab the product name. So, we need to create a command that allows us to grab this element.

Highlight the element we want to grab, right-click, then select Inspect.

Inspecting the product name on the demo website

This opens up our Chrome DevTools on the Elements pane. You can also see our selected element being highlighted.

Inspected element in the elements pane in Chrome DevTools

Right-click on this title, and go to Copy Copy JS path

Copying the JS path of the selected element

Using the Console

Go to the Console tab, and paste the JS path. This should give us the document.querySelector entry.

Pasting the element’s JS path on the console tab

Press the Enter key. This should give us the highlighted text line we saw on the elements tab. 

Element title returned from the console tab

This JavaScript command pulls the whole line, but we only want to get the product name in between these head elements. We can append this by simply adding “.innerHTML” at the end of our command.

Paste the JS path again, and add .innerHTML at the end. This should return only the name in between the HTML tags.

Product name returned from the console tab

This seems to be working fine, but we need to ensure that this command works for the other products in our shop and not only for this specific product.

Go to another product page and paste our latest command. You can also press the up arrow key to quickly copy the previous command.

Trying the JavaScript command on a different product page

Pressing on the Enter key returns an error. This is because our query selector command is too specific to the page we had earlier and it cannot pull out the product name from other pages. Inspecting our command, this is probably due to there being a product 73 ID here. 

Remove the #product-73 part from our command and press Enter. This should now return the product title of this page.

Modifying the JavaScript command

To be sure that this command now works for any product, try this command again on another product page. 

Modified JavaScript command test

Great! We now have a command to pull data from our website. Now, let’s transfer this data to Google Tag Manager.

Building GTM Custom JavaScript Variable

Copy the command.

Copying the JavaScript command

In your Google Tag Manager account, go to VariablesNew

Creating a new variable in GTM

Provide a name for the new variable, then select Variable ConfigurationCustom JavaScript.

Creating a custom JavaScript variable in GTM

Add the following template into the Custom JavaScript field: 

function() {
return
}

Paste the completed command after return, then click Save.

Saving the custom JavaScript variable

If you want to know more about custom JavaScript variables, check out our guide on how to pull relative click data in GTM, where we also utilize this type of variable.

Testing

Let’s test if we have successfully created a variable and if it stores the correct data.

Click on Preview.

Entering GTM preview mode

It’s important to know that these scraping methods usually only work on the DOM Ready section.

Going back to our website, go to DOM Ready Variables. We should see our variable and the product name as its value.

Custom JavaScript variable in the DOM Ready tab

Let’s do another test for a different product.

Go to another product page and check if the value of our variable changes.

Testing if the value of the variable changes

Great! Our variable is working correctly. To implement this on your website, make sure to publish a live version.

Summary

This is the method of scraping data with Chrome Developer Tools. We used the method of inspecting a website element and copying its JS path to create a custom JavaScript variable at Google Tag Manager.

We have only covered a tiny fraction of what you can do with Chrome DevTools. To learn what else you can do with this toolset, check out our guide for Chrome Developer Tools for Marketers.

What kinds of data will you pull from your website using the scraping method? Will you be using this method regularly? Let us know in the comments below!

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ben
Ben
3 years ago

Thanks for the video! I actually didn’t know you could copy JS Path like that. Great tip! Keep it up. Love from germany

Blog Categories

Join 50,000+ marketers getting exclusive resources and our latest content!

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.