Anyone new to digital marketing will likely come across ‘Google Tag Manager’ at some point. Google Tag Manager, or GTM for short, is an example of a ‘tag management system’ – a way to add JavaScript tracking code (i.e. marketing tags) to a website without having to amend the source code of the site.
Examples of common marketing tags typically deployed are:
- Google Analytics (GA) tracking code
- Remarketing/RLSA tags
- AdWords Conversion tracking
- Crazy Egg
- Facebook, Twitter or LinkedIn conversion tracking
- Interactive communication modules – e.g. Live chat
Before the advent of tag management systems, tags were manually added to the HTML of each page template. This would result in several marketing tags existing on each page, increasing the possibility for errors during the manual upkeep of these tags.
Although there are several different tag management products on the market, GTM has become the most popular, as it is free, easy to use and integrates nicely with Google Analytics (GA). Plus it’s from Google, so it’s got to be slick and intuitive – which adds to its appeal!
For the purpose of this blog, we will assume the use of GTM.
All Tag Managers including GTM are deployed by adding a ‘container code’, which is a small snippet of code (similar to the Google Analytics tracking code), to the <body> section of every page of the website. Container codes can been thought of as ‘buckets’ that hold other types of tags.
This one piece of container code replaces all marketing tags previously used, including the GA code, as those tags are set up in the Google Tag Manager web interface and not in the HTML code.
How Google Tag Manager works
To understand how GTM works, it’s important to understand ‘tags’, ‘triggers’, and ‘variables’. For bonus points, there’s also the ‘data layer’, which can make GTM even more powerful!
Tags
A tag is a snippet of JavaScript code that is to be ‘fired’ (i.e. executed) on the website if certain conditions are met. These conditions are called triggers.
Here is an example of the GA tag that you may recognize:
Triggers
A trigger is a condition that evaluates one or more variables to either ‘true’ or ‘false’ at runtime.
A simple trigger could be URL = regex .* , which basically evaluates to ‘true’ on every URL (or page) and is the trigger used to fire a tag on every single page of a site.
Another simple trigger could be URL contains /products which would fire a tag on product pages only.
Variables
‘URL’ is an example of a variable that is commonly used. In triggers, the variable is evaluated against a value you define – e.g. ‘.*’ and ‘/products’ are the values I defined in the above examples. If the evaluation is true, the tag is triggered into firing.
GTM contains a number of built-in variables which have to be enabled before use, such as Form ID, click classes and more. Custom variables can also be defined and imported from the data layer and used in firing rules. What do I mean? To find out, let us delve further into the data layer.
The data layer
The data layer is like a repository of information located in the HTML source code of a web page, containing specific details about the page’s content and the user’s interaction with it. It is essentially a JavaScript object set in the HTML code and is created by GTM by default (since GTM relies on it in order to work).
A data layer does not have to exist on a website – many websites don’t have one and still perform perfectly fine – however when it is used in conjunction with a tag manager, many advanced marketing opportunities are made possible. We’ll cover some of these later.
The data layer can be pre-populated on page load with fixed variables (e.g. page or product description variables), or be dynamically populated after page load when the user interacts with certain elements on the page (e.g. by adding an item to cart or clicking on a link). The latter is done using the dataLayer.push method in the page code.
The default data layer variables
A data layer is created when you add the GTM container code to the site. GTM’s data layer object is called dataLayer. For those familiar with JavaScript, it is a hierarchical structure that uses Array notation (the ‘[ ]’ square boxes). By default the data layer will only contain information that GTM uses, such as event variables that indicate the page has loaded:
If a developer wants additional data to add GTM’s data layer they will need to position the information before the container code in the HTML, so that variables defined within it will populate GTM’s default data layer.
How can we get custom data into the data layer?
The data layer has to be defined when a page is parsed by the web server before being delivered to the user’s browser. Therefore, if you want to add custom data to the data layer, whether the data exists prior to page load (static variables such as page descriptions) or is generated after page load (dynamic variables generated by user interaction with the page), this will necessitate the involvement of a developer who will have to add the relevant code to the HTML.
What can we do with data in the data layer?
Information in the data layer can be used to fire tags in GTM or to pass data on to GA to create goals or custom dimensions and variables for use in custom reports. In fact, the main purpose of the data layer is to pass information on to third part systems such as GA or GTM.
Typical use cases
- Example of an ecommerce website with data layer variables defined prior to page load – these describe details of a product page on an ecommerce website. This data layer contains the same variables (with different values) on all product pages:
The variables ‘product.name’ ‘product.id’ or ‘product.price’ can be derived from this data layer and used to trigger tags or pass on information to GA.
- Post page load – the data layer can be used to records key user actions of value, and to use this information for more targeted advertising. The following examples show how:
Example 1 – Let’s say you want to display a Google remarketing tag only to those customers who spend more than £100 on checkout. With the data layer and GTM, filtering out customers who spend less than £100 is easy. All you have to do is push the total transaction value on the receipt page into the data layer, import that variable into GTM as a data layer custom variable, and set a trigger on the remarketing tag to only fire if the transaction value variable > £100. This will result in only those customers being added to the remarketing list who have spent more than £100.
Example 2 – You want to create a remarketing list of all people who click on ‘add to cart’ button after a page has loaded.
Using the dataLayer.push method (for e.g. by adding this link to the button <a href=”/basket” onclick=”javascript:dataLayer.push({ event: “addToCart” })”>Add to cart</a>), you define a new data layer variable in GTM that retrieves the value so that it can be evaluated in a trigger.
With this rule, as soon as somebody clicks ‘add to cart’, it will be recorded in the data layer and they can be added to a remarketing list.
The general rule steps for using data layer variables in triggers to fire tags are:
- Create a new user defined variable, with variable type set as ‘data layer variable’
- For ‘data layer variable name’, use the page’s data layer variable using JavaScript dot notation e.g. product.name in the Xbox example
- Create a firing rule and set the rule so that {{custom variable name}} equals (data to be evaluated) e.g. product.type = Xbox one
- Apply this rule to a tag
- The tag will now fire on page load, if the variable being evaluated exists in the data layer. In our example, if the variable product.type = Xbox one exists in the data layer, the tag will fire.
Other useful things you can do with GTM
You can create a goal conversion in the event of a website action such as a completed form submission.
Example 1 – Lead capture form – GA goal completion
- From the GTM interface, select and create a ‘form’ trigger, with ‘enable when’ set to the URL of the contact form, to fire when the form ID equals the HTML form ID of the lead capture form.
- Create a GA Universal analytics tag with track type set to event, firing when triggered by the form trigger created in step 1. Set category, action & label parameters as per standard event tracking.
- Finally, create a new goal in GA with the event tracking parameters defined in step 2.
Example 2 – Tracking clicks on PDF downloads on the website
- Use the in-built ‘click URL’ variable and set up an event trigger to fire on ‘Click URL matches RegEx ‘.pdf’
- Then create a GA tag with track-type set to ‘event’ to fire on the trigger just created. The event label can be the click URL variable, to help distinguish between different PDFs in reporting.
- Finally, create a new goal in GA with the event tracking parameters defined in the tag.
The benefits of GTM
- Ease of deployment of new tags – creating a new tag is dead simple, all you have to do is define a new tag, specify a trigger and set the variable that is to be evaluated in the trigger. Simple ‘custom HTML tags’ within GTM that fire on URL triggers can be set up and deployed within minutes.
- Reduced lead time – With Google Tag Manager, marketers can get tags deployed live much faster, as the power is in their hands with no need to involve a developer.
- Reduced risk – Since website code is not being amended, there is no risk of breaking a page or messing up content.
- Faster page load time with only 1 container to load. As page speed is a ranking factor in Google’s algorithm for organic SEO and AdWords quality score, this is important.
- Powerful preview mode for diagnosing errors – before pushing a new tag live, it can be tested in preview mode first. A cookie is dropped into your browser so that you see a GTM overlay when you visit the website – all tags fired (and not fired) are shown, and if a tag isn’t working it can be diagnosed and fixed.
- With GTM you can add multiple users with varying levels of account permissions – access can be granted to users at 3 levels: ‘view only’, ‘view and edit’, and ‘view, edit, delete and upload’. Granting access to agencies is extremely straightforward.
- Built in tags – Third party tags such as Crazy Egg and LinkedIn are preinstalled, and with a minimal customization can easily be deployed.
- Event listeners – Custom events can be created for Google Analytics, allowing Goals to be set for conversion tracking. A variety of ‘click listeners’ are available for easy set up.
- Version control and revision history – When a new tag is deployed to the website, a new container version is created. Rolling back to a previous version is easy.
Conclusion
In conclusion, using a tag manager is the best way to manage third party marketing tags on a website. We recommend Google Tag Manager for its functionality and ease of use. Agencies working on client sites can easily be given access to the GTM container and access can be revoked at any time. Version control ensures you can rollback to previous state and the built in debugging tool is a powerful deployment aid.
However the true potential of a tag management system only become realized when you use it in conjunction with the data layer. Without the power of the data layer, GTM is underutilized and just becomes a one way tool for deploying tags to pages, when it should be a tool for extracting data from the site too.
The essence of effective digital marketing is to segment and target audiences on a granular level for a more personalized marketing message. In an ever competitive digital landscape this is the only way to attain better conversion rates and a healthy ROI. The data layer in conjunction with a Tag Management system can help achieve this.
Insights
