google tag manager (manual in english)
Embed Size (px)
DESCRIPTION
TRANSCRIPT
Google Tag Manager Not for programmers
A quick guidebook to Google Tag Manager for marketers and other
professions not connected with programming.
LCS & CSI Poland Warsaw, 2014
2
Introduction Thank you for your interest in this guidebook to Google Tag Manager, which is more and
more often implemented on websites, across all over the world. The main aim of its
installation is usually for a marketing department to become independent from other
company’s departments (like IT) and to speed up changes on a website within marketing
and analytics measurement processes.
However, to be able to become really independent, one should know how to use this tool. It
is often connected with technical issues, which may not be very well known to everyone. A
marketer does not have to be a programmer or a technical person, at last.
An idea has arisen on this field to explain the technical subject to non-‐technical people in
the least technical way ;).
Please notice, this guidebook is not official manual approved by Google and does not
include all options and does not describe all possibilities of GTM. It is to give the concept
what you can do with it, understand its working and make use of it in the most popular
cases. A reader can learn more and develop himself in this area, if she/he wants.
All information about mistakes and ideas for additional chapters are welcome J
Have a comprehensible reading
Przemek Modrzewski
Senior Analytical Lead
3
Contributors The e-‐book was created in cooperation of couple of people from Poland. Thanks to huge contribution of team members it was possible to write this ebook. Special thanks for help and contribution to:
• Mariusz Gąsiewski
• Paweł Matkowski
• Jacek Ewiak
• Piotr Rudnicki
• Maciej Jerzak
DISCLAIMER
This quidebook is NOT any official manual approved by Google. This is private work of
author and contributors. Please don’t treat any statements in this material as official
statement of Google.
4
Table of Contents
Introduction ........................................................................................................................... 2
Contributors ........................................................................................................................... 3
Tag manager -‐ introduction .................................................................................................... 6 How does GTM work ? ............................................................................................................................................................. 7 Google Tag Manager structure ............................................................................................................................................. 8 What is a container? .................................................................................................................................................................. 9 What are tags? .......................................................................................................................................................................... 10 What are rules? ......................................................................................................................................................................... 10 What are macros? .................................................................................................................................................................... 11
Google Tag Manager on the website ............................................................................................................................... 12 Google Tag Manager installation – step by step ........................................................................................................ 12 Step 1 – Create a GTM account .......................................................................................................................................... 12 Step 2 – Create the first tag ................................................................................................................................................. 16
Installation of basic scripts on the website ........................................................................... 22 Installation of Google Analytics statistics with GTM ............................................................................................... 22 The first rule in GTM ............................................................................................................................................................... 28 Testing a newly created tag ................................................................................................................................................ 30
Installation of Google AdWords conversion tracking with GTM ........................................................................ 33 The first contact with macros in Google Tag Manager ........................................................................................... 38 What does the macro consist of and how is it created? .......................................................................................... 39
Implementation of Google AdWords remarketing with GTM .............................................................................. 40
Google Tag Manager – advanced cases of use ....................................................................... 45 Data Layer – what is it and what is it used for? ......................................................................................................... 45 What is Data Layer? ............................................................................................................................................................... 45 How does Data Layer look like? ......................................................................................................................................... 48 Adding variables and values to Data Layer ................................................................................................................. 49
Event tracking in Google Analytics with GTM ............................................................................................................ 52 A button click as an event in Google Analytics ............................................................................................................ 52 More buttons (events) to measure on one website ................................................................................................... 63 Measuring the action on the website with virtual pageviews .............................................................................. 65
Auto event in GTM (auto event tracking) .............................................................................. 69 Auto-‐tagging in practice (introduction) ........................................................................................................................ 69 Auto measuring of clicks on the button (link) ............................................................................................................. 70
A little more about macros in auto events ................................................................................................................... 78 Available macros and their possibilities ....................................................................................................................... 80 Auto-‐Event Variable ............................................................................................................................................................... 81 Macro Constant String ........................................................................................................................................................... 83 Macro -‐ Custom Events .......................................................................................................................................................... 83 DataLayer Variable ................................................................................................................................................................. 84 DOM elements ............................................................................................................................................................................ 84 HTTP referrer ............................................................................................................................................................................ 87 Javascript Variable (Custom Javascript code) ............................................................................................................. 87 Random Number ...................................................................................................................................................................... 88 URL macro .................................................................................................................................................................................. 89
5
Lookup Table ............................................................................................................................................................................. 90 Measuring outbound links as auto events in GA ....................................................................................................... 91 Measuring document downloads (e.g. PDF) as auto events in GA ..................................................................... 94 Measuring clicks on images as an event on the website in GA ............................................................................ 96 Cross-‐domain tracking with GTM (UA) ...................................................................................................................... 100 Dynamic remarketing installation with GTM .......................................................................................................... 103 First method -‐ standard ..................................................................................................................................................... 104 The second method – without sending variables programmistically ............................................................ 112
Ecommerce tracking in GA with GTM ......................................................................................................................... 121 Dealing with the bounce rate in Google Analytics (real bounce rate) ........................................................... 124 Tags which are not in GTM .............................................................................................................................................. 128 Using GTM in mobile applications ....................................................................................... 132 Administering tags in application – a few words ................................................................................................... 132 Introducing changes in application (revolution) ................................................................................................... 133 A problem with mobile applications ............................................................................................................................. 133 How does GTM work for application? .......................................................................................................................... 134 What can be changed by GTM in application? ......................................................................................................... 136
A few final thoughts ........................................................................................................... 141
Migration plan to GTM ....................................................................................................... 142
Conclusion .......................................................................................................................... 143
6
Tag manager - introduction
Tag manager is a tool which makes easier to work with numerous marketing codes which
allow tracking, measuring and also marketing actions for users of our website.
Thanks to GTM we do not have to edit websites to make any changes or add new marketing
codes. You need only to paste the GTM code once on our website. GTM answers the need of
control of implementation of different codes on the website by marketing not by the IT
department. We know that for running effective marketing in the Internet more and more
tools connected to our website are necessary.
So far, to introduce anything, change the website in terms of marketing codes, the
intervention of IT department or a webmaster has been necessary. Usually the process was
quite long then. Additionally, lack of understanding how different marketing tools work by
the IT department often caused wrong installations. Another waste of time.
Thanks to GTM, a marketer or other person responsible for marketing actions in the
Internet can, by their own, in a few minutes, add any code which is needed for different
tools working without the need of contact with the IT department.
GTM has also many other possibilities, which I will tell about later in this e-‐book.
7
How does GTM work?
Simply speaking, installing the GTM code once in your service (a code fragment on each
subpage) we can add, edit, delete all marketing tags (remarketing, analytics, conversion
tracking and many others) with no need of editing the website code. All actions take place
with GTM interface in the web which we log in as easy as in mail or Google Analytics. It
gives control over marketing codes for people who are not related to the IT department
while website security will not be at risk. It also significantly shortens time needed for
changes and reaction for changes which are need while running the campaign in the
Internet and reduces a resources (i.e. IT department) needed every day in marketing
actions (website edition, code changes, tag pasting, etc.).
What is important and should be clear. Switching to GTM not affect any reports and should
not have any impact on data. Of course when implemented correctly.
GTM tool consists of several elements, which we will administer:
● Containers i.e. codes pasted on the website in which all marketing codes (tags) will
be stored.
● Tags – tracking codes which we want to place on the website e.g. Google Analytics,
AdWords conversion codes, remarketing and any other tracking codes, not only
these ones from Google.
● Rules – conditions in which tags are to be fired.
● Macros –macros are used for making the work with tags and rules easier,
automating repetitive actions.
All these elements will be discussed later in this document.
8
Google Tag Manager structure
An account structure of GTM tool consists of above mentioned containers and tags which
belong to them, as well as rules and macros.
When creating the GTM account you can see the menu on the left. There are three elements
in it – tags, rules and macros. All tags (marketing codes added to the website by GTM) and
rules and macros created by us will be stored here. Creating each of these items takes place
with the help of menu in the center of interface, where we see button “new”. We have said
in short, at the beginning, what elements of the GTM account are and what they are used
for, now let’s explain this in details. So, once more, what actually containers, tags, macros
and rules are.
GTM account
Container
Tags Rules Macros
9
What is a container?
All tags are stored in the container. The container is a set of all tags which are used and
pasted on the same website with GTM. The container should be pasted on every webpage
of our website, similar to normal tracking code e.g. Google Analytics. Only then we can add
tags of every tracking other tools, e.g. Analytics or Adwords from the level of GTM interface.
In this way, we edit our website only once, paste a container in the right place (the best
10
directly under the tag <body>, which opens website content) and then all other codes are
added to website through the container with no need of interference in a website’s source
code.
Remember! The container should be installed on each subpage of our service. As, for
example, Analytics code. It is so important that in the case of omitting any subpage there is
no possibility to add tags with GTM on it. That’s why we will not be able, for example, to use
Analytics code on it, if we want to install a tracking code with GTM.
What are tags?
Tags are tracking codes which we want to paste on a website with the GTM tool. The Tag is
a script, e.g. Google Analytics that we paste usually in the website’s code. It can be also
AdWords conversion tag, remarketing tag or other marketing tool tag which require adding
some fragment of the code on our website.
What are rules?
Rules are nothing else than principles when a given tag is to be fired in the container. For
example, if we added a tag of AdWords conversion tracking, we would not like to fire this
code on each subpage of the service but only on the website which confirms doing a
desired action by visitor – purchase, e-‐book download, filling in a form, etc.
Such a website can be determined as a last website in some process to aim, on which it is
information confirming this action, for example “Thank you for purchase”. Its URL address
can look i.e. www.my-‐website.pl/thankyou.html
To count a conversion in AdWords, when someone achieves the end of conversion path and
11
sees the above website, we must create a rule in GTM which will define a condition of firing
the conversion code. The condition (rule) could say as follows: Fire the Adwords
conversion code when there is a word „thank you” in URL address. In other case the code
will not be fired and the conversion will not be counted.
What are macros?
A definition: Macros are the pairs "name-‐value" whose value is completed in the course of
action. For example, an initially defined macro named “URL” is defined in this way that its
value of actual URL of the website. This is a definition.
Because macros are a bit more complicated elements we will deal with them a little later by
the way of more advanced use of GTM. They are not required for simple standard
installations but we rather cannot ignore its importance.
Summary
So, how can all these elements be easily summarized while explaining their relationships
between them?
Tags are codes which we want to place on the website (e.g. Google Analytics code), rules
are used for defining when a given tag is to be fired (e.g. GA code is to be fired on all pages),
while macros are used for automating and simplifying work with data which are necessary
for tag and rule working on our website.
12
Google Tag Manager on the website
Google Tag manager can be used in the case of most codes which we have to add to our
website to benefit from such mechanisms like statistics of website views, conversion
tracking or other data needed for marketing actions.
In the following steps we will move to the process of correct installation of GTM on the
website by implementing the most popular tags. Meanwhile, we will explain all functions
and concepts, which may not be clear in official GTM help.
Google Tag Manager installation – step by step
Google Tag Manager installation is very simple and includes few steps.
They are: creating an account, creating a container, settings configuration and installation
of first tags i.e. tracking codes. Although the first actions are quite simple, the questions will
arise just surely at the beginning of actions. I will try to foresee them here and explain ;).
Step 1 – Create a GTM account
This action is very simple. You need only to enter https://www.google.com/tagmanager/
and create an account.
First container
What a container is we have explained at the beginning of this e-‐book. Now it is time for its
creation and installation.
13
A good practice is just to name a container as we have named our account but it is not
obligatory. Perhaps we will have soon several containers, so it is important to create the
terminology system. The subject of terminology is essential because our account with time
will be bigger as we will add next tags, macros and rules. We will have to know what they are
used for. Then we have to choose where we want to use our container, on a website or in
the mobile application. It is also one of the advantages of GTM that we can use it to
administer tags, and even administer changes in mobile applications. We will write more
about it later.
If I have a lot of domains, subdomains, so how many containers do I need? How many
containers should I create?
It was my first question, which came to my mind while creating the first GTM account.
Generally, if I have a lot of domains but they are not connected with one another, it is a
good practice to keep the principle one domain – one account -‐ one container. It allows
keeping an order while it does not disturb to administer them because we can administer a
14
lot of GTM accounts from the level of one login and password. It is seen on the image below
where with one login I have an access to many GTM accounts.
Let’s come back to the installation of the first container. Because actually we implement
GTM on the website, we choose an option of a container just for the website. If we
implement tag manager in application, we will choose a suitable version of “mobile
applications”.
When choosing a version for a website an available container will occur to be pasted on our
website.
15
We copy a ready code of the first container as a whole and paste it on our website.
The best place to paste a container code is a place directly below the tag which opens the
website content -‐ <body>. We will find it easily in the website code by the option “search in
content”. We can see how it looks like for a sample website by clicking the right mouse
button on the website content and choosing “Show the website source”.
16
What if we cannot put the GTM code in the place described above?
Remember that the best place for a container, which guarantees the best data collecting, is
the place directly below the<body> tag.
Unfortunately, there is no guarantee that our codes implemented by GTM will be called
correctly if we change the place of the container. Especially I do not recommend pasting the
container code in the <head></head> section because the script includes “iframe” which
can cause an unexpected action of the browser.
Step 2 – Create the first tag As we have seen in the image from p. 13, after creating the first container we can see, at
once, several built-‐in tags at our disposal ready to be installed on our website. As you can
see the most popular Google tags are there, we have also available Doubleclick tags. There
are also several tags of other companies available in GTM. In addition, there are custom
tags (Custom HTML) thanks to which we can actually place every other tag on our website,
even if it is not normally on the standard GTM’s tag list. We will discuss implementation of
the most popular tags in details in a moment. Now we will stop for a while and discuss
settings and functionality of the account, which we will use in a while.
Settings and functionality of the GTM account
While creating the GTM account and the first container we have one user (i.e. ourselves). In
GTM account we can add next containers and users. As we can see below we can use the
“New” button and add a user or a container.
17
According to what I have written before, a good practice is to keep a rule – one account, one
domain, one container. However, we can ignore this principle in different cases.
Many domains we treat as the whole.
Then we can use one container for many domains because rules, tags and macros cannot be
divided between containers. If all domains are to be configured in a similar way, the use of
one container is applied.
Many tags on one domain.
If we have plenty of tags to handle, it is much easier to administer them if we divide them
into two containers or more. It gives us bigger clarity what and when is to be fired and it
makes also that the container itself is less loaded (it is smaller). It is possible to e.g.
segregate tags according to a type and a tool. However it is quite rare.
18
Many users with different access rights
Access rights for users can be granted on the container level. Thus, if we want to limit the
access to other domain or tag configuration we have to use more containers and give the
next users access and rights on their level. We can grant accesses of different rights:
browsing, browsing and editing or browsing, editing and publishing (full access)
Test environment
A good idea is to use different containers while testing implementation of new tags or rules.
Especially for big services, a wrong configuration and loss of data for some period can be
painful. Hence, it is worth paying attention to it during implementation. At the moment of
implementation it is a good idea to make use, especially in Google Analytics and other
statistics issues, of the Lookup Table macro, which we will discuss later in this e-‐book. At
the very end you can find a proposed migration plan to Google Tag Manager.
"Settings" tab
In the "settings” tab there is an identifier of a container and a container name, which we
can change in any time.
"Containers" tab
In the "Containers" tab we can see currently created containers on the account, number of
tags created for a given container, our rights to edit a container and a number of users
assigned to it.
Choosing our existing container, which is called "my test container” in our example, we
proceed to the heart of Tag Manager itself i.e. to container settings.
19
As we can see in the menu on the left, there are tabs concerning tags, rules and macros. We
have said about these elements before and we will talk about them many times further. We
will be using the left menu very often. In the center, we have a view of tags, rules and
macros created by us under grey tabs.
Now the most important thing, at this point, is to understand the matter of a version
and a container type. So, what is all about?
Adding a tag or a rule to the container or editing anything in GTM we will not see changes
on our website. Nothing will be changed. To do this we have to publish the changes. Thus,
in item 3 in the image above we can see a container as unpublished. To publish it and
introduce the changes which will have reflection on our website first we have to create
another version of a container (item 2). Then we can publish the current version. It will
then go live. Any created version can be seen below the menu on the left. You can come
back to the version, if there is such a need. Thanks to versions we do not override changes
irretrievably.
20
In the image from website 17 you can see the item 1, that is a function of preview. The
“Preview” function is one of functionalities used very frequently while adding or editing
tags or changing other settings. Thanks to the “Preview” function we can preview if
changes introduced by us work properly on the website. There are three options of
preview of changes available.
● Preview – It allows us to preview the website with changes applied by us. It means
that after choosing a "Preview” option we can enter our website, refresh it and check if
changes introduced by us work e.g. in the programmers' console in Chrome browser or in
Firebug tool in Firefox. Because we have not created a version in GTM yet, changes on the
website are seen only by us. After switching off the preview option (a yellow bar at top of
the screen), changes will stop working on the website.
21
● Debug – the option probably the most frequently used. It allows to add to “Preview”
option an auxiliary console which will show us if and what tags will work on our website
after creating a new version.
22
● Share – A "Share” option allows us to create a unique url address, which we can send
to a person who is not related to our GTM account. Thanks to this address the person who
will use a link given by us will be able to see also working changes, which are not published
yet in GTM.
Installation of basic scripts on the website
We now know the basic settings of Google Tag Manager. We can move to the installation of
tracking scripts on our website with GTM. We will start from the most standard tags
(scripts) and then we will go into more advanced ways of using this tool.
Installation of Google Analytics statistics with GTM
Using Tag Manager (GTM) to track traffic on the website with Google Analytics is one of
most frequent cases. The simplest installation is not complicated but more advanced
aspects of tracking like e.g. event tracking may cause some problems. Thus, we will deal
also with these more advanced aspects in further steps. Now we will make a standard
installation.
In the previous part of this e-‐book we have created the GTM account and the first container
as well. Just after creating the container we have an opportunity to move at once to create
the first of the most popular tags.
23
We can start to create them at once or do this after installing the container.
We have to do the following:
1. Create Google Analytics tag
2. Define rules for tag to be fired
3. Test a newly created tag
4. Create a version of the container
5. Publish
Let’s start from the beginning.
Ad 1. Create Google Analytics tag
We start creating a tag from giving the name to it. It is important because when there are
many tags it will be easier to administer them if tags have properly matched names.
A good practice is to construct names based on a type of a tool e.g. Google Analytics and a
24
function, which a given tag is to fulfill. The first tag which we will create is the tag named
GA (Google Analytics) – Pageviews, because this tag will be responsible for tracking
displays of our website, that is a basic function of Google Analytics. All other functions of
GA will be also used but we will use next tags to it. We will talk about it, for example, by the
way of event tracking on the website with GTM.
Another step is to choose the kind of a tag from the list of standard tags serviced by GTM.
We choose Google Analytics from a pull-‐down menu. Now we can choose from Classic GA
and a new version that is Universal Analytics. For the need of this example we will use a
classic version. The choice of the second one will not have any influence on the way of
creating and administering the GA tag, so we can choose the version at will.
25
As you can see above we have many more standard tags available, which we can use with
GTM. If our tag is not on the list we can implement it with custom tags. We will talk about it
later.
In the next step we have to give an ID number of our account in Google Analytics, which we
are going to install with GTM. We can find ID in our Analytics account.
***OFF TOPIC***
As you can see in the image above, on the right next to the ID number of the account
introduced in the "Web property ID” column there is a grey "Lego brick”. This “brick"
indicates the possibility of using macros. I have mentioned before that macros are used to
simplify and automate the work. We will make use of a macro for the first time to simplify
using the ID number of the GA account in next cases of using this number ID on our
account.
26
What to do then?
1. Mark the ID number and copy it to the storage (ctrl + C)
2. Click on the "brick” and choose "New macro” at the bottom.
3. Add the macro name that we know what this macro is used for, choose the
type as "Constant String” and a value as an ID of our Google Analytics account. There
are many macro types and with time we will make use of different than “Constant
String”. Now we are not dealing with it.
After that we can use a given macro and thanks to this we do not need to remember the ID
of Google Analytics account with the next tags which are to be installed.
27
It is one of the simplest methods of using macros but thanks to this we will not make
mistake while pasting codes and what is more, we do not waste the time for checking a
given ID many times. I will emphasize once more that Analytics tag has its types, which are
responsible for different types of tracked data. So, if we want to track events and
ecommerce transactions by GTM, we will have to use three tags: for pageviews (standard),
for events and for transactions. We need to give the ID number of the GA account each time
we create a tag for given GA account. Thanks to the created macro we do not have to
remember ID of account. So we used macro for the first time. It is simple way but very
useful and we will use it, in this way, quite often.
***OFF TOPIC***
Let's come back to creating our Tag. After choosing a type of the tag as Google Analytics,
we can see the option “Enable Display Advertising Features” below. This option is used for
switching on possibilities to make use of remarketing in Google Analytics and demographic
reports. In practice this option adds to the code a Doubleclick cookie, which is just
responsible for these additional possibilities of Google Analytics.
28
Track type
I have mentioned about track types a little earlier by the way of creating the first macro.
There can be many track types depending on a kind of a tag. Even in the case of Google
Analytics we have them quite a lot.
Website View tracking is of course a standard type but in the further part we will use next
types, just as we will want to start the following functionalities of Google Analytics with
GTM, such as, for example, event tracking on the website or traffic tracking between
domains. We will talk about it further on.
The first rule in GTM
At this moment we have just almost configured the first tag. The only thing which is left
before testing and publishing it is to add a rule which will allow us to set the rules when
29
GTM has to fire a given tag.
Rules are set in interface in the right upper corner. To be fired each newly created tag will
need a rule. It will not work without the rule. What we have to do is to wonder now when a
given tag is to be fired. Our first Google Analytics tag is to be fired on each subpage of our
service. It is quite obvious because we want to collect data about all pageviews on our.
Then we have to set the rule which will fire a tag on each website of the service.
When we want to add a new rule a window of its choice will occur. We can choose rules
that already exist and which we have created earlier for other tags from the list or create a
new one. In the case of new accounts and containers we have to create rules from the
beginning.
As you can see, a rule, which we are interested in, is already available in standard – fire it
on each subpage. You have to only mark it, and it is ready. In the case of creating new rules
we have to create a rule about conditions, which have to be satisfied so that a given tag
could be fired. We will deal with creating more advanced rules later in this e-‐book by the
way of creating a tag for tracking AdWords conversion where we will describe creating of
rules more extensively.
30
Testing a newly created tag
We have created the first Tag. Before we publish it on the website it is worth testing and
seeing if it works. As you can see below, our version of the tag is unpublished. It means that
changes introduced by us did not come into effect. It is always worth paying attention to it
because it is one of more frequent mistakes which are made by not only beginners. If we do
not publish changes (a new container version) we will not see them live. They could be
seen only in Preview – Debug.
However, before we publish anything we have to verify it. We choose the “Preview” option
and then “Debug” option (see p.17). Let’s move to our website in a new tab of a browser
and refresh the view. Thanks to this a console will occur at the bottom of the screen with
information if our tag is fired under conditions defined by rules.
31
You can see in the console that our tag has been fired. Everything works. Now we can come
back to the tab with opened Tag Manager and publish the version. To do this we create a
new version and publish it. A new version is created now (in our case version no. 4).
Pay attention to a yellow bar at the top with a message about the preview on our website. If
we now go to the website we will see all the time the console at the bottom of our website.
Thus, if we finish the work we can quit this mode (For clarity, a preview mode is seen only by
32
us, other users cannot see it. They could see it if we would sent them a special link to the
preview, which I have written about before).
Next steps
Our first tag has been published. Now, we are ready to install next tags which will be
needed to track our advertising actions and not only. However, before we move to the next
tags, we should mention about a very useful tool which will allow us to see if our website,
or any other, has installed and working tags. This tool is Tag Assistant. It is a simple and
friendly plug-‐in to Chrome browser.
Thanks to Tag Assistant we can easily verify what tags are working on the website being
viewed by us. We will get guidelines and suggestions concerning tag implementation. Tag
Assistant is a tool, which is, we can say, obligatory. Assistant can be downloaded free from
Google Chrome shop.
33
Installation of Google AdWords conversion tracking with GTM
In the previous chapter we managed to create the first tag, which is used for tracking
displays with Google Analytics. We have created the account, the container, then the tag
where we have chosen its type (Google Analytics) and defined when our tag has to be fired
(rule). In this step we will create a tag, which will service AdWords conversion tracking.
AdWords or other conversion tracking
What do we actually need for conversion tracking? We need to measure traffic on the
website or a number of actions which will confirm that the conversion took place. For
example, a classical example of a conversion are displays of the website “Thank you for” –
purchase, contact, etc. That is the website which is displayed only when a user did some
action desirable by us, for example, filling in the form. A classical conversion path seems to
look more or less like this:
Main website -‐> category website -‐> product website -‐> form -‐> payment -‐>thank you.
To track the conversion we need to track the last website -‐ “Thank you” with the special
code called the conversion tracking code. During visits from AdWords ads, the code is
compared to a cookie, which was granted to users at the moment of clicking on the advert.
If data from the cookie matches data from the tracking code, a conversion is counted.
It is a description of working in short, but it is only to remind it and to eliminate the mental
shortcuts of the author.
To track conversions we need an address of the "Thank you” website and we have to place
a suitable conversion code on this website. So far, it has been as follows:
34
1. We have generated a conversion code in AdWords account
2. We have copied the code.
3. We have edited the "Thank you” website
4. We have pasted the conversion code in the code somewhere at the end of the website
just before the closing </body> tag.
Implementation of the conversion tracking code with GTM
At present, thanks to GTM, we do not have to edit the website to implement conversion
tracking code. You only have to create a suitable tag in GTM and give it proper rules. As it is
assumed the code is to be fired on “Thank you” pages. So to create the conversion tag we
have go through a few steps:
1. Create a conversion in AdWords account
2. Create a conversion tag in GTM
3. Give a rule when the code is to be fired
4. Test and publish the new container version.
Ad1. Creating a conversion in AdWords account
To start tracking the effectiveness of our actions thanks to conversions, first we have to
create such a conversion in our AdWords account. We have copied the whole code before
and pasted it onto the website. Now we need only two things – the conversion ID and its
label. To do this we need to preview the code of conversion created by us in AdWords
interface (Tools tab -‐> Conversions -‐> code).
35
Ad 2. Creating a conversion tag in GTM
We already have ID and the label of the conversion, thus, we can move to create a
conversion tag and start to track a conversion with GTM.
36
1. Create a new tag in our container
2. Give it a proper name
3. As a type choose AdWords Conversion Tracking
4. Add copied ID and label from the conversion code generated before (a conversion
value is non-‐obligatory and we do not have to give it).
5. Add a rule when the code is to be fired.
Everything is clear to the step no. 4 but in the step no. 5 we have to stop for a while to say
something more about rules. Remember that we have to track the conversion on the
website of “Thank you” type. In our case the website of this type is the website after filling
in the form whose address is www.test_website.com/thankyou.html.
We want a conversion code to be displayed only on this website. We do not want this code
to be active on any other website. Therefore, we create the rule, which will guarantee this
to us.
We choose "Add the rule” and then "Create a new rule”. As you can see in the image below,
rules are created from two parts: variable (macros) and value. In this case we choose
Conversion value (optional)
37
{{url}} macro which is responsible for considering URL addresses and values of this
variable that is the address of our website – thankyou.html. Between these parts we choose
a logical parameter, which will be a principle of their combination.
.
In our case the whole condition (rule) says as follows: If the URL address includes the
"thankyou.html" string of characters, fire the conversion tracking tag.
Of course we can choose other logical conditions such as "equals”, "does not equal”, "ends”,
etc.
38
Actually we could stop here because we have done everything correctly. Now we have to
test (Debug, Preview) possibly if everything works properly, create a new version and
publish it. Voila, another tag on our website has been installed.
However, there is one detail yet which was not explained here fully. Macros.
Indeed, we have used {{url}} macro. The question is, where is it from and what is it about? I
will try to explain the subject of macros here but their use will be used in most of our
actions in GTM so the subject of macros will be present almost in every example.
The first contact with macros in Google Tag Manager
As I have mentioned at a very beginning, macros are used for automating and simplifying
work with data in GTM. It is quite a general description but it is enough for the beginning.
Macros are, in fact, links between data on the website and our tags, macros may convey
values between a website and individual tags, macros may also be a basis for building
conditions of firing tags (in this way we have used {{url}} macro). In the previous chapter
we have created also the first macro where the value was the ID number of our Analytics
account.
If we want to create the rule in which there are variable values depending on a situation,
we will use the macro then. Like URL addresses have a lot of variables and all are taken
into consideration, we, in our example, have placed the value “thankyou.html.” for our
{{url}} macro.
This all constitutes an opinion that macros are one of the most essential elements, which
we have to deal with in GTM. I think that even if a macro is something abstract at this
moment, it will not be when we will consider many examples.
39
Below, there is a list of all macros, which are currently on my account. A part of them is
standard and present from the beginning on the account, the rest need to be created. So far
we have created one macro concerning ID of Analytics account to make the work easier, we
have used one ready {{url}} macro to define the rule. Now there is a turn to explain more
about macros.
What does the macro consist of and how is it created?
As you can see, the macro always consists of two braces and a name, e.g. {{url}}.
In this way we always use macros within GTM.
Each macro has its type. It can be a macro, which will be used for defining url addresses,
but there are several types of macros. For example, the macro, which we have created at
the beginning for the need of ID account, was simply a string of characters “Constant
string”.
40
As you can see in the image above there are quite a lot of macros. So far we have used two
macros but we need to use a greater number of them.
We will create macros up to date, if we need to combine data from the website with our
tags. Depending on what a given macro will have to provide, we will use such a macro.
I think that we can now put the subject of macros aside. In the next examples we will come
back to it many times yet and explain their work
Implementation of Google AdWords remarketing with GTM
So far we have placed two very important tags on our website – Google Analytics and the
tracking code of AdWords conversion. Another important and what is more, basic code,
which is commonly displayed on pages, is a remarketing code.
In this e-‐book I will not explain what remarketing is because this subject is not the subject
of this publication. We can say only that the remarketing code is a code which is used for
41
bringing back users on the website with the help of adverts, users who did or did not do
any action on our website e.g. did not buy any product and left our service. It is a classical
example but there are lots of applications of remarketing. We will focus here on a technical
side that is on implementation of the remarketing code on particular pages of our service.
Creating a remarketing tag
As in the previous chapters, we create a new tag in GTM and choose its kind as
remarketing. We also have to obtain ID of the remarketing code.
To do this we have to visit our AdWords account and a “Shared library” tab then
“Audiences”. There are, or there will be, our remarketing lists.
Let’s move to an option of displaying the details of the remarketing tag and from there we
have to obtain the ID number of our tag, which will be displayed in a moment in GTM.
42
We come back to Tag Manager and place ID in a suitable place. Only ID is necessary, we do
not have to give labels, which were deleted in common remarketing code. Only if we create
new codes in one account, there will be need of distinguish them with labels.
Labels are used for a unique labeling conversion codes on the account. Now we can use one
code and we create remarketing lists on the basis of this code and rules defining when the
list is to collect cookies. That can be done directly from AdWords account.
Now we have to only create a rule when a given remarketing code will be called to collect
cookies (i.e. website visitors). We almost always start adventure with remarketing from
building the list of cookies of everyone who visited our website. Hence, in this example we
will use the same rule like in the case of Google Analytics (all pages). A code is to be called
on every website of our service. That means that the remarketing cookie will be given to
each browser1, who will visit our service, no matter what subpage of the service it meets.
1 Writing about users or people we have to consider that it is a mental shortcut because we really think
43
A remarketing code can be fired also with the help of other rules. We could, for example,
create a rule, which will fire the remarketing tag, if somebody clicks on the link or a button.
We can create rules, which will fire the list after the time chosen by many others and us.
While reading this e-‐book we will get to know how to create such rules.
While we now fire the tag on every website of our website we can then create remarketing
lists directly on our AdWords account based on fired remarketing tag and rules set on
AdWords accounts while creating new remarketing lists.
In the image from the previous website, we can see also something which is marked as
"Customs parameters”. These parameters are used for creating more advanced conditions
of firing tags. We can, for example, download data from the website about values of a
customer’s basket and depending on its value fire the remarketing tag or (add to the list or
not). We use these parameters in creating a campaign of dynamic remarketing. In this place
our adventure with something, which is called Data Layer, starts.
Data Layer is probably the most important functionality of Google Tag Manager because it
makes data on the website dependent on the website code itself and makes that data from
the website become available for many our tools which we have on the website. We can
compare Data Layer to a universal plug-‐in, which we can buy at the airport, to which from
one side we can connect a laptop and from the other we can plug any socket all over the
44
world.
In the same way data from our website, thanks to such a universal plugin, can be
comprehensible for many tools and there is no need to connect them separately to the
website. We will talk about Data Layer in details later in this e-‐book, so do not worry that
now it can be a little unclear.
Important! At this moment we can create remarketing lists within Google Analytics, which I
encourage to. Thanks to GA we can create lists based on many actions of users of our
website. We do not have to use an AdWords remarketing code then. We create remarketing
lists in the Analytics interface itself. (Until now remarketing is not serviced by Universal
Analytics).
45
Google Tag Manager – advanced cases of use
On previous pages we have discussed the most frequent and basic methods of using GTM in
work with tags on our website. We have installed a basic Google Analytics code, AdWords
conversion tracking and a remarketing code. Most installations end here. However, times
are different now, so we need more and more data to collect and process from our website,
we need to understand more and more precisely what visitors of our website really need,
we need to better aim our marketing campaigns, etc. That is why, surely, there is a need of
additional operations on data which are on our website, we will want to examine every
area of the website, we will want to mark every visitor in a better way.
So, there will be some play at more advanced implementation and use of GTM possibilities.
In this part there are the most useful and popular advanced configurations of tags and
macros, so that we could measure everything on the website and run effective marketing
campaigns. The examples below will help us understand better the work of Google Tag
Manager tool. It will allow us to move easily in it and configure any tags.
Data Layer – what is it and what is it used for?
Before we move to advanced implementations, which I will try to describe step by step, it is
important for us to understand one of the most important functionality of GTM that is Data
Layer.
What is Data Layer?
Data Layer is a combination of structured API Data and interfaces, which allow making use
of a universal format (JSON) of tagging services and sending data to the management
system (GTM). In this way, data are available for many tools with no need to tag the
website each time by separate formats for every tool which we want to connect. Not clear?
46
Neither to me;) So in simpler words.
Having many marketing systems to connect to our website we have to add for each time a
special code (plugin) for every tool separately. Each tool usually works in a different way.
If we have many things to measure (buttons, purchase systems, basket, etc.) and a lot of
tools, there can be quite a big mess on our website. An employee, who dealt with it, quits
his job and we want to change something and we have a big problem. A remedy for such a
situation is just Data Layer which has been compared before to the universal plugin which
we can apply in every country.
47
Data Layer is a kind of "translator” like English for different kind of tools, as far as data on
our website are concerned. Everyone loves their mother tongue but not everywhere in the
world we can communicate in it and we need a universal language. In our world, if we want
or not, it is English. In the world of data it is Data Layer.
Thanks to this information from the website such as events (e.g. button clicks) or values
can be sent to Google Tag Manager just by Data Layer. After that in the GTM tool itself we
create rules on the basis of these values. For example “Call a remarketing code (tag) when
the value of a basket is higher than 300 USD (variable=basket, value=300). Rules can be in
this case created for each tool which is connected on our website. That is the secret of Data
Layer.
Data Layer fulfills also other roles. It allows to separate data from the layer of the website
code (html, css). As we separated the style layer before (how the website looks like) thanks
to CSS language, now we separate data from the layer of the website code itself. While
modifying something on any layer we do not violate the structure of the rest. It gives
security and order in administering of our services.
48
How does Data Layer look like?
Data Layer is built into the container code, if we want to send information from the website
(e.g. events like clicks) you have to only send them to Data Layer with the help of push
method. For example, if we want to send information to Data Layer that somebody has
clicked the button we place the following code fragment in the website code:
<a href="#" onclick="dataLayer.push({'event': 'sample-‐link'});">Sample link</a>
If someone has something in common with Javascript language they know that the push
method simply adds data to the array. And this just happens. For those who are not familiar
with issues of programming, information that method works the same like in the case of
labeling events in Google Analytics is enough.
In this example, at the onclick moment the information to Data Layer that the event
happened with the value ‘sample-‐link’ is sent.
In this way this information can be used by any tag which is installed on the website by
GTM. For example, we can “order” Google Analytics to register onclick events, we can
“order” remarketing tag to mark the user who has clicked on the link (to add them to the
list of users who have clicked on the link) or we can register the conversion in AdWords
with the help of tag of AdWords conversion tracking.
One event label which was sent to Data Layer and many possibilities of being used by many
tools. This is the power of Data Layer.
49
Adding variables and values to Data Layer
In the previous paragraph we have added one variable (event) and one value (sample-‐link)
to Data Layer2 . Such adding data to Data Layer will take place only just when the website is
loaded and the user clicks on the marked link.
However, we can send data earlier during loading the website. In this way tags which will
be loading, while loading the website, will be able to use data sent to Data Layer. We have
to send such data at the moment of downloading the website. We do this by a simple array
(again the element very well-‐known to people who know Javascript). The empty table looks
like this:
The essential fact is that the array of Data Layer is above the container script. It is very
important. Now we will add pairs of information (variable and value) inside this array. We
will explain how it looks like in a moment.
A good example is information if the user who has entered the website is logged in or not.
If, for example, the user is not logged in we add him to the remarketing list of people who
2 Of course we can send such pairs variable : value as many as we want for one event. More in Google Tag Manager help.
50
have not been registered yet. If we have such a case, it is important so that data get to GTM
as soon as possible.
In this situation we have to send information while loading an individual subpage. That is
why we send information about the kind of user to Data Layer.
In this example we added two pieces of information.
variable: “visitor-‐type” of value – “unregistered” and variable: “category” of value –
“signup”.
Except information about the kind of a user, we have send at once information about the
kind of the subpage (category) which the user is on. The unregistered user found himself
on the “signup” subpage. The website category may be helpful e.g. in a dynamic
remarketing.
Thanks to the fact that data were immediately in Data Layer, tags which are loaded on the
website can make use of these data at once with no need of any visitor's action on the
website.
We can send any amount of data to Data Layer. There is one question which can occur -‐
51
Where are these data to get from? Unfortunately, in this particular situation, our website
will often require interventions of somebody who will be able to send data
programmatically to Data Layer e.g. from our shop or registration system (data from a data
base, server). If somebody has used the ecommerce Google Analytics module on their
website, the matter of sending variable values to Data Layer is analogical. Simply speaking
(not programmatically): in Data Layer there must be values from our shop, from a sales
module, etc, which will be recorded clearly for GTM (read: variable – value). It can be e.g. a
basket value which will be sent to Data Layer from our shop, thanks to which GTM (and
other tags installed there) will be able to use this value e.g. to create conditions of firing
tags.
NOTICE: Data Layer is not required in any way. Without Data Layer, GTM will also fulfill its
role of “tag storage and management”. However, lack of Data Layer limits a lot possibilities
which GTM gives to us.
After this short comment about what Data Layer consists in we can go to more advanced
examples of using GTM in work with measuring our activity in the Internet.
If we want to see what was loaded to Data Layer we can easily check it with the help of the
console for programmers for example in Chrome browser. We enter the menu View -‐>
Developer -‐> Javascript console.
52
After loading the website with our Data Layer we type in "dataLayer” in the Console tab. In
objects we will be able to preview what was really loaded to Data Layer and sent to Tag
Manager. A greater part in this case are automatic objects of GTM but as you can see our
data sets which were loaded during loading the website with the table added above the
container were added into the first object.
Event tracking in Google Analytics with GTM
In the previous steps we have learned what Data Layer is and what it is used for. So that
GTM understands events which we are going to track, for example, with Google Analytics,
we have to send them to Data Layer with the help of push method3. If we want to measure
an event on our website which will be the button click, we have to send to GTM, through
Data Layer, that the event of a given value happened.
A button click as an event in Google Analytics
In the situation when we want to measure the button click as an event in Google Analytics
with GTM we have to do the following actions:
1. Modify the website code – Mark the button click as an event in GTM
2. Create Google Analytics tag in GTM – create a tag responsible for the event in GA
3. Create suitable rules when our GA tag is to be fired.
Ad 1. Modification of the website code
What we have to do now is to send to Data Layer the information that the event – the
button click – happened. We will use the push method to do this.
3 "The push method is very well-known for everyone who knows Javastript language at least at the basic level, where the push method allows to add values to the array created before. Data Layer is such a array in our case. More about the push method can be read on: http://www.w3schools.com/jsref/jsref_push.asp
53
How will it look like in practice step by step?
1. Type in a website address to the browser and press enter.
2. The container with our tags and the rest of the website is loaded.
3. If there is the click on a marked button, with the push method, information about an
event is sent to Data Layer.
4. If the event satisfies any rule within GTM, a given tag is fired.
A DataLayer array works and sends data to the container, if any variables and values are
placed in it. If not, it is not obligatory in the website code.
Thus, how will this look like in practice for the event measured in Google Analytics?
1. Choose the button which you want to measure as an event,
2. Edit the website where the button (link) is4,
3. Mark the button with the push method with the type of onclick event.
4 We have to have an access to source files of the website with the possibility of their editing. If we do not know how to do this the best solution is to go with this guidebook to somebody who has the rights to edit pages.
54
The type of the onclick event is again the element of Javascript language. “Onclick” fires the
event after pressing the button, and, for example, “onmouseover” after moving onto the
object. There are many other types of events in Javascript language. However, these two
are the most popular ones, as far as measuring interaction with the website, with the
mouse is concerned.
The sample code will look like as follows:
dataLayer.push({'variable_name': 'variable_value'});
Example of our button in the html code will look like as follows:
<a href=http://www.any-‐website.com" onclick="dataLayer.push({'event':'sample-‐
link'});">Sample link</a>5
What has happened? The link clicks we assigned the GTM event of ‘event’ variable and
‘sample-‐link’ value to the “Sample link” button. Then we send these data with the push
method to Google Tag Manager (to Data Layer).
In the same way we can send the event like „onmousover” , i.e. measure moving onto the
button or any other marked element. You need only to replace the type of event from
“onclick” to “onmousover” 6.
Creating a tag for event tracking in Google Analytics
Having already a marked button (or link or any other website element) with the help of
push method, we move to GTM and create a new tag responsible for receiving "messages”
about clicks from Data Layer and sending it to Google Analytics. This tag is a Google
5 The example can be seen on www.rewolucja.com.pl/gtm.html 6 More types of events can be fund e.g. here: http://www.w3schools.com/js/js_htmldom_events.asp
55
Analytics tag of a track type -‐ Events
While creating Google Analytics tag we have to define ID of Analytics account where we
want to track a defined event and we have to define event parameters. According to the
order in Google Analytics7:
<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First
Birthday']);">Play</a>
Above we can see a sample Play link, marked as an event in GA. In the example from Google
Analytics we have defined:
1. Event categories (e.g. videos)
7 More on events in Google Analytics can be read in Analytics help
https://developers.google.com/Analytics/devguides/collection/gajs/eventTrackerGuide#Anatomy
56
2. Actions (e.g.. play )
3. Label (Baby\'s First Birthday -‐ optional)
4. Value (optional)
We did this in the case of the GA installation on the website. In our case we have to add
these values into right columns while creating the tag which is to read out this event. In our
case I have defined three variables:
1. Event category (button)
2. Event action (click)
3. Label (sample-‐link)
In our case I define the label, although it is a non-‐obligatory variable, like the value. It is
worth remembering that what is a value, action or label depends only on us. It is worth
considering how to mark our events reasonably, to be clear later what they mean in Google
Analytics reports.
57
Creating rules for GA event tag to be fired
We have already created the tag to read events. Now we have to create the rule which
allows to transfer the information about event from GTM to Google Analytics. So let’s move
to create the rule in the right column of the website of the tag creation.
What we have just done on image above requires a little explanation because we used the
{{event}} macro. Our rule named “GA event – sample link” says: Fire the “UA event” tag just
only when the {{event}} macro includes8 a “sample-‐link” character string.
Do you remember how was our link in the code marked?
<a href=http://www.any-‐website.com" onclick="dataLayer.push({'event':'sample-‐
link'});">Sample link</a>9.
During the click, the event variable is to take “sample-‐link” value. So, during the link click
our rule will be satisfied and the “UA events” (event tracking) tag can be fired. Thanks to
8 It is possible to use „equals” in the rule.
9 The example can be seen on www.rewolucja.com.pl/gtm.html
58
this, data about event will be sent to Google Analytics.
Check the implemented changes by the Preview tool (Preview – Debug), and then publish
the changes. As you can see, everything works.
After publishing changes we know that GTM fires the Google Analytics tag. Now it is worth
checking if the events are really reported in GA. To do this, it is a good idea to use reports
of Real Time in Analytics interface. At the moment of click it is better to be logged in our
Analytics account. In reports about Real Time.
59
Everything works properly. The event on our website registers correctly in Google
Analytics. However, one thing may still not be completely clear – macros. In our example
we have used a built-‐in {{event}} macro. The macro named {{event}} is ready to use type in
GTM. It is a special type of the macro which gains value at the moment of calling it by the
code:
dataLayer.push({'event': 'value'});
We are sending to Data Layer information that "event” variable gains the value of "value”.
We used it exactly a minute earlier calling the event on our “sample link” website. However,
macros have many types which can be used. Each type of the macro will be responsible for
gaining different types of values.
60
Macro can retrive data directly from Data Layer, from the source code of website (DOM
elements10), Cookies, Javascript codes, URL addresses and other.
Thus, we can choose a different type of macro and create another condition of calling our
tag. Thai is why, we can create more complicated rule.
For example we could have a more complicated rule conditions:
Register an event in Google Analytics when the "event” variable will have value of „sample-‐
link” and the website-‐type will have value “test-‐site”. We want to retrieve data about the
website-‐type from Data Layer to which it was added while loading the website.
We have mentioned before about adding data to Data Layer while loading the website, so
that the tags could at once, while loading webisite, make use of those data. Supposing that
our website has a definited type of each subpage. There are subpages of products,
categories, registrations, etc.
Such information is sent GTM by the dataLayer array, from above from container. In our
example, the website category will be named “test-‐site”, and the table may look like this:
10 DOM elements are the elements in the website code such as DIV, HTML, BODY, ID. Thanks to the hierarchy and such a labeling of website code elements we can refer to them e.g. in javascript language.
61
We added a "website-‐type” variable of a value: "test-‐site”. Data will be available in GTM
while the website code is being loaded. So you need only to create a macro which will make
use of those data.
For example, we can choose a macro type as "Data Layer Variable” and name it a "website-‐
type”. A “website category” macro is ready.
Now, we add another condition concerning the website-‐tape to our previous condition
about firing the GA tag which registers the event in Google Analytics.
62
We choose the macro created by us, that is the "Website category” 11. That macro should
equals “test-‐site”value to fire our GA tag.
After saving and publishing a new version of the container, the event in Google Analytics,
after the button click "sample-‐link” will register only when a website-‐type will be defined
as a "test-‐site”. If it is a different website-‐type, the event will not be registered because
Google Analytics tag, responsible for the event registration, will not be called.
In this way we can create many combinations of conditions of many tags actions making
use of different types of data (Data Layer, DOM elements, URL and others). It gives wide
possibilities of administering many tags from many different systems and applications.
11 The name for macros can be any. It is important to which it refers. I used "website-type" variable in "Website category" macro. I could name it "Website-type but in this case I have chosen different name. Macros can have any names, e.g. they can be named like variables they refer to. We have to keep an order in terminology because later, when more and more rules and macros are created we can have problems with administering them.
63
More buttons (events) to measure on one website
If we had more buttons (events) to measure on one website, we would have to create
separate tags for measuring each event in Google Analytics with a method described above.
However, we can use macros and then one tag will be enough. How will it look like in
practice?
Again, we create Google Analytics tag which will be responsible for the event registration. It
will be exactly the same like tag as we have created in the example above. However, while
completing the column about event parameters, we will use created macros instead of
specific data for one event (as we had done before). Google Analytics tag configuration will
look more or less like the following:
As we can see, we have introduced macros for each parameter instead of values for one
event. Now we create macros which will have equal settings. They are different only with
the names of the macro and a Data Layer variable.
64
Finally, we should have such macros like these:
1. {{Event Category}} >> variable event-‐category
2. {{Event Action}} >> variable event-‐action
3. {{Event Label}} >> variable event-‐label
4. {{Event Value}} >> variable event-‐value
Now for each button which we want to measure as an event in GA, we have to add a
possibility of sending values by Data Layer. I. e. our button in the website code should look
like the following:
<a href=”http://www.any-‐website.com" onclick="dataLayer.push({'event':'sample-‐link',
‘event-‐category’:’my-‐category,’event-‐action’:’action name’,’event-‐label’:’label-‐
name’,’event-‐value’:’event value’});">Sample link</a>
What have we done?
We have added variables (these ones which are in created macros) and values for a given
button. In this way at the moment of the click, values are sent to event parameters in GA tag
responsible for the event registration. We have to do such a code modification for each
button.
65
Measuring the action on the website with virtual pageviews
In the situation when we analyze usage of buttons, links or other functionalities on our
website, the use of events in GA is absolutely justified. Events do not generate artificial
pageviews of our website and do not interfere in reports on website traffic.
However, it happens that some elements are such an integral part of service that measuring
them as an event would not be reliable to the end. Let’s take, for example, an company’s
offer in PDF which is downloaded by website visitors and then read. Perhaps it is such a big
and important part of the website that most visitors visit it just to download PDF. In such
case analysis of pageviews may be better then events. In this case we can use so called
virtual pageviews. How to do this with Google Tag Manager?
1. Tag the link to download PDF in the code of our website
2. Create Google Analytics tag responsible for pageviews
3. Name the virtual pageview which is to reflect PDF downloading
4. Create the rule which is to fire tag during the click on PDF link
Ad 1. Tag PDF link
Our link to download PDF may look like the following:
<a href="http://any-‐website.pl/ebook.pdf"
onclick="dataLayer.push({'event':'pdf'});">Download PDF</a>
Ad 2. and Ad 3. Create Google Analytics tag
Our new tag responsible for virtual pageviews will look like in the image below. We set the
track type as pageviews and in basic settings we type the name of the element which is to
be registered as a virtual pageview while downloading PDF. In this moment in GA, if a
66
pageview is registered, in the report on the contents (Behaviour >Site content) we register
a pageview of the subpage/ e-‐book-‐download.
Ad 4. Create a rule
To fire the tag for measuring virtual pageviews we need also to define a condition when a
given tag is to be fired. Thus, we create the rule assigned to the tag.
67
The rule which we have created says: If the "event” variable equals pdf, fire the tag for
tracking pageviews “UA-‐ virtual preview (PDF)”. There is only one thing left, to check if
everything works correctly (Preview > Debug) and after that, create a new version and
publish it.
At the moment of Debug type we can log in our Google Analytics account and see in live
reports if GA really gets information about pageviews from GTM.
I have clicked on the link to download PDF and at this moment a registered pageview of
subpage /e-‐book-‐download occurred on my account. Everything works.
68
There are more ways of obtaining information about clicks on a specific link (e.g. to
download pdf) and sending them as an event to GA. We will learn about them soon.
Summary
In this chapter we have used macros several times to create events in GA. Everything works
very nice but there is a quite big interference in the website source code. The same amount
as in the case of normal Google Analytics. It was promised to be so beautiful, without
editing the website. Right, but we have to remember that we edit and label once and we can
do further whatever we want in GTM. Now many different tools can make use of these
labels of website elements. Not only Google Analytics. Labels are universal, comprehensible
for other programs, not only for the one (e.g. GA). But still, the fact is that there is a lot to
edit.
Here, there is a nice surprise because GTM allows for fully automatic work with website
elements with no need of their labeling and code editing. Thanks to the function of auto
events we can create rules based on the website content and then, on the basis of it, fire
track tags in GTM.
So, is manual tagging pointless? No. Sometimes there are such situations when we are not
able to use auto events, for example when the website code and element labels do not allow
to do this. Thus, we have to know this way, despite the fact that we will learn in a moment
about a solution which eliminates the need of website editing.
How do auto events work exactly? We will learn about it in the following chapter.
69
Auto event in GTM (auto event tracking)
In the previous chapter we have learned the rule of macro working and basic methods of
event tracking with GTM. Our solutions discussed so far require quite a lot of interference
in the website code. In many organization each, even the smallest, modification is
connected with long time, obtaining consents and acceptance, etc. Often in the initial phase
we resign from measuring some smaller things on the website, just because of
organizational difficulties.
Fortunately, there is GTM with its function of auto-‐tagging.
Auto-‐tagging is nothing more than defining events on the website with no need of
interference in the website code. In this case we define only conditions which have to be
satisfied so that GTM accepted the action on the website (for example onclick) as an event.
These conditions may be e.g. a type of action (clicking on the button, link), ID of html code
section, CSS, (so called DOM ID, eg. <a href=”#" id=”link-‐to-‐something”></a>)12, URL
addresses and many other.
So that everything works we define only an event type (any onclick, filling in the form, time,
link clicks) and conditions (rules) when such an event is to be counted. We do not have to
ask for any code edition. The only thing, which should be set with people responsible for
the website code, are issues of labeling different elements so that we could easily edit
conditions for event defining later (about it in a minute).
Auto-tagging in practice (introduction)
What does this interesting function consist of, where we do not have to interfere in the
website code to register events? It consists of using so called listeners which are able to 12 In this example ID is "link_to something”.
70
receive information from the website that are clicks, filling in the form or other event that
has happened. How does it work?
GTM tag called listeners receives signals from the website if the event happens, identifies it
and automatically add it to Data Layer. Such an event is then ready to be used by tags
installed in GTM (e.g. Google Analytics tag).
Receiving signals -‐> event registration -‐> using in tags and rules
To understand working of an autotagging function in the easy way we will show a simple
example.
Auto measuring of clicks on the button (link)
Let's take a sample link from our test website.
We want to measure clicks on this link as an event in Google Analytics. So we have to do the
following actions:
1. Create the tag responsible for receiving signals from the website (listeners).
71
2. Define the rule – when the listener is to be fired on the website.
3. Create Google Analytics tag responsible for the event registration.
4. Define the rule when the event is to be registered in GA
Ad 1. Create the tag responsible for receiving signals from the website (listener)
To start making a use of auto event tracking, first of all, we have to create the tag
responsible for "listening" to what is happening on the website. That is the Listener. We
create Listener Tag like other tags. We have to only choose such a type of it which will be
the most suitable to our task.
We have five types of Listeners in GTM at our disposal. Each of them is responsible for a bit
different event types. Before we start to create auto events, let's take a look at their types:
72
Click Listener
This Listener is responsible for registration of all kinds of clicks on the website (on buttons,
links and other clicking elements of the website). While clicking on any clicking element,
the event gtm.click is auto generated inside Google Tag Manager.
Form Submit Listener
This Listener is responsible for registration of form submission on the website. At the
moment of the form submission the auto event is generated inside GTM, gtm.formSubmit .
Link Click Listener
Click Listener is responsible for link click registration. It can be mistaken with "Click
Listener" because they work quite similar. "Link Click Listener" is recommended to be used
in link click registration which links lead to other subpages in services and Click Listener to
the rest.
Timer Listener
This Listener is responsible for measuring and countdown time on the website in
milliseconds. While being fired it starts counting down the time defined by us. The listener
can be used in many ways, e.g. calling the event on the website which will measure a real
bounce rate in Google Analytics. We will talk over this case a little bit later.
JavaScript Error Listener
A very useful Listener which registers mistakes in script calling on our website. We can, for
example, register mistakes as events in GA. Thanks to this we have an insight and control
over quality of our site working.
73
Coming back to our easy example…
For our example, link click registration (let's take :My link for auto event tracking ), we will
choose a type of Listener as simply Click Listener.
Ad 2. Define the rule – when the listener is to be fired on the website
If we have already chosen Click Listener we have move to defining rules when it is to be
fired. This type of registering tag can be easily switched on on all pages of our website.
Thanks to this we can easily register clicks also on other links on a website (we can use that
information later). So our now rule should be as follows: fire the "Auto click listener" tag on
all pages of the website.
Let's stop here for a moment. We can check now how GTM registers clicks on different links
on our website. Thanks to this we will understand how GTM sees our links, it will be easier
for us to create macros and rules later.
If we already save the tag and publish its version (we can do this also in Preview > Debug),
we move to our website tab in web browser and click on any link. Then we run Javascript
74
console in Chrome browser13 (View > Developer > Javascript Console) and we type
"dataLayer" in Console bookmark.
Thanks to this we could see objects currently loaded to our Data Layer. In the first object
there are always data loaded from a dataLayer array above the container(If there is
something there). In the last object there are the last registered events on the website. In
our case, it is the link click which called gtm.click auto event.
In this view we can see what elements were registered by Click Listener and sent to Data
Layer. For example, in "ID element" value "example-‐link" occurs and in "URL element" an
address to which the clicked link refers. Thanks to our Click Listener we will be able to
make use of these data while defining other rules.
Let's preview now the source of the test website. Link ID and actual URL address were
13 You can make use of other consoles and other browsers. For example, we have a Firebug plug-in in Firefox available.
75
registered by our Listener. In our example it is "#". Seeing like Listener collects information
and what is really viewable, we can really understand how to create rules and macros
which will allow us to register chosen actions on the website. Thanks to this we know what
Listener has registered, we can create conditions of event registration which will include
more than one variable.
For example the condition of this type:
Register e-‐book downloading and add it as an event to GA only then when element ID <a>
equals "e-‐book" and URL address ends with ".pdf".
In this way we can differ various types of clicks and events in GA. We will deal with it later.
Ad 3. Create Google Analytics tag responsible for event registering
Since we have Listener which "listens" to what is happening on our website in matter of
clicks that was done, we can start register of our chosen click as an event in Google
76
Analytics. What we have to do at this point is:
1. Create Google Analytics tag responsible for sending events to GA.
2. Define when a given tag is to be fired.
What I have done is to use two macros {{element text}} and known to us {{event}} while
completing parameters about events in Google Analytics. We will come back to this issue in
a minute.
So thatctag could work we create the rule for it, that is the condition when it is to be fired.
In this case we use two elements of our condition for the tag created above.
The obligatory condition is auto event which registers the clicks:
{{event}} equals gtm.click
This is the condition which has to be satisfied to take an auto event into
consideration.
If we do not add it for each time when we use Click Listener, the rule simply will not work.
We will use the event which was automatically added to Data Layer at the moment of click.
77
Thus, we refer to gtm.click auto object which registered this event.
The second condition has to be define by us:
{{url element}} includes .html
This element of the rule is to prevent from registering the link clicks, for example,
concerning pdf documents. In this element a condition is added if the element which is URL
address includes .html, you can fire a tag.
Hence, in our case two conditions must be satisfied so that the tag could be fired. Click must
be registered by an auto event and link must include a ".html" character string.
You need only to test and publish a container version.
Result?
Thanks to our currently created rule, all links on the website will be registered as an event
in Google Analytics. We settled the matter thanks to two tags.
78
A little more about macros in auto events Let's come back for a while to the moment of creating Google Analytics tag responsible for
tag registration. While creating parameters for events we used two macros: {{element
text}} and known to us {{event}}. As I have mentioned, many times , macros are variables
which load values from Data Layer. Thanks to this they make our work easier and save our
time. Thanks to macros, if we look at GA account, after clicking on any link which meets the
rule, we will see labels below.
These labels are values substituted for our {{element text}} and {{event}} variables.
The {{event}} macro assumed gtm.click variable because such an event happened while
clicking. The Click listener registered automatically a click event which is marked by GTM
automatically as gtm.click.
The second, {{element text}}, macro i a very interesting and useful macro which
automatically reads the text included within the element. De facto it reads simply the
"anchor text" that is viewable texts on the website after which the reference (link) is.
79
Thanks to this that I have put these two macros in the event model, in the image above an
event and precise link contents (anchor texts) occurred as a label. Nice, isn't it?
There are more possibilities of content readings from the website with the help of macros.
It is important that macros can be used almost in any place of GTM. It is worth looking
earlier at the console for programmers how clicking is registered by Listeners in GTM.
Then we will know what values we can easily take out of the website content and which
will require from us, for example, manual tagging.
As it is seen below, after clicking on the link, Listener read out only URL address to which
link (gtm.element/url) refers. There is also a definite "a" element. We know, thus, that it is
a link.
"A" object in html language is responsible for links e.g. <a href=”www.link.html”>Link</a>.
Now it is worth mentioning that an accurately and carefully written website code will be a
great facilitation for us. If a programmer does not give e.g. ID for objects on the website,
classes are written in a disordered way, it will be more difficult for us to define rules for
events.
We will have to use more often the custom javascript scripts which will help us to "take
out" data from the website code.
80
Available macros and their possibilities
What are macros we have said at the very beginning of this e-‐book., macros are pairs
variable-‐value. Values, for variables, are downloaded from Data Layer when the rules allow
for this.
A macro, as we know, look always like this:
{{macro_name}}
We have used macros several times. At the very beginning we have created the macro
where the value was Id number of our Analytics account. Later we made a use of a built-‐in
{{event}} macro responsible for sending events to Data Layer.
Just now we have used {{element text}} macro which registers the text within the website
element e.g. link. Now it is time to introduce other macros and their application.
While creating a new macro a list of available macro types will occur. Some of them we
have already used, but some not yet. They are such macros which will be useful in very rare
cases (Random number) and such which will almost always use the Auto-‐event variable. As
you can see below, some of macros is "built-‐in" GTM, we have them ready at once at the
moment of creating an account. Most of them concern event listeners i.e. auto events which
we have discussed initially in examples before. Here I will mention once again that it will be
easier for us to work with GTM if the code of our website will be written precisely. It would
81
be perfect if the most elements had their ID. Of course, it is not an obstacle but it will be
easier, especially for people who do not work with javascript.
Let's start from a fast discussion of individual types of macros which we can create.
Auto-Event Variable
There are several macro types of this kind. Because new types appear quite often and are
added to the list, I will introduce only the most popular and the most frequently used ones.
82
Element classes: Returns the class of the element attribute which was clicked.
The example: We have a <div class="MainMenu">website menu</div>element in the
website code, this type of macro will return the value of "MainMenu"
Element ID: Returns the ID of the element attribute which was clicked.
The example:<a href="#" id="example-‐link">My link for auto event tracking</s>, macro of
this type will return to us the value of "example-‐link".
Element target: Returns the attribute of "target" element which was clicked.
The example: <a href=”http://www.any-‐website.pl” home” target=”blank”/>, macro will
return to us the "blank" value
Element text: This type of macro we used before in the example. The macro returns the
text in a clicked element.
The example: <a href=”http://www.any-‐website.pl” home” target=”blank”/>Link to any-‐
website</a>. The macro will give back to us the value of "Link to any-‐website".
Element URL: This type of macro gives back the value of a clicked attribute element <a
83
href> (link url address) or the value of "action" attribute in forms.
The example of the link: <a href=”http://www.any-‐website.pl” home” target=”blank”/>Link
to any-‐website</a>. The macro will give back to us the “http://www.any-‐website.pl” value.
The example for the form: <form action=”/thankyou.html” id=”form”>. Macro will give back
the "/thankyou.html". value
Macro Constant String The macro stores the constant value which we can use later in other actions in GTM. We
used the macro before to store Analytics account ID. Thanks to this identification we do not
have to remember numbers of Analytics accounts used by us but also other e.g. Conversion
ID.
Macro -‐ Custom Events It is one of the most popular macros created on GTM account at once. The macro gives back
its value while being loaded to Data Layer.
dataLayer.push({“event”:”event_value”})
We use this macro the most frequently in specific tag settings. If we want to fire a tag at the
moment of any action on the website (e.g. click), and a given click was tagged by us with a
push method, add only {{event}} equals "event_value" as a rule in the tag. At the moment of
the click, value is sent to Data Layer and a suitable tag fires.
We have already used this tag in the chapter about basic event tracking in Google Analytics.
The "Custom Events" macro takes also value of "gtm.click", "gtm.linkClick or other
connected with auto events. Hence, as we remember from the previous chapter about
creating auto events to call auto events we always have to add the rule of firing this tag
84
condition {{event}} equals "gtm.click"14
DataLayer Variable
Like in the case of the "Custom Events" macro, a variable will be sent while calling the code.
dataLayer.push({'Data_layer_variable': 'value'})
The same we can use the variable if it is in the dataLayer array above the container. A good
example of using this macro is recognizing clicks on images on our website. The example,
step by step, is described later in the e-‐book.
DOM elements
The macro is responsible for loading values connected with an ID attribute of a given
element from the website. We can, for example, decide that we want to register only the
event if someone clicks on a specific button with specific ID. We can also do this with the
help of DOM element macro, giving a rule. Fire a chosen tag, if the DOM element equals i.e.
"sample-‐link-‐id".
<a href="http://www.any-‐website.pl" id="sample-‐link-‐id">Sample link</a>
We can use also macro in any other place of GTM. For example, in defining events in Google
Analytics.
Let’s see example. We have "Sample link" which we want to measure in GA as an event
while it is clicked. The link in the code looks like as follows:
14 Or other values for auto events e.g. gtm.formSubmit, gtm.linkClick.
85
Now we have element ID of <a></a> tag as "sample-‐link-‐id" and "alt" attribute which has
"this is alt" value. What can we do with this?
Let's take our earlier example with the use of macros in defining parameters of the
Analytics event.
I have modified the Label parameter and used in it two created similar macros. One macro
is named {{DOM element}}, the second one {{DOM element attribute}}. The whole
parameter looks like as follows:
{{DOM element}} -‐ {{DOM element attribute}}
Macros themselves look similar. {{Dom element}} macro looks like as follows:
86
I have introduced element ID <a>. The second macro looks very similar but it has
additional variables. We add element attribute <a> .
So, we have two macros which differ only on adding attribute. I assume that all other in the
GA tag which is to track the click as an event is set correctly. After publishing, if someone
clicks on the link in Google Analytics we should register the following data.
87
That is {{DOM element}} macro registers the text value of the element from ID="sample-‐
link-‐id" and the second {{DOM element attribute}} macro which has additionally defined an
additional variable of the element (alt attribute) takes value alt+ "this is alt"
HTTP referrer
This macro downloads data about the referrer to the website where the click was. If, for
example, our website is www.any-‐website.pl/gtm.html and someone has entered it from
the main website of the service www.any-‐website.pl/read-‐this.pl , the loaded referrer will
equal “www.any-‐website.pl/read-‐this.html”. The website address where the click came
from.
This macro can be used, for example, to condition firing of suitable tags depending on the
referrer.
Javascript Variable (Custom Javascript code) If we are not able to download data with the help of available macros and click Listeners,
we can support ourselves with the script directly written by us.
88
Our script will download the value of "class" attribute for the element of ID="product". Of
course using such a type of macro we have to leave to people who know JavaScript
language at least on a basic level. It is an example because now we have also the macro
available which is able to identify the class elements of source code.
Random Number
The "Random Number" macro for each time when it is called takes the random number
from 0 to 2147483647. How can we use this macro?
An interesting example is to call the tag for some percent of visitors of our site. Such a tag
can be at least the tag which fires scripts to test website contents. It can be used for firing
scripts with surveys to some percent of website visitors.
You need only to mark the condition in the rule of calling the tag: if {{Random Number}}
89
macro ends with 9, call the tag. It will correspond to 10% of website visits 15.
URL macro
This macro allows to load address fragments like: host name, query or any other fragment.
Let's explain in details what each type of URL macro component can be used for.
● URL: Returns the whole URL address
● Protocol: Returns the protocol of URL address (http or https)
● Host Name: Returns the host name (e.g. marketinglab.pl, google.com, etc.)
● Port: Returns the port number of the host name. Ports are used for communication with
the Internet. Different ports are responsible for different kinds of connections. Connections
for pages will also use ports: 80 or 443 depending on if it is http or https.
● Path: Path of URL address without the host name, e.g. if we have the following address
www.any-‐website.pl/example.html, we will get: example.html.
● Query: Returns the value of a chosen query in URL address.
● For example in URL address: www.any-‐website.pl/example.html?utm_source=mail, we can
download "utm_source" query value and the condition to fire any tag or we can use by the
way of creating other values such as at least names of event parameters in Google
15 http://dan-russell.com/2013/03/sampling-a-percentage-of-your-users-with-google-tag-manager/
90
Analytics.
● Fragment: Returns the character string from URL address without preceding #.
Lookup Table
It is one of the most useful macros if we are to build condition of a variable value depended
on the value of other variable. The lookup table allows to create the macro in which the
value will depend on the value of other macro.
Probably the most interesting example is a situation when we test changes within GTM. We
test events if they work in Google Analytics, we generate a lot of clicks, visits, etc., in Debug
Mode. Thanks to the Lookup table we can create the condition which depending on in
which mode we are – live or Debug mode will be replacing ID numbers of Analytics
accounts. In this way we can, in Debug mode, test events in GA on other account (to tests),
not spamming our real account with artificial events.
To do this we will use a combination of Debug macro and Lookup Table.
We create the macro of Debug type which automatically takes value True, if we are in
Debug mode or False if we are not. When someone clicks in a website in "live" mode.
Then we create Lookup Table macro (I called it SafeMode) and give the condition:
If you are in Debug mode (true) use macro value {{UA -‐ Rewolucja – test account}}, and if you
91
are not in Debug mode, use values from {{UA -‐ Rewolucja -‐ live}} macro.
Of course I have created {{UA -‐ Rewolucja -‐ live}} and {{UA -‐ Rewolucja – test account}}
macros before. Both are of a Constant String type and have values of two IDs of accounts.
Test and true accounts.
Now we should only use {{SafeMode}} macro in all places where we use ID of our Analytics
accounts. It is about tags of course.
Measuring outbound links as auto events in GA
In the case of generating and buying traffic on a website a very important aspect of
measuring its effectiveness is also knowledge about possible "escapes" of visitors from a
given site. That is why events which register outbound traffic from the website are often
created in Google Analytics. So that it was necessary to tag all links in the site leading to
"outside" the website". Google Tag Manager is able to help us to track the outbound traffic
in an automatic way. To do this we have to do the following steps:
1. Add the tag which will automatically register clicks on links on a website.
2. Add Google Analytics tag which will be responsible for registration and sending
clicks as events to GA.
3. Create the rule which will register only clicks on outbound links.
92
Ad 1. Add the tag which will automatically register link clicks on the website
We create the tag of Click Listener type. With the rule for all pages.
Ad 2. Create Google Analytics tag responsible for event registration.
At the moment of choosing parameters we can make use of macros which will
automatically send to GA information about what the full URL address of the exterior
website is and we can download: "anchor text"16 of the link to PDF.
16 Anchor text – a viewable clickable text of the link
93
Ad 3. Create rule for macro
As a rule we give two conditions. As always in the case of auto Listeners, the condition
{{event}} equals gtm.click and condition where link clicks on navigation links on the
content within our site are excluded. In this case it will be: {{element url}} does not include
"name_of_our_domain". {{element url}} macro returns the value which is a full address of
url link which was clicke
94
Measuring document downloads (e.g. PDF) as auto events in GA
In this case we want to register PDF file downloads as events in Google Analytics. We have
to do the following:
1. Add the tag (or if it exists we make use of existing one) which will automatically
register link clicks on the website, click Listener.
2. Add Google Analytics tag which will be responsible for registration and sending PDF
file downloads as events to GA.
3. Create the rule which will register only clicks (downloads) of PDF files.
Ad 2. Add Google Analytics tag responsible for registration of PDF file download as
the event.
We have omitted the item 1, because we have the tag of a click Listener type already
created on the account. If we do not have it we can use the earlier example where it is
described in details.
So, we create a GA tag responsible for event registration (type: event) with parameters
which will be transferred to Google Analytics as an event. One of these parameters is the
"Action" parameter. In this parameter we use the {{element text}} macro which will
transfer as its "anchor text" value of downloaded PDF. "Anchor text" in this example is an
underlined name of a PDF file. It is very often so, hence, my idea for such a solution. If PDFs
on the website are not labeled as links to download with anchor texts of type "Download
now" I advise against using this macro because we will not learn later much from the
parameter of GA – Action event.
95
Ad 3. The rule for the tag to register PDF download
The rule which is to fire this tag is important. In this rule we have included two conditions:
As always in the case of auto registration of clicks {{event}} equals gtm.click and the second
condition concerning the type of the file registered as an event. In this case I used a simple
{{element url}} rule i.e. url address includes "pdf" character string. Sometimes the
conditions of this type will be more complicated if files have different extensions or they
are differences in names, e.g. PDF file can be packed. Then surely regular expressions
(regex) will be helpful.
96
While using click listeners we must always remember about adding in the rule the
condition {{event}} equals gtm.click (or other if we use actually other listener e.g.
gtm.linkclick).
Remember that to exclude the registration of PDF from other rules which collect clicks on
all other links. You can add the excluding rule {{element url}} includes pdf. The excluding
function is below the option for defining rules.
NOTICE! If you did not read the whole e-‐book, only piecemeal, you should know that using
GTM to event registration(event type) we must always remember to have the GA tag which
is responsible for pageviews registration.
Measuring clicks on images as an event on the website in GA
Perhaps you are curious how often somebody clicks on graphic elements (e.g. images)
which do not have to be links. Maybe we want to know if any graphic deserves link or we
97
suspect that website users may be mistaken and think that some images is clicked and that
is why they are distracted from purchase path or causes confusion. Let's take a simple
example: We have a image on the webpage which source code looks like the following:
We want to register an event in Google Analytics as clicks on this image. We want to
differentiate clicks on graphic forms from normal text links. What do we have to do?
1. Create the macro which will allow us to obtain information about the name of the
element of the source code, in this case we want to get labels of <img> Image.
2. In the Google Analytics tag responsible for event registration in event parameters
we place macro combination which will automatically send events with suitable
labels to GA
Ad 1. Create macro which will allow us to download such information of the name of
the element of the website source code which was clicked.
98
To do this we made use of the "Variable of Data Layer" macro type and the name of variable
downloaded from Data Layer is the Listener name of elements on the website
(gtm.element). Because there is arborization of DOM elements in GTM, we can add after the
“dot” what element is in our interest and ask about its name (tagName). That is within the
website code element recognized by GTM (e.g. <a>, <div>, itp.) the tool looks for the name
of a given tag. De facto, it will be its type. If we ask about the type of an element (tagName)
for the link:
<a href=”any_website.pl” id=”link1”>Link to any-‐website</a>,
we receive "a" value. Hence, we can make use of tagName command to obtain different
elements which the user clicked17. If someone clicks on the image we will get <img> value
and that is it.
NOTICE! Remember about versions of Data Layer. Version 2 allows to recognize that a dot
in this character string is the gate to nested information and not a normal character.
17 tagName is nothing else than Javascript command. You can read more on tagName here: http://www.w3schools.com/jsref/prop_element_tagname.asp
99
Ad 2. We place macro combination in Google Analytics tag responsible for event
registration, in event parameters.
We place macro combination {{event}} and {{tagName}} in Google Analytics tag
responsible for event registration, in event parameters.
After being tested in Google Analytics the following events should be registered:
100
gtm.click as {{event}} and IMG as {{tagName}}. In this way we know that a given click was
on the image. It is important in order not to add any additional conditions except {{event}}
equals gtm.click in the rule of firing a tag which collects events. We do not want to block
recognition of any click.
Cross-domain tracking with GTM (UA)
It happens very often that this what we want to measure with Google Analytics is not only
one domain but our Internet actions take place within a few domains and subdomains. If
we have, for example, two domains (domain1.pl and domain2.pl), in standard GA
configuration, a user moving from domain 1 to domain 2 is, in GA for domain 2, treated as a
user coming from the source of domain1.pl/referral (source/medium). If we want to know
the whole path of such user for both domains (e.g. what, in fact, source he comes from) and
we treat both domains as one business property, we have to configure cross-‐domain
tracking in Google Analytics. There is a similar situation but a little bit simpler is in the case
of tracking the traffic between subdomains and domains (e.g. subdomain.domain1.pl). How
can we configure tracking of this type with GTM?
When we use Universal Analytics we can use options of auto cross-‐domain traffic tracking.
It is very easy. If we use one container for both domains:
101
1. Create (edit) the UA tag responsible for pageview tracking.
2. Choose "true" value for 'Allow Linker' option and add names of domains which we
want to track together. We do this after comma.
3. Set the rule – "Fire on all pages".
That's all actually. Now GTM will share cookie settings for both domains. We will see this in
the link after clicking and moving on the second domain. It is important to look at the
second element of a character string after the dot on the right.
102
This number is a unique identifier of the user (actually of the browser), it should not
change while moving between domains.
If we use different containers for each domain we must remember to install the UA tag with
the same number and settings in each container.
At the end we enter our Google Analytics and we add ignored addresses of referrals in
profile settings. In other case referrals between domains of traffic source will be overtyped
(as referrals from combined domains).
Unique user ID
103
Dynamic remarketing installation with GTM More and more often we can observe using tools in marketing actions such as dynamic
remarketing. The tool works very effectively and is actually an invaluable element of
marketing actions which is applied by shops and advertiser with a very wide product
range.
We will not explain here the rules of dynamic remarketing itself. To have it explained I
refer you to AdWords help. Here, instead of it, I will tell how to implement dynamic
remarketing with GTM.
What will we need?
As we know so that dynamic remarketing could work we need additional parameters
added to the standard remarketing code.
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 'REPLACE_WITH_VALUE',
ecomm_pagetype: 'REPLACE_WITH_VALUE',
ecomm_totalvalue: 'REPLACE_WITH_VALUE'};
</script> <script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXXX;
var google_conversion_label = "YYYYYYYYYY";
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-‐style:none;" alt=""
104
src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&label=YY
YYYYYYYY&guid=ON&script=0"/>
</div>
</noscript>
What you can see above is the standard remarketing code with additional parameters (in
red), thanks to which the system is able to serve suitable products to suitable people.
Thanks to parameters we can create conditions and rules concerning remarketing lists and
advert serving.
In a traditional way we have to add the code with additional parameters to each subpage
with products. Of course nobody does it manually but they employ a programmer who
loads the content from a website, cms, data base or CRM and pastes them in a code for
parameters. We do this in a similar way but differently ;) It will be the first solution. In a
second way we will try to do without the programmatical intervention. We will try to use
suitable variables and macros and search values in the content of our website. Let's start
from the standard way.
First method - standard
If we want to make use of dynamic remarketing with GTM we have to:
1. Create a remarketing tag.
2. Create rules which will define on which pages a given tag is to be fired.
3. Choose variables and send product values to Data Layer
4. Create the macro which will be a "bridge" between data from Data Layer and the
remarketing tag.
5. Test and publish a container version.
105
Ad 1. Create a remarketing tag.
We create tag the same like in the case of the normal remarketing tag. We give an ID
number of the remarketing tag which we download from the AdWords account (we did it
while creating a normal remarketing tag at the beginning of this e-‐book) and go to the
moment when the option of adding custom parameters occurs.
Here we can add our parameters to the dynamic remarketing. We can do this in two ways:
making use of Data Layer (and now we will do so) or we can define each parameter as a
macro and this is the second way which we will discuss in a moment.
Ad 2. Create a rule for the remarketing tag
Remarketing tag should be called on pages which indicate some kind of intentions of a user
who visits our service. So a good idea is to remind the user the product which he or she
viewed at but did not buy. Then it is worth adding people who visited our service subpages
106
with specific products to the remarketing list. Dynamic remarketing does the rest for us
and it will automatically show the user such products which he/she has already viewed.
Labeling each kind of website is recommended, the more data the better differentiation of
the user and constructing a suitable remarketing message for him. We have such categories
which are worth labeling at disposal:
Now we will deal with a category of product pages, so that our tag is fired only on product
pages. We have to find some common feature of such pages. It can be a fragment of the
code, ID of DOM element or the part of URL address.
107
Let's take an example of the shop http://www.charlotteas.com/ with amber jewelery. I
found out that, a common feature of each website with a specific product is a fragment
"products" in URL address.
Thereupon we create the rule:
Fire a remarketing tag when {{url}} includes the character string : products
108
Of course if parameter values will be added dynamically (e.g. pagetype) before being sent
to Data Layer(next step) we can actually fire a remarketing code on each website. In other
case we have to create as many remarketing codes with separate rules for each pagetype,
as many pagetypes we want to label with the remarketing code.
Ad 3. Choose parameters and send them to Data Layer
We can give more parameters than only: pagetype, product ID and product value (total
value). It is important in order not change variables which are allocated to the dynamic
remarketing18. I recommend sticking to the terminology proposed in AdWords help.
Three variables above are standard variables and one should make use of them. Of course
we can add more variables. Their description is available in AdWords help about dynamic
remarketing.
Now the most important thing. Let's look at the code below. We can see a
"google_tag_params" variable there. To this variable we have to sent all variables and
values concerning the product to a dynamic remarketing. Unfortunately, it must happen
18 More about parameters of dynamic remarketing on - https://support.google.com/adwords/answer/3103357
109
with the help of somebody who takes care of our website and can load these data from our
server, cms, shop engine. In any way it is not too difficult. It works the same like the
implementation of E-‐commerce module of Google Analytics in the online shop.
We locate the script with ecomm variables closed in google_tag_params variable above
DataLayer array – “dataLayer= [];”. As you can see in the example below.
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 'Product_ID',
ecomm_pagetype: 'product',
ecomm_totalvalue: 'product_value'
};
</script>
<script>
dataLayer = [{
google_tag_params: window.google_tag_params
}];
</script>
As we can see, we place a variable, which sends our variables of dynamic remarketing, in
Data Layer.
What have we done? We have created google_tag_parms variable which includes pairs of
data "variable: value" needed to our remarketing. Then we refer to this variable. Now our
data are already available for GTM. It is a bit complicated but if we do not want to
understand it we should only do this as described above. Of course taking our products into
consideration ;)
110
Ad 4. Create a macro which will combine data from Data Layer with a remarketing
tag.
The macro must be of a dataLayer variables type.
This type of macro makes use of variables and values from Data Layer. As a variable we use
a variable which we have already sent to DataLayer, i.e. "google_tag_params".
I have called my macro as a variable to know what a given macro refers to but everyone can
use the name of their choice.
Then we return to remarketing tag and configure custom parameters. It comes down to
choosing variables of Data Layer that is to our macro which we have jus created.
111
Ready. Now we have a fully configured dynamic remarketing for product pagetypes. What
will happen? While the user visits the website with the word "products" in URL address (a
rule which we have created) the remarketing code with "google_tag_params" variable of
DataLayer will be called. In turn, "google_tag_params" variable makes use of data sent
before from the variable which was placed above our dataLayer table = [];.
The whole procedure of dynamic creation seems a bit roundabout way for the first time. In
turn, as you can carefully observe, a remarketing code once configured will work not
depending on what additional variables we will want to add. We do not have to also edit
anything in the Data Layer array (dataLayer = [];)It is enough to edit (modify or add
variables and values) in our variable above dataLayer array (google_tag_params). Another
case is the fact that if we want to use Data Layer in a dynamic remarketing we can use only
one macro. Hence, we "close" a lot of variables and values instead of one in one macro.
That's all. We should remember about other pagetypes. We have to create for them other
112
sets of rules and tags or dynamically replace pagetypes in google_tag_params variable
which is above array dataLayer =[].
The rest is the work on AdWords account.
Creating remarketing lists and AdWords campaigns with dynamic creations.
It is also worth reading about other available variables in dynamic remarketing in
AdWords help on:
https://support.google.com/adwords/answer/3103357
The second method – without sending variables programmistically
The first method – recommended one, because it makes use of DataLayer may not be
always suitable. It is, at least, because of the need of programmer's help. We have to
dynamically send somehow values of our variables to Data Layer. However, we cannot do
without little programmatically modifications.
The second method, less popular one, allows us to do without a programmer and use
possibilities which Google Tag Manager gives to us. So what can we do then? We will help
ourselves with GTM and we will order it to recognize the pagetype, product and price from
the content of the website code. Sounds interesting. It can be done almost always, and the
better (more precisely) programmatically the website is written the easier it will be.
What will we do then?
1. Create macros which recognize variables from the website content
2. Modify a remarketing tag.
3. Create a rule to fire the remarketing tag.
113
Ad 1. Creating macros which will identify variables from the website content
We have taken the challenge of recognizing variables and values from the website content
with the help of possibilities of GTM, without any help of a programmer and using them in
dynamic remarketing configurations. Let's move further.
We have three variables to be recognized:
1. A website type (ecomm_pagetype) – in our case they are the pages with products.
2. ID product (ecomm_prodid) – in our case we search the name of the product and we
set it as an identifier. We can also do this because each name is unique on the website.
3. Product value (ecomm_totalvalue) – we would try to obtain this too.
Let's do this.
We search a pagetype
Our example is based on the website charlotteas.com, a shop with amber jewelery.
114
To find any tag or label typical for product page of this website we edit the first available
product page of Charlotteas.com. We enter a tab with products and choose any product.
The product page address which I will preview is:
http://www.charlotteas.com/collections/pendants/products/pendant12
Previewing the source code, I search a place which will help me find the element in the
code which is responsible for identification of this website type (product website).
I usually start from searching any unique element ID. In the source website preview I
search for unique identifiers. They are mostly ID of such elements like body and Div but
also there can be others.
115
I have found a unique ID for <div> element. It is id=product. I checked for other pages too
e.g. the contact or main website, and ID in this place has different values. It is a good
candidate. Now we need to obtain this information and send it to GTM. We will do this with
the macro of "DOM element" type.
What does this macro do?
Macro finds the element with the "product" identifier. In this case it is DIV element. I give
the name of the attribute as ID. It means that I want to take out only the content of id value
(i.e. from id="product" takes out "product"). If I did not add in this place the parameter
name, the macro would take out texts from the whole div element labeled as id=product,
116
but it is not about it.
There is the second way for determining value of a variable (ecomm_pagetype). Even
simpler one but it has some limits. If we cannot find suitable relationships in the website
code which will allow for auto recognition of the website type we can use the macro
(Constant String) in which we rigidly set the name of pagetype.
If we rigidly determine the value of ecomm_pagetype variable, we have to compensate this
fact setting the rule for the remarketing tag when it is to be fired. Here, we will, for
example, use URL address.
Thus, we have the configured parameter concerning the variable of pagetype –
ecomm_pagetype. Now, the next parameter that is identifier of the product itself. As we
have determined before, the identifier can be the product name because it is unique within
the website. We must remember that making use of many "feeds" in Google Merchant Center
account, the identifier cannot be repeated. We have to take it into consideration using the
name as identifiers19. As the name of product is unique, we create a macro which will
identify for us the product name. Again we search such a website element which will give
19 More about feeds - https://support.google.com/merchants/answer/188494
117
us the product name (or another unique identifier).
Again I have found <div> element with the "product" identifier. I can see that the product
name is the class of this element. "Pendant12" is a unique product name. To download this
value from the class parameter, we will use "DOM element" macro again.
What does this macro do?
The macro loads the value from "class" attribute for <div> element from "product"
identifier.
118
The second way could be downloading value of the "class" element from <div> element of
id="product” with the help of "Custom JavaScript" macro. Here we would have to ask
somebody for help, someone who knows how to use JS language. Such a macro, for our
example, could look like as follows:
We have the second parameter of dynamic remarketing which we have to determine. Now
it is time for the third parameter, that is ecomm_totalvalue.
We will also try to take out the third parameter from the website code. What I have
determined, the product price is stored in the elements of the "price-‐preview" identifier.
119
Hence, we create a macro again. It will be the macro of "DOM element" type.
What does this macro do?
The macro downloads the content of elements of the "price-‐preview" identifier.
We have already all parameters needed for dynamic remarketing. Now we return to our
remarketing tag to finish its configuration.
Editing th remarketing tag which we have created at the beginning, we add parameters
created manually (not with the help of Data Layer).
120
Actually, it is the end. Now we can check our work in the Debug mode. After going to the
website we will use Tag Assistant plug-‐in to check if values of dynamic remarketing are
sent.
121
Now we need only to configure remarketing lists and campaigns on Google AdWords
account.
Ecommerce tracking in GA with GTM Adding a module which tracks Ecommerce transactions in Google Analytics is one of the
most important configuration actions of GA for shops, and not only. Thanks to the
Ecommerce module we can analyze almost all reports on the users' activity on our website
on the revenue level (show me the money level). Actually, I cannot imagine a shop which
has Google Analytics and does not use the Ecommerce module.
In a traditional way firing consists in switching the module on in settings of the View
profile in GA. Then we have to place a suitable code with variables on the website which
confirms our purchases (thankyou_for_purchase). Variables must get suitable values from
our shop system sent to Google Analytics so that they could be from this website which
confirms the purchase. Such an operation requires programmatical help. Unfortunately, we
also do not run away from it with GTM because we have to send to another values of
purchases like until now. But this time we will send them to Data Layer. At least, it will be
easier to administer this code.
So, let's start.
To install the Ecommerce module on the website with the use of GTM we have to:
1. Create a new Google Analytics tag responsible for registration of transaction.
2. Send values for variables to Data Layer.
3. Set the rules of firing the module of counting transactions.
Ad 1. Creating GA tag for measuring transactions
Tag for measuring transactions we create in the same way like any other Analytics tag.
122
However, in this case we choose track type as "Transaction".
Remember that for each time we create a new GA tag, if we want to add any new track type.
I.e. in our case it will be another GA tag on one account. We have already the tag
responsible for measuring pageviews, we have the tag responsible for event tracking and
now we will have a tag responsible for tracking transaction.
Ad 2. Sending values to variables in Data Layer
In this step we have to be helped by a person who deals with our shop programmatically.
Values and data concerning a given transaction should be send from data about
transactions (obligatory and optional variables) . Our array above the GTM container will
look more or less like this, for ccommerce transaction:
<script>
dataLayer = [{
'transactionId': '1234',
'transactionAffiliation': 'Acme Clothing',
'transactionTotal': '11.99',
'transactionTax': '1.29',
'transactionShipping': '5',
'transactionProducts': [{
'sku': 'DD44',
'name': 'T-‐Shirt',
'category': 'Apparel',
'price': '11.99',
'quantity': '1'
},{
'sku': 'AA1243544',
'name': 'Socks',
'category': 'Apparel',
'price': '9.99',
'quantity': '2'
}]
}];
</script>
We send data about each purchased product and data about the whole transaction to Data
123
Layer.
There is a set of obligatory and optional variables which we have to use in Data Layer:
Variables for transaction
Data of purchased products
Ad 3. Creating rules for the GA tag responsible for transactions
Now we have to only determine the rule for the tag, when it is to be fired.
Because the tag concerning transaction is to collect information about transactions it
should be fired at the moment when transaction will happen. So that the only right place to
124
fire it are pages with confirmation of the purchase. These are pages of the type:
Thankyou_for_transactions.html, transaction_confirmation.html, etc.
So, we create the rule.
The first part of the condition is clear, I hope. Let the tag to be fired when URL address will
include a fragment "transaction_completed". This is can whatever string of the URL address
that confirms that the purchase was completed.
The second fragment may not be clear to the end. The event built into GTM, i.e. gtm.dom
does not allow to fire the tag unless the whole website is loaded. Sometimes it simply
happens that our container may not, for different reasons, be at the very top of the website
content and so that the transaction is registered for sure we have to allow to load the whole
website. And this is the secret. ;).
Dealing with the bounce rate in Google Analytics (real bounce rate)
The bounce rate is one of more important rates which are taken into consideration in the
matter of optimizing website usability. It is obvious that the higher bounce rate means that
125
less visitors made use of additional contents of the website. It means that the website does
not meet expectations of a visitor. Hence, it is worth counting this rate carefully because on
its basis, between others, optimization decisions are made. The problem in Google
Analytics as far as this rate is concerned is that it is not precisely counted in standard
configuration. If somebody has entered our website and stayed on it 10 seconds and then
left, he/se is treated the same like in the case of the user who visited our website and spent
one hour there (because he read an article) and then left. For GA the customer "bounced"
from the website and the time of his staying on the website equals 0 seconds. Why is it so?
Because GA measures the time of staying on the page by subtracking time of enter the next
page from time of entering the first page. Without moving to another page GA cannot count
time. The time on first page (landing page) without any further movement will be 0, no
matter what the real time of staying was.
Example 1:
Entering the site -‐> page A (landing page) time: 10:00 -‐> page B – time of entering 10:01 –
time of leaving the website: 10:01 -‐> leaving the service.
Time of staying on the page A = 1 minute. Time of staying on the page B unknown. there is
nothing to be substracked from the the time of entering the page B.
Example 2:
Entering the site -‐> page A time: 10:00 -‐> leaving the service 10:29
Real time on the website 29 minutes. Time set by GA – 0s. Google Analytics does not know
how long the user is on the website. Because we have no time of entering another page of
website to substracked from entering time on page A. GA classifies the time as 0 s. Of
course the visit will be treated as visit with bounce.
If we want to make any decisions based on the bounce rate we have to make it real. The
best example is to define time after which Google Analytics is to stop treating entering the
website as bounce. That is for example after 10 seconds from entering the website we can
assume a user engaged in the page content and it is a valuable visit for him. Let's make the
126
bounce rate real on our website. To do this we need an event in Google Analytics which will
register the time of staying on the website and cause that the bounce rate will not be
counted even after leaving a given website without going deeper in the service. We can do
this with GTM.
What we have to do is:
1. Carte a tag with auto time listener
2. Create the GA tag responsible for sending information about time event.
3. Create rules which will allow to fire tags in a suitable moment.
Ad 1. A tag registering the time automatically
Create the tag – Time listener. We define the event name. Generally, there is no need to
change it. We set the time interval in every what time a given event is to be fired. At the end
we set a number of firing of a given event. We set one (1) because we do not need more. We
are interested into the fact if someone was less or more than 10 seconds.
127
Do not forget that we need to determine a rule too when a given tag is to be fired.
In our case we want to know a real bounce rate for each website of our service. So that we
set "All pages".
Ad 2. Create the GA tag responsible for the bounce rate
Create a new Google Analytics tag responsible for event registration.
We add event labels, how we want the category and event action to be named. Of course we
can also add other values but in this case it does not matter. Remember not to change the
settings "Non-‐interaction Hit". If we leave it, while doing event, the bounce rate will be
eliminated. The event will affect its cancellation. If we set its value on "true", the event will
not affect the bounce rate and despite execution of the event the bounce rate will be
counted while leaving the page.
128
Now just only a rule for our Google Analytics tag.
Our rule says: Fire Google Analytics tag which will register events when {{event}} equals
gtm.timer. That is our Time Listener. We know that Time Listener will be called after 10
seconds since entering the website. Just then our tag will fire itself, register event and
cancel counting the bounce rate.
Tags which are not in GTM
Indeed. What to do when there is no tag which we want to install with GTM on the defined
list in Tag Manager? There is not any problem because there are custom tags. We have two
types of custom tags available:
1. Custom HTML tag 2. Custom Image tag
Ad 1. Custom HTML tag Thanks to such a type of tag we can add any other tag which is not in standard on the list in
GTM. Simply we paste the whole fragment of the tracking code which we want to
implement on the website in an available place.
129
With the help of the custom tag we can occasionally add also elements on the website. It is
not recommended but possible. We can add, for example the javasript or simple html code.
As an example I have added tag with very simple fragments of the javascript code which is
to call the window with a notice "it is a custom javascript" on the website.
After saving and publishing (or while testing) the container version, a given script will be
called on our website, together with other tags.
130
It is the same situation if we add a simple HTML code:
The result will be as follows:
Of course these are very simple examples but they are only for presenting possibilities
which a custom tag gives. What is interesting, we can use macros created by us in a tag
code. One should only always remember about closing macro name in double brackets
{{my_macro}}. Worth to remember that if we start the adventure with GTM this Custom tag
131
type of tag will not be rather very often used by us. Most of the most popular tracking
scripts are already built in
132
Using GTM in mobile applications
Nowadays Google Tag Manager, except its very important function of tag administering on
websites, allows in a revolutionary way to administer also our mobile applications. Here, I
am writing 'administer' because it is not only about tags and tracking codes. It is about
administering the application itself and introducing changes in it. So what does GTM do for
application?
GTM for application allows to:
1. Administer tags in applications (GA codes, conversion, remarketing, etc.)
2. Introduce changes in application (revolution)
Administering tags in application – a few words
Here, there is not probably any surprise. GTM allows to administer tags inside the
application. It allows us to track actions of users in application, it allows to implement
conversion and remarketing codes. Thanks to this we can run effective remarketing
campaigns for our application.
133
As you can see, the interface does not differ a lot. We create a container in the same way
(we can choose if we create separate containers for iOS and Android or one common), tags,
rules and macros.
Unfortunately, the truth is that without the help of someone who is engaged in creating
applications it will be difficult for us to understand all possibilities of GTM for applications.
The most important is to understand what we can expect from GTM for application.
Introducing changes in application (revolution)
The problem with applications is that at the moment of downloading them on the device
we loose control over it a bit. Application, shortly speaking, has gone off the leash. Like a
car leaves the factory and in order to change, modify or repair something in it the owner
has to go to the repair shop. The same is with the application. If we want to improve,
change, modify something we have to create another version of application and encourage
users to its download. Everything depends on the owner of the device. If the owner does
not want to download a newer version, we lost control on this application "forever". Now
the situation has changed thanks to GTM for application.
Administering tags is one thing but GTM can do much more. Namely, it lets us have control
over applications already downloaded (already on the devices). We can introduce changes
in application and administer it even if it was downloaded. In this way we do not have to
ask anybody for downloading new versions. But let's start from the beginning.
A problem with mobile applications
As I have mentioned after the application is installed on the device. It is a bit out of our
reach. We can only update it by introducing a new version in the online shop and
encouraging to its download. This creates quite a lot of problems:
134
● Application requires repeated verification in the shop in terms of security
● Application must be sent again and installed from the beginning.
● On the market, the more our applications, the more versions which function because
not everybody updates software as frequently as we would like to.
Of course it is not the intention of GTM creators to omit the shop verification. It is
recommended to inform about changes and undergo verification but on different basis.
How does GTM work for application?
135
Google Tag Manager for application works on the basis of constant updating data included
in the container. Changes propagate themselves every 12 hours(changes are checked twice
a day). It does not mean that if application does not have any access to the Internet it will
not work. While installing, a container with default values of variables is installed.
Additionally, GTM does not use a lot of data transfer to update the container, so we do not
have to worry about the fact that application will be consuming a lot of internet data
transfer.
Updating the container and creating a new version, simply we wait for the application
being updated. We can of course test changes by a test version which we open on our
mobile device. We can also send a special link to people who will be also able to see a test
version thanks to the link.
136
What can be changed by GTM in application?
Google Tag Manager allows to change a lot of things in application, from Visual changes to
usefulness, through changes in the place of advert display, to changes in principles of
working application (e.g. changes of number of lives in the game)
Let's see it on the example of test application used by Google team.
We have application which is used to store contacts. In a given application we have a place
for an advert.
137
After some time we claim that the better solution would be to move the advert to the
bottom of the screen and use a bigger format. In GTM in a given moment we have such
values as far as our advert place is concerned.
We need only change values for the macro responsible for the place and advert type.
138
In this way we will obtain the following result. The advert will be occurring from now at the
bottom of the screen. It will have a different format.
Another example can be, for instance, the change of view of application in terms of periodic
sales campaigns. We have decided that we want to have another application background
for Christmas. With the Christmas tree;). You have to only use the macro which will fire a
suitable background. Here you should know that this kind of things like background must
be already present in the application itself. We can have an influence on rules or principles
of their display but we do not send them by GTM to application.
139
In this way, in 12 hours, our application will look like this at everybody. Of course, if they
are connected to the Internet at this time, so that the container had a chance to be
refreshed. Of course this will change at the moment of another opening. Application needs
to be restarted to see the changes.
Another examples are, for instance, adding language version to the application, change of
140
lives in the game, etc. All of these can be easily modified because this does not require to
implement new elements to the application. We use the same variables and change only
their values.
141
A few final thoughts
Using Google Tag Manager we can't remember about a few important things which run
away very often and cause frustration and waste of time. Here are a few of them:
1. Remember to publish a new version of a container always after changes.
2. Create a reasonable system of a terminology of tags, rules and macros.
3. Keep domains on separate accounts so that it would be easier to understand everything.
Unless a few domains create the whole/integrity in the Internet.
4. Always test tags before publishing them.
5. Use the Lookup table macro to create test environment in GA so that not to spam
statistics with tests.
6. Plan tags migration before you will start to do this.
7. Be careful with capital letters. They may cause that macros and rules do not work.
8. Use Tag Assistant
There are surely more of such popular issues connected with using GTM but these ones are
the most worth mentioning at the very end.
142
Migration plan to GTM At the very end of the part about using GTM on websites I place a proposed schedule of
migration of the tags to GTM which are on the website. It is worth having a plan of this
work so that any data were not lost during the migration. It is only an offer, of course
everyone can but they do not have to use it.
Plan
• make a list of tags to migrate • Are those tags standard or custom ones? • Do we have event tracking codes for events or any other snippets within the website source code? • Do we tracking one or more domains or subdomains? • Who is responsible for editing the website?
Implementation
• Implementing empty container on website • Create test account in GA for tests • Set settings in GTM (+macro lookup table ) • Tag implementation, macros and rules
Testing
• Testing each tag on test GA account + (Debug > Preview)
Launching
• Deleting tags from site one by one and turning them on in GTM. From the most standard to most custom. We don't have to delete all tagd at once. Tags directly on the site (not through GTM) can work alongside tags working from GTM.
143
Conclusion The task of this e-‐book is to explain issues connected with using the Google Tool Manager
to all who are not skilled at technical issues concerning creating pages, programming and
everything which should be dealt with by people from the IT department or webmasters.
However, power of a good specialist in internet marketing is, at least, understanding the
rules of working and possibilities which are given by new tools and technologies. So,
according to this thought, I have tried to describe the rule of working and possibilities of
GTM in the simplest way, omitting purposefully all more complicated descriptions and
simplifying some issues.
The e-‐book does not include everything about Google Tag Manager. It is much more
information if someone wants to learn this subject thoroughly. I have purposefully omitted
some elements of configuration in the e-‐book. I meant to explain possibilities and rule of
working. You must read more about the rest.
I hope the material will help someone in a more and more technical world of marketing.
Regards,
Author and Contributors
Any cases considering this ebook, please contact [email protected]