Scraping Data with Chrome Developer Tools + GTM

Chrome Developer Tools have several uses. In this quick video, let’s go through the steps on how you can utilize the Chrome dev tools to build a custom JavaScript variable that can pull out any value from the document object model.

Hey, there measuregeeks! Julian here back with another quick tip video. Today, we want to talk about how we can utilize the Chrome dev tools to build a custom JavaScript variable that can pull out any value from the document object model. So for example, if I wanted to pull out this product name here, how could I transfer this into Google Tag Manager?

Now, the obvious way is to utilize a data layer. This is the most reliable and standard way to send data into Google Tag Manager. But if you don’t have a developer at hand, or can install a data layer, you might want to utilize the scraping method. And this is the method of pulling out values directly from the document object model. And this comes with some downsides. Because if the site changes in any way, your variables and with that the data might not work anymore, and it’s not as consistent. So just be aware once you utilize this method and no of the downside.

Pulling Page Data with Chrome Dev Tools

So how can we pull this in with the help of the Chrome Dev Tools?

Inspect Your Page

Simply go to the element that you want to pull in, we have the inspect button on the right click that you can click. It will open up the developer tools in the elements pane.

Using the Console

Now, here we have the element that we have selected. If you right click on this title, we can go to copy and click on copy JS path. Once we have clicked on JS path, we can go over to console and try this all out. What this will do and I’ve just pasted it in, it will give us a document query selector. And here we have the selector that should pull in the title right here. So if you click enter, you see that we now have this whole element that this JavaScript command pulls it.

Now, what we want to get from this is actually the name here in between. And we can append a simple dot inner HTML to get what is in between the HTML tags. This is what we want to pull into Google Tag Manager. But before we go the next step, actually want to go to another page here and try this command out again. I’m just going to click the up arrow to get the last command back and press ENTER again, and we get an error. And this is probably because our query selector so what the tools have selected here is too specific to the page that we had earlier, and it cannot pull out the next product name. And this is probably because there is a product ID of 73 defined here. What we can do is to get rid of this 73 part.

Press Enter again. And here we go, we have now our Ninja. Let’s go on to the next page, see if we can get the right product in there. So it’s very important to test your scraping methods with different use cases. So you know that they work correctly. So here we go, we should be able to reliably pull this out, even if we have different other products in front of us.

Building GTM Custom Java Script Variable

So now we can go ahead and copy this command right here and go over to Google Tag Manager and build a new custom JavaScript variable. This will be your custom JavaScript variable for our product title. And we’re going to go ahead and utilize the custom JavaScript variable. Now, we will need to fill this with first of all an anonymous function right here with a return statement that needs to be inside. And here we can post our text that we have copied earlier.

Testing

Let’s try this all out. Save this and preview.

It’s important to know that these scraping methods normally only work on the DOM ready. So once the DOM has loaded, we’ll be able to retrieve custom product title, not on the pageview. But here, it’s already alright on a pageview apparently. Let’s go over to another product.

And see here we have happy ninja. This is the product name. If we have another product here, you can see that it pulls in the right product name. So this is how you can utilize this method of right clicking and copying the JS path. You can build a custom JavaScript variable with the help of the Chrome Dev Tools and Google Tag Manager.

Summary

Hey, there it’s me again. Thanks for checking out our quick tip video. Was that helpful? Did you understand something not quite? Then I’d love to hear from you in the comments down below. But if you liked it, then why not give us a thumbs up and subscribe to our channel right over there because we bring you new videos just like this one every week. Now, my name is Julian. Til next time.

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
2 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 30,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.