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

Scraping Data with Chrome Developer Tools and GTM

Last Modified on January 18, 2024

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.

FAQ

How to extract data from Chrome Developer Tools?

1. Identify the Element to Extract: Navigate to the webpage from which you want to extract data. Find the specific element (e.g., a product name) that you want to scrape.
2. Open Chrome Developer Tools: Right-click on the chosen element and select “Inspect”. This action will open the Elements panel in Chrome Developer Tools, highlighting the selected element.
3. Copy JavaScript Path: In the Elements panel, right-click on the highlighted element and select Copy → Copy JS path. This copies the JavaScript path of the element to your clipboard.
4. Use the Console Tab: Switch to the Console tab in Chrome Developer Tools.
5. Paste and Modify the JavaScript Path:
Paste the copied JS path into the console and press Enter. This will return the HTML line containing your desired data.
To extract specific data (like just the text), append .innerHTML to the JavaScript command and press Enter. This will return only the text content within the HTML tags.
6. Adjust the Command for General Use (Optional): If you plan to use this command across different pages, ensure it is not too specific to a single element or page. Modify the command as needed to make it more versatile.

How do I create a GTM custom JavaScript variable for scraping data?

To create a GTM custom JavaScript variable for scraping data, you can follow these steps:

1. Copy the JavaScript command that successfully extracts the desired data using Chrome Developer Tools.
2. In your GTM account, navigate to Variables and click on “New.”
3. Provide a name for the new variable and select “Variable Configuration” > “Custom JavaScript.”
4. Paste the JavaScript command into the “Custom JavaScript” field.
5. Save the custom JavaScript variable.

Are there any limitations to using the scraping method?

Yes, the scraping method has limitations. Any changes made to the website’s structure or code can introduce inconsistencies and cause the scraping commands and variables to stop working. It’s important to regularly review and update the scraping commands to ensure their continued functionality.

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!

MeasureMasters

REOPENED!

Master Data & Analytics with MeasureMasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ben
Ben
4 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

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.