Google Tag Manager Guide: Everything You Need (3,000+ Words)

If you run a website or are active in digital marketing, there’s a good chance you’ve heard of a tool called Google Tag Manager.

Maybe it even intrigued you enough to get you to head to the landing page where…well, things get a little overwhelming.

Google starts throwing terms like “tag” and “enterprise” at you and it’s easy to feel like “this tool is for the big guys, not for me.”

I’m here to tell you that’s not the case. Google Tag Manager is an awesome tool for all websites, from large to small.

And in this Google Tag Manager guide, I aim to show you just how powerful this tool is, as well as how you can use it to unlock important insights from your site while simplifying your workflows at the same time.

What Is Google Tag Manager?

Google Tag Manager does exactly what the name implies – it helps you manage all of the tags on your website…

Of course, that definition isn’t very useful if you don’t know what tags are or why you need something to help you manage them (Google’s marketing team might want to think about this fact!).

A tag is basically any snippet of code that you want to add to your site. These snippets are usually JavaScript, but they can be any client-side code that you want to include.

A popular example of the type of code that you can add with Google Tag Manager is the Google Analytics tracking snippet, but the uses are a lot broader than just that.

So why do you need a tool to help you manage all those code snippets?

Well, before Google Tag Manager, you’d have to hard-code every single snippet into your site’s actual source code. That means you, or your developer, had to actually open up your site’s code, add the snippet, configure it to only show up at the right time/spot, and then push it live.

Google Tag Manager simplifies this a lot. Instead of that lengthy, and recurring, process, you add the Google Tag Manager snippets one time. Then, whenever you need to add a new script (“tag”) to your site, you can do it right through the Google Tag Manager interface – no code required.

Better yet, Google Tag Manager can also help you control:

Triggers – when and where a specific tag is executed.
Variables – these let you receive and store information from your website pages that’s used by your tags and/or triggers.
Versions – these help you manage different versions of your code snippets and look back at the past with a changelog.

The Benefits Of Using Google Tag Manager

In a nutshell, Google Tag Manager will…

Simplify and speed up the process of adding new scripts to your site by eliminating the need to manually edit any code.
Give you more control over when and where those snippets are actually active.
Let you pass additional information to those snippets via variables.
Add version control, a changelog, and user access permissions so that you can better control which scripts are active and who has access to manage/add new scripts.

Google Tag Manager Quick Start Guide: Getting It On Your Site

In this section, I’ll take you through the basic process of getting your site up and running with Google Tag Manager. Then, over the next sections, I’ll share some of the types of scripts that you can add, as well as some more advanced tips for getting more from Google Tag Manager.

Basically, to start using Google Tag Manager, you have to:

Sign up at Google Tag Manager and create a “container”
Add two code snippets to your site

Yes, I know it’s a bit humorous that I told you all about how Google Tag Manager will eliminate code from your workflow and now I’m telling you to dig into your site’s code.

But – this is a one-time process. And once you get this out of the way, you’ll be able to perform pretty much everything else without looking at any code.

Step 1: Add Your Website To Google Tag Manager

To get started, you need to create a new Google Tag Manager account and container. If you already have a Google Account, you should be able to do that right away from the Google Tag Manager interface:

Enter your company name and choose your country. Then, click Continue:

In the Setup Container section, enter a name for your container.

It can be anything – but you probably want to make it your website name for convenience.

Then, choose where you’re going to use the container. Most of the time, you’ll want to select Web (that’s what you use when you plan to use Google Tag Manager on a regular website).

Then, click Create:

Once you accept the Google Tag Manager Terms of Service Agreement, you’ve created a Google Tag Manager container for your site.

Now, Google should show you a prompt to Install Google Tag Manager that contains two code snippets:

Step 2: Install Google Tag Manager Code Snippets (Choose 1 Of 3 Different Methods)

As the prompt above indicates, you’ll need to add two different code snippets to your site to finish the process.

One code snippet goes in your <head> section, and the other goes in your <body> section.

I’m going to show you how to do this in WordPress. But if you have a different content management system, you’ll probably want to speak to your developer if you’re not sure what I mean by <head> and <body>.

Method 1: How To Add Google Tag Manager To WordPress With Head, Footer and Post Injections

For the simplest way to add Google Tag Manager to your site, you can use the free Head, Footer and Post Injections plugin. Unlike the method in the next section, this one won’t let you pass any additional information to Google Tag Manager. But for basic use, this solution is totally fine.

Once you install and activate the plugin, go to Settings → Header and Footer and paste each script into the relevant section:

Method 2: How To Add Google Tag Manager To WordPress With DuracellTomi

This popular plugin can help you easily add the Google Tag Manager code snippets to your WordPress site. It can also help you pass additional variable information to Google Tag Manager later on, which is one of the reasons it’s so popular. But let’s not get ahead of ourselves…

First, you need to actually get those code snippets on your site.

Once you’ve installed and activated the free DuracellTomi’s Google Tag Manager for WordPress plugin:

Go to Settings → Google Tag Manager in your WordPress dashboard
Enter your Google Tag Manager container ID in the box*
Choose Codeless injection** (as the plugin states, this *might* cause issues with your site. It’s good to try it, but you might also need to use the Custom option if it causes issues. I’ll cover that in a second.)

*You can find your Google Tag Manager Container ID by looking in your workspace (this is the page Google automatically takes you to after creating an account):

**Genesis users should select Custom.

If you do experience any issues with your theme as a result of the “Codeless Injection”, you can go back and select Custom in the plugin’s settings.

This way is a little trickier because you’ll need to then

Edit your child theme’s header.php file
Add the below code snippet immediately after the opening <body> tag

<?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>

Method 3: How To Add Google Tag Manager To WordPress Theme With Hooks

If you’re using a WordPress theme with easy-to-access hooks – like Genesis or GeneratePress – you can also add each code snippet to the relevant hook.

For example, in GeneratePress you could use the:

wp_head hook for the <head> code snippet
Before Header hook for the <body> snippet

For Genesis, you’d want these hooks:

wp_head
genesis_before

A Quick Test To Make Sure You Did It Right

I’ll show you a more advanced way to test Google Tag Manager later on. But for a quick test to make sure you installed the code snippets properly:

Head to GA Checker
Enter your URL
Choose the Tag Manager option on the results page

An Introduction To The Google Tag Manager Interface

Once you have the snippets added to your site, you’re ready to forget about code and start using the Google Tag Manager interface.

When you first hit the interface, you’re going to see a lot of terms that you may not understand:

Tag – a tag is a single script. For example, the Google Analytics tracking code is one tag.
Container – this is basically a bucket that holds all of your individual tags (along with associated triggers and variables). You can actually create multiple containers – more on this later.
Trigger – a trigger is something that actually causes your tag to “fire”. For some scripts – like Google Analytics – you’ll want it to fire on every single page view. For others, you might want it to only fire on a specific event (like a person clicking a button).
Variables – variables are tied to triggers. They let you get more granular by passing additional information. For example, instead of saying track “all clicks“, a variable would let you say “only track clicks on this specific URL“. Beyond that, they can also pass additional information to Google Tag Manager (like information about a visit or visitor).

How To Add Your First Tag: Google Analytics

Now, let’s get into how to actually add a tag.

To do that, we’ll use one of the simplest examples – Google Analytics. Part of what makes it simple is that Google Tag Manager already includes a built-in tag to help you add Google Analytics.

I’m going to go very in-depth for this first tag so that you get the hang of things. But after this first example, I’ll speed things up a bit.

Step 1: Create A New Tag

To get started, click on the New Tag button in your Google Tag Manager workspace and give your tag a useful/descriptive name:

This will open a slide-out with two options:

Tag Configuration – what type of tag to add.
Triggering – when to actually “fire” this tag.

Step 2: Configure Your Tag

To get started, click anywhere in the Tag Configuration box.

That will open a slide-out where you can Choose tag type. For Google Analytics, select the Universal Analytics option at the top. You can also peruse some of the other options if you want to see all the goodies Google Tag Manager can offer:

Leave the Track Type as Page View for general Google Analytics tracking.

Then, in the Google Analytics Settings drop-down, select New Variable.

That will open another slide-out where you can paste your Google Analytics Tracking ID:

Then, click Save.

Now, your Tag Configuration should be all set:

But you still need to determine when to fire that tag.

Step 3: Set Up Tag Triggers

To set up Triggering, click anywhere on the Triggering box.

To create a new trigger, you can use the Plus icon in the top-right corner. But, for Google Analytics, you actually want the tag to fire on all pages so that we get comprehensive tracking data.

So, for this specific tag, you can just use the All Pages trigger that’s already available:

Once you select All Pages, make sure to click Save on the next screen:

And that’s it – congrats! You just created your first tag.

How To Publish Tags To Make Them Live On Your Site

At this point, you have a tag in your Google Tag Manager container…but it’s not live on your site yet.

To actually make your tag live, you need to publish your container:

This functionality is handy because it ensures you don’t accidentally make something live. And it’s also great if you’re working as part of a team because it ensures you know exactly who is making changes and when.

To publish your container, you click the Submit button in the top-right corner (marked above).

Then:

Make sure you have Publish and Create Version selected
Give this version a Name and Description (be descriptive here because this information will be very helpful once you start working with Google Tag Manager more)
Choose the Publish to Environment (more on this later)
Click Publish

And that’s it! Google Tag Manager will give you a summary so that you know the exact changes that were made and by whom. You can always pull this information up later if needed.

How To Test That Your Tags Are Working

If you want to make sure that your tags are firing as specified, Google offers a free browser extension called Google Tag Assistant.

To use it:

Install it for your preferred browser
Navigate to the site you’re using Google Tag Manager on
Enable Google Tag Assistant on a site by clicking the icon and choosing Enable.
Reload the page

You should then see a list of all the tags that are “firing” on that page. For example, you can see the Google Analytics tag from before in the screenshot below:

As you start to add more complicated tags, especially those that only fire under certain conditions, Tag Assistant and its Record functionality become a lot more necessary to make sure everything is working properly.

Make Sure Your Page Load Times Aren’t Affected, Too

Beyond making sure your tags are actually loading, I also suggest that you test your page load times before and after using a tool like GTmetrix to ensure that none of the scripts you added are having a major effect on your site’s page load times.

Taking Tags Up Another Level: Events, Heat Maps, A/B Testing + More

So far, we haven’t really done anything cool with Google Tag Manager. I mean, adding Google Analytics to WordPress isn’t that hard, so what’s the point of going through the trouble of Google Tag Manager?

Well, here’s where things start to get cool. While I’ll still only be able to scratch the surface of what you can do with Google Tag Manager, here are a couple of more advanced types of tags that you can add.

I’m going to go through this section quicker and assume you can follow along with the basic process of adding a tag after the example above.

Add Google Analytics Event Tracking To See What People Are Doing

Google Analytics Event Tracking is a powerful feature that lets you track users’ actions that are specific to your site. For example, you could:

See how many users click on a specific button
Track what outbound links visitors are most likely to click on
Calculate a more accurate bounce rate

For this example, I’ll show you how to track clicks on a CTA button with the CSS class “hero-cta”.

To set up event tracking, create a new Universal Analytics tab. Only this time, select Event for the Track Type. Then, enter the various event parameters (explanation of these parameters). Note that, if you click the Plus icon, you can insert variables (like the current page URL):

Then, set up your Triggering.

Triggers are where you make event tracking come alive.

Use the Plus icon to add a new trigger. Then, click to begin the Trigger Configuration.

You can choose from a bunch of different trigger types. I definitely recommend perusing the entire list so that you know what’s available. For example, Google Tag Manager also includes pre-built triggers that let you track:

How deeply a user scrolls
When a user plays an embedded YouTube video
When a user submits a form

For this example, though, you’d want Click – All Elements:

Then, because you want to track a specific CTA button instead of all clicks, you’d select Some Clicks.

Then, use the drop-down to set:

Click Element* | matches CSS selector | .hero-cta

And save your tag!

*If you don’t see the Click Element option in the drop-down, go to Variables → Built-in Variables → Configure in your Workspace dashboard and check the box for Click Element.

Now, you can use Google Tag Assistant to verify that the tricks are being tracked:

And for another way to set up comprehensive event tracking, you can use a service called Komito Analytics.

Add Google Optimize Or Optimizely To Split Test Your Site

If you want to A/B test your site, Google Tag Manager makes it easy to add the code snippets for Google Optimize or a service like Optimizely.

For Google Optimize, you’ll need to:

Optimizely also offers detailed tutorials for how to get up and running with Google Tag Manager.

Add Hotjar Or Crazy Egg To See What Your Visitors Are Doing

Hotjar and Crazy Egg help you learn more about the user experience on your site by tracking what your visitors do through features like heat maps, screen recordings, form analysis, and more.

By learning about what your visitors are doing on your site, you can see where your user experience excels…or needs to be improved.

Both services are also easy to add because there are premade tags for each.

Add Retargeting Pixels Or Other Social Media Scripts

Finally, I want to talk about the Custom HTML and/or Custom Image tags.

These tags let you add any script or HTML via Google Tag Manager. They’re a super helpful catch-all that you can use to add scripts like:

Facebook Pixel
Social media scripts
Anything else that’s client-side code

The setup is similar to everything else that you’ve seen so far:

Select the Custom HTML tag type (or Custom Image)
Paste your script in the box
Set up triggering like normal

Using Workspaces, Versions, Users, and Admin settings

At this point, you should have a solid grasp on how to add new tags, what’s available to you, and how to publish those tags to your live site.

Now, I want to round things out with a look at how you can more effectively manage your Google Tag Manager interface, as well as some tips and best practices for going forward.

First, I want to focus on three tabs:

Workspace
Versions
Admin

Collectively, these tabs help you:

Manage which version of your tags is live
Work on different drafts for containers
Manage which users have access to Google Tag Manager

Workspaces

Let’s start with Workspace. This whole time, you’ve been working in a single workspace, but you can actually:

Create new workspaces
Quickly switch between workspaces

Each workspace is like a separate “draft” of your container. While you can only have one container live at a time, you can publish that container from different workspaces.

This is helpful if you:

Are working on a new tagging project and don’t want to pollute your existing container
Don’t want to accidentally publish a work in progress to your live site

Versions

The Versions tab lets you see:

Which version of your container is currently live
A look back at previous versions

Beyond keeping tracking of things, versions are helpful for quickly reverting back to a previous container:

Admin

The Admin area lets you:

Create a new container ID
Manage which users have access to Google Tag Manager
View an activity log
Change lots of other nitty-gritty settings

Tips & Best Practices for Google Tag Manager

To wrap this up, I want to leave you with some tips and best practices for using Google Tag Manager going forward:

Make sure to descriptively name your tags. When you first get started, it’s easy to keep track of different tags. But as your account grows, you’ll appreciate having clear, consistent tag names.
Create new workspaces for big changes. This allows you to safely test out changes without jeopardizing your current tracking.
Use folders to stay organized. You can create folders in the Folders tab in your main dashboard.
Add detailed comments to new versions. This helps you easily track what changed in each version later on.
Use separate container IDs for Prod/Staging/Development. You can create a new container in the Admin tab.
Always test your tags. You can use the Google Tag Assistant extension to do this.

And that wraps up this rather lengthy Google Tag Manager guide. Have any other questions about how to get up and running with Google Tag Manager? Leave a question and I’ll try to help out.

References:

0 Shares