Schema in GTM using DOM scrapping

It seems it has been ages since the last time I post here. Well, not ages, but last year at least. Even this time I'll 'try' (and I mean try because my English is not so good) to write it in English as I moved a time to another country where they speak in English. So, to my Spanish readers, my apologies in advance, if you need something, I bet you know how to catch me and I'll be please to explain it in Spanish too.

Anyway, intro apart, this time I will write about something we did in the actual Company I work for. The post is not new and it's based on this big one: Using Gooble Tag Manager to dynamically generate a Schema Tag. I will write down more because, as the silly person I am, the most difficult part from me, was to extract the data from the DOM elements that were already on the page to create the JSON schema on the fly.

Speaking of DOM scrapping, it also has to be with my last post on how to retrieve values from that DOM, but this time, using GMT built-in variable, instead of querySelector javascript function. One thing that helps me so from a better understanding was the mozilla developer page attribute selectors . But all of you that know me a bit, know that I prefer to show it to you with examples, so, here we are.

By example we are going to use the same example I used last year, so if we go to http://www.damupi.com/test/damupi/index_en.html we will find this page:

And this is the source code:

Imagine that I want to create an schema like the following one, and you want to retrieve all the data from the page to create the JSON file on the fly:

And you want to retrieve all the data from the page to create the JSON file on the fly.

Let's start by getting the name "Suzuki". In GTM, go to variables and create a new variable like and, for example, call it "Schema product name - DOM":

As you see on the source code I start looking for a div with a specific class and then I drill down till the next element, which in our case is an img, with the attribute "type" equals to "brand". Let's say this is an example an in this particular case we could just get the value directly from "img[type="brand"]" but I have preferred to write you down like this because normally, all the pages have a lot of source code and the only thing for drilling down is to do it like this.

Check GTM preview mode to test if your expression is right or not

Let's do the same for getting image value for building our Schema JSON file. In this case we are going to retrieve the image value for the same element but a different attribute, so the only thing we are going to replace is "alt" per "scr".

Test it again in GTM preview mode:

And finally, following the instructions of Chris Goddard we can build the json we want to.