Google Tag Manager Tutorial: The Guide

Google Tag Manager Tutorial (GTM) is a great way to manage your website tags and tracking code snippets. 

It’s not the easiest tool to use, but with the right guidance, anyone can master it. So, in this tutorial, we’ll cover everything you need to know about GTM — from basic setup and implementation to super advanced features. We’ll unpack its powerhouse components: tags, triggers, and variables. 

We’ll not stop there: we’ll also guide you through the practical steps of setting up GTM, first on your website and then on the Google Ads platform. And don’t worry — we’ll make sure all of this is done with a dose of humour to keep it light-hearted.

Ready? Let’s get started. But first, let’s look at what GTM is, what it does, and how it can benefit you. 

What’s Google Tag Manager

GTM is a free tool developed by Google to help marketers and website owners manage and deploy their online tracking codes and tags on their websites or mobile apps without editing their website’s code. 

GTM is like a container for tags and tracking codes. It makes it easy to deploy, update, and manage all the pixels, snippets, and scripts your website needs to track user behaviour.

How Google Tag Manager Works

Simple: you install a single container of code snippets to your website’s source code, after which all your other tags and pixels can be managed from the GTM platform.

That way, you don’t have to add or update each tag and pixel manually, but you can do everything from one central place. GTM also provides powerful tracking capabilities with features like triggers, variables, and templates to help you set up more advanced tracking and analytics.

The Three Components of Google Tag Manager

GTM has three main components: tags, triggers, and variables. Let’s take a look at each of them in detail. 

Tags

Tags are the code snippets you execute on a website or app. They have various uses, but in GTM, they send information to third-party services such as Google Analytics. You can use tags to track conversions, remarket, and more.

Triggers

Triggers tell the tags when to fire, such as when someone visits a specific page or clicks a button. You can set up multiple triggers so your tags only run under specific conditions. That gives you greater control over how and when tags are triggered.

Variables

Variables provide additional information to the tags so that they can fire accurately. For example, you can set up variables that capture the page URL, referrer URL, and other data points. They allow your tags to be more targeted and accurate in their tracking.  

7 Benefits of Using Google Tag Manager 

Google Tag Manager is an incredibly versatile and powerful tool for marketers. Here are some of the benefits you’ll have when using GTM. 

Efficiency and Speed

GTM makes it easier to manage tags on your website or app. You can quickly add, update, and remove tags with just a few clicks instead of manually fiddling with your website’s code. 

Accurate Tracking

With GTM, you can set up more accurate tracking across different pages and devices with triggers and variables. That ensures that the data you’re collecting is accurate and reflects what’s actually happening on your website.

Flexibility

GTM allows you to experiment and try new tags without relying on a developer’s help. You can configure and deploy tags based on your own specific needs and quickly make changes when needed. 

Version Control

GTM makes it easy to track changes and test tags with its version control feature. That allows you to return to a previous tag version if something goes wrong or you need to roll back.

Improved Site Performance

Slow-loading tags can negatively impact your website’s performance and user experience. GTM can help improve your site’s performance by allowing asynchronous loading of tags. It ensures that slow-loading tags won’t hamper your website’s performance. 

Consolidation and Organization

GTM allows you to keep all your tags in one place, so it’s easier to find and manage them. You can also organize your tags into folders or with labels, making it easier to search for specific tags. 

Cost Savings 

Using GTM can be cheaper than hiring a developer for every tag you need to add or remove. GTM also eliminates the need for purchasing additional third-party software since it’s included with your Google Analytics account.

Now that you know all the benefits of using GTM, you’re ready to get started. Follow this tutorial, and you’ll have your tags up and running in no time:

How to Set Up Google Tag Manager

Here’s a step-by-step guide on how to set up your Google Tag Manager account. 

Create an Account 

Go to tagmanager.google.com and click “Create Account.” You’ll be directed to a page that looks like this:

Enter Account Details

Under Account setup, add your company name and country, scroll down, and add your website’s container name (website’s URL) under container setup. 

Choose Your Target Platform

You’re also required to choose your target platform (web, iOS, Android, Server, or AMP). 

Accept Google’s Terms and Conditions

Once you add all the required information, click “Create,” and you’ll be directed to another page where you’re to accept Google’s terms and conditions and click “Yes” to confirm.

Copy and Paste Your Code Snippet into Your Website’s head and body tags.

Now you’ve successfully created your account. You can copy the code snippets provided and paste them into your website’s header and body tags.

Congratulations!

You’ve successfully set up your Google Tag Manager account. Now you can start tracking any data you want and improve your site’s performance with the help of GTM.

How to Install Google Tag Manager on Your Website

After you’ve created your Google Tag Manager account, the next step is installing it on your website. Here are the steps to follow: 

After logging into your Google Tag Manager account, you’ll see a window popup with two code snippets. Copy the first one (GTM-XXXX) and paste it into the <head> tag of your website’s HTML code. 

Copy the second code snippet (GTM-YYYY) and paste it right after the opening <body> tag. 

Click “Publish” to make your changes live, and you’re done.

Why the Two Codes

The first code snippet connects your website to Google Tag Manager. It should be pasted in the header section of your website. It ensures that GTM can load synchronously and that it’s part of the rendering process of your website.

The second code snippet (GTM-YYYY) is inserted right after the opening <body> tag, and it’s responsible for ensuring GTM still loads even if JavaScript is disabled on a user’s browser.

What Can You Track in Google Tag Manager?

As you’ve seen, setting up Google Tag Manager is a walk in the park. Now that it’s installed, you can start tracking all kinds of data related to your website’s performance.

Here are just some of the things you can track with the help of GTM:

Data Layer and Its Usage

A data layer is a JavaScript object used in most tag management systems, including Google Tag Manager, to safely store and manage information from your website to your tag manager container. It’s like a central data repository on your website that Google Tag Manager can easily access, read, and track. 

Data layers can be used to store variables such as product information, page views, user data, and more. The great thing about a data layer is that it allows you to track all kinds of data without manually updating your tags whenever something new changes on your website.

That’s particularly helpful when you’re running an e-commerce store. You can use it to track extra details about the purchases made on your website. It’s an excellent strategy to understand user behavior better and tailor your marketing efforts to fit the preferences of each customer. 

To do this, you want to use something called a data layer. For the unacquainted, a data layer is a JavaScript object or “container” that stores pieces of important information about conversion, like when exactly did a user make a purchase? What is their order number, and what product did they buy? 

You can then use this layer in GTM to track the user’s journey through your website. By tracking this information with Google Tag Manager, you can gain insights into which pages users visit before purchasing and optimize your marketing campaigns accordingly. 

The code looks something like this: 

“`javascript

<script>

window.dataLayer = window.dataLayer | [];

dataLayer.push({

  ‘event’: ‘conversion’,

  ‘email’: test@test.com,

  ‘visitorType’: ‘customer’,

    ‘order: ‘2244’

});

</script> 

“`

Let’s break down the code. The first line, `window.dataLayer = window.dataLayer | [];`, sets up the data layer container and initializes it with an empty array. Whenever a user performs an action on your website, you can add information to this array and track it through Google Tag Manager. 

The following few lines are what we call a “data layer push.” It tells GTM what type of event you want to track and provides the necessary information for it to do so. In this case, we are tracking conversion and providing details such as the user’s email address, visitor type, and order number.

For more granular tracking, Google recommends a data layer structure that contains more than just the data layer push information. You can include other pieces of data, such as product details or customer attributes, to give yourself a better picture of your users’ behaviour. 

items: [    {

      item_id: “SKU_12345”,

      item_name: “Stan and Friends Tee”,

      affiliation: “Google Merchandise Store”,

      coupon: “SUMMER_FUN”,

      discount: 2.22,

      index: 0,

      item_brand: “Google”,

      item_category: “Apparel”,

      item_category2: “Adult”,

      item_category3: “Shirts”,

      item_category4: “Crew”,

      item_category5: “Short sleeve”,

      item_list_id: “related_products”,

      item_list_name: “Related Products”,

      item_variant: “green”,

      location_id: “ChIJIQBpAG2ahYAR_6128GcTUEo”,

      price: 9.99,

      quantity: 1    },    {

      item_id: “SKU_12346”,

      item_name: “Google Grey Women’s Tee”,

      affiliation: “Google Merchandise Store”,

      coupon: “SUMMER_FUN”,

      discount: 3.33,

      index: 1,

      item_brand: “Google”,

      item_category: “Apparel”,

      item_category2: “Adult”,

      item_category3: “Shirts”,

      item_category4: “Crew”,

      item_category5: “Short sleeve”,

      item_list_id: “related_products”,

      item_list_name: “Related Products”,

      item_variant: “gray”,

      location_id: “ChIJIQBpAG2ahYAR_6128GcTUEo”,

      price: 20.99,

      quantity: 1    }]

With Google Tag Manager, you can use this data layer to create tags that fire whenever a user takes certain actions. For example, you could send an event tag when someone visits your store page and views product details or adds items to their shopping cart.

You can also use this data layer structure for more advanced tracking, such as tracking order completion by capturing the user’s email address and purchase items. 

With the data layer structure in place, you can now use Google Tag Manager to its full potential! From setting up custom variables to creating tags for tracking user interactions, Google Tag Manager can help you unlock the power of your analytics and website optimization efforts.

Custom HTML Tags

Custom HTML tags are particularly useful when you need to track something not part of the templated structure of Google Tag Manager or when you want something beyond what the available tags offer. With custom HTML tags, you can create your own set of tracking events using HTML code.

An example might be when you want to track a custom chatbot from a third-party service. You can create a custom HTML tag to capture the interaction data from each user, and then store it in your data layer. This way, you can use the information to understand how users interact with your chatbot and make improvements where needed.

Here’s how you would do it:

#1. In your Google Tag Manager, click ‘Tags’ => ‘New’ to create a new tag.

#2. Select the ‘Custom HTML’ option from the list of available tags.

#3. Copy your third-party JavaScript code for your chatbot and paste it into the ‘Custom HTML’ text box provided.

#4. Create a trigger to fire the tag when users interact with your chatbot (e.g., clicking a button or entering text).

#5. Add any additional parameters you want to capture as part of your data layer structure (e.g., user ID, time spent in conversation, etc.).

#6. Test the tag to make sure it’s working correctly.

#7. Once satisfied, click ‘Publish’ to save your changes and track user interactions with your chatbot.

How to Migrate Your Existing Tag to GTM

Tag migration is an important part of the Google Tag Manager process. It helps you keep track of all your tags in one place and makes it easier to manage them.

If you have an existing tag and start publishing new tags with GTM, you’ll double up the tracking of your website. So, it’s important to migrate existing tags into GTM and delete them from your website code.

For example, let’s say you have an analytics.js tracking code from Google Analytics. If you publish a GA tracking tag in GTM, and both these tags start sending data to your GA, it will cause an overlap in the data and your analytics dashboard.

To avoid this from happening, you would need to delete the tracking code from your website and publish a new tag with GTM.

Tag Migration Checklist

Here’s an example of a Tag Migration Checklist:

The migration process works something like this:

• You start by categorizing and recording all existing tracking tags running on your website. 
• Then, you create a duplicate of the tag in GTM and configure it as per your requirement. You can also use a template to make it easier for you.
• Next, you delete the existing tag from your website code and start testing the new GTM tags to ensure they work correctly.
• After that, you publish all changes on GTM, and you’re all set. Now, your tags will be managed by Tag Manager from now on.

How to Make Sure You Don’t Have Any Gaps in Tracking While You’re Working on Tag Migration

If you have a lot of tags to migrate, it can be difficult to keep track of all your changes. There’s the risk of double-tagging or forgetting to remove the old tags from your website code.

The only way to ensure you’re not double-tagging your page is to ensure you’re not firing any new tag until the existing tag is removed from your website code. That can be a time-consuming process, but it’s worth it if you want to ensure your data is accurate and reliable.

You have to be super careful with how you handle the migration process. Otherwise, you might end up with gaps in your tracking. And suppose you have gaps in your tracking data. In that case, it can be difficult to identify any trends or patterns that might be useful for making decisions about your website and marketing campaigns.

The gaps could also be between the time you remove your old tracking scripts and when the new ones go live. It’s important to ensure there’s no interruption in tracking since that could skew your results and lead to inaccurate analysis.

GTM Migration Trigger

There’s a GTM migration technique you can use to completely eliminate tracking gaps while migrating tags. It involves creating a suppression trigger that will block the new tag from firing until the old one has been removed. This way, you can be sure that your tracking will be uninterrupted and accurate.

It’s a bit of a complex process, but it’s worth it for the peace of mind. And if you use GTM, there are plenty of resources online to help you. So don’t worry — you can get through this Tag Migration without any hiccups.

Here’s how it works:

The second the old tags are removed from your website code. The suppression triggers will stop firing, prompting the new tracking tags to start firing. This way, you’ll have a seamless transition from the old to the new without any interruption in tracking.

We might someday write an article about the specifics of setting up suppression triggers, but for now, just know that it’s a good idea to use them when migrating from one tag management system to another.

Once you’ve got your tags in order and your suppression triggers set up, you can start analyzing your tracking data with confidence. And who knows — maybe you’ll even discover something new about your website or your audience that you didn’t know before.

Four Beginner Mistakes to Avoid 

Getting started with GTM can be confusing, especially when dealing with such a complex system. It takes some time and practice to get the hang of it, but here are four mistakes that beginners often make and that you should do everything you can to avoid.

Mistake #1: Not Previewing Your Container Before Publishing

When creating tags, triggers, and variables in GTM, it’s important to preview the container first to ensure everything looks okay before publishing. This way, you can catch any errors or typos before they go live.

You want to preview and debug every single tag before publishing, so you don’t accidentally deploy a tag that’s not working the way it should. It doesn’t matter how innocent or minor the mistake may seem — if it’s not working correctly, you don’t want it on your website.

Tags can misfire for all sorts of reasons. A trigger might fail to fire, the settings might be wrong, or the tag might be using the wrong variable. The only way to make sure that your tags are firing correctly is to preview them before you publish.

Mistake #2: Publishing Too Often and without a Purpose

When starting with GTM, it can be tempting to hit the “publish” button every time you make a change. You might think this is the best way to keep up with new features, but it can create clutter in your workspace and create unnecessary confusion.

You don’t want to over-publish, as it will gunk up your GTM with 100’s versions you won’t know what it is for. Keep track of your changes and the purpose of each publish, so you can look back on previous versions to see why certain changes were made.

Here’s what you want to do instead:

Every tracking should start with a plan. Ask yourself, “Why do I need the data I’m trying to track?” and “How will I use the data?” Then, properly document each new tag or change you make in the workspace and create a version description that clearly outlines what has been changed.

Additionally, test your tracking tags in the preview mode before publishing, and be sure to measure the performance post-launch. This way, you can identify what works and what doesn’t without cluttering your workspace.

Mistake #3. Not Using Variables

Variables are an incredibly powerful tool in GTM – they allow you to easily control and manage your tags without updating them manually. Variables are essentially placeholders that can be used in any tag, trigger, or variable.

You want to use built-in variables as much as possible, such as Page URL or Referral Source. These variables are easy to set up and provide you with a lot of valuable data. 

Examples:

• For videos:
• Video Provider
• Video Status
• Video URL 
• Video Title
• Video Percentage
• For Scrolling:
• Scroll Depth Threshold
• Scroll Depth Unit
• Scroll Direction
• For Visibility:
• Percentage Visible
• On-screen duration

You can set up your tags quickly and efficiently by taking advantage of variables. Plus, if you ever need to make changes down the line, you won’t have to update all of your tags manually – just tweak the variable once, and it will apply across all associated tags.

Mistake #4: Automating Until Everything Stops to Make Sense

Google Tag Manager is designed to simplify our lives by automating as much of the process as possible. But it’s important not to take things too far.

Before you go crazy on automation, ask yourself, ‘Do I need this?’. Automating too many of your tags can lead to clutter, confusion, and unnecessary complexity. So take a step back and determine what really needs to be automated and what doesn’t.