Google Tag

Manager
Tutorial
Google Tag Manager is the next big thing in the Digital
Marketing world. For any product marketer, it becomes a
task to achieve efficient data from the product blog/website.
When it comes to the data, there are multiple product
marketing tools available. To handle these tools, Google
Tag Manager provides a universal solution. This tutorial will
take you through the basics of Google Tag Manager, right
from the Tag formation to interacting with special functions
such as Form Submission, Mouse Scroll Events, etc.

The primary audience for this tutorial are the product

marketers. However, this tutorial is useful for anyone
working with Google Tag Manager as a part of their
development assignment. With the basic introduction,
product marketing enthusiasts can benefit from knowing
what Google Tag Manager has to offer.

We assume that the reader has beginner’s understanding of

Web/Mobile Marketing. Google Analytics knowledge is
mandatory. Other than that, it is assumed that the reader is
acquainted with a blog, configuring a blog and modifying
the blog for enhancements.

-------------------------------------------------
FREE EBOOKs
Copyright © 2021 by SuSu. All Right Reserved.
SEE MORE FREE EBOOKS: CLICK HERE
 TABLE OF CONTENTS

1. Google Tag Manager – Overview

2. Google Tag Manager - Set Up
3. Google Tag Manager - Getting Started
4. Google Tag Manager - Track Tags
5. Google Tag Manager - Organize the Interface
6. Google Tag Manager - Publish a Tag
7. Google Tag Manager - The Data Layer
8. Google Tag Manager - Advanced Tracking

Do you want to learn the really advanced

content that we couldn’t include in this
eBook? CLICK HERE
Google Tag Manager –
Overview
To understand Google Tag Manager, we first need to
understand a few related concepts.

PRODUCT MARKETING - BACKGROUND

With the advent of the Internet and the web, there has been
an immense necessity to stand out from the rest for
promoting your product. This era has surpassed the times
when advertising and marketing used to work in a fantastic
way with paper media.

With the requirement of marketing the product becoming a

focused and skillful task, there is a new breed of
professionals called “Product Marketers”. These folks are
required to be updated with the market trend, user behavior,
and the likes and dislikes of their audience.

The product marketer, donning the hat of an analyst and an

advertiser, needs to know many things to be on top of
things. One such thing is – creating a marketing campaign
for successful user engagement.

If we go with the Wikipedia definition for product

marketing – Product Marketing is the process of
promoting and selling a product to an audience.
In short, a product marketer needs to create various
promotional campaigns to stay on top of the competition,
thereby increasing the sales.

Since the dot com boom, for a successful product marketing,

the presence of a product is required not only in the real
world but also in the web world. The presence and
acceptance in the web world is directly proportional to the
success of the product.

PRODUCT MARKETING TOOLS

In this quest of increasing product sales along with being
creative, a product marketer needs to be aware of certain
effective tools. These tools by themselves prove helpful to
market the product and analyze the user trend accordingly.

Following are some commonly used product marketing tools

−

• Google Analytics
• Chartbeat
• Kissmetrics
• Sprint Metrics
• Woopra
• Clicky
• User Testing
• Crazy Egg
• Mouseflow
• Mint

Google, obviously tops the list with their offering – Google

Analytics. Google introduced this analytics tool very early
during the product marketing evolution. Indeed, it is the
most reliable and highly used tool in the product marketing
community.

The tool has its unique way of operation using a user-

friendly interface. The user has to add the Google Analytics
Account Number to their respective website/blog pages.
Accordingly, the user visits and the clicks are tracked by
Google Analytics.

USING DIFFERENT ANALYTICS TOOLS

Similar to Google Analytics, every other tool as provided in

the above list has a different way of functioning. When it
comes to using a particular tool, it calls for having the
website/blog code modified in order to start tracking the
behavior of the user.

These tools provide an analysis on which page was used at

most times, what were the activities performed by the user,
etc. Also, these tools can provide a quick feedback in the
form of data for the newly launched features.

The way Google Analytics works is quite similar to how

most of the other listed tools would work. Now, consider a
relatively large product organization, focused on building a
new feature to enhance their customer experience. For such
large scale organization, it is useful to have huge release
processes/pipelines, which get the desired feature out in a
seamless way.

Enter Google Analytics. For Google Analytics to be useful,

it is required that all the pages in the product website code
should have this account number. However simple it sounds,
for large product organizations, sometimes, adding a small
piece of code in the page can be cumbersome and it calls for
rigorous testing after creating this feature.

If the product organization aims to use multiple data

analytics tools as given in the above list, then multiply the
effort in terms of time and cost by the number of tools in
use. This becomes painful as the product matures.
Eventually, gauging the user behavior also becomes a must.
In such cases, it is important to have a one-for-all
mechanism, so that it becomes easier for product marketers
to create different campaigns on the fly.

As different tools use different techniques for tracking the

user behavior, there is a need to go for a single medium,
which accounts for these different techniques with different
tools.

GOOGLE TAG MANAGER - INTRODUCTION

For a product marketer, to use different tools calls for
respective learning curve. Having different tools entails
different codes to be entered and hence the changes in the
website. If there is a simple and straightforward process of
changing the website code, it becomes a bliss for adding the
different codes related to different analytical tools.

Google Tag Manager (GTM) is a free tool that makes it easy

for marketers to add and update website tags. The tags
enable site page views monitoring, conversion tracking, etc.
Using Google Tag Manager, one can have an effective tag
management solution that allows for quick and easy updates
in website tags. Tags are basically code snippets, which are
intended for traffic analytics and marketing optimization.

For a product marketer engaged in different product

analytics solutions, Google Tag Manager is a must have, as
it covers many aspects of product marketing under one roof.
You can add and update AdWords, Google Analytics,
Firebase Analytics, Floodlight and other third party tags
using Google Tag Manager.
Google Tag Manager - Set
Up
For setting up Google Tag Manager, having a website is a
must. For the purpose of the tutorial, we will go through the
following process to set up Google Tag Manager.

• Set up a blog with Blogger.com

• Create an account with Google Tag Manager
• Install a tag on the blog

CREATE A BLOG WITH BLOGGER.COM

Step 1 − To get started with creating a blog, follow this link
– https://blogger.com. The homepage for blogger will pop
up as shown in the following screenshot.

Step 2 − Click the button – CREATE YOUR BLOG to start

creating a blog.
As the next step, Blogger will ask you for your Google
account. Blogger, being one of the Google products, makes
your life easy by allowing Google account to create a blog
online.

Step 3 − Enter your credentials for Google, and you will see
the following screen for creating your blog.

Step 4 − Choose a title, address, and blog theme of your

choice.

Entering a title is pretty straight forward, you may provide

any title as you like. With the address, as you start typing
the desired blog address, the interface will start searching
for availability. Following screenshot shows how a blog
address is being searched.
Once you are through with this process and the blog address
is available, you will see the following message in the text
box.

As shown in the above screenshot, the blog address –

https://gtmtutorial2017.blogspot.com is selected.

Step 5 − Once you have selected the required design, click

the red button – Create blog!
The system will take a few seconds and your new blog will
be ready. Once done, you will be presented with the
following interface to start writing a blog.

At least one post is required to see Google Tag Manager

working effectively.

Step 6 − Create your first post on the blog by clicking the

link button in blue – Create a new post.
Step 7 − You can start writing the contents of your first blog
post. Provide a post title as required at the top of the screen.

Many a times, blogger makes it easy to compose both

HTML and rich text content. This is possible by using the
toggle button Compose/HTML at the top left corner of the
screen. Let us see how to use Compose option as an
example.

Step 8 − Click Compose, a rich text editor will be shown.

Start adding some content.

Step 9 − Once done, click the Publish button on top right

section of the screen.

You will be redirected back to the screen as shown in the

above screenshot, with a new post visible in the list. This
concludes the site creation in Blogger.com

Next step, is to create a Google Tag Manager account. Then,

we will add the container code to the website. Finally, we
will be able to track the page views/corresponding events
with GTM.

CREATE AN ACCOUNT WITH GOOGLE TAG

MANAGER (GTM)
Step 1 − To get started with Google Tag Manager, use this
link: Google Tag Manager. You will see the following
homepage for Google Tag Manager.
Step 2 − Click any of the links for SIGN UP FOR FREE.
The links are available on the page – at the center and at the
top right corner.

Step 3 − Go ahead and explore the page as you like as it

provides very useful information about Google Tag
Manager.

Once you’ve clicked SIGN UP FOR FREE, you will be

presented with the following screen and the URL will
change to - https://tagmanager.google.com/?hl=en. This will
show up below the screen for logging in with your Google
Account.
Once you’ve entered your credentials for Google, the tag
manager interface will show up.

Step 4 − GTM will require you to Add your New Account.

There are two steps −

• Setup Account
• Setup Container

Step 5 − As a first step, add the Account Name. For the

purpose of this tutorial, we will use the name – Google Tag
Manager Tutorial. You may choose to Share data
anonymously with Google and others, to enhance your
product marketing experience.

Step 6 − Click Continue.

Step 7 − Next step is to Setup Container. Provide a name for

the container. Let us add the name as – Tag Container.
Under Where to Use Container as shown in the following
screenshot, select Web.

Step 8 − Click CREATE.

You will then be presented with a screen to accept Google

Tag Manager Terms of Service Agreement.

Step 9 − Click YES to proceed.

Step 10 − Finally, you will be presented with a set of code

snippets as shown in the following screenshot, which are to
be added under head and body tags.
These code snippets are required so that the data from the
blog created can flow into Google Tag Manager Interface.

We will go through the tag creation and the respective

processes in a subsequent chapter.

GOOGLE TAG MANAGER INTERFACE

Let us take some time to get acquainted with the different
sections on the Google Tag Manager interface.
First, let us understand how to manage the following
sections −

• Workspace
• Versions
• Admin

WORKSPACE

The workspace section shows the active work in progress.

This section has different sub-sections such as −

• Overview
• Tags
• Triggers
• Variables
• Folders

We will learn more about these sub-sections in subsequent

chapters.

VERSIONS

It is very common for large organizations to create few tags

and have them for review or approval process.

At the same time, one might need to have an understanding

of the previous tags published on the website. For all these
purposes, we can use Versions section. This shows every
possible tag published in the current workspace and allows
to roll back the changes, if required.
ADMIN

If you wish to configure your Google Tag Manager account

for different environment or different users, you can use this
section.

You can also configure the account details and review the
activities related to the account, if there are multiple users
associated with this account.
Google Tag Manager -
Getting Started
This chapter provides an overview of how to get started with
Google Tag Manager, add a tag and analyze it for
completeness.

While going through the process, we will use the blog

(created in the previous chapter) for demonstration of
different steps.

Step 1 − As shown in the above screenshot, click the

container code (GTM-XXXXXXX) at the top right corner
besides the label Workspace Changes: 0.

You will get to see the Install Google Tag Manager dialog
box.
Now, here we want to install the Google Tag Manager code
on our blog.

Step 2 − To get the GTM code in the above figure added on

the blog, go to https://Blogger.com and log in with your
credentials.

You will be presented with a screen as shown below with

your blog post name in the list.
Step 3 − From the panel on the left, locate the option:
Theme.

You will see the following screen.

Step 4 − Click Edit HTML to edit the HTML code for the
blog. An HTML source code for your blog will be visible, as
shown in the following figure.

Here, we want to install the code Google Tag Manager. As

instructed by GTM, we are required to insert the code at the
following locations −
 • As high as possible in the <head> tag
• In the <body> tag

Step 5 − Locate the <head> tag in the HTML code above.

Go back to https://tagmanager.google.com and copy the
code in the Install Google Tag Manager dialog box under
step 1 above. Paste the copied code exactly under the
<head> tag opening.

Step 6 − Similarly, locate the <body> tag in the HTML

code.

Note − You can use shortcut key Ctrl + F to find the <head>
and <body> tag. The browser search functionality will come
in handy to find the tags.

Once you have located the <body> tag, repeat the procedure
to copy the code associated with <body> tag from Google
Tag Manager.

For ease of locating the tag, typically, <body> tag will begin
with <body expr:class = '"loading" +
data:blog.mobileClass'>.

Paste the required code under the <body> tag and then click
Save theme.

It will show the following error, and it is normal to see that

error.
Step 7 − To address this issue, in the Google Tag Manager
code under the <head> tag, locate the line with −

j = d.createElement(s),dl = l != 'dataLayer'?'
&l = '+l:'';j.async = true;j.src =

Replace the & as underlined in the line above

with &amp; and click Save theme. The error will be
resolved.

This concludes the process of adding Google Tag Manager

Code to your blog.

INTRODUCTION TO TAG
As put simply on Google Tag Manager Support website, a
tag is a piece of code that sends information to a third party,
such as Google Analytics.

Taking a cue from there, with respect to a particular

analytical tool, there can be multiple tags associated. Having
them all in one page is indeed a plus, as the product
marketer will get to see multiple metrics associated with the
page.

However, there is an equally important point to note here,

one should not overdo the tags on a website. This not only
increases the confusion while managing the tag but also
makes it cumbersome to differentiate the data coming from
various tags.

The following code, as we have seen on the Install Google

Tag Manager dialog, is actually a Tag.
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){
w[l] = w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});
var f = d.getElementsByTagName(s)[0], j =
d.createElement(s),
dl = l != 'dataLayer'?' &l = '+l:'';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id='+i+
dl;
f.parentNode.insertBefore(j,f);
})
(window,document,'script','dataLayer','GTM-
M8QLQCZ');
</script>
<!-- End Google Tag Manager -->

LOCATION OF A TAG

The location of a tag can be anywhere in the page source

code. It can very much be at the top as the one above or it
can sit in the footer transmitting the information that is
required.

This concludes a quick introduction to a Tag and how it can

be created.

TRIGGERS
Triggers actually detect when a tag will be fired. These are a
set of rules to configure a tag to be fired. For instance, the
triggers may decide that a particular tag ‘X’ will be fired
when a user performs ‘Y’ action. More specifically, a trigger
can direct a tag to fire when a particular button in a
particular form is clicked.
Triggers are conditions which can be attached to a tag to
function the desired way. A real world example will be,
consider that a tag is being configured for a successful
transaction on an ecommerce page.

The tag will indicate whether the transaction was carried out
successfully. To do so, a trigger will be created, which will
say, fire the tag only when the transaction confirmation page
is displayed to the user.

More prominently, consider you want to track all the page

views of a blog/website. So, specifically, you can create a
tag with Google Analytics, which will get fired when the
user accesses any page on your blog/website. A trigger in
this case, will be generic, saying fire this tag on all pages.
The trigger will be set accordingly.

The trigger sometimes can get complicated. For example, if

someone clicks a button on a specific page, then fire a tag.

As shown in the following figure, you can access triggers by

clicking Triggers on the left side panel of the screen.
As there are no any triggers configured as yet, you will see
no results on the triggers.

VARIABLES
Essentially, variables are values that can be changed.

For instance, let us consider a simple link click. When a link

is clicked, there are several built-in variables that are
collected with this click event. These variables can
eventually be used to record the link, which is redirected
when a user clicks on the particular link button.

Going in a bit detail, you can also record the particular div
class of the element that was clicked, using variables. They
are called variables, because if there are 10 different link
buttons on the page, the redirection from these link buttons
is going to change, depending on which of the elements are
clicked on.

You can access variables by using the left panel and clicking
Variables.
Google Tag Manager offers two types of variables −

• Built-in variables
• User-defined variables

As the names indicates, you have a scope of using the

existing variables as offered by Google Tag Manager or you
can create your own variables.

Let us consider an example and see how a tag functions. We

will be debugging the tag now with Google Tag Manager.

DEBUGGING A TAG
In the initial section of this chapter, we took time to add
Google Tag Manager Tracking Code to our blog on
Blogger.com.

This was the first step to have Google Tag Manager identify
our tracking code. If you observe closely, in the script that
has got included in the <head> tag, there exists a Google
Tag Manager Tracking Code in the format GTM-
XXXXXXX.

Now, when it comes to debugging a tag, it is fairly simple

with the Google Tag Manager Interface. We will use the
Basic Google Analytics tag for the demonstration. We are
assuming that a Google Analytics Account already exists.

CREATING A BASIC GOOGLE ANALYTICS TAG

In Google Tag Manager, to create a tag, there are various

steps involved. To get into the details of each one of them,
let us consider the following screen.

Step 1 − Click the button ADD A NEW TAG.

A panel from the right will slide to start the process of

creating a new tag. This will show an untitled, blank tag for
you to configure.
Step 2 − Provide a name to your tag. Let us give it the name
– First Tag.

Step 3 − Once done, click the text/icon – Choose a tag type

to begin setup….

Another panel will slide from the right, which will have the
following tag types displayed.

As we have seen in the definition, there are different tags

associated with different analytical tool. In this particular
step, Google Tag Manager requires you to specify the exact
type of tag you wish to create.

You will notice some tag types as follows −

• Universal Analytics
• Classic Google Analytics
• AdWords Remarketing
• Google Optimize

Note − Universal analytics is the enhanced and most popular

version of Google Analytics. However, there are many sites,
which employ Classic Google Analytics.

For this example, let us proceed specify Universal

Analytics.

Step 4 − Click Universal Analytics to continue. The control

will switch back to the previous screen and you will be
required to select what do you want to track. See the
following screenshot for reference.

Step 5 − Check Enable overriding settings in this tag.

Note − We are using this step so as to get acquainted with
Tag Creation at a faster pace. You may go ahead and create
a Google Analytics settings variable without checking the
above checkbox as well.

Step 6 − Open the Google Analytics interface. In Google

Analytics, locate the button ADMIN on the front page.
Under Property section, click Property Settings. You will be
able to see the screen similar to the following.

Step 7 − Copy the Tracking Id. The tracking Id will have the
format UA-XXXXX-X.

Step 8 − Once you have copied the tracking ID, return to the
Google Tag Manager interface. As already shown earlier,
paste the Tracking Id in the associated text box.

Now, we are about to configure the important element of tag

– a trigger.

We are going to direct Google Tag Manager that the tag

should get fired if the page is viewed by the user. In order to
do that, we should have the trigger configured using the next
section on the screen.

Step 9 − Click Choose a trigger to make this tag fire…

A dialog box will slide from the left, requiring you to select
a trigger. It will show the trigger as shown in the following
screenshot.

Step 10 − Click All Pages.

The control will return back to the tag configuration screen.

Click the blue SAVE button at the top right corner. You
have successfully configured your first tag!

Step 11 − Now for the debugging mode, click the

PREVIEW button in grey.
As shown in the above screenshot, an orange box will show
up. This indicates that the debugging mode is on. Access
your blog using the link available.

Step 12 − Now, when you access the blog, you should be

able to see a section on your blog showing the Google Tag
Manager Debug section.

Also, if you observe closely, there is First Tag being

displayed under Tags Fired On This Page. This indicates
that our tag got fired on successful page view.
Step 13 − From the debug section, click Variables. Then,
click Window Loaded on the left panel. This action means
that we are selecting an action for analyzing the variables
loaded as a result of that action.

It will show the Variables section as seen marked in a green

box in the following screenshot.

You can analyze the variables more clearly as we move on

to the next chapter.
Google Tag Manager -
Track Tags
Once you have understood the process of creating a tag, it
makes sense to dive in deep and see how tracking is
achieved using different approaches.

PAGE VIEW TAG

A product marketer needs to understand the count of visitors
for the product website/blog. This is really critical as it helps
understand the visitor trend. It can be to know whether a
particular enhancement/feature added in the website/blog is
appreciated by the visitor, are the visitors accessing the
website on a daily/weekly basis, etc.

Considering ‘Page View’ carried an enormous importance in

understanding the likeability of the website/blog, let us see
how a Page View can be tracked using a tag.

Step 1 − As we have followed the steps in the previous

chapter, let us access the tag section in Google Tag
Manager.
It will show the recently created tag – First Tag.

Step 2 − Click First Tag, it will show the dialog box with
the configured triggers, etc.

As highlighted in the above screenshot, let us focus our

attention towards Tracking ID.

This tracking ID is associated with Google Analytics. When

we start the debugging mode, and visit the blog, it will be
counted as a single page view.
At this particular moment, Google Analytics will record the
page view in its interface.

Step 3 − Debug using Google Tag Manager, and open

the Google Analytics dashboard, under Traffic Sources →
Overview, you will see the following statistics.

This shows that a page view is recorded and the

corresponding page views will be tracked further in Google
Analytics.

LINK TAGS
Many a times there will be certain promotional offers for
which a user may be required to leave the blog or website.
Along with promotions, these can be some third party
surveys that a user may be required to take. These surveys
will yield certain statistics, which will be different from the
data that is coming in via different tags.

For this purpose, it is useful to have tracking enabled on

how many times the link is getting clicked and the user is
directed away from the website. Such links are termed
as outbound links and these links can be tracked easily
using Google Tag Manager.

To demonstrate this, we will be creating a link in our blog.

The above screenshot shows a link called – An outbound

link. This link will be used for tracking in Google Tag
Manager. It redirects to https://www.google.com

Step 1 − Head to the Google Tag Manager workspace. Click

Tags from the left panel. Click NEW button on the page to
start creating the outbound link tag.

Let us name the tag as – Outbound Link Tag.

Step 2 − Follow the same process as the initial tag setup for
having the Google Analytics code entered in the correct
field – Tracking Id.

Step 3 − Select Track Type field as Event. You will be able

to see the following options further.
These options are in accordance with Track Type – Event.
Notice that these options won’t be available at all under
Track Type – Page View. This is because, as we are
attaching the Google Analytics code with the Google Tag
Manager, to see the details of the event in real time, we need
certain parameters.

Step 4 − Fill in the form details as below. Text in bold are

the values to be entered in the textboxes.

• Category – Outbound
• Action - Click
• Leave Label and Value fields blank
• Keep Non-Interaction Hit as False

Step 5 − Next, under the Triggering section, click Choose a

trigger to make this tag fire…

Step 6 − Click the blue + icon at the top right corner. It will
open the custom trigger section. Provide a name to this
trigger as – Click Trigger.

Step 7 − Click Choose a trigger type to begin setup…

It will show the following trigger types as shown in the
following screenshot.

Step 8 − As highlighted in the figure above, click Just Links

under Click trigger type. This will show the different
options to configure the newly created trigger type.

Now, we need to configure the trigger to fire if the clicked

URL has a Page Path as https://www.google.com. Note that
we have configured the link on our blog to redirect to the
same URL.
Step 9 − Configure the trigger as provided exactly in the
above figure.

We want to configure this trigger to fire on Some Link

Clicks when the Page URL equals https://www.google.com.
Once done, the screen should look like the following.

Step 10 − Click the SAVE button to save this newly created

trigger. The screen will return back to tag configuration for
Outbound Link Tag.

Step 11 − Click SAVE to complete the configuration.

As highlighted in the above figure, a complete tag for
outbound link should look like the above.

Now, let us have the tag in action.

Step 12 − From the workspace, click the PREVIEW button.

The debug mode will start.

Step 13 − In your browser, in another tab, open your blog.

The debug window will be shown at the bottom of the
screen.

As shown above, since we have not yet clicked the link, the
tag still appears under Tags Not Fired On This Page.

Step 14 − Click the outbound link as created in the previous

step, the tag will get fired. You can see it appearing under
Tags Fired on This Page.
This concludes the approach for creating a tag for an
outbound link to track the links on the blog/website.

EVENT TRACKING
Event tracking stands for any action that is different than a
page load. The browser has a specific response to any action
that you take on the page. For instance, the action can be as
simple as clicking a link or submitting a form to a complex
one such as tracking file views and downloads.

With the Google Tag Manager, you can easily track the
events generated in the browser. It records the responses
from the browser for potential action, thereby getting the
particular event track easily.

We will use the above example to see event tracking in

action. In the previous example we have created a link,
which redirects away from our blog. In this example, we
will create another link, which will be pointing towards our
blog. We are using this example, in order to demonstrate
how the links going away from the blog can be tracked
seamlessly.

I have created a link called Internal Link in the blog. This

link will redirect to the same blog page.

Let us go to Google Tag Manager Dashboard and create a

new trigger for the outbound link. We will be using in-built
variable Click URL for this. Using Click URL, we are going
to detect whether the link being clicked, is redirecting the
user outside the blog or not.

To enable in-built variable Click URL, following are the

steps.

Step 1 − Under Variables section, click the button in red,

CONFIGURE. It will show the available built-in variables.
There are different built-in variables available, which are –
Pages, Utilities, Errors, Clicks, etc.

Step 2 − From the Clicks category, check the box Click

URL. This will show the available variables in Click URL
immediately. See the following screen for reference.
Now that the variable is configured, we can configure the
trigger.

The trigger will be enabled when a user clicks all the URLs,
which are redirecting outside the blog. Creating this trigger
is fairly simple.

Step 3 − Go to Triggers, click New. Provide a name to the

trigger. Let us say, the name is – External Link Trigger.

Step 4 − Under Trigger configuration, click Choose a

trigger type to begin setup…

Step 5 − From the available options, under Click, select Just

Links. See the following screen for the steps so far.
When Just Links is clicked, you are directed back to the first
section, where you will need to provide the URL exception.
Following are the steps to do it.

Step 6 − For the option, This trigger fires on, select Some
Link Clicks.

Step 7 − Under the conditions, select Click URL, which

should be previously selected. Select the value does not
contain from the condition options.

Step 8 − In the text box for value, enter a value which is

your blog URL. In our case, we will enter
gtmtutorial2017.blogspot.in. Once finished, the screen will
look similar to the following.
Step 9 − Click the Save button in blue to save your new
trigger.

Now it is time to configure our tag, which we will use to

track the click event, which will redirect the user outside the
blog.

Step 10 − Open the Tags section, click the NEW button.

Provide a name to your tag, let us call it – External Link
Tag.

Step 11 − Under Tag Configuration, click Choose a tag type

to begin setup… Select tag type as Universal Analytics and
enter the following details on the screen.

• Under Track Type, select Event

• For Category – enter External Link
• In Action – enter Click
• For label, click the options icon
Step 12 − On the side panel displayed, select Click URL.

Step 13 − Once done, check the box Enable overriding

settings in this tag. In the Tracking ID text box, enter your
Google Analytics Tracking Code.

Step 14 − Scroll down to configure Triggering. We are

going to use our newly created trigger.
Step 15 − Click Choose a trigger to make this tag fire…It
will display the available triggers. Select External Link
Trigger, which we have created earlier.

This concludes the configuration of the tag. Click the Save

button.

Step 16 − Now, to debug the tag, click the Preview button in

grey. It will start the Google Tag Manager in the debug
mode.

Step 17 − Go back to your blog and refresh the blog for

Google Tag Manager Debugger to start. Considering the
example above, there are two links being shown in the page.
Also, there is the External Link Tag, which is shown under
Tags Not Fired On This Page.
Now it is time to test the configuration of the tag. We will
use Ctrl + Click in both the scenarios to check whether the
tag is fired. Ctrl + Click will have the link opened in the new
tab, without refreshing the current page. We need to have
the page intact, as we won’t be able to see the tags fired, if
the page refreshes.

Step 18 − First, use Ctrl + Click on the Internal Link as

highlighted in the above figure. Ideally, the tag should not
get fired, as the link is directing the user on the same blog
itself.
As shown in the above figure, under Summary section in the
debugger, you will see another event – gtm.linkClick. This
means that GTM has recorded the click event.

But, you won’t see any change in the Tags Fired On This
Page section. This is because we have configured the tab for
outbound links.

Step 19 − Now Ctrl + Click An outbound link (this was

created in the previous section).

Observe the summary section, it will again get updated for

another event – gtm.linkClick.

As shown in the above figure, for the next event recorded,

there will be a tag fired – External Link Tag. You will be
able to see it under Tags Fired On This Page.

In this way, you can employ event tracking with Google Tag
Manager and configure tags for critical data that you need
from your website/blog.
FORM TRACKING
More often than not, on any website/blog you will see a
form, which will capture certain details from the user. As a
product marketer, it becomes tedious to know whether the
Form is getting used by the visitors.

It can be a good approach to know how many times a user

has filled in information on this form and how many times
they came across an error. With Google Tag Manager, you
can easily track the form submissions. This section will take
you through the process.

For this example, we will have a Contact Us form created on

our blog.

Step 1 − For blogger, to have a contact form created, use the

Layout option → Add a Gadget. Once you click Add a
Gadget, you will see the following screen, where you will
find Blog Search gadget. Click the blue plus (+) icon to
insert it in the blog.
Once done, it will show up on your blog as shown in the
following screenshot.
Now, let us configure the related triggers and the tag.

To start with the trigger, we will follow the same steps. We

will first add enable a built-in variable called Form ID, then
we will create a trigger which will utilize this newly created
variable.

Once done, we will use this new trigger to configure a tag

for tracking the interactions with the form.

To enable the built-in variable Form ID, following are the

steps.

Step 2 − Under Variables section, click the button in red,

CONFIGURE. From the Forms category, check the box
Form ID. This will show Form ID in the available variables
immediately. See the following screen for reference.
Now that the variable is configured, we can configure the
trigger.

The trigger will be enabled when the user submits any data
in the Contact Us form.

Step 3 − To do so, go to Triggers, click New. Provide a

name to the trigger. Let us name it as – Form Submission
Trigger.

Step 4 − Under Trigger configuration, click Choose a

trigger type to begin setup…

Step 5 − From the available options, under User

Engagement, select Form Submission. See the following
screen for the steps so far.
When Form Submission is clicked, you are directed back to
the first section, where you will need to provide the Form
ID.

Step 6 − For the option, This trigger fires on, select All
Forms.

Once you are done with the above step, it will enable
tracking for all the forms submitted on the blog page. You
can also use a specific Form ID, which can be configured
when you created your blog.

For configuring a specific Form ID, you may take the

support of your website/blog developer to get more details.
After completion of these steps, see the following screen for
complete reference.
Step 7 − Click the Save button in blue to save your new
trigger.

Now it is time to configure our tag, which we will use to

track the click event that will redirect the user outside the
blog.

Step 8 − Open the Tags section, click the NEW button.

Provide a name to your tag, let us call it – Form Submission
Tag.

Step 9 − Under Tag Configuration, click Choose a tag type

to begin setup… Select tag type as Universal Analytics and
fill the following details −

• Under Track Type, select Event

• For Category – enter Form Submission
• In Action – enter Form Submitted
• For label, click the options icon
Step 10 − On the side panel displayed, select Form ID.

Step 11 − Once done, check select Enable overriding

settings in this tag. In Tracking ID text box, enter your
Google Analytics Tracking Code.

Scroll down to configure Triggering. We are going to use

our newly created trigger.
Step 12 − Click Choose a trigger to make this tag fire…It
will display the available triggers. Select Form Submission
Trigger, which we have created earlier.

This concludes the configuration of the tag. Click the Save

button.

Step 13 − Now, to debug the tag, click the Preview button in

grey. It will start the Google Tag Manager in the debug
mode.

Step 14 − Go back to your blog and refresh the blog for

Google Tag Manager Debugger to start. There will be the
Form Submission Tag, which is shown under Tags Not
Fired On This Page.
Step 15 − Now interact with the Search This Blog form by
entering some values in it. Let us type in First, as our first
blog post contains the word First.

Step 16 − Click Search. The new event will be seen under

Summary, and the Form Submission Tag will show up
under Tags Fired On This Page.

In this way, we can have Form Submission Tags created

using Google Tag Manager.
Google Tag Manager -
Organize the Interface
Along with creating the tags and managing the associated
triggers and variables, Google Tag Manager has some more
features to offer. This includes the housekeeping stuff such
as organizing users, folders which are used for organizing
the tags as per the desired order, etc.

In this section, we will get an overview on how to manage

the users and different folders related to the tags.

USER MANAGEMENT
It is not an uncommon scenario for a product marketing
team to use a single Google Tag Manager account to
manage different marketing campaigns. There will be
different roles, which will have certain permissions such as
creating a tag, deleting/modifying a tag, creating another
user, etc.

User Management provides a full-fledged portal for

managing the users utilizing GTM features. User
management works at two levels −

• Account Level
• Container Level

To access User Management, click ADMIN from the top

left menu bar.
As shown in the following figure, you will be able to see
User Management associated with Account and Container.

The important difference between the two is – if you

provide access to a user at an account level, the user has an
access to all the containers under that account. Whereas, if
the access is provided to the user at a container level, the
user can modify/add/delete the tags under only that
container.
To see the details of what all access levels are available,
click User Management under the Container
level (highlighted in yellow above).

This will show the available accounts with the permissions

they are provided with. Mostly, it will be the Google
Account that you are using to log in to GTM.

Click the NEW button in red. It will show the following

screen.

As shown in the figure, you can add an email address of

your choice, to whom you want to assign permissions to
access and then provide the desired permissions at the
container level.

Following are the available permissions −

• No Access − Block the user from accessing the

container tags.
• Read − The user will be able to only read the tags.
No modifications or delete operation can be
performed.
• Edit − The user can add/modify/delete the available
tags.
 • Approve − The user has an elevated permission to
approve the tags to the live environment. More on
environments later in the tutorial.
• Publish − All permissions, similar to an admin user.

This concludes the overview of user management at the

Container level.

At the account level, one can configure a user as a general

user or admin user.

Similar permissions can be allotted to the user being added;

only difference is – the user will have an access to all the
containers under this account.

This concludes an overview of user management at the

account level.

FOLDERS
Folders are required especially when you have numerous
tags and triggers in your account. Folders can prove useful
when you have such a large number or tags/triggers to
handle.

For organizing the tags and triggers in these folders, one can
use his/her own creativity. The folders can be created on the
basis of different application areas or the users or maybe the
purpose why they are being created. The produce marketing
team can take their own decision of having a specific folder
structure in place.

Another way of looking at folders can be from an aspect of

analytical tools in use. On the basis of the analytical tool,
one can create a tag, which will be helpful in the long run.

For creating different folders, click Folders from the left

panel. You will see the following screen.

The tags created till now will be displayed on the screen.

You may have the tags organized by creating different
folders using the option – NEW FOLDER displayed on the
top right corner of the screen.
Once you click NEW FOLDER, a quick popup will open as
follows.

From the previous screen, you can always move the tags as
per your requirement into the desired folder.

This concludes the introduction to creating folders in

Google Tag Manager.
Google Tag Manager -
Publish a Tag
We have been creating, modifying, and debugging the tags
in our debugger environment. Till now, we haven’t seen the
tags live on our blog.

To have the tags live on the blog, we need to Publish the

tags. We will want to have the tags Published than to have
Preview mode always.

Publishing the tags is fairly simple.

Step 1 − Click the SUBMIT button at the top right corner of

the screen.

It will show the following screen.

Step 2 − Enter an identifiable Version name so that it can be

easily understood for the changes made.
With the version description, you can be as elaborate as
possible on the changes/additions of the tag in that particular
version.

Step 3 − Scroll down to the Workspace Changes, you will

see all the changes made in the tags, which are unpublished
or in the PREVIEW mode.

Similarly, under Activity History, you can get an exact

understanding of the changes/updates that were done in the
account since the beginning of time.

Step 4 − Provide a version name, description. You might

want to provide the version name as First Version and you
can provide the description as First Google Tag Manager
Update.

For the moment, we will leave Publish to Environment as

Live. This is because we don’t have any other environment
apart from Live yet.
Step 5 − Click PUBLISH and you will be presented with a
summary for this particular version.

This is how you can publish the changes done in the

workspace for Google Tag Manager.

You can use a Google Chrome plugin – Google Tag

Assistant to see the tags getting fired without the preview
mode on.
CREATING ENVIRONMENTS IN GOOGLE TAG
MANAGER
There are different ways in which we can configure an
environment to be used with Google Tag Manager.

Usually, in the software world, the word Environment is

used in the context of where the particular feature is being
tested/reviewed.

Step 1 − To view the available environments in Google Tag

Manager, click ADMIN.

Step 2 − Under Container section, click Environments.

You will be able to see the screen as shown above.

Typically, large software companies have their website

divided in different environments to ease the process of
releasing a feature. Developers work on their development
website, then the feature changes are pushed to the staging
site. Finally, when the changes are verified in the staging
site, the changes are pushed to Live environment.

In the context of Google Tag Manager, there is a flexibility

to add different environments, which will allow you to
validate your tag completely before they are on the Live
website. For this tutorial, we will create an environment,
called Dev environment. Following are the steps.

Step 3 − Click the NEW button in red. You will be able to

see the following dialog box.
Step 4 − Fill up the details as shown in the above figure. We
will pretend that our dev site is the same site where we are
working right now, in order to push the changes
accordingly.

Step 5 − Click CREATE and you will see a prompt as the

following.
As shown in the above figure, the prompt shows two ways
to use the environment.

• Using a Share Preview Link − This link comes

handy when you want to circulate the changes in
your tags to your team members, when there are
larger teams.
• With a snippet − If you are clear that a particular
site is going to work as your development/staging
environment, then you can use this snippet option. A
snippet for this environment is available, so that you
can reach the website to see any changes that have
been done lately.

Step 6 − Click PUBLISH TO DEV to see these in action.

The next screen will ask for the available changes to push in
the newly created environment.
The changes that are not yet sent to the respective
environment will be shown. Also, the version name is
shown, so that the user is clear which version is being
published to the respective environment.

Step 7 − Click PUBLISH NOW to see the changes available

on your newly created environment. It will show the success
message with a date and time stamp.

From the available list of environments, click the name of

the new environment, in our case – Dev.
The available options to share the environment link will be
displayed, as shown below.
Using any of the above approaches, you will be able to see
the changes in your tag on your development (Dev)
environment.
Google Tag Manager - The
Data Layer
A data layer can be seen as an object holding all the
information to pass and process with Google Tag Manager.
This is a bit technical concept. The term data layer is used to
denote the data structure used by Google Tag Manager for
storing, processing and passing data between your
website/blog and the tag manager.

To elaborate it further, a Data Layer can feed the data into

your analytics tool about your visitor. Taking another
perspective for the definition, Data Layer is actually a list of
business requirements and goals for each subset of the
digital context.

Let us take an example of ecommerce website, business

requirements might include −

• Transactional information, having the details about

what was purchased
• Visitor data, regarding who purchased
• Other details about the purchase, such as where was
the purchase made and at what time
• Lastly, the information about other factors, such as
whether the visitor subscribed for the email updates
or not

So, in a nutshell, the data layer carries information that can

be used by different tools/users/stakeholders as required.
In Google Tag Manager, dataLayer is a JavaScript array. It
consists of key-value pairs. Following is a quick example of
dataLayer with different data types −

dataLayer = [{
'products': [{
'name': 'Western Cotton',
'tuning': 'High-G',
'price': 49.75
},
{
'name': 'Fenda Speakers',
'tuning': 'Drop-C',
'price': 199
}],
'stores': ['Hyderabad', 'Bangloer],
'date': Sat Sep 13 2017 17:05:32 GMT+0530
(IST),
'employee': {'name': 'Raghav}
}];

Here, we have different values such as an array of objects

(the products), numerical values (the price), an array of
strings (stores), a date object and an object (name).

On another note, when you place Google Tag Manager

Container Code in your website, the data layer is
automatically created.

In itself, data layer is a pretty complex concept to

understand in the first go. This chapter will provide more
insights on how to interact with the data layer.

DATA LAYER EVENTS

A quick example of data layer event can be, a newsletter
signup form, which can’t be easily tracked with automatic
GTM listeners. A website developer can support you to push
a data layer event once a new subscriber has entered his/her
email on your website. The code of this event should look
like this −

push({‘event’: ‘new_subscriber’});

If you require, you can ask your developer for some more
information, such as the form location. This is required if
there are more than one form on your website. It can be
achieved using the following code.

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
'formLocation': ‘footer’,
'event': new_subscriber
});

Also, Google Tag Manager pushes a certain set of values to

the data layer of web applications by default. These values
are −

• gtm.js − Pushed to the data layer as soon as Google

Tag Manager is ready to run
• gtm.dom − Pushed to the data layer when the DOM
is ready
• gtm.load − Pushed to the data layer when the
window is fully loaded

INSPECTING THE DATA LAYER

As we already know by now, there are certain events that
are created as a result of any interaction on the screen.

For instance, let us consider this simple page load event. To

look at the events, you need to have the debugger running.
Once you have the debugger running (in preview mode),
visit the blog. If you look at the summary window at the
bottom left corner, this is what you will see −

Step 1 − Click Window Loaded and then Data Layer.

The information shown in the Data Layer tab is about the

Window Loaded event.

It is shown as – {event: ‘gtm.load’, gtm.uniqueEventId: 3}

Further, if you want to take a closer look, you need to take

support from Chrome’s console tab. Inspecting a data layer
becomes easy when you know how to use Chrome debugger
in the correct way.

Step 2 − When you are on your blog, right-click at any part

in the page. In the context menu displayed, click Inspect.
The panel will be displayed at the right side of the screen,
with Elements tab activated.

Step 3 − Click Console. When in the console mode, click

the top left corner icon to clear all the messages shown. See
the following screenshot for reference.

Step 4 − Once the window is cleared for any previous

messages, type in dataLayer, make sure the capitalization
for L is done. This name is provided by Google Tag
Manager to its data layer. However, your developers may
assign it a different name as and when required.

Step 5 − Press enter after dataLayer. It will show the

following details.
There are three objects, and each object contains some
information. Now, these objects might not be the same for
you, as they are shown in the above screenshot. The
dataLayer is configurable and it is very much in the
developer’s control to configure it as per the requirement.

The values that are present, are due to the Blogger gadget
that is in use at that particular position/space. This is the
reason why there is certain information there.

If you look at object 1, you will notice that the event that is
fired, is – gtm.dom. It is fired by GTM while loading the
page.

In this way, you can inspect the data layer and add
information in it as and when needed.

VARIABLES IN THE DATA LAYER

Now that we are acquainted with the data layer, let us try
and read one of the variables using Google Tag Manager
Interface.

Here, we are going to try and read the event using a data
layer variable.

If we see the above figure, the variable event holds

the gtm.dom. We are going to create a variable from GTM
interface and see how it reflects in the Variables tab under
Google Tag Manager.

Step 1 − In Google Tag Manager Interface, go to Variables.

Scroll down to the user-defined variables. Click NEW.
Step 2 − Provide a name to this new variable, let us call it as
varEvent.

Step 3 − Click Choose a variable type to begin setup…

Step 4 − Select Data Layer Variable from the list.

Step 5 − When you select Data Layer Variable, you will be

required to provide the name and version.
This name will be from the actual Data Layer of Google Tag
Manager. As mentioned previously, the variable that we will
track is – event.

Step 6 − Enter event in Data Layer Variable Name.

Step 7 − Click SAVE.

Step 8 − Click Preview to see the changes reflected in the

debugger.

Step 9 − Once the page is loaded, click Window Loaded and

then Variables. Scroll to the very bottom of Variables
section, you will see varEvent, as highlighted in the above
screenshot.

As seen in the above screenshot, the value will be gtm.load.

In this way, one can inspect the data layer and capture the
values in the data layer as required.
Google Tag Manager -
Advanced Tracking
It is time to look at some complex scenarios, where you can
track critical elements for the business. We will look into
how to create a custom event, which is not pre-defined or
available by default.

In this chapter, we will look at −

• Implementing Custom Events

• Mouse Scroll Tracking

IMPLEMENTING CUSTOM EVENTS

There will be instances where you might want to create an
event, which is different than the available events in GTM.
To achieve this, we will need to create a custom event,
which utilizes the existing variables from the data layer.

Consider the scenario when we click the Internal Link

created earlier. Let us create a custom event called urlClick,
which will read the data layer variable gtm.elementurl.

Step 1 − To do so, let us create a variable called urlName

from the Variables section. Using the usual process, create
the variable.
Shown above is an example of data layer variable –
urlName.

Now, we will use this variable to create our custom event.

Custom event will be used when we create the trigger. See
the following screenshot for reference.

Step 2 − Create a trigger to fire on the event that is already

present, by clicking the Internal Link. Under Event Name,
specify gtm.linkClick.
Now, let us create the tag.

Step 3 − Follow the same process for creating the tag. Here
are the details −

• Tag Type – Universal Analytics

• Track Type – Event
• Category – Link Click
• Action – Click

Step 4 − For label, use the recently created label, urlName.

Step 5 − Once done, check Enable overriding settings in this
tag. In the Tracking ID text box, enter your Google
Analytics Tracking Code.

When selecting a trigger, make sure you select the recently

created trigger – URL Clicked.

Step 6 − Save the tag. Click Preview to see the changes in

your blog.

Step 7 − Ctrl + Click on the Internal Link. You should be

able to see the gtm.linkClick event in the Summary box.
Also, you should see the tag fired as shown in the following
screenshot.
In this way, we can use the existing events to create custom
events of our own and have successful tracking for the
controls that we want.

MOUSE SCROLL TRACKING

When it comes to engaging the users on the blog, a product
marketer may want to detect a mouse scroll. The detection
of mouse scroll is critical as it will call for further actions,
such as show a newsletter link or trigger a popup that
provides some sort of discount on the product.

Using Google Tag Manager, we can easily track the scroll

event. For this purpose, we need to use a third-party code,
which we will use while creating a tag.

The code is available at this location. We will use it when

creating a tag.

Step 1 − Create a trigger. We will call this trigger – a scroll

trigger.
Refer to the following image for the trigger configuration.

Step 2 − Configure Trigger Type – DOM Ready. Allow this

trigger to be fired on – All DOM Ready Events.

Step 3 − Click SAVE once done with the above steps.

Now let us create the tag.

Step 4 − This time, when creating a tag, select a different

type of Tracking as shown in the following screenshot.
Step 5 − When custom HTML is selected, it will show up a
space for entering the HTML code.

Step 6 − Enter the code as copied from this link.

Step 7 − Scroll down to configure the trigger. The trigger

that we recently created (Scroll Trigger above), needs to be
selected.

Step 8 − Click SAVE.

Step 9 − Now, start the GTM Debugger and refresh the blog
page. You will see two major changes in the Summary and
Tag section.
Step 10 − Now, scroll down to see the rest of the blog, a
couple of more events will get triggered.

• ScrollDistance
• ScrollTiming

These events will eventually be used to detect the location

of mouse scroll and take further action accordingly.
 Donate link: https://paypal.me/sutranxt

Thank you!

Do you want to learn the really advanced

content that we couldn’t include in this
eBook? CLICK HERE