Google Tag Manager Tutorial: A Step-By-Step Guide to Getting Started with GTM

These days, there are tags (or pixels or scripts or tracking codes) for everything. Google Analytics, Facebook, Twitter, AdWords, LinkedIn, etc. are all asking you to add code to your website to track advertising performance.

One by one, adding tracking doesn't seem like a big deal. But adding all kinds of tags to your website can be a challenge, especially when the bloated JavaScript code begins to make your site perform slowly.

Not only that but managing all those tags can be a pain. You have to test your tags, keep them updated, and hope they don't break your website.

Fortunately for you and me, there is an answer to all these problems, and it's called Google Tag Manager (GTM) and we've explained all the big differences between GTM and GA4 here.

GTM is a virtually codeless solution for taking control of your website's tagging and tracking.

If you're interested in learning how to get started with GTM… You've come to the right place!

In this Google Tag Manager tutorial, you're going to learn about:

Do You Need Tag Management?

What is Google Tag Manager?

Google Tag Manager is a free and simple solution for installing and managing all of your marketing and analytics tracking pixels.

Tracking pixels are little bits of code that collect information about your website users. These pixels are often referred to as “tags.”  The Google Tag Manager platform allows you to manage all your tracking tags in one place. And GTM also allows you to install tags without manually editing your website code.

Google Tag Manager homepage

Simply put, Google Tag Manager is an effective, accurate, and efficient way to manage your website tracking. For those reasons, GTM has received worldwide adoption and accolades in the marketing and analytics communities.

Why do you need tag management?

The marketing landscape continues to become more complex. Each new platform or system that emerges offers us a different access point to connect with customers.

Below is the Gartner Digital Marketing Transit Map. This map provides an excellent overview of how our marketing systems intersect with each other.

the complicated world of tracking

There are tracking tags for everything

Almost every system on the Gartner map offers a unique opportunity to capture new customers or analyze your online sales. And if you want to extract data about your customers from these systems, you need tracking tags.

Want to use Google Analytics? You need to put the Analytics tracking tag on your website.

Want to know the results of your Facebook ads? You need to put a Facebook tracking tag on your website.

Need to know how well your email marketing is doing? You need to… Well, you get the picture.

The problem with too many unmanaged tags

Think of your brand new website as an empty glass. Your glass only has so much space.

Glass - Google tag manager tutorial

But every vendor wants to pour a little bit of their elixir in your glass.

liquids - google tag manager tutorial

Adding to your glass little by little has a minimal impact. But eventually, you'll run out of space, and your glass will overflow.

water overflowing - google tag manager tutorial

The same kind of overflow can happen with your website. When you flood your site with tracking tags, it can't keep up. The competing tracking scripts slow your site down. When your site loads slowly, visitors leave. Also, slow websites get penalized by Google in the search engine rankings.

The problem with tracking code and web development

The tracking code can also cause problems in the area of web development. Typically web developers are tasked with adding new tracking tags to a website.

Installing tracking code can be tedious and problematic. New tracking scripts have to be tested and verified. And very often, vendors provide little to no support documentation for their tracking code.

So while tracking code seems harmless … “Just put this code on your website and everything will work great…” web developers know otherwise.

Tracking scripts are notorious for breaking websites. And when a website breaks the development team takes the blame.

These problems can lead to a couple of common scenarios:

  1. Your developer avoids installing your tracking code altogether.
  2. Your developer does a sloppy job of installing your code due to inadequate support and poor directions.

Google Tag Manager Basics

Tags give you access to critical marketing data. But you don't want to kill your website by overloading it with tracking tags.

You need a safe and easy way to get your tracking code on your website. GTM can help you solve these problems.

Making tag management easy

GTM allows you to store all your tracking tags in one place. And, instead of manually adding new tracking tags to your website, you can use GTM's tag templates.

Tag Templates – The key to codeless tracking

Tag templates are ready-made tracking scripts with minimal input needed. They are optimized for speed,  cross-browser compatible, and they are verified by Google.

You can install these templates without touching any code. Most of them can be connected to your website by simply inputting vendor generated tracking IDs – such as twitter pixel ID, or Google Analytics ID.

Google tag manager templates

Tag templates also reduce the amount of maintenance work you have to do on your website. When vendors update their tracking code, your template will automatically update.

There are over 90 tag templates available in Google Tag Manager.

scrolling list of available tag templates in google tag manager

Really the only major marketing platform that doesn't have a GTM template is Facebook.

(Google may concede and add a Facebook tag at some point. But until then you can use a custom GTM template to manage your Facebook pixel.)

Is there a reason you don't need tag management?

Ok, so tag management is pretty cool. Everyone needs it, right?

Actually, no. Not every website needs tag management.

If you only have one tracking tag, then you don't need tag management. Think about it this way: A one-person company doesn't need a manager for their only employee.

Google Tag Manage Tutorial - The Dude

If you're only using the base Google Analytics tracking code, you probably don't need GTM.

But if you want to track multiple systems, or do any advanced tracking in Google Analytics, then you'll need tag management. And GTM is the most elite and comprehensive tag management platform available.

How Google Tag Manager Works

Let's talk about the nuts and bolts of GTM.

In this section of our Google Tag Manager Tutorial, we'll look at how tags (aka analytics or marketing scripts) work.

We'll also talk about how triggers (aka the rules) activate your tracking tags.

Then, we'll examine variables (aka macros).  And to close out this section of our tutorial, we'll look at how previewing and publishing work.

Tags in Google Tag Manager

The simplicity of GTM begins with the platform's tag templates. Tag Templates replace the javascript code snippets you otherwise have to add to your site manually.

Google Tag Manager Tutorial - Tag Templates

Each tag template requires input to locate the system you're connecting with your tags.

For example, to use the Google Analytics template, you need to input your property Tracking ID (or even better configure your Google Analytics setting variable).

Google Tag Manager Tutorial - Google Analytics tag template

Another example is the Bing Ads template, which uses your Bing Ads account ID.

Google Tag Manager Tutorial - Bing Ads tag template

Each tag template provided in GTM has a unique input that connects it with your account on the corresponding vendor's platform.

For tag templates, you usually only need to put in one unique value and set a trigger, and you are ready to rock.

That means you don't have to edit or adjust the tracking code within your tags. Tags templates do most of the hard work for you. But that doesn't mean you're entirely off the hook. You still need to set up triggers to make your tracking tags work.

Triggers in Google Tag Manager

A trigger is a set of rules that tells your tag when to start firing. The most basic trigger in GTM is the all pages trigger. The all pages trigger tells your tag to fire on every page when the page loads. This trigger is typically used with the Google Analytics tag.

Google Tag Manager Tutorial - All Pages trigger

Built-in GTM Triggers

There are many other built-in triggers in GTM that you can use to fire your tags.

Google Tag Manager Tutorial - built-in triggers

GTM has triggers for YouTube videos, scroll depth, button clicks, custom events and more.

Each trigger utilizes its own set of rules for firing your tags.

For example, you can set up the YouTube trigger to fire based on many different interactions a user has with your embedded YouTube videos. You can fire this tag when a user starts, seeks, pauses, buffers, or finishes your video. You can also fire this tag based on a user’s viewing progress (e.x. 50% viewed, or 5 minutes watched).

Google Tag Manager Tutorial - YouTube trigger

A trigger can fire a tag more than once within an event. So the YouTube trigger could fire at both the start of the video and at 50% viewed.

Variables in Google Tag Manager

Now that we know what tags and triggers are, we need to talk about third part of the GTM triangle – variables.

Variables are what make the values you track dynamic. Variables are critical if you want to scale your tag management.

Google Analytics variable

The first type of variable most users set up is a constant. You can use a constant variable to enter your Google Analytics Tracking ID one time and use this for all future tags.

Google Tag Manager Tutorial - Google Analytics Variable

Built-in variables

GTM has built-in variables for almost anything that happens within a page on your website.

Google Tag Manager Tutorial - built-in variables

Video view variables

Take for example the video view variables. Your trigger will fire your video event tag based on how a user interacts with your video. The Category, Action, Label, and Value fields in your event tag will report what happened during the event your tracking.

A static description in these fields won't change with your users' behavior. But if you enter a variable in these fields, your event will report dynamic data generated by your users' in-page actions.

Google Tag Manager Tutorial - Video view variables

Data layer variables

You can learn even more about your user behavior using the data layer.

Google Tag Manager Tutorial - Data Layer

GTM gives you the ability to create custom data layer variables. These variables can pass dynamic values from your CMS, back-end system, or e-commerce platform into GTM. Then GTM can record these values in your tags, and pass them on to your reporting interfaces.

Google Tag Manager Tutorial - data layer variable

A data layer variable can pass critical values to all your marketing systems at once

For example, you could use the data layer to pass data about an online sale into all your reporting interfaces – Google Analytics, AdWords, Bing, etc.

Data layer variables are a significant innovation in analytics tracking. Companies used to spend $10k to $20K building solutions to pass back-end dynamic values between their marketing systems. Now, you can access, translate, and deliver this information using GTM.

Previewing and Publishing Your Tags in Google Tag Manager

Finally, let's talk about how to get this all to appear on your website. Your tags, triggers, and variables all work in harmony.

Tags record your data. Triggers tell your tags when to record data. Variables help you translate your data, and scale your tags across your website.

But before you publish your tags to your site, you want to make sure the tag, the trigger, and the variable triangle is working correctly.

Preview mode in Google Tag Manager

You can see how your tags work before you publish them using preview mode.

To check your tags, hit the gray “Preview” button in your workspace.

Google Tag Manager Tutorial - Preview

With preview mode enabled, you can navigate to your site to see your tags in action. Previewing allows you to see if, and when your tags fire.

Checking and debugging your tags

Using my site as the example, you can see my tags in the preview mode screenshot below. Both my Google Analytics and scroll tracking tags fired on my webpage.

Google Tag Manager Tutorial - preview mode

In my preview screen, I can also see the tags that didn't fire. These tags didn't fire because I didn't perform an action that triggers them. But If I want to test these tags, I can take the action that fires the trigger. If the tag works, I'll see it register in my preview screen.

Google Tag Manager Tutorial - Preview tags fired

If you're using Google Analytics to record the data from your tags, you'll be able to see your events appear in your Real-Time reports while you're in preview mode.

Google Tag Manager Tutorial - Real-Time Data

Publishing your tags in GTM

Once you've verified that your tags work, and they record your data correctly, you can deploy them.

You set your tags live by hitting the publish button. When you hit publish, GTM will ask you to create a version of your container. Before you finalize your container, you'll have an opportunity to document your work.

Google Tag Manager Tutorial - Publish tags

Be thorough with your naming convention when you publish tags

Be descriptive with your version name. And provide in-depth information on the changes in this version. This documentation is how you and other users in your account can identify the changes you made.

Google Tag Manager Tutorial - naming conventions

Also, if you or another user needs to roll back your version, a clear description will help everyone understand how to make corrections.

Now that you know how Tag Manager works you might be eager to set up new tracking in GTM. But if you already have tracking scripts in place you need to complete a process called tag migration.

How To Migrate Your Existing Tracking To Google Tag Manager

Tag migration is the process of moving your existing tracking to GTM. This section of our tutorial is going to set up for success when it comes time to make the move to GTM.
If you start publishing new tags in GTM before you migrate your old tacking tags, you'll double up your tracking.

For example, let's say you have the analytics.js code snippet installed on your site. But then you publish a Google Analytics tracking tag in GTM. If both of these tags are sending data to the same Google Analytics property, all your data will be double-counted.

So it's imperative to remove your existing tracking before you install new tags in GTM.

Tag Migration checklist

Here's an example of a basic tag migration checklist.

Google Tag Manager Tutorial - Tag Migration Checklist

The migration process works like this:

  • Categorize and record all the existing tracking tags that are running on your website
  • Recreate those tracking tags in GTM
  • Use preview mode to test your new tags
  • Remove all your current tracking
  • Publish your GTM container with your new tracking tags

How can you make sure you don't have any gaps in tracking while you're working on tag migration?

If you have a lot of tracking tags in place, it may take you a while to remove your current tracking scripts.

But you want to make sure that you are not double-tagging your pages. You don't want to fire your new GTM tags until the old scripts have been removed.

If you aren't careful, the migration process could cause a gap in your tracking, so you need to plan this migration carefully. The gap would be in the time between when your old tracking scripts are removed and when your new GTM container goes live.

GTM migration trigger

There is a GTM technique you can use to eliminate tracking gaps during tag migration. This technique involves creating a suppression trigger. The suppression trigger tells GTM not to fire your new tracking tags if the old tracking code can be found on your site.

The second the old tracking is removed, the suppression trigger will stop firing, and your new tracking tags will start recording data. This trigger will prevent double tracking, and it will eliminate gaps in your reporting.

I am thinking about writing a blog post on this technique for migrating tags, but only if you're interested. Leave a comment if you'd like to see a detailed blog post.

Tag migration can feel like a complicated process. So, also leave a comment on this post if you would like me to build a more complete migration checklist or a technical guide to migrating tags. If there are enough requests for full tag migration checklist, we'll create one and share it with you.

The Value Of Google Tag Manager

Managing your tracking tags in GTM might seem like an obvious solution at this point. But, unless you are the primary developer for your website, you’re going to have to convince someone else that GTM is the right move….someone that hasn't read this tutorial. 

To help your cause, here are 27 reasons to use GTM for building and managing your tracking tags.

1. More control over your marketing measurement.

GTM gives control back to the marketing department. No more waiting around on web development to install your code. With Tag Manager, you can test and install your tags almost immediately.

2. It's easy to deploy your tags

Once your tags are tested and ready to go, deploying them is a two-click operation. Even if you need to create custom tags, implementing new javascript is easier in GTM than in a manual installation.

3. A rules-based system for firing tags on your website

Instead of writing regular expressions or a complex “if” statement to control when your tags fire, you can define these actions in the GTM interface. GTM allows to create triggers for tags without any code, and manage where your tags fire on your site.

4. Clean execution of scripts and minimal code needed

Using the approved tag templates means the code behind these templates has been checked and approved by Google. You don't have to worry about these scripts working in harmony with each other. Google and the tag vendors have done 90% of the work for you. All you have to is define where, and when the tag fires on your site.

5. The ability to document what each tag does in an easy to understand language

GTM allows you to create your own naming conventions for your work. You can create descriptive names that everyone in your organization can understand. Your team members don't have to be GTM experts to see what you're tagging and tracking.

6. Fewer Errors and risks due to the GTM governance system

GTM won't allow you to publish tags that have JavaScript errors. If you're using tag templates, you don't have to worry about JavaScript errors, either. But if you create code for custom tags, this system can save you from messing with your website by posting code with unintended consequences.

The GTM governance system allows you to limit which team members can publish tags. So you can enable your marketing team to create and test tags. But, you can still give final oversight to your web development team.

7. Built-in syntax error prevention

Syntax errors are a common problem in JavaScript. GTM won't allow you to publish any code to your site that includes syntax errors.

8. Dynamic values can be inserted into tags with data layer variables

The tags you create in GTM can pull values from the back-end of your website using something called the data layer. For example, for e-commerce sites using GTM, the data layer is how enhanced e-commerce reports receive data. But you can also use the data layer to report on other metrics and dimensions.

Essentially, data layer variables give you access to more in-depth information about user behavior.

9. Built-in tag templates that cover most modern marketing systems

As we discussed earlier in this tutorial, just about every major marketing system has a tag template in GTM.

10. A growing list of triggers that allow you to track in-page events

GTM gives you access to pre-built triggers that will fire based on in-page user behavior.

There are triggers for page scrolling, video views, lead form interaction and more! You used to have to write hundreds of lines of code to create these triggers. Now using GTM, all you have to do is configure the pre-defined triggers. No code required.

11. The ability to fire triggers based on any element of your website's HTML and CSS

This feature allows you to create unique triggers for just about anything that happens on your website. For example, you can define a trigger that only fires when a specific CSS class of a button is clicked.

12. Access control rights to prevent the errant publishing of tags

You can set your account to only allow certain people to publish tags to your live website. Access control is a great way to restrict who can publish tracking tags to your site.

13. Comprehensive debugging and container preview for debugging

You can debug your tags using the preview mode inside of GTM. Preview mode allows you to see your tags in action on your site before they go live. You can check where your tags fire and how they work before publishing your container.

14. You can add exceptions to triggers to prevent firing during certain conditions

Maybe you don't want any event triggers to fire after a customer completes a conversion. Or perhaps you only want to collect certain types data for logged-in visitors. In GTM, You can set up conditions that tell one trigger to suppress or activate another trigger.

15. Strong development support from Google to make continuous product improvement

The Google development team behind GTM is active and involved. They are continually adding to this product and trying to make it better. This team also has a reputation for listening to the marketplace and rapidly developing solutions.

16. Active development community and open-source resources

GTM has a strong development community outside of Google. There are many open source scripts for advanced tacking operations that are readily available. The opportunity to borrow and improve upon scripts from other users is just one of the many benefits of this community.

17. A comprehensive API for developers to connect to GMT at scale

The robust Google Tag Manager API allows developers to build applications on top of GTM. These applications extend the functionality of GTM and make things even easier for GTM power users.

18. Asynchronous code base and the ability to wait for code to load before firing triggers

When you use GTM, your tracking scripts don't slow down your page speed.

19. Real-time feedback allows you to test tags and receive immediate verification that they work

The preview mode allows you to check your tracking very quickly when combined with Google Analytics Real-Time reports. You can see live data on how your tags and triggers work before you publish them.

20. Version control system and the ability to roll back changes

If you deploy a version of your tracking that doesn't work out, you can roll back your changes with one-click. Then you can fix your tracking before you re-publish your tags.

21. There's an open naming system allowing you to give tags, triggers and variables deeper meaning

The are many levels of documentation in GTM. The open naming conventions allow you to be descriptive about tags, triggers, and variables. Open naming helps you create transparency for clients, co-workers, and others sharing your account.

22. You can store similar elements in folders for ease of organization

GTM's open organization system makes it easy for you to save and store your work.

23. Codeless insertion of GTM onto websites (using a CMS plugin)

I use a simple WordPress plugin to install GTM on my sites. If you administer your own site, you may be able to install GTM through a plugin without ever touching the source code.

24. Import and Export GTM containers easily between accounts

This feature can be a huge time saver. Let's say you build a tracking set up for one website that would work well on another site. You can export the container that houses that tracking to your other site. Then all you have to do is change your tracking IDs, test your tags, and publish your container.

The import/export feature makes your work in GTM transferable across multiple websites.

25. There's a change history report to see who has made changes in your account

Like most Google products, you can track the changes made by everyone that has access to your account. This is vital for governance and compliance with large organizations.

26. Multiple workspaces for teams to work independently

Independent workspaces accommodate teamwork and can increase productivity. Team members can work separately within an account without overwriting each other's work. Then they can merge their work together before publishing a container.

27. Simo Ahava

Simo's one of the leading experts in the GTM community. His work is an excellent resource for new and experienced GTM users.

Simo, google tag manager expert

Four Beginner Tag Manager Mistakes To Avoid

Getting started with Google Tag Manager can be really exciting. It’s a great feeling to have control over your tagging and tracking. It’s also fun to start building new tags, and unlock data you’ve never had access to before.

But there are some common mistakes you can make that will turn your account, and possibly your analytics, into a mess.

This section of our tutorial goes over four beginner mistakes to avoid when you're getting started with GTM.

1. Not previewing your container before publishing

Let's take another look at Jeffalytics in GTM preview mode. I have a Google Analytics tag and a scroll tracking tag in place. When I activate my triggers, I can see both of my tags firing. It only takes a few seconds in preview mode to verify that my tags are working.

You MUST preview and debug every single tag you publish, no matter how innocent it may seem.

Google Tag Manager - Preview Mode

Previewing is important because tags can fail for all sorts of reasons. Sometimes a trigger doesn't fire, or sometimes your settings are incorrect. So, don't publish your tags without checking your work!

Make sure to preview and debug your tags before your publish them.

2. Publishing too often and without a purpose

Publishing all the time will gunk up your GTM account with 100's of versions of your container.

Google Tag Manager - Publishing too much

Don't over-publish!

Instead, create a plan for your tracking. Know why you need the data you want to track and understand how you're going to use that data. Then build and test your tracking tags.

Publish your container only after you've completed these steps. And document your work in your container.

Google Tag Manager Tutorial - naming conventions

3. Not using variables and the data layer (even a constant is a variable!)

Use built-in variables in your tags. Built-in variables are easy to set-up, and they can provide a lot of value to your reports.

Google Tag Manager - built-in variables

Also, use data layer variables as often as it makes sense. Data layer variables provide rich and dynamic data to your analytics tools, and they help you scale your tag management.

Google Tag Manager -data layer variable

4. Automating to the point of gibberish

Automating event tracking is great! And once you know how to use GTM, setting up new event tracking is a quick process. In fact, I am continually amazed at how easy it to track events. Creating event tracking tags use to involve writing 1,000's of lines of code.

In GTM you can set up event tracking in minutes. And you can use built-in templates, triggers, and variables to track the most common events.

But before you go crazy building event tags, ask yourself:

“Do I really need all this data?”

Google Tag Manager - Tracking too many events

If you over-automate and track too many events, you'll clutter your reports and drown out meaningful data.

So, focus on tracking the events that are most important to your business.

Remember, the purpose of event tracking isn't just to watch new numbers enter your analytics account. You want to use event tracking to make your website better. And of course to make your business perform better, too!

Implementing Basic Event Tracking With GTM (With Examples)

At this point in the tutorial, you've got a strong understand of Google Tag Manager but you might be wondering what to start with when it comes to event tracking. We've got you covered with three setups that apply to almost every website.

Scroll Tracking

Scroll tracking can be used to see how far down your pages people read, and where they abandon your content. This data can help you make your pages more concise, or eliminate content that doesn't engage users.

scroll tracking setup within Google Tag Manager

Tracking Button Clicks

Tracking button clicks can tell you where to position, or how to style your buttons.

Google Tag Manager Tutorial - Button Clicks

Tracking Lead Forms

Tracking forms can tell where to place your forms, or which form fields deter users from submitting their information.

Google Tag Manager Tutorial - Tracking Lead Forms

The bottom line is, track event data you can use. Don't track events just to collect more information.

Leave a comment with your Google Tag Manager questions

That wraps our beginner Google Tag Manager Tutorial. Do you still have questions about GTM? Leave a comment on this post with your #1 GTM question. We'll respond to every question as soon as possible.

And make sure you are subscribed to the Jeffalytics email list if you want to take your Google Tag Manager aptitude to the next level. We have a big announcement for all our email subscribers coming this Friday!

Scroll to Top