Using Google Tag Manager Variables to Dynamically Inject Structured Data

Benjamin Burkholder
Jul 13, 2018 · 11 min read

Most SEOs are acquainted with adding JSON-LD structured markup into the source code of webpages for the purpose of potentially winning richer search results, however, this can be quite time consuming as there needs to be unique data for each applicable page added to the markup. What many people do not know is that there is a way to make this process scalable across an entire website using Google Tag Manager.

I’m not going to delve into all of the ins and outs of Google Tag Manager because there are a plethora of articles on the subject, what I am going to show you is how to leverage variables to make your markup dynamic across applicable pages on your site.

The Scenario

Let’s say that you manage a large e-commerce website containing a multitude of product pages. These pages are all built on the same template, therefore they all look pretty much identical in their structure and content placement. These kinds of pages are ripe for adding in structured data, but the biggest hindrance is the sheer amount of pages. If you were to take a manual approach, or even a plugin, it could take a large amount of time to implement the unique schema on each page. An even more glaring problem is that the schema may not be dynamic, meaning if content on the page should change, the schema would remain the same as it was when first implemented.

Not good.

This is where Google Tag Manager comes into play. Using this tool we will create a tag with variables that dynamically pull in specific data on a given page, effectively solving our problem going forward.

How Does this Work?

There are two options to target the data element, you can either target a CSS selector or target an ID. In this example, we’re going to be targeting via a CSS selector.

Below is a quick rundown of how this particular option will work and why:

Each data element in question needs to have a unique “class” assigned to it. This would ensure that as new templated product pages are created, they can have accurate structured data implemented automatically.

In this example, here are the product fields we want to create variables for as well as how the assigned classes would look when implemented to the fields.

§ Name

  • Ex. <h2 class=”productName”>Orange Sweatshirt</h2>

§ Price

  • Ex. <div class=”productPrice”>16.99</div>

§ Description

  • Ex. div class=”productDescription”>An orange sweatshirt perfect for a cool fall day.</div>

§ Image

  • Ex. <img class=”productImage” src=”https://domain.com/apparel/orange-sweatshirt.jpg”>

Then a CSS selector for each of these classes needs to be added to the stylesheet. These selectors are what we’ll be targeting with Google Tag Manager.

How to Implement the CSS Selectors?

Now that you’ve assigned unique classes to each field at the template level, now it’s time to add these classes to the style-sheet.

IF…

1. You have a dev team, ask them to add these classes to each field at the template level and see what their suggestions are. This would make it much easier going forward because you wouldn’t need to manually add the classes each time a new page is created.

2. You manage a small website and your site is built on a CMS (WordPress, Drupal etc.), you may find it easier to simply add the classes manually to the fields on each page if there aren’t too many. This can usually be done through the standard content authoring area.

Below is an example of what this process would look like on WordPress if done manually page by page.

Using Google Tag Manager on WordPress CMS

As mentioned earlier, assigning unique classes at the template level is a task you’ll want to pose to your developers first. However, if you manage a small site and are hosted on a CMS, this section will walk you through how to perform the manual process using WordPress as the example CMS.

First we need to add the custom classes to each data field, you can assign this via the standard text editor.

Here is how the product name field looks like with the unique “Product Name” class assigned to it in the content editor.

Now we need to create CSS Selectors to target these unique classes.

  1. In the site management area of WordPress:
  • First go to “Appearance” and then select “Customize”.
  • Go to “Advanced options” and then click on “Additional CSS”.
  • Then go to “Advanced options”.

Here is where we can add in our custom CSS Selectors. The selector just needs to be present in order to be targeted via Google Tag Manager, there doesn’t need to be any styling designations present.

It’s important to note that once you create the applicable CSS selectors for the product classes, you shouldn’t have to create any more. The reason? Since each page will only have the unique class associated with each field, the CSS selectors in the stylesheet will target them. As a result, you will only need to assign the correct class to each field initially and as new pages are created.

Now that we’ve assigned the unique classes to each applicable field and added in the associated CSS Selectors, it’s time to set up the tags, triggers and variables in Google Tag Manager.

In order to avoid spending too much time walking through the general steps of accessing GTM and verifying your account, I’m going to instead just jump ahead and focus on setting up the tags, triggers and variables data we need.

If you don’t have a GTM account, simply visit the GTM home page and you can get started from there.

Setting Up Your Tag

First select “Tags” in the vertical navigation, then select the “New” button.

Next you can name the tag in the top left.

Next, click anywhere in the white space of “Tag Configuration” block and select “Custom HTML” from the drop down.

Next you can directly input the JSON-LD schema script into the tag’s white space, also make sure to check the “Support document.write” box. This tag is what will be injected into the page code during load.

Having trouble creating the JSON-LD schema? Here is a great schema markup generator tool that will create it for you, all you need to do is provide the data for each required field. Then you can simply copy and paste into the tag. Or, if you’d like to create it yourself, head over to schema.org for a complete library.

Here is what the tag will look like once the applicable schema has been generated and inputted into the tag.

As you can see in the image above, there is additional JavaScript wrapping the structured markup, this is important to Google Tag Manager implementation because it’s what injects it into the DOM in a way Google can read it. You can auto generate your markup to include this by using the free Yoast Google Tag Manager Script Helper tool.

Setting Up Your Trigger

First select “Triggers” in the left vertical navigation, then select the “New” button.

Next, click anywhere in the white space of the “Trigger Configuration” block and select “Page View” from the drop down.

Next, change “This trigger fires on” to “Some Page Views”.

Below this you can see what the trigger fires on, this is where you can input a common sub-folder in the URL path to fire on.

Let’s say this is an example product URL you have:

https://example.com/products/apparel/orange-sweatshirt

As you can see, targeting the “apparel” sub-folder should pull in all other subsequent apparel pages as well. As such let’s target “/apparel/”.

Click “Save” and we’ll create the variables next, the secret to quick implementation and scalability.

Setting Up Your Variables

First select “Variables” in the vertical navigation, then select the “New” button.

Next you can name the variable, it’s best to name it based on what data it’s targeting. For example, here we’re targeting the product name.

Then click anywhere in the white space of the “Variable Configuration” block and select “DOM Element”.

Next, select “CSS Selector” from the Selection Method dropdown. Then in the “Element Selector” field is where we’ll input the location of the data element. We can find this using chrome dev tools.

Looking in chrome dev tools, which can be accessed via the F12 button or “Inspect” upon right clicking, you need to first go to the “Elements” tab.

Next you can simply search for the unique class for that page (ctr+F). Once you find it, click on it and then look at the bar at the bottom. In this example it reads “div.Product.Name” which is what you’ll use to input into the “Element Selector” field in GTM and will pull in the data contained within this path.

Here’s how the GTM variable looks with the path in place. Click “Save” in the top right.

Now the “Product Name” variable is ready to be implemented into the tag, to implement the variable all you need to do is place the name of the variable in squiggly brackets in the content area. In this example, we’ve created a variable for the product name, so this is where we will place it.

You can see in the example below the variable is: {{Product Name}}.

You will need to create variables using the process above to replace all applicable fields in the schema to make it truly dynamic.

Now that we’ve successfully created our tag, trigger and variable, we can test the page in question to make sure the tag is firing properly and variable functioning correctly.

Testing Your Tag

From the Tag Manager home page, click the “Preview” button in the top left.

You’ll see a message in orange that reads, “Now Previewing Workspace”. From here you can simply open a new tab in the browser and pull up the page you’re testing.

At the bottom of the pages you should see a horizontal bar appear showing a variety of data, including the tags that fired on the page. As you can see from the example, our Product Schema tag is firing properly but we need to click into it to make sure the variable is functioning and pulling in the data from the page.

Success! You can see below that the variable works and the product name of “Orange Sweatshirt” has been pulled into the structured markup.

Once you’re satisfied that the tag is working properly, now you need to go back to the GTM tab and click “Leave Preview Mode” and then “OK”.

Now we need to save our work, click “Submit” in the top right corner, then click “Publish” and click “Skip” on the next pop-up unless you want to add notes about the changes you’ve made.

Now all of your work should be updated and ready to go, your tags will be live from this point unless you manually go and pause them.

Testing Your Structured Data

Now it’s time to test the structured data to make sure it’s functioning correctly in the wild, and to make sure Google can read it successfully. You can first do a visual spot check by looking at the page in Chrome dev tools in the “Elements” tab. As you can see below, the variable is working perfectly, pulling in the designated product name from the page.

Next we want to verify that Google can successfully read the structured data and make sure there are no errors. For this, use Google’s Structured Data Testing Tool to input the URL of the page and validate that the markup is showing up correctly. You can either enter a URL or paste in the schema to test.

For our purposes, we’re going to enter the URL to run the validation. Once the URL has been entered and “Run Test” clicked, you can see below that the schema is indeed showing up correctly.

Conclusion

As it’s been demonstrated in this article, using variables in Google Tag Manager will allow you to scale the implementation of structured data across a wide number of templated pages. This could be used for product pages, recipe pages, location pages etc. All you’ll need to remember is to assign the applicable classes to each data field when creating new pages or refitting existing pages, otherwise the variables won’t know what to pull in when they execute.

While I only walked through the process of adding this on WordPress, you can simply adapt this same process to accommodate other CMS’s or a site built from the ground up, all you need is access to the CSS stylesheet and access to edit the text.

Hopefully this article/walkthrough has provided some valuable information on how to scale up your implementation of structured data across your templated pages. This is just a tiny example of what Google Tag Manager has to offer, performing some quick web searches will reveal even more uses you can start to leverage.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store