How to use Google Tag Manager with Multiple Schema Product reviews using JSON-LD and Variables

问题

So I'm using Google Tag Manager to add Schema JSON-LD Product reviews to some pages and I'm stuck and unable to find any resources on the issue.

The issue that I'm having is how can I tell GTM there are multiple elements and they should be repeated in JSON-LD each with their unique values.

The method I'm using to get the values is using CSS selectors which are not unique because on some pages they can appear 20 times and on others 30 times. The variables are obtained by Google GTM.

Using Google Tag Manager custom HTML 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>

Sadly, after testing, I'm unable to get the review part of the JSON-LD to repeat in a uniformed manner. In fact, I can't get more than one review period into the JSON and obviously something wrong with my code and GTM setup.

The variables are then setup in Google TAG manager using DOM Element with CSS selector like so:

Sometimes the are multiple reviews that appear on the page so I need multiple entries in the JSON, my current code only outputs a max of one.

The Question, if more than one product review is present on the page, how do I get GTM to add yet another review in the JSON-LD?

回答1:

You can use custom JavaScript variables to store arrays of values and then set elements of these arrays as values in JSON-LD.

For example, to get the text of H1 tag you can create custom JavaScript variable with this function:

function () {return document.querySelector('h1').innerText;}

Let's say you will name this variable h1. Then you can use this variable as {{h1}} in JSON-LD.

JSON-LD code can be stored in custom HTML tag and filled with variables mentioned above.

If you have more then one H1 on the page you can use this variable:

function () {return  document.querySelectorAll('h1');}

It will return an array of elements and you can loop through this array to get innerText or just look at each element like:

{{h1}}[0].innerText

Let me show my idea on this blog post example - https://netpeak.net/blog/modify-your-ppc-strategy-to-suit-voice-search/. You can get all H2 headers (or reviews or anything) from the page like this:

var allh2 = document.querySelectorAll('h2');

In terms of GTM it could be custom JavaScript variable or you can just build one custom HTML tag with JSON-LD. Next you create empty array to store inner text of these headers and push all values as object in JSON-LD notation:

var reviews = [];
for(i = 0; i < allh2.length; i ++){ 
  reviews.push({'review':allh2[i].innerText});
}

Now you have reviews variable that can be used as a value in JSON-LD markup for "reviews" key.

来源：https://stackoverflow.com/questions/43708015/how-to-use-google-tag-manager-with-multiple-schema-product-reviews-using-json-ld

标签

javascript

html

schema

google-tag-manager

json-ld