There are rarely enough leads from the site, so you have to constantly conduct research with the subsequent optimization of your site for everything and everyone. This is especially true for a developing Internet resource.
In this case, the marketer and web analyst want to be on the wave to reflect the effectiveness of all changes on the site. To address this issue, you will need a powerful tracking tool for every user sneeze. There is such a tool, it is free, its name is Google Tag Manager (GTM).
There are many articles on the web describing the basic features of GTM, but they usually do not reveal the powerful aspects of the tool.
In this guide, you will get to know Google Tag Manager at an advanced level and learn how to track subtle points on the site using examples from my experience.
The basics of Google Tag Manager
To begin with, let’s remember the content of the Google Tag Manager toolkit: the basics will help us not to look at the beginner’s guide.
In Russian, the object of our study is called “Google Tag Manager”. It is installed on the site in the form of a code, the same as for Yandex.Metrica, Analytics, Facebook pixel, etc. The best part is that Google Tag Manager can include all these codes.
Together with the dispatcher itself, the data layer is set – an object containing information transmitted to GTM: variables and events. By default, it is named dataLayer . It is this level that is responsible for ensuring that you can send the data you need from the site to the dispatcher, then registering it in the web analytics counters.
Simply put, on the one hand, Tag Manager collects a picture of the site’s operation, and on the other hand, the counters, pixels and API you need are connected to it. What kind of data you need to collect is up to you, and how to do it may not always be clear. But for now, let’s turn to the service interface.
The Tag Manager window is not rich in subsections, but each of them contains a lot of power.
Workspace. Basically, a set of data you define for tags, triggers, variables, and other GTM sublevels. By default it is named Default Workspace.
Versions. Reflects the current state of the structure you specified. Changes in the workspace do not reach the site immediately, you need to publish the corresponding version. After publication, it gets a number, and the following changes update the version and increase its number by one.
Editing. This block shows quantitative changes in the edited version, that is, not yet merged to the site. You can also create multiple workspaces to try different ways of working with the tool.
Published version. Reminds you of when the last changes took place in the GTM container. You can also see the content of these changes.
Preview. A special debugger that is shown on the site with the tag manager code installed and helps you see its work “live”.
Tags. Events that the tag manager calls on the site. For example, data transfer to Google Analytics or native JavaScript code.
Triggers. Events that take place on the site itself and are registered with GTM. As soon as the event you specified occurs, the trigger “cocks” and calls the corresponding tag.
Variables. Standard variables and variables of various kinds that you specify, which allow you to collect, store, change and return values, most often associated with the content of your web resource.
Folders. Google’s pathetic attempt to create a way to organize tags and triggers, thus bringing order to chaotic lists. Practice shows that it is not very convenient for small companies to use them, and all objects continue to be stored in one directory.
Let’s look at a simple example that reflects the picture of the interaction of GTM elements.
Let’s say you are interested in the number of clicks on a specific link. To let the tag manager know which link you want, you need to find its unique distinguishing feature. You will indicate this feature as the content of the corresponding variable . The event for tracking you already understand is a click. There is a standard trigger for it , which you will force to fire only if the click was on the element specified by your variable :
Of course, you want to convey the fact that the link was clicked in Google Analytics. Therefore, when triggered, the trigger must call the corresponding tag . In this case, it is also standard:
Do not forget to transfer changes to the site by publishing a version . After that, every time a user clicks on the link you specified, the tag manager will send an event to Analytics, which will need to be registered in the “Goals”:
Basic knowledge alone is sometimes enough to experience the benefits of Google Tag Manager: now you don’t have to ask the programmer to manually set target action markers on the site. You can simply search for unique attributes of site elements and write them into variables. But the real situation is not always so rosy.
Content and structural features of modern sites
To understand the challenges faced in real-world tracking with GTM, let’s look at their typical composition. In the future, this will be useful for understanding the background of analytical tasks.
When analyzing web resources for their composition, we must not forget about the “Developer Console” in the browser – it is it that allows you to track exactly what elements you need and what properties they have. The console opens by pressing CTRL + SHIFT + I or by right-clicking on the desired element and then in the “View element code” menu:
Websites have structural tags such as <head>, <body>, <main> and others, but we shouldn’t worry about them. Most often, a marketer needs analytics on the use of page conversion elements. And here they are:
Buttons and clickable panels. Today they are most often styled as regular blocks with <div> code. This element has ample opportunities for design, which means that it will appear in the analyst’s work most often:
If you pay attention to the data about the button in the console, you will see nesting: by clicking on the arrow-triangle to the left of the <div>, nested elements will open. These will be the text “Next” and the arrow, but in other cases there may be many more nested elements that represent a regular button.
Text blocks. Often, a marketer is interested in how actively people on the site use filling in text fields, which of them are filled in more often and what exactly they enter.
Clickable lists. In addition to banal polls, these can be “ticks” of any parameters or the choice of the user’s further path. Moreover, often familiar <checkbox> or <radiobutton> elements are formatted as <div> or <span> elements already known to us:
Checkboxes. Separate “check marks”, when affixed to the user will have access to special conditions on the site. Their presence or absence is also in the sphere of interests of the web analyst:
Common web analytics problems and their solutions in Google Tag Manager
If you already know how the tag manager works and what blocks are on the site, then feel free to start with this section. Each case is based on real experience and was triggered by the moment when a standard solution from GTM was applied, but it did not work under the given conditions.
To solve this kind of problem, you will need a basic knowledge of HTML and its properties, as well as basic JavaScript (Jquery) skills . Both of these knowledge help to squeeze out of Google Tag Manager, if not the maximum, then a lot.
Clicks on nested items
To track a click on an object on the site, you need to “catch” it through a class, ID or other property (for brevity, we will call them that – object properties) and use the standard GTM event – a click on an element with “Click Classes = XXX”. But there is a problem:
In this case, clicking on the “Arrival” button will mean either clicking on the inscription, or on the plane icon, or on the space of the button around them. These are all different clicks .
If there is nesting of sub elements inside one element, then the click on each of these child objects will need to be tracked separately. Namely, create a trigger for each sub-element.
In the case of the label and button field, the situation is clear, here we will write:
- Click on the element with the “FlightTypes-typeText” class (the inscription “Arrival”);
- Click on the element with the “arrival” class (white background of the button);
The picture remains. If you try to track it through the developer’s console in the browser, it becomes clear that the click is on the <svg> block. As we can see, it does not have its own class, and the ID is not unique. Moreover, inside it there are still several sublevels of sub elements of the <g> type, without any identifying signs at all.
In this case, the solution is to find the parent element of the desired one and identify the click by it. This is where knowledge of HTML and JavaScript comes in handy.
First, we create a GTM variable to get the class of the parent element, type – “Native JavaScript”:
This variable allows you to perform actions on site elements using JS codes, and use the result as a condition for triggering a trigger. When we search for the parent of the current one, we will use the standard property .parentElement – that is, a reference to the “parent”. You can create several user variables at once that will work like the standard Click Classes, but for parent elements of different nesting levels. This is done like this:
In this case, the JavaScript function – function () is used , which produces the result – the class of the parent object for the element that was clicked. We have already discussed the call of the clicked element inside the JS code above.
You can make variables like this for classes of different parent levels:
- .parentElement.className;
- .parentElement.parentElement.className;
- .parentElement.parentElement.parentElement.className;
- etc.
Going back to the button example, the function will return the FlightTypes-typeIcon TypeIcon class . If it is a unique class, then it can be used in a trigger. Alternatively, you can take a higher level class arrival . Now we create a trigger:
Note that in this case the grandparent variable is used with the string .parentElement.parentElement.className called GrandParentClass (we set it ourselves).
By creating the corresponding tag, we set it to fire on all triggers at once – clicks on the element itself and all of its children.
You don’t have to waste time isolating the classes or IDs of each subelement of the button to create the corresponding triggers. Count the number of nesting levels and use pre-created variables with parent classes of different levels – “click on parent”, “click on grandparent”, “click on great grandparent”, etc. So you will automatically track clicks on any subelements of the main one.
You also need to understand that you can take through JavaScript not only classes, but also texts, identifiers, URLs and other properties of the parent object.
Checkboxes, forks, choosing a user’s path through the site
In our example, Departures / Arrivals are not just buttons – they are two conditions of type radioButton . You can choose only one option and get the corresponding set of data, in this case – services for departure or arrival. If we want to track the click on services only upon arrival, then we will have to take into account the condition “Selected option – Arrival”, since the classes of these services are the same as for services on departure.
This trigger will be triggered if the user clicks on the checkbox with the ” dark ” class , and it already has a “check mark”. Accordingly, a click will mean its removal.
You will create the same trigger for the condition when the box does not have a “tick”, which will mean putting it down.
In this case, you can create three tags at once to set goals in the analytics counter – to uncheck, tick and simply click on a checkbox (triggered by any of the two triggers). So you can understand how much the item is in demand and how often people use it within the same session.
Content of text boxes
Most often, the user enters text into an <input> field , from where it can be extracted quite easily:
The document.getElementsByClassName (”) procedure collects a list (array) of elements with the class you specified – in this case, input – across the entire working window of the site. To find the required element in this list, you need to specify its ordinal number, starting from 0 – in the example, this is specified through “[0]”. Since you see the page in front of you, you can find out through the developer’s console the number of elements with the required class and determine the ordinal number in the list, taking into account the appearance in the code.
The GTM variable gives out the content of the field through the value property . This will be the text you are looking for.
All that remains is to choose a starting point from which you will receive the text and pass it on through tags. This can be a click on the next step on the user’s path through the site. Suppose a visitor has entered text into a field and clicked “Submit” – at this moment, the trigger for reading the contents of the field will be triggered.