Google Tag Manager Tutorial #1: The Interface and creating our first tag!

It's been a long time since I have written something here. I wanted to revive this blog for a long time and today is the day! If you are new here, don't mind! Let's dive into the topic. I have written an article on the basics of Tag Management System quite a long time ago. If you are new to Tag Management and are in the Digital Analytics industry, do read the above article before proceeding to get a basic understanding. This will be a series of articles which is completely dedicated towards Google Tag Manager (GTM), a free tag management tool provided by Google. You do not need any prerequisites of programming but should be able to understand the basics of Digital analytics tracking. We will cover various aspects of complex tracking and programming as we go through the tutorials.

High-level working of GTM

In this first tutorial, let us understand how GTM works on a high level and get an overview of the interface and publish our first Google Analytics Tag.

How Google Tag Manager works?

As with all the tag management tools, GTM works on a similar approach where you sign up for a tag manager account and paste the tag manager code snippet on all the pages of your website where you want to do some Analytics implementation to measure some data points or add a digital marketing pixel for your upcoming campaigns etc. As with any tag manager, GTM works as shown above in the chart on a high level.

GTM has accounts, containers, and workspaces at different levels of hierarchy. Accounts are the top level buckets which hold all your containers. Let's say you are an Analytics consultant and you are working with 3 different clients. So each of your clients will have a different account. In a few cases, if one of your company is very big and they have multiple smaller groups, they might have different accounts. Under each account, you will have containers for different web properties your company own. In certain cases, you might create multiple containers for different environments of the same website (Development and Production) and in some cases where you have multiple teams working on different analytics tools, workspaces comes to the rescue in dividing the work they do and once they are done and publish their changes, you can merge all the changes to the Default workspace. In the free version, you can have only upto 3 workspaces.

GTM Account Creation

So, you want to move all your digital marketing and analytics activities to GTM. Awesome! Let's create our first GTM account. In the following series of screenshots, I will show you step by step what you need to click and select to create your first GTM account for your web property. Navigate to tagmanager.google.com and sign in with your Google credentials. Once you are successfully signed into the dashboard, you should see all the GTM accounts that are associated with your account as shown in the below picture. Since this is your first time, this will be empty.

Sample Dashboard screenshot

Follow the screenshots by first clicking the "CREATE ACCOUNT" button on the right side as shown in the above picture.

GTM Account Creation Step 1

GTM Account Creation Step 2

Installing GTM on a website

Once you click CREATE button you are done with the creation and you will be navigated to a screen which gives you two snippets of code you need to place on all the pages of your web page as shown below.

GTM Code Snippet

The top portion is a mandatory code snippet which has to be placed in the head section on all the pages on your website which you want to track. If you are still confused where to place it, talk with your web developer and ask him/her to place it for you. Make sure it is as high as in head section because there are tools which change the content on your website on the fly such as A/B testing tools. So to give your customers a good viewing experience, it is important to place GTM snippet on top so that there is no bad experience in changing the content. We will discuss this more in our future tutorials.

The second part of the code is purely optional. But before discarding it, let us understand what it exactly means. This is a noscript tag. Even though it is rare there might be instances when a client's browser has disabled scripts completely. In that case, any of your JavaScript-based tags will not work. Most of the analytics and marketing tags work based on JavaScript. But if you have some HTML tags or Image pixels which do not rely on JavaScript, noscript tag comes to your rescue. So, you are increasing the chances of your tags getting fired on a wide range of machines. From the general statistics and most of the people moving to mobile, it is hard to find some browser which has scripts disabled. So it is completely fine to ignore the second tag snippet.

Overview of elements

We will dig deep into each of the elements in individual tutorials but in this post, let's have a quick introduction about the elements and what they do.

Admin is the place where you manage your account, users, containers and other settings. GTM has 3 main components when you are implementing any digital marketing or analytics tool. We call them tags, triggers, and variables.

Tags

Any JavaScript code that needs to be placed on the website is called a tag. Tags are the first building blocks in your implementation. GTM provides a lot of templates which can be leveraged in implementing various analytics and marketing tags with ease. Without a tag manager, you have to write a few lines of JavaScript code in implementing them on your website.

Variables

Variables are the placeholders which can a variety of values so that they can be reused again and again easily. For example, you want to capture the title tag of the webpage on every page in an analytics tool. What we do is create a simple variable and use either the inbuilt options or write some simple code to capture the title value and store it. Let's say we name it Page Title. "Page Title" can be used in any of your tools with simple referencing.

Triggers

Triggers are the ones which tell your GTM to load different tags when a particular condition is satisfied. Let's say you want Google Analytics tracking to be present on all the pages on your website. You need to come up with a trigger which satisfies this condition when you want to implement Google analytics tracking. These specific conditions are called Triggers.

Publishing and Versioning

Once you add few tags to your container with appropriate triggers and variables, it's time you want this whole setup to be available on your website. You just need to click on the blue SUBMIT button on the top right on the screen and name your version of the code and you are done! Your code will be published to the Live environment and it will be available on your website shortly. If you are familiar with tag debugging you should see the latest tags you have added via GTM on the website. While publishing you might have observed that there is something called Versions.

I did a dummy submit without adding any tags, triggers or variables. You can see I named my version as "Initial Publish" and after submission, my first version is live on my website. That's all to GTM you have there. Now let us create our first Google Analytics tag and publish the changes.

Creating our first Google Analytics tag

Follow the series of screenshots which show how to create your first Google Analytics pageview tag. Before creating the tag, you should goto your Google Analytics profile settings and grab the Tracking ID from the Admin.

Creating the First Tag

Choosing the right template for your tag

Configuring the template for your needs

Creating our first variable where we store the GA Tracking ID

Adding Trigger to the tag

Final Version of the tag after all additions

It's time to publish the changes and test your website for the GA tag

If you follow the above screenshots, you should be able to create your first tag and variable and use a default trigger provided by GTM. Since this is an introductory tutorial we have seen most of the things at a high level. We will discuss each component in detail in future tutorials. Till then, cya!