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