Getting Started with Google Tag Manager

You’ve setup your site and want to ensure you have the best tracking foundation possible. However, the more you want to track, the more code you need to add to your site. Often these codes need to be added to multiple pages. Luckily, Google offers a free tool to manage multiple codes and implement them from a single location: Google Tag Manager. At The Ocean Agency, we love GTM for its ability to not only allow easy code and tracking implementation, but its ability to let us add code to a client’s side without needing to wait for a backend developer. By the end of this post, you too should be able to get GTM up and running on your site.

Setup

Google does its best to make the account creation process as easy to follow and painless as possible. You’ll first be prompted to create an account name followed by a brief container setup. GTM can be used on websites, apps, and more recently AMP pages. For this initial setup, we’ll be creating this container for Web.

After accepting Google’s Terms of Use, you’ll be provided with installation instructions for your new container. Most CMS platforms will allow you add lines of code globally to all pages for a single location. Rather than using this feature to apply a multitude of scripts for various things, we’ll only need to do this once for GTM. After that, the GTM interface handles everything else.
Once you’ve copied the codes and closed the popup, you’ll be taken to your container overview. By default, clicking on your container will take you to this same screen. Here you can see what workspace you’re using, which version of the container is live, edit container descriptions, and see any recent changes. On your left, you’ll see a navigation menu with everything you’ll need in the container. We’ll use this to navigate between tags, triggers, and variables. You also have the option to create folders, useful in organizing the aforementioned three based on preference. Now that we have a basic understanding of the layout, let’s start building a strong foundation for tracking!

Variables

To begin, let’s do some initial variable setup. Variables are used in both tags and triggers to fill in dynamic values and create filters respectively. Within GTM, there are two main types of variables: User-Defined and Built-In. First, we’ll create a simple User Defined variable to be used in Tags that utilize Google Analytics.

On the Variables page, you’ll be presented with an option to create a new User-Defined variable. There’s a lot of variable types you can use, but for what we’ll be doing we can use the “Constant” variable under “Utilities”. Once selected, insert your Google Analytics ID (UA-00000000-0) in the “Value” field. Provide a relevant name, say Google Analytics ID, and save. Congratulations, you’ve just created your first variable. You can use this constant to insert your GA ID wherever you need it without needing to look it up and copy / paste.
GTM also has a selection of built-in variables that are pre-configured to make implementation even easier. Going into “Configure” on the variable screen will bring a list of all the built-in options. Some of the most commonly used built-in variables fall under “Clicks”. Enabling these will allow you to track clicks across your site, using element type, classes, ids, targets, URLs, and even text to specify which particular click you want to track. We’ll get into this more in the Trigger section.

Triggers

Triggers tell GTM when to fire a tag. These can range from a simple page view or DOM load, to a click on a certain element, to a form submission. In this section, we’ll look at some common trigger configurations.

The most common trigger falls under Page View. There are three load options here: DOM Ready, Page View, and Window Loaded.

  • Page View – As simple as it gets. Page View will cause a tag to fire as soon the browser begins parsing the page.
  • DOM Ready – Fires a tag when the browser has finished constructing the page. This occurs between Page View and Window Loaded. This is ideal for elements, such as videos, that may not load immediately and you want to ensure the browser recognizes it is present.
  • Window Loaded – This will fire a tag once the entire page has completely loaded. Everything from embedded resources to images must be fully loaded before this will fire.
Click triggers are another common option to firing tags. These allow you to select clicks on All Elements or Links. From there, you can specify how you want to isolate those clicks (using the built-in variables we enabled earlier) If you want to fire a tag on a button that has a unique ID:
<div id="cta-button-homepage">Click Here!</div>

You can specify this by choosing an All Elements Click, specifying to fire on Some Clicks, and entering the button ID to isolate the element.

Tags

If triggers indicate when to fire something, tags indicate what to fire. GTM has a lot of plug-and-play tags for analytics software, paid search platforms, screen tracking software, and many other commonly used integrations. Additionally, if there is a script you need to add that is not included in the list, you have the option to use Custom HTML or a Custom Image.
For Google Analytics, our first tag will be simple and straightforward. Select “Universal Analytics”. This will open the tag configuration.

In the “Tracking ID” field, you could type your Google Analytics ID. However, since we created a constant variable earlier, clicking the plug-in icon next to it will allow you to select this. Now, we need to tell GTM when to fire the tag. GA will fire on every page on a page view. By default, this trigger is already created for you and readily available when selecting triggers. All that’s left is to name your tag something relevant. You’ve just created your first tag!

Previewing, Debugging, and Publishing

Let’s make sure everything runs as it should. In the top right, selecting the dropdown arrow will allow you to select Preview and Debug mode. This is highly recommended as it will let you verify that the tags you’ve created fire properly and nothing breaks the site (especially when implementing custom script!). Once selected, simply navigate to your site within the same browser.

You’ll notice a new box at the bottom of your browser window showing what is and isn’t firing within GTM on that page. If everything has gone according to plan, you should see that Google Analytics has fired:

If not, revisit the above section to verify that the tag and trigger configuration is correct.
By now, you’ve been introduced to tags, triggers, and variables within Google Tag Manager. You’ve also setup a constant variable to autofill your Google Analytics ID, as well as implemented GA across your site. There is much more that can be accomplished with GTM, but these basics should get you well on your way to implementing successful tracking and a solid foundation for your site. Of course, Google has an excellent Help Center that covers everything from what we’ve outlined here to more advanced tracking techniques. Naturally, spending some time exploring the interface and testing things using Preview and Debug Mode will also help you become more confident in the platform. Happy tracking!

Leave a Reply

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