How to use Google Tag Manager with multiple schemas Product overview using JSON-LD and variables
So, I am using Google Tag Manager to add Schema JSON-LD product reviews to some pages and I am stuck and unable to find any resources on this issue.
The problem I'm running into is how can I tell GTM that there are multiple elements and they should be repeated in JSON-LD each with their own unique values.
The method I use to get the values is using CSS selectors, which are not unique because they may appear 20 times on some pages and 30 times on others. The variables are obtained from Google GTM.
Using Google's own HTML tag manager on all pages I add
<script>
(function() {
var data = {
// THIS APPEARS ONCE.
"@context": "http://schema.org",
"@type": "Product",
"name": "{{name}}",
"aggregateRating":
{
"@type": "AggregateRating",
"ratingValue": "{{rating}}",
"reviewCount": "{{ratingCount}}"
}
// THIS BLOCK OF CODE NEEDS TO BE REPEATED EVERYTIME VARIBLE {{customer}} IS FOUND
"review": [
{
"@type": "Review",
"author": "{{customer}}",
"datePublished": "{{date}}",
"name": "{{desc}}",
"reviewBody": "{{say}}",
"reviewRating": {
"@type": "Rating",
"ratingValue": "{{customValue}}"
}]
}
var script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName('head')[0].appendChild(script);
})(document);
</script>
Unfortunately, after testing, I cannot get the JSON-LD overview part to repeat on the form. In fact, I cannot get more than one lookup period in JSON and there is obviously something wrong with my code and GTM setup.
Variables are then set up in Google TAG manager using DOM Element using CSS selector like this:
Sometimes it is several reviews that appear on the page, so I need multiple entries in JSON, my current code outputs at most one.
Question: If there is more than one product overview on a page, how do I get GTM to add another overview to JSON-LD?
source to share
You can use JavaScript custom variables to store arrays of values, and then set the elements of those arrays as values in JSON-LD.
For example, to get the text of the H1 tag, you can create a custom JavaScript variable using this function:
function () {return document.querySelector('h1').innerText;}
Let's say you call this variable h1. Then you can use this variable as {{h1}} in JSON-LD.
The JSON-LD code can be stored in a custom HTML tag and populated with the above variables.
If you have more than one H1 per page, you can use this variable:
function () {return document.querySelectorAll('h1');}
It will return an array of elements and you can loop through that array to get the innerText or just look at each element, like this:
{{h1}}[0].innerText
Let me show you my idea with this blog example - https://netpeak.net/blog/modify-your-ppc-strategy-to-suit-voice-search/ . You can get all H2 headings (or reviews or whatever) from a page, for example:
var allh2 = document.querySelectorAll('h2');
In GTM terms it can be a custom JavaScript variable or you can just create one custom HTML tag with JSON-LD. Then you create an empty array to hold the inner text of these headers and insert all the values as an object in JSON-LD notation:
var reviews = [];
for(i = 0; i < allh2.length; i ++){
reviews.push({'review':allh2[i].innerText});
}
You now have a variable variable that can be used as a value in the JSON-LD markup for the revocation key.
source to share