How to Scrape Data Using Chrome Dev Tools and GTM [Quick Tip]

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.

Use .innerHTML to get the inside of the DOM node

Full code template for the custom JS variable

function(){
return document.querySelector(“CHROMEDEVTOOLS”).innerHTML
}

🔗 Links:

Chrome Developer Tools https://developers.google.com/web/tools/chrome-devtools/

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

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.

So how can we pull this in with the help of the Chrome Dev Tools? 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. 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. 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. 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.

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.

SHOW MORE...

1
Leave a Comment

avatar
 
smilegrinwinkmrgreenneutraltwistedarrowshockunamusedcooleviloopsrazzrollcryeeklolmadsadexclamationquestionideahmmbegwhewchucklesillyenvyshutmouth
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Ben Recent comment authors
newest oldest most voted
Ben
Guest
Ben

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