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.
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.
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.
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.
- 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.
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.
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.
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!