Rocket coming out of a tablet

Adding JSON-LD Review Schema with Google Tag Manager


Schema code or Structured Data can sometimes be challenging to put on website. In wordpress, for example, depending on your theme, WordPress might meddle with your code, making it invalid. Or, if you’re an agency working on a variety of sites, you might not have ftp access to add it to any source code.

The great news is that you can add it with Google Tag Manager, and it’s fairly easy. There are just a few extra steps you need to take to make it work.

In this example, we’ll use some review schema for a product, although it will work for any type of JSON-LD schema. Ours will be for an imaginary toothbrush company written by a happy client.

Tip #1: If you use review schema, make sure for it to be effective, to include the actual review on the page you post the schema on!

Generating your Schema Code

I normally use the webcode.tools to generate my JSON-LD review schema. And for our example, this is what I had it spit out:

<script type=”application/ld+json”>

{
“@context”: “http://schema.org/”,
“@type”: “Review”,
“itemReviewed”: {
“@type”: “Thing”,
“name”: “Timmy’s Artisan Toothbrushes”
},
“author”: {
“@type”: “Person”,
“name”: “Bones McGee”
},
“datePublished”: “2018-11-01”,
“reviewRating”: {
“@type”: “Rating”,
“description”: “Handed these toothbrushes out at Halloween in lieu of Candy. Kids seemed to love them until I ran out. Woke up to my house egged and toilet papered. Learned my lesson and will have to buy double next Halloween”,
“ratingValue”: “5”
}
}
</script>

Make your Schema readable by Google Tag Manager!

As it is, this schema will work just fine if you add it to any html, and it will validate in Google’s Structured Data Testing Tool. It won’t, however, jive with Google Tag Manager, unless you slightly alter your code. What you have to do is modify the opening and ending bits of code slightly with the following.

<script>
(function()
{
var data = {

OUR SCHEMA CODE

}
var script = document.createElement(‘script’);
script.type = “application/ld+json”;
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName(‘head’)[0].appendChild(script);
})(document);
</script>

So our example would become:

<script>
(function()
{
var data = {

“@context”: “http://schema.org/”,
“@type”: “Review”,
“itemReviewed”: {
“@type”: “Thing”,
“name”: “Timmy’s Artisan Toothbrushes”
},
“author”: {
“@type”: “Person”,
“name”: “Bones McGee”
},
“datePublished”: “2018-11-01”,
“reviewRating”: {
“@type”: “Rating”,
“description”: “Handed these toothbrushes out at Halloween in lieu of Candy. Kids seemed to love them until I ran out. Woke up to my house egged and toilet papered. Learned my lesson and will have to buy double next Halloween”,
“ratingValue”: “5”
}
}
var script = document.createElement(‘script’);
script.type = “application/ld+json”;
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName(‘head’)[0].appendChild(script);
})(document);
</script>

Adding your Schema Code to Google Tag Manager

Tip #2 If you’re new to Google Tag Manager, and are using WordPress, I recommend using the Metronet Tag Manager plugin to add the GTM code to your site.

If you are an experienced GTM user, adding the tag shouldn’t be too difficult, and if you’re new, this little guide should help walk you through the process.

Step one, add a New Tag, and when choosing tag type pick Custom HTML

Choosing Tag Type

Step two, paste your Schema Code

Google Tag Manager html

Step three, add a trigger

Add a trigger

I typically use the some page views trigger for some pages so that it will appear on the page I specify.

Submit your Google Tag Manager Code and Validate It

You need to submit your code in Google Tag Manager, otherwise the Google Structured Data Testing Tool will not be able to see it and Validate it.

Yes, you can preview it using the GTM extension in Chrome.  However, it will only show that the tag will fired.  What we want to make sure of is that Google likes it, and there are no syntax errors.  Otherwise you’re just stuck with some extra code on your site.

I also typically re-submit the page to be crawled in Google Search Console, so Google can pick up this code. This step isn’t necessary as Google will eventually re-crawl it, but there’s probably some probability that it might speed up the process.

Review Schema and SERPS

If you have the actual review on that site, and you add the schema and it’s not on your homepage, there’s a good chance you’ll show up in Google Search Result Pages with a 5 star snippet showing. This is great for making your stand out in search results, and potentially improve your clickability!

If you have any questions, feel free to post them below.  If you’re looking to learn more about Schema and all the crazy cool things you can do with it, I’d recommend checking out Schema App, as they have lots of wonderful articles and video content to help you wrap your brain around the amazing possibilities of Structured data.  To enhance your Google Tag Manager skills, you’ll want to check out Simo Ahava’s blog.  Anything you want to do with Google Tag Manager is often there with step by steps that outshine mine for the beginner to GTM expert.

Final Caveat, it’s always better to apply the schema to the page code itself, vs Google Tag Manager.  If you have the opportunity to do it that way, it’s the best way to go.  However, if you’re out of options, GTM is a workable secondary choice.

Related Post

Leave a comment

Your email address will not be published. Required fields are marked *