The Beginner’s Guide to Google Tag Manager

By Shannon Dunn

Google Tag Manager has come a long way since its release in 2012. Throughout the years, the interface terminology has changed, and additional features have been added that make it much easier to use.

So how do you use Google Tag Manager today? I’ll take you through how to create a tag that will help you track user behavior on your site and go through some of the newest features GTM has now built for user-friendliness and accessibility.

Feel free to skip around the article to start learning about GTM!

How does GTM work?
Setting Up GTM
Tags, Triggers, and Variables
Creating a Tag
Let’s Talk More on Variables
Testing with GTM Preview and Debugging Your Tag
Wrap Up

But before we dive into the details…

What is a Tag Manager?

It’s useful to think of a Tag Management System (TMS) as similar in operation to a Content Management System (CMS). Both can make changes to the entire site via one interface portal, without needing the help of a developer to change the code for every tag. A developer is only needed for the initial installation of the GTM container code snippet.

The purpose of a tag management system is to manage the implementation of analytics platforms in tracking user interactions via a user-friendly interface.

Many popular analytics platforms have released their own type of tag manager, such as Launch by Adobe Analytics. These various tag managers, much like their analytics platform counterparts, use different terminology but are very similar in functionality. Most TMS solutions are compatible with popular platforms and applications, built to integrate smoothly without additional programming (at least that’s what they advertise).

GTM is compatible with a number of analytics platforms. To view a full list of GTM supported platforms, click here.

1. How Does Google Tag Manager Work?

GTM inserts JavaScript and HTML tags, created from the user-friendly interface portal, into the GTM container that is hard-coded onto every page of your website.

The GTM container is a piece of JavaScript (and non-Javascript) code that enables the GTM to fire tags.

2. Setting up GTM

Creating a GTM account for your website is fairly quick.

Follow the steps on the Google Tag Manager site by inputting your information.

After creating your account, you will be brought the main GTM interface. At the top of the workspace, you will see the unique ID number given to your GTM container.

After clicking into the container ID, you will see 2 code snippets:

The first code snippet uses javascript to fire tags, and GTM instructs you to paste this into the <head> of every page of your website.
The second code snippet is an HTML iframe that is used when javascript is not available and should be placed after the opening <body> tag.

This way, if users have disabled javascript, the tag will still fire from the second code snippet.

You can find more details on setting up your GTM container from the Google Support Site.

3. Tags, Triggers, and Variables

When you first look into the workspace page of GTM, you’ll see sections on the left hand side labeled Tags, Triggers, and Variables.

These 3 are the building blocks of GTM. I’ve outlined their definitions below so you can get a better understanding of what each one entails.

Tags – Tags are tracking codes and code fragments that tell GTM what action to take on that page.
- Example: Sending a pageview hit to Google Analytics.
Triggers – Triggers specify the conditions under which a Tag should fire.
- Example: A trigger with a condition to only fire a Tag when a user views URLs containing the path /blog/.
Variables – Variables are values used in triggers and tags to filter when a specific tag should fire. GTM provides built-in variables and allows you to create custom user-defined variables.
- Example: A ‘click’ class variable has a value name (such as a word string) assigned to buttons on the website.

We will go more in depth on how to use each of these in the next sections.

4. How to Create a Tag

I’ll take you through a simple example of creating a tag for a Pageview across the site.

But first, I should preface the creation of this tag by explaining that you should not create a Pageview tag if you have already installed a Google Analytics container on your site. Creating a Pageview tag in GTM in addition to the GA container will cause a duplication in pageview hits every time a user visits a page, skewing your data. To clarify, you can have a GA account where GTM sends the data to without having the GA container installed on your site.

For the purpose of understanding how GTM works, using a universal concept such as a pageview will help to illustrate the use of tags, triggers, and variables.

To start off, we will navigate to the left hand side of the main interface and click on the Tags section. Then, click New (Tag).

Then we can name the tag and select the tag type as Google Analytics, which is where we will be sending the data from the tag. You can also see below the other tag type options if you are sending data to a different platform.

Next we will configure the tag’s settings. Ensure that the default track type of Page View is selected.

Inputting your Google Analytics Universal tracking ID

This part is crucial to make sure the data gets sent to your GA, so be sure to input the correct info!

There are two ways to do this:

Get the Google Analytics tracking ID by going into Admin > Property Settings > Tracking ID. Click ‘Enable overriding settings in this tag and input the Tracking ID.

Or you can create a custom constant variable, that will always contain your UAID, so you never have to remember it.

This second method leads us further into the concept of variables.

5. Let’s Talk More on Variables

Assuming you’ve never used your GTM account, setting up the variables in GTM will be important for creating your tag.

When you view the ‘Variables’ window of GTM, you’ll see 2 options: Built-In Variables and User-Defined Variables.

Built-In Variables are variables that GTM can define for you by detecting elements in the code. They include some of the more common variable types such as clicks or pages. Sometimes a website will not have the minimum criteria within the code for GTM to detect the right elements and use its built-in variables; In this case they must be custom made through the User-Defined Variables instead.

I’d recommend adding all of the Click, Form, and History variables to start off. Click Configure and check the boxes on the left hand side to include them.

View all of Google’s built-in variables, with their definition on the Google Support website. Also another great resource to use is Simo Ahava’s variable guide, where he goes in depth on each built-in variable and ways to utilize them.

User-Defined Variables hold the value that you define for them, whether its numerical, a selection of URLs, or a name string found in an element.

For instance, a GA constant variable used to hold the GA ID associated with your analytics account can be created. This is very useful when you are creating a tag, so that you won’t have to keep going back to your GA account to input your ID.

You can create a constant GA ID variable by selecting User-Defined Variables New > Variable Configuration > Constant > Value (Input your GA ID) > Save.

Going back to our tag example, you can now choose to input a constant variable..

Make sure that you uncheck ‘Enable overriding settings in this tag’ and use the Google Analytics Settings dropdown to select the variable ID.

Now we can create the trigger that will fire our Pageview tag!

Underneath the tag configuration, click into the Triggering field. A menu prompts to ‘Choose a trigger’ will appear. Click on the + sign in the upper right hand corner.

Name the trigger and choose Page View as the trigger type.

Make sure that All Page Views is selected, so that our tag will fire on every page of the site and click Save.

Now that we have both the tag and trigger configuration, click Save. You’ve just created your first tag!

6. Testing with GTM Preview and Debugging Your Tag

So you’ve created your tag, but how do you know its working?

First click onto the Preview button in the top right hand corner of the workspace.

Next, open your site in a new tab. You will now see at the bottom, much like chrome dev tools, a box appear.

Upon closer inspection, the left hand side shows a summary of the events that first loaded onto the page in sequential order: 1. Message, 2. Message, 3. Pageview, 4. DOM Ready, etc. While the top is labeled Tags, Variables, and Data Layer.

By default, you will be viewing the Tags window, showing you all of the tags on the page, whether they have fired or not.

When you click anything on the page, the Preview box will update with any tags fired, as well as the variables in connection to the elements where the interaction took place.

For instance, when the ‘sign up’ button on the homepage is clicked, we see in the left hand summary that the event gtm.formSubmit loaded. By clicking into the variables section, we are now able to see the variables and their values that are associated with the ‘sign up’ button.

So what exactly are the variables associated with this button that GTM is showing? They are the variables located in the HTML elements that GTM detects within the code of the signup form.

The same can be seen in chrome dev tools by inspecting the elements on the page. The difference is that GTM makes this easy for you by detecting them, summarizing the HTML variables and their values, and putting it into a user friendly format.

In Chrome Dev Tools:

In GTM Preview:

When you’ve added a tag to GTM, it isn’t live on the site yet. This is where it’s important to test the tag to ensure its both firing and sending the data to GA.

We can see by just loading the page that the new tag is firing!

If your tag isn’t firing, a useful way to figure out why is by clicking onto the tag in the summary and viewing the firing triggers. If any part of the trigger doesn’t apply, there will be a red X next to the Filter.

Now we can publish the new tag!

First, click the Submit button in the upper right-hand corner of the main interface.

Next, name the version container and description to let others know what you changed, typically the tags name and what it does.

After publishing your tag, you should keep watching the data in GA over time to make sure that the trigger conditions are only capturing the the user interaction we want.

Extension for GTM Tag Testing

Probably the most useful chrome browser extension for GTM is the GTM Debugger.

Once downloaded, hit F12 and the F5 to view the event data and Google Analytics Hits.

Much like preview, testing the tag works here as well, with live event updates.

However, this extension only displays information for tags that are live in the GTM container.

7. Wrap Up

As you have read, there is a lot to consider when using the power of GTM on you or your client’s website. GTM can be used to create as simple or as complex a tag as needed. However, it’s best to try to keep things as simple and as scalable as possible.

Whether agency or in-house, its best to keep inventory of tags. This includes creating descriptive and intuitive names for the tags, triggers, and variables. It also allows others to understand what kind of tags the container has live.

The Versions page shows you what container version is live on the site and allows you to click into the different versions to see what tags it contains.