JSON-LD and Lookup Tables

At UpBuild, we love Google Tag Manager. We try to use it whenever possible because it can be scaled and automated to a certain degree; it’s also really easy to get really nerdy with it, which we like to do. Today we’re going to look at a very specific use of Google Tag Manager and its Lookup Table feature.

Google Tag Manager (GTM) has been extremely useful when it comes to helping streamline tracking on individual sites, but can get a little tricky when we want to track simple things on multiple domains in the same family of sites. How can we scale using GTM? Lookup tables to the rescue!

A Lookup Table, a built-in variable type in GTM, is essentially a simple database that uses key/value pairs. What this means is that we use the “key” to retrieve the “value” associated with it.  We use the “key” to retrieve the value associated with it, like a call to a database. For example, here is a quick database or Lookup Table of Hostnames and their associated Google Tracking Code.

Tag Name: Google Tracking Code
Input Variable: {{Page Hostname}}

We can now retrieve the correct Google Tracking Code for each site based on the which Page Hostname the tag is fired upon. So, if our tag fires on “https://website1.com” it will retrieve the tracking code “UA-34341-3” and return that as the value wherever we reference {{Google Tracking Code}}.

Let’s look at how we can use a lookup table to scale a single GTM container to handle JSON-LD markup for multiple sites in the same family.

UpBuild Music Supply Store’s JSON-LD Problem

Let’s take a fictitious example for an umbrella company named the UpBuild Music Supply Store (UMSS). UMSS buys up smaller music stores and offers management services for them, so that the business owner can focus on selling and not on managing their business. Right now UMSS owns three stores:

Bill’s Music Store
Tim’s Music Store
Shelly’s Music Store

While they only own three stores now, there are plans to buy more, so we want scalable solutions to mark up our sites with schema data while minimizing the upkeep we need to do.

JSON-LD could become a pain to implement if we have to add individual tags to each site we acquire, though. Wouldn’t it be great if we could do this more programmatically? Of course it is, and this is where our Lookup Tables will be useful.

The answer here is to use Lookup Tables to act as a type of database where we can store different values for the different elements of our websites, so we can then use variables to deploy a more streamlined tracking plan.

At a high level, the goal is to have a single GTM Container for all of our properties. Then within this container, we will have two tags and three variables. The tags will contain JSON-LD markup and the variables will be used to populate those JSON-LD tags.

Here are all the tags and variables we’ll be creating:

Variables (Lookup Table Type)

• JSON-LD Logo Variable
• JSON-LD Name Variable
• JSOn-LD Website Variable

Tags

• JSON-LD Website Tag
• JSON-LD Organization Tag

Each of these tags will be dynamic, meaning they will populate themselves using variables with data from our lookup table depending on which site the tag is being fired on.

Building Our Lookup Table Variables

Let’s start with creating three new Lookup Table variables that will house the following information for all our properties that we will need to populate our JSON-LD tags:

• Logo URL
• Business Name
• Website URL

For all of our Lookup Tables, the Input Variable will be {{Page Hostname}}. The {{Page Hostname}} is going to act as our “key” that we will use to retrieve its associated value. When our tags fire, they will look to see which site the tag is fired on and use the associated values for that hostname. For example, here we have our three music stores and their associated values. When our tag fires it will first look at the hostname and then use the values associated with it.

Let’s walk through creating a Lookup Table.

We’re going to walk through creating the “JSON-LD Website” Variable.

• Go to your Google Tag Manager account.
• Navigate to Variables in the left hand menu.

• Scroll down to User-Defined Variables and click “New”.
• Name the Variable “JSON-LD Website Variable”. This will be the name we reference later when we build our JSON-LD Organization tag.
• Click Variable Configuration and select “Lookup Table” as the variable type.

• Select {{Page Hostname}} from the Input Variable dropdown. This is going to be our key to look up our associated values.

• Click “Add Row”.
• We’ll need three rows, one for each of our music stores. It should look like this:

• Click “Save”.

We now have a Lookup Table that we’ll be able to reference from our JSON-LD Website Tag.

Repeat these steps two more times for our JSON-LD Name Variable and JSON-LD Logo Variable Tables.

Here are what our three Lookup Table variables should look like when done.

JSON-LD Name Variable

JSON-LD Logo Variable

JSON-LD Website Variable

We now have the data we’ll need to populate our JSON-LD tags, which we will build in the next step.

Building Our JSON-LD Tags

Now that we have the three Lookup Tables we’ll be referencing in our tags, it’s time to actually create our JSON-LD tags to pull in this information.

• Click Tags from the left-side menu.
• Click New.
• Name the first tag, “JSON-LD Organization Tag”.
• Click Tag Configuration and select “custom HTML” as the type.
  In the text box place this code

See the Pen Alex – Blog Post JSON-LD by UpBuild (@upbuild) on CodePen.

• Click Trigger and select your choice trigger. In our case, it will be the “About” page.
• Click “save”.

Here is what our finished JSON-LD Organization Tag looks like.

The code used to generate these tags is doing two things in one function call. First, anything in a {{}} will be replaced by the variable of the same name that we set up in GTM. So in the example above, {{JSON-LD Website Variable}} will be replaced with either http://tomsmusicstore.com, http://billsmusicstore.com, or http://shellysmusicstore.com depending on which website you’re on.

Add as many new fields in the data variable as you need to build your tags. Just follow proper JSON-LD formatting.

The second part of the function is building a proper JSON-LD tag that will be inserted into the page. This part of the code should never be touched unless you need to make customizations to how the code is built or deployed, but in most cases this is not necessary. We’re only going to be editing what goes in “var data”.

Repeat this step for the JSON-LD Website Tag, but use use the following code instead in the text box:

See the Pen Alex Blog Post 2 by UpBuild (@upbuild) on CodePen.

We now have our three variables and the two tags that will reference those variables. It’s time to begin testing.

Now that we have our code set up, when we load https://tomsmusicstore.com, our Lookup Tables will activate. They will pull the corresponding variables for the hostname “tomsmusicstore.com” and populate our JSON-LD tags with the corresponding data.

JSON-LD Website Tag — Fires on About Page (this can be adjusted to fire on any page you like):

See the Pen Blog Post 3 by UpBuild (@upbuild) on CodePen.

JSON-LD Organization Tag — Fires on our Homepage:

See the Pen Blog Post 3 by UpBuild (@upbuild) on CodePen.

While there are a lot of moving pieces here, we now have a scalable strategy for populating the same tags across as many sites as we want.

Looking forward, UMSS can now add as many music stores as they want and all they need to do is update their Lookup Tables to reference the new Page Hostnames and their associated values, rather than creating new tags for each site and hardcoding their values.

This strategy can be rolled out to all kinds of JSON-LD tags. As long as you can build a Lookup Table you can populate a JSON-LD tag based on the Page Hostname input variable.

Written by Alex Ramadan