8 Steps To Become An Experienced GTM User
8 Steps To Become An Experienced GTM User
2|Page
The first thing that I want to emphasize here is that this e-book is designed for
intermediate GTM users -- for those who have been already using GTM for at least
six months and find no troubles in the form tracking, conversion tracking, are
starting to get familiar with terms like cookies, auto-event variables, etc.
IMPORTANT
So, if you are starting with GTM (or have just recently jumped on this train), I
suggest you postpone reading this e-book.
Here are several questions to test your knowledge:
• Do you know what auto-event tracking is?
• Do you know what data layer is?
• Do you know both ways how to enable auto-event listeners in GTM?
If you answered NO to at least one of these questions, it’s too soon for you to read
this e-book.
I believe that there are still many things (belonging to the beginner zone) that you
should learn first (like the relationships between tags, triggers, and variables, etc.).
My other e-book GTM for Beginners might be a good resource for you.
3|Page
I started using GTM in 2014, and there was almost no information about it
available at that time. Therefore, I had very long, frustrating sessions of trial and
error.
Today, I wish I had taken a course on GTM in the past and got up-and-running
much faster. First of all, back then, there was no GTM course available in the
market.
But there is another (even worse) thing. Even if some GTM course existed back in
the day, I wouldn’t have taken it. Why? Because then I was unnecessarily stubborn
and thought that I could learn things myself.
Now I realize that I was wrong.
I always used to take the long path of self-educating. This choice was mainly driven
by the approach “it’s cheaper that way”. However, after 3-4 years, I realized that
trying to figure out things on your own is a much more time-consuming and
expensive approach.
Yes, I still had my money in the bank account and didn’t purchase anything,
however, the number of hours I’ve spent on self-learning was mindboggling. If I
converted all those hours into monetary value (because I know my hourly rate),
the final sum would be insane, probably 10x or 50x course’s price.
Having someone to teach you a topic X via course can get you quite comfortable
with that topic over the course of several weeks. In comparison, learning
something on your own would probably take me months (and you would still make
A LOT of mistakes along the way that could have been easily avoided if you had a
mentor).
Why am I telling you this?
Because now you have options to take shortcuts in the learning process (unlike in
2014). Don’t repeat my mistakes.
4|Page
I hope that this e-book will work as an introduction to your next step of Google Tag
Manager master.
But if in the future, you get an opportunity to take a real-shortcut (e.g., an online
course, on-premise workshop or something similar (where the instructor/mentor is
teaching you)), consider it more carefully. It may cost you considerably a lot of
money in the beginning, but over the time that investment will pay off.
And now, let’s go to the meaty party of this e-book.
In this e-book, I will briefly explain several topics/areas that you should know/learn
in order to successfully transition from the fresh intermediate user to a more
experienced GTM professional.
5|Page
Data Layer is the essential component of Google Tag Manager. Without it, event
tracking would not work, and the majority of variables within GTM would be
useless.
I will not go into the introduction of the Data Layer because you should
already know that. After all, this e-book is for intermediate users, and the
topic itself is introduced in the beginner zone.
Here are the core things you need to know about the Data Layer (there are more,
but just make sure that you first get the fundamentals right).
Data Layer is an intermediary layer between your website and Google Tag Manager.
If you want to have some information sent to Google Tag Manager (e.g., purchase
data), it first must be sent to the Data Layer. From there, GTM will take the info and
process it based on your configuration.
6|Page
Data Layer is not a standard/default part of the website. It is usually bound to Google
Tag Manager. Websites without GTM usually don’t have the Data Layer. When GTM
loads, it automatically initiates the Data Layer. Also, a developer/plugin can
create/set one up.
The only working way to add data to the Data Layer is via .push() method. With
help of dataLayer.push(), events and data points can be sent to the Data Layer.
From there, GTM can take that information and use it in tags, triggers, and
variables.
By pushing data to the Data Layer, you’re feeding Google Tag Manager’s internal
data model, and with help of Data Layer variables, you can access that data and
reuse in your tags/triggers/variables.
7|Page
If some custom data is pushed to the Data Layer, Google Tag Manager does not
recognize it by default. I mean, you will not be able to use it as a variable out of the
box.
…but by default, it will not be visible in the Preview and Debug tab’s Variables
section, therefore, you cannot use them in your tag management.
8|Page
However, data can be stored in different structures. Therefore, there are some
additional rules you need to keep in mind.
If key in the Data Layer is a primitive value Just enter its name in this field
(regular text (string) or number)
If data is nested in the Data Layer You need to separate every level with a dot
(also, this is case-sensitive)
9|Page
Remember, we’re just scratching the surface of the Data Layer here, and,
unfortunately, we will not dive deeper (at least for now). The point of this e-book is
to show you the direction and what areas you should dig into to up your GTM
game.
If I covered all the possible things and edge cases, this would probably be more
than 300 pages (which is way too long for a free e-book).
10 | P a g e
HTML is the language in which most websites are written. HTML is used to create
pages and make them functional. If you see a website element (e.g., button, table,
etc.), most likely, it was created with help of HTML.
When you get started with HTML, you need to learn what are elements, tags, and
attributes.
The example of an element is paragraph, table, heading, etc.
Tags are used to mark up the start of an HTML element, and they are usually
enclosed in angle brackets. An example of a tag is: <h1>
Attributes contain additional pieces of information. Attributes take the form of an
opening tag, and additional info is placed inside. An example of an attribute: <a
href=”https://www.analyticsmania.com”>This is a link</a>
In this example, href is an attribute.
All in all, here’s a picture that shows the relationship of an element, tag, and
attribute.
This is an element
This is an attribute
11 | P a g e
There are various types of HTML tags. To name a few:
• <html> - this tag signals that from here on the code is written in HTML
• <head> - this is where the metadata of the page will go (like keywords, title,
etc.)
• <body> - This is where the content of the page goes
• <h1> - heading 1
• <table> - that’s the table
• <p> - paragraph
• <title> - page title
• <a> - link (a.k.a. anchor)
• and many more…
Every website’s code consists of <head> and <body> (both at surrounded by the
<html>
<html>
<head>
<title> This is a page title </title>
</head>
<body>
<h1> This is a article title </h1>
<p> This is a paragraph </p>
<a href=”https://google.com”> This is a link </a>
</body>
</html>
12 | P a g e
As you can see, there are relationships between HTML elements. For example, in
the previous scheme, the top-level element is <html>, it has two children, <head>
and <body>. <body> has multiple child elements, a heading 1, a paragraph, and a
link.
A link element (<a>) contains an attribute called href. This attribute instructs a
browser where a visitor should be redirected after a link is clicked.
HTML elements can contain other attributes as well, e.g., ID, class, etc. I marked
them in different colors.
How can HTML knowledge be useful in Google Tag Manager? There are many use
cases. Here’s one of them:
Imagine that a web page contains an image. That image can be clicked, and a
visitor will be redirected to a pricing page (the image also contains a button
imitation). Here’s an example:
#stockPhotos
That image’s code is:
13 | P a g e
<img class=”full-width-main-img” id=”hero-img” src=”main-img.jpg” alt=”learn
more about the pricing”>
Say that you want to access image’s alt text and use it as a variable (with every
pageview you want to send which exact image was displayed to a visitor so that
you could track which one gets more impressions).
By understanding what element attributes in HTML are, you would be able to
access that alt attribute pretty easily.
In Google Tag Manager, go to Variables > DOM Element and enter the following
settings:
DOM element variable accesses elements that are available on a page. Since our
image has an id attribute, we used the ID selection method. In the Element ID field,
we enter the value of the attribute (hero-img), and eventually, we entered the
value of the attribute we want to access, alt.
14 | P a g e
Once again, we are just scratching the surface of what is possible but I hope that
this example gave you some ideas where to dig deeper.
15 | P a g e
If you code an element with HTML and don’t define style for every individual
element, they might look like this. Here’s an example of how analyticsmania.com
homepage would look without any styling.
16 | P a g e
To sum up. HTML – content. CSS – style.
Here’s an example of a plain HTML code:
<html>
<head>
<title>This is text</title>
</head>
<body>
<h1>Hello world!</h1>
<p>This is my first HTML</p>
</body>
</html>
Once the browser renders this code, the page will look like this:
Thanks to this code, the final result of my Hello world page would look like this:
17 | P a g e
Even though this visually looks terrible, the goal was achieved. The style of an
element was changed.
The key component (for GTM users) in this chapter is a term called CSS Selector.
CSS Selectors allow developers to select certain elements on a page by using a
particular syntax.
In the code below, the CSS selector is h1 (which means that “all h1 elements on a
page are selected”) and a custom style should be applied (color: red and text-
decoration: underline)
If you wanted to apply a style just to certain headings on a page (not ALL of them),
you would need to write a more precise CSS Selector.
How is this useful in Google Tag Manager?
You can use CSS selectors to instruct GTM which elements you are interested in.
Let’s return to the previous chapter’s example, the image that can be clicke (and
then a visitor is redirected to the pricing page).
This was that image’s HTML code:
18 | P a g e
Without it, we wouldn’t be able to select which element’s alt attribute do we want
to access. Or would we?
Thanks to CSS Selectors, we would be able to pick the correct element on a page.
Let’s go back to the DOM Element Variable we created in the previous chapter.
First, you would need to change the Selection Method from ID to CSS Selector and
then enter the actual selector (in the Element Selector field).
Since we are interested in an element of which class attribute full-width-main-img,
the final CSS Selector would be .full-width-main-img
The dot in CSS Selectors means that we are targeting elements based on their class
attribute.
19 | P a g e
First, you need to have at least a very basic understanding of what DOM is in
general. Document Object Model (a.k.a. the DOM) is a dynamic tree-like
hierarchical representation of the website’s document.
Sounds complex, right? Let me explain.
It allows manipulating the website’s document, get values of current website
elements, add new, edit or remove existing ones.
If you go to any website and open its source (e.g., CTRL+U on Chrome (Windows)),
you’ll see the HTML code of the page. This is the code that a developer wrote to
make the website what it looks right now.
20 | P a g e
But it does not look very dynamic.
If you go back to that very same website and open developer tools (Chrome on
Windows: press F12, Chrome on Mac: Command + Option + I), you’ll see a more
dynamic representation of the website’s code. If not, switch to the Elements tab.
Some nodes can be expanded or collapsed (by clicking dark triangles), many nodes
have children that can have their children, nodes can have multiple children, etc.
It’s a dynamic tree-like representation of website’s documents. You’re inspecting
the HTML DOM here.
As I have mentioned before, DOM allows not only to view/inspect website
elements but to manipulate them as well. The easiest and most down-to-earth way
to edit nodes in the DOM is to double-click a certain node and then change its
value or delete/edit/add attributes to an element.
But this is not very scalable and useful. Instead, there should be some better way
to do that, right? Yes. DOM supports a bunch of methods that enable developers
(and you, if you are skilled enough) to add, edit, delete elements.
21 | P a g e
As for reading values, getElementById(“some_id”) method will return you the first
website element that matches a some_id ID. In the screenshot below, you can see
the command (1st line) and the returned element (2nd line).
Another example could be querySelector(), that returns the first website element
that matches a certain CSS Selector defined by you.
And that’s a good opportunity to introduce Google Tag Manager’s DOM Element
variable. This type of variable can access the value of a website element that
matches a condition defined by you.
How is this related to Google Tag Manager?
DOM Element is the variable that uses the DOM to return values of particular
elements you want to access.
Yes, that is the same variable we used in two previous chapters of this e-book.
Reading values of the DOM and using them in your setup is called DOM Scraping.
Don’t abuse it too much because your CSS Selectors in the DOM variable are
fragile, and changes in the website’s HTML code or DOM can break your setup.
The more advanced you become with GTM, the better you will notice the risks.
22 | P a g e
Regex (also known as regular expressions) is a sequence of characters that is used
to search for one or more matches in search pattern. It is a way to look for
patterns in a sentence.
To use Regex in Google Tag Manager, I recommend learning at least the very basic
syntax.
Regular Expressions use symbols that have “special powers”. Here are the most
common and basic ones:
23 | P a g e
actually match the question mark “?”. In this
case, \ is called “escape” character.
Why? Because if a trigger contains multiple conditions, ALL of them must be met
(and a Page Path cannot simply contain all those three conditions)
24 | P a g e
What alternatives do you have?
• Option A: Create three separate triggers to a single tag. If one of the triggers
is activated, the tag will fire
• Option B: Use Regex in a single trigger (which is a much better option) where
Page Path matches RegEx /pricing/page(1|2|3)/ (or some other pattern that
meets your needs).
This will make your container cleaner and more optimal.
Another use case (but not the only one) where Regex is also useful is Regex Table
Variable.
25 | P a g e
This topic is the most complex from this e-book. I will not dive deep into it because
there are separate books and courses dedicated just to JavaScript. Therefore, you
should not expect me to explain it in chapter of a small e-book.
Also, I am still in the progress of learning it.
My point in this chapter is to say that even knowing a little about JavaScript is
already valuable in Google Tag Manager.
You can use it to get custom data from the page or do manipulation to the data
you already have.
To illustrate my previous statement, let me show you a variable called JavaScript
Variable (not Custom JavaScript).
I promise I’ll try to explain this as simply as possible, so please, bear with me.
Before we start digging deeper, you need to learn about the scope. In JavaScript,
there are two types of scope:
• Local scope
• Global scope
Variables declared within a JavaScript function, become LOCAL to the function,
meaning that they are not accessible (visible) from outside the function. Take a
look at the example below:
// code here can not use authorName variable
function myFunction() {
var authorName = "Julius";
// code here can use authorName variable
}
26 | P a g e
There is a variable authorName, and it only can be accessed within the function
called myFunction (because that variable is WITHIN the function)
Contrary to that, a variable declared outside a function becomes GLOBAL. A global
variable has global scope: all scripts and functions on a web page can access it.
Let’s use the same code example but place the variable outside the function.
// code here can use authorName variable
var authorName = "Julius";
function myFunction() {
What does it have to do with the JavaScript Variable in Google Tag Manager?
Well, it can fetch values of any global variable which is present at that moment on
a page.
If you want to know what useful Global JavaScript variables are available on a page,
go to the developer console of your browser (here’s a tutorial how to do that on
Chrome), type window, and hit enter.
Click the black triangle near the Window, and you’ll see a list of global JavaScript
Variables.
Here’s an example what useful information I could find.
I’m hosting my Google Tag Manager courses on a platform called Teachable.
I know that previously Teachable was known as Fedora. So my guess would be to
keep looking for variables somehow related to either Teachable or Fedora.
Let’s start playing a detective. Bingo, I see three variables related to Fedora:
27 | P a g e
Since I’m currently interested in user data, I’ll click the black triangle next to
fedora_user to expand it. Bingo, there’s a bunch of data that I could possibly use,
for example, ID, name, etc.
Next, let’s create a JavaScript variable for the id. In GTM, Go to Variables > New
and choose JavaScript Variable.
Let’s remember how we found that data point in the developer’s console. First, we
clicked fedora_user and then id. So the value that we need to enter in the
JavaScript variable (in GTM) is fedora_user.id (every level needs to be separated by
a dot if we are working with JavaScript objects).
28 | P a g e
After you refresh the preview and debug mode, you should see that variable’s
value:
If you are working on a popular website/platform, chances are that someone has
already described how to access that certain data.
For example, in Shopify, a logged-in user’s ID can be found with the JavaScript
Variable ShopifyAnalytics.meta.page.customerId.
How can you possibly know where to find such ID? Try googling it. For example, if
you entered the following search query, you would find your answer regarding
Shopify User ID:
29 | P a g e
If you’re working on a custom-built project, try asking developers. Maybe they will
tell you what is the global JavaScript variable for the User ID.
Other areas where JavaScript knowledge can be valuable is Custom JavaScript
Variables, Custom HTML tags or Custom Templates.
30 | P a g e
You can know all the possible tricks in GTM, but if you don’t properly test your
setup, everything is useless.
I cannot stress enough how testing is important in Google Tag Manager.
And this goes WAY beyond the Preview and Debug mode.
There are three rules that I follow when it comes to debugging GTM
implementation:
1. Check whether a tag fired in the Preview and Debug mode
2. Check whether the network request was sent to your analytics/marketing
tool
3. Check whether the data reached its final destination
You should follow ALL these three rules. I’ve seen too many people relying on just
GTM preview and debug mode, and that, unfortunately, is not a good thing.
#1. By this time, you should already be familiar with the debug mode. Therefore, I
will not dive into the first rule. Let’s move onto the built-in browser’s tools.
#2. Check the Network tab in your browser’s Developer Tools. In developer tools
(on windows, you can press F12 while using Chrome), go to the Network Tab to see
the list of requests that your browser has made on that page.
You can locate a specific type of request by using the filter feature. For example, if
you’re debugging Facebook Pixel requests, enter facebook.com/tr/ to see the
requests sent by Facebook Pixel.
If status codes are 200, this means that everything is great. Sometimes internal
redirects are possible, so 307 status code is also fine, as long as you see other
requests getting the 200 OK.
31 | P a g e
Another way how to check the requests is to use Helper browser extensions. For
example, Facebook Pixel Helper is built to help you debug your Facebook Pixel
tracking codes and whether they were successfully sent.
#3. Check the reports of your marketing/analytics platform ASAP. This sounds like
an obvious thing; however, sometimes, it is still overlooked. If they exist, always
utilize real-time reports:
• For example, in GA real-time reports, you can debug page views, events,
conversions. When your tag is fired in the Preview and Debug mode, check
the real-time reports, and see if the data is displayed there. Keep in mind
that custom dimensions, custom metrics, e-commerce data are not available
in RT reports.
If the platform you’re using does not offer real-time debugging, check their regular
reports regularly until your data comes in. If you notice mistakes, fix them as soon
as possible.
Although there are many more tips related to GTM debugging, these three rules
are the fundamentals/essentials that should always come first.
32 | P a g e
Over the last several years, a major shift has been happening in the digital analytics
space:
• Various privacy-related regulations are launched in different parts of the
world (GDPR, CCPA, etc.)
• Browser creators constantly implement new privacy-enhancing features
• It’s more important than ever for businesses to control what kind of data do
they collect and for what purpose do they do that
As a result, a rise in popularity of server-side tagging has been noticed and it
continues to grow. Especially, when Google Tag Manager introduced this feature in
its own stack in early 2020 (although, this concept is not new).
What is server-side tagging? It is a technique that allows business to send
analytics/marketing data to their own server from their website and then that
server sends the data further to tools like Google Analytics, Facebook Pixel, etc.
33 | P a g e
• Businesses have more control over what data is collected by third parties
(like Facebook)
• You need to load less of tracking codes on your site (thus your page speed
performance increases)
• Various privacy-enhancements (like adblockers or Apple’s ITP) have lesser
impact on your data quality
However, server-side tagging introduces additional technical topics that
marketers/analysts should learn in order to understand how to work with it. And
let me tell you – it’s not simple. You will need to have some understanding of how
the web works in general, get familiar with the concept of HTTP requests, their
main components (like headers, body).
You will need to get familiar with what “serverless” means, what is Google Cloud
Platform and App Engine.
Also, server-side tagging in Google Tag Manager introduces a new concept called
Clients. They are the most important part of SGTM setups that is responsible for
accepting the incoming requests to your tagging server.
There’s a lot to cover and you could start with this tutorial (that also includes a
video walkthrough).
34 | P a g e
This is a little bonus chapter that serves as a reminder that multiple GA features
are very challenging to implement.
If you master them, your value (as a digital marketer/analyst) will massively
increase. You will be able to charge your clients more for them, or you will be able
to complete those tasks faster.
To prove my point, take a look at online communities and forums. You will notice
that those challenging topics appear more often when someone is asking for help.
So, what are those topics?
• GA4 Ecommerce implementation
• iFrame tracking
These two are the biggest headaches for intermediate Google Analytics and
Google Tag Manager users.
I will not explain how to implement them (in this e-book) because every topic
would require a separate e-book. This little chapter serves the purpose of a
reminder.
If you are an aspiring digital marketer or analyst, and you often work with the
implementation of tracking codes, these topics should eventually become one of
your top items in the “To learn” list.
Personally, after learning them, I noticed an improvement in my business bottom
line. I started to charge more for the setup and was able to implement it faster
(hence accept even more projects to implement/fix such issues).
35 | P a g e
The goal of this e-book was to show you further direction, what topics to learn
next if you want to become a Google Tag Manager professional.
If you’re coming from a non-technical background, remember: it is not necessary
to be an expert at each of those topics (e.g. Regular Expressions, HTML, etc.).
It’s perfectly fine to know the basics to feel the boost in your capabilities.
Of course, the more you know, the better you perform. But even taking a small dip
in every of these topics will definitely help you.
If you feel overwhelmed by this list and how much you still need to learn, do not
fear. You are not alone. We have all been there. Just try to dedicate at least several
hours a week, and you’ll definitely see some progress.
Impossible to find spare time? Here are my tips on how I find time to keep
learning. I’m not an expert in optimizing my time and getting the most out of it. On
the other hand, my small efforts are still much better than doing nothing at all.
Also, if you’re looking for a shortcut and a step-by-step system to get better at
GTM, consider enrolling in my Intermediate/Advanced GTM course.
36 | P a g e
Julius Fedorovicius
Founder of Analytics Mania
julius@analyticsmania.com
@fedorovicius
www.analyticsmania.com
37 | P a g e