google tag manager and structured data

Technical SEO 1 training – Module 2.1

Google Tag Manager and structured dataIn the previous lessons you learned a lot about structured data,

Schema.org and JSON-LD. In this lesson, Joost discussed in the video

how to actually implement structured data using the JSON-LD

Schema.org markup on the pages of your site. In the following text,

we’ll take a closer look at how to put Schema.org on your pages using

Google Tag Manager. When we use the term structured data in this

text, we are referring to the JSON-LD Schema.org markup.

Google Tag Manager

With Google Tag Manager, Google has developed a tool that can take

your marketing to the next level without the need of a developer. It’s a

tool which can easily add scripts or pieces of code to a page. You can

use Google Tag Manager to implement Google Analytics and create, for

instance, events. There are several advantages to using Google Tag

Manager to implement structured data. The most important one is

that it allows you to generate tags, triggers, and variables, which

means that you can apply the same code again and again on different

pages. In the end, this will save you a lot of work. Google Tag Manager

also features a preview mode, which allows you to check whether you

successfully implemented your data immediately.

Joost recorded a training video in which he explains how to add

a JSON-LD structured data script to your pages using Google Tag

Manager. In this text, we’ll give you a step-by-step instruction

of what Joost is showing you in his video.

‘‘With Google Tag Manager, Google has developed a tool that can take your marketing to the next level without the need of a developer’’

2Structured data training – Module 2.1 – Google Tag Manager

How to get to Google Tag Manager

Google Tag Manager is a free tool, so we can’t think of a reason not

to sign up for it. You can sign up by visiting the following page:

https://www.google.nl/analytics/tag-manager/. You will then be

guided to a dashboard that you can reach by going to the following

page: https://tagmanager.google.com/.

When you first visit Google Tag Manager, you’ll need to create a

container. The container is where you contain or keep all your tags.

In this case, you probably want to add the structured data tag to your

website, so choose ‘Web’.

Before you can actually use Google Tag Manager on your website,

you need to add a piece of code to your pages. The process is similar

to what you do when adding the Google Analytics tracking code.

https://www.google.nl/analytics/tag-manager/

https://tagmanager.google.com


If you’re using WordPress, you can easily add the Google Tag Manager code

using a plugin called DuracellTomi's Google Tag Manager for WordPress:

https://wordpress.org/plugins/duracelltomi-google-tag-manager/

Please note that you only have to use the GTM-XXXX code.

If you’re using another CMS, please visit the quick install guide:

https://developers.google.com/tag-manager/quickstart for more

information about how to get started.

When you’re all set up, you can take the following steps. In the

end, you’ll have added structured data to a page or multiple pages

on your site!

Understanding how Google Tag Manager works

Google Tag Manager serves a wide range of purposes. In this text,

however, we’re just going to cover all aspects that are important for

implementing structured data to pages of your website.

What you need to understand first is how Google Tag Manager works.

Basically, there are three elements that are important for implementing

structured data with Google Tag Manager.

• Variables

• Triggers

• Tags

You can find these elements on the left hand side of your workspace.

A workspace is simply a place where you can work on creating and

adding pieces of code to your pages.

https://wordpress.org/plugins/duracelltomi-google-tag-manager/

https://developers.google.com/tag-manager/quickstart


Tags

A tag is a piece of code that can be fired on a page of your website.

You can put many things in a tag. For instance, you can add the Google

Analytics tracking code in a tag. This tag will enable Google Analytics

to track your website. Similarly, you can also put your structured data

code in a tag. In other words: a tag contains information as to what

you want to add to a page.

Triggers

Tags only work when there’s a trigger attached. You need a way of

telling Google Tag Manager under which condition a tag must be used,

or fired as we like to call it. For instance, the tag that contains the

Google Analytics tracking code only works if there’s a trigger saying it

should fire on all pages when a page is viewed (pageview). If you have

a structured data tag, the trigger tells Google Tag Manager on which

pages to fire that tag. This is because it’s possible that not all your

pages need a recipe structured data markup, for instance. A trigger can

be either true or false. Simply put, a trigger tells Google Tag Manager:

“Please fire this tag on these pages, but not on these pages”. In short,

a trigger contains information as to when to fire a tag on a page.

‘‘Google Tag Manager is a free tool, so we can’t think of a reason not to sign up for it’’


Variables

Variables serve two functions. First of all, triggers need variables

to know whether or not to fire. Suppose Google Tag Manager runs

on your page. If the value of the variable meets the conditions

you set, the trigger will fire. This, in turn, allows the tag to work.

Now, the second function of variables comes into play. The variable

provides Google Tag Manager with variable information. This means

that the information can be different in different contexts. A Date

Published, for example, will be different for every eBook you publish.

Variables allow you to categorize information. If the trigger fires,

Google Tag Manager will then fetch the specific value from the

specific page it visits.

An example of a variable is the URL of a page, but you can use any

element of a page as a variable. It could be an ‘Add to cart’ button,

or the H1 of a page, for example. The most commonly used variables

are predefined in Google Tag Manager. But things like buttons or the

H1 are variables you have to define yourself. In short: if you make a

variable for H1, Tag Manager will take the post title from the page

(the h1) and display it in the structured data.

With variables, you can edit your code in such a way that it will take

elements from the current page to use in tag.

Adding JSON-LD to your site step by step

Now, we’re going to guide you through implementing structured data

on your pages. Since this is a course, we’ll take the type Course as an

example. We’re going to use the schema.org structured data for

courses. As stated before, we will use JSON-LD markup. There are

five steps to take:

• Step 1: Creating structured data

• Step 2: Creating tags and triggers

• Step 3: Creating variables

• Step 4: Triggering your code

• Step 5: Validating and publishing your code


Step 1: Creating the structured data code for Google Tag Manager

In the training video of the first lesson of module 2, Joost shows

you how to use the markup helper. If you go to the markup helper:

https://www.google.com/webmasters/markup-helper/, you can

create your own markup.

In this example, we’re using the Course markup, which looks like this:

<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "Course", "name": "Site structure training", "description": "Learn how to create site structure for your site that makes Google understand your site and makes visitors go where they need to be", "provider": { "@type": "Organization", "name": "Yoast", "sameAs": "https://yoast.com/" }, "offers": { "@type": "Offer", "price": "99", "priceCurrency": "USD" }}</script>

‘‘Before you can actually use Google Tag Manager on your website, you need to add a piece of code to your pages ’’

https://www.google.com/webmasters/markup-helper/u/0/

7Structured data training – Module 2.1 – Google Tag Manager‘‘Variables, triggers and tags are three

elements that are important for implementing structured data with Google Tag Manager ’’

After you’ve created your markup, you’ll need to make it Google

Tag Manager-ready. The only thing you need to do is go to:

http://yoa.st/json/, paste the piece of code and hit the submit button:

The tool will create a piece of code you can use in Google Tag Manager:

Copy the piece of code. You’ll need it for the tag you’ll be creating in

Google Tag Manager.

http://yoa.st/json/


Step 2: Creating tags in Tag Manager

After you’ve written your code and have run it through the script

helper, you’re ready to make your tags and triggers in Tag Manager.

You can do this by following the easy steps below:

• Make a new tag and give it a name (Site structure training,

for instance)

• Click Tag Configuration and choose tag type: Custom HTML

• Paste code from the script helper tool

• Check Support document.write

• Hit Save


Step 3: Creating triggers

Now that your tag is saved in the database, you need to add a trigger

so it knows when to fire the tag. You can do this in the same screen

you see in the screenshot above, or directly from the Triggers screen

in the Workspace.

Click on the Triggering space in your new tag and choose the correct

page view. Hit Save and your snippet is now implemented as is

(see below for working with variables).

If no triggers are implemented, you can add them in the same screen.

If you want a trigger to a specific page, you can copy the relevant

piece of the URL and add it to a new trigger. So if you only want to

trigger a tag on this page: https://yoast.com/academy/course/site-structure-training/, you need to copy the part /academy/course/site-structure-training/.


Hit the New or + button to add a new trigger. Give it a name and click

on Trigger Configuration. Choose Page View from the list of trigger

types and click on Some Page Views. You can now choose when the tag

should trigger and which conditions should be met before it’s possible.

In our case, we want to trigger the tag on https://yoast.com/academy/course/site-structure-training/. That’s why we’ll choose Page Path

and Equals from the dropdown, and paste in the URL in empty box.

Step 4: Creating variables

Variables make it much easier to implement the same structured

data on many different sites. You’ll be able to just apply the same

code again and again if you set your variables up correctly.

The variables can be found on the left hand side of the workspace

as well. You’ll get an overview of all predefined variables. There’s

also an option for user-defined variables. To create a variable,

click on “New”.


Clicking on “New” will take you to the following screen:

In the above screenshot, you’ll see the first 4 steps you’ll have to take:

1 Name the variable

2 Click on Variable Configuration

3 Choose variable type

4 In this example: DOM Element


The 4th step depends on the type of tag or trigger you want to create.

In this example, we’ll use a DOM Element. This might sound difficult,

but a DOM Element is a piece of your page, like DIV, HTML and BODY.

And in this example, the DOM Element is the H1, which is the most

important heading of the page.

Once you’ve clicked on the DOM Element, you need to choose which

method you want to use to select a page element with. In this case,

we’ll use a CSS Selector. By simply entering h1 into the element

selector, you’ve created a variable that grasps the H1 of a page.

If you want to use the meta description of a page, enter

meta[name="description"] and that variable will make sure

to add the meta description of your pages.


Once you’ve created these variables, you can use them in your tags.

As you can see, you can use the H1 variable for the “name” and Meta

description variable for the “description”. This will make sure that the

Course schema markup sends the right name and the right description

to Google.

Variables make this method of implementing structured data flexible

and scalable. In this way, you can make a piece of code that can be

used on many places, without having to add it manually or change

it for every instance. You only have to set up the tags once and

you’re done.

‘‘Variables make it much easier to implement the same structured data on many different sites ’’


Step 5: Test, saving and publishing

After you’ve set everything up, you’re ready test your code. Tag

Manager has a great Preview mode that lets you test code before

you publish it on a live site. Go to your Workspace in Tag Manager

to activate that mode. Hit Preview to start.

Now, in your browser, go to the page you're implementing structured

data on and refresh. You’ll see the Preview tab appear and this should

show you the tags that fired.

If you want to know more, you can go to the Window Loaded screen

to see if your variables were executed properly. If all is well, your H1

variable should now show the same value that’s visible on the site

(the title). Always test your code before publishing!


If all the information displayed in this screen is correct, you can

publish your tag. If there are still some flaws, go through the steps

again. In addition, Google can really help you out here.

To publish your tag, hit the ‘Submit’ button you see at the top right:

It will take you to the following screen:


Module 1.1

Module 3.2

Module 1.2 Module 2.1

Module 2.2 Module 3.1

Module 1.3

Give your version a descriptive name and press ‘Publish’. Congratula-

tions, you’ve just added the first piece of structured data to your site!

Once you’ve published your structured data tag, go to the

Google structured data testing tool: https://search.google.com/

structured-data/testing-tool and enter the URL of the page that

should now contain structured data. With this tool you can check

if the structured data is implemented correctly:

See no errors and warnings? Well done! If you do see errors, dive

in more deeply and read what Google has to say about it.

https://search.google.com/structured-data/testing-tool/u/0/

https://search.google.com/structured-data/testing-tool/u/0/

google tag manager and structured data

Documents