The 2019 Updated 5-Minute Introduction to All Possible Google Tag Manager Customization
Google Tag Manager (GTM) was created to empower digital marketers to track user events without making code modifications directly on their website — a digital marketer can configure user events to track on the GTM platform, and the configuration will be converted to code, and deployed to the website by GTM.
To accelerate digital marketer empowerment, the Internet produced a slew of step-by-step guides and even instant recipes that you can just import into GTM for tracking various user-driven events, e.g., website visitors coming from your paid ads, users visiting the site for the 3rd time, etc.
These materials paper over the need to truly understand GTM, until…you cannot find the guide or recipe that you need, which was what happened to me, and I had a hard time piecing together fragments of information from various sources to grasp whether GTM can do what I wanted.
The fragments of these GTM information is now an article, which I hope will become a simplified 5-minute introduction and guide that GTM always needed but never had yet!
How To Read This Google Tag Manager (GTM) Guide
Why Google Tag Manager (GTM) is Hard To Understand?
The are 3 pieces of information that are missing from existing GTM articles that makes GTM hard to understand:
- The basic flow showing how all the major components work together
- The variation of flows, the components can work together to help understand what GTM can and cannot do
- Concrete examples showing when to use each flow
Google Tag Manager (GTM) In A Brief
Central to GTM is the concept of a ‘tag’, which is basically a user event that is defined by the condition that will trigger it, and the outcome of it being triggered.
For example, a ‘tag’ can be an e-commerce purchase user event, the condition can be when the purchasing user came from a paid ad, and the outcome is sending this tag to your paid ad platform — this enables your paid ad platform to correlate your website data with the paid ad data, to accurately measure the performance of your paid ads.
Google Tag Manager (GTM) At A Glance
This diagram shows the complete flow and interaction between the 4 major components (red color) in GTM. Use it for reference once you understand all the GTM major components.
- Trigger Type: A GTM tag will fire when its Trigger Type is matched, e.g., ‘Page View’, ‘Mouse Click’, etc.
- Trigger Filter: Offers finer control of Trigger Type. It contains additional conditions that needs to be met before the GTM tag will fire, e.g., ‘Page View’ event will fire only if the referrer url contains ‘google.com’
- Tag Type: What happens when a tag fires. This is usually a platform to which you will send the details of the tag fired to.
Let us walk through the 6 different flows to deepen our understanding of each GTM component, the subcomponents, and their interaction with each other.
Each flow builds on the previous flow, and the part of the flow that is new is highlighted in blue.
1: The Most Basic GTM Flow
You can use a Trigger Type to specify when to fire a ‘tag’, which is a fancy name for user event, e.g. we can create a user visit ‘tag’ by setting the Trigger Type to ‘Page View’ so that event fires each time the web page is shown to a visitor.
A ‘tag’ comprises of Tag Type and Trigger Type.
Tag type is a misnomer; destination is more apt description as it is a 3rd party service, where the triggered event details will be sent.
This image shows the GTM ‘Add Tag’ configuration page, and it gives you an idea how ‘Tag’ configuration is done.
Example: Basic GTM Flow
2: Use Trigger Filter To Finer Control Trigger Type
Trigger Filter can supplement Trigger Type to provide finer control of when a ‘tag’ fires. Some built-in Trigger Filters include checking ‘URL contains’ or ‘Referrer contains’ a certain string. Thus only user events that match both Trigger Type and Trigger Filter, are sent to Tag Type.
Example: Use Trigger Filter To Finer Control Trigger Type
If you do not want ‘Page View’ events of users coming from your other subdomains to appear in ‘Google Analytics’ , you can add a Trigger Filter (‘Referrer does not contain’ your subdomains) to your Trigger Type for ‘Page View’ user events.
You can configure this in the GTM ‘Add Trigger’ configuration panel as shown in the image below.
3: Create Custom Trigger Type With Data Layer Event
You need this if built-in Trigger Types (‘Page Views’, ‘Mouse Click’, etc.) are not sufficient for your needs.
This enables you to create a custom Trigger Type based on the custom Event you created in the Data Layer.
Example: Create Custom Trigger Type With Data Layer Event
If you want to send an event to Tag Type ‘Google Analytics’ whenever a user adds something to her shopping cart, one way would be create a ‘AddCartItem’ in Data Layer by adding this snippet to your website code:
With that, you go to GTM ‘Add Trigger Type’ configuration panel, and create a custom Trigger Type, by choosing ‘Custom Event’ (see image below) as type and set it to ‘AddCartItem’. More details available here.
NOTE: You could argue that this is an overkill since you could possibly use built-in Trigger Type such as ‘Form Submit’ or ‘Mouse Click’ with appropriate Trigger Filter, such as ‘Click ID’ which belongs to your ‘Add To Cart’ button.
4: Create Custom Trigger Filter With Data Layer Event
You need this if built-in Trigger Filters (‘Page URL contains’, ‘Referrer contains’, etc.) are not sufficient for your needs.
In the previous use case, you push a user event into Data Layer to create custom Trigger Type. In this use case, you also push a user event into Data Layer but you convert the Event into Variable, so that it can be used to create custom Trigger Filter.
Example: Create Custom Trigger Filter With Data Layer Event
Note that on the same web page, you may be pushing a lot of other events into Data Layer, e.g., ‘LoggedOut’, ‘AddItemToCard’, etc.
In the GTM ‘Add User-Defined Variables’ configuration page, you can then map all these Events into a Variable, e.g., choosing a generic name ‘PageXYZ Event’, and then selecting ‘Custom Events’ as shown.
This ‘PageXYZ Event’ Variable becomes available in the Trigger Filter configuration page (see image below), and you can create a custom Trigger Filter, where ‘PageXYZ Event’ contains ‘LoggedIn’, to supplement your ‘Page View’ Trigger Type to achieve the goal of sending user visit events to Tag Type ‘Google Analytics’ only if they are logged in.
NOTE: You could argue that this is an overkill since a logged in user may have some cookies indicating so, and that is what we will talk about next.
5: Use Cookie In Custom Trigger Filter
Developers use browser cookies, as the default way to persist state between a visitor and a web service. GTM allows the use of these cookies to create custom Trigger Filter, which can offer finer control on when Trigger Type will fire; the Cookie has to be defined as a Variable first (see image below)
Example: Use Cookie In Custom Trigger Filter
Let us use the same example as ‘Create Custom Trigger Filter With Data Layer Event’ where we only want Trigger Type to send user events to Tag Type ‘Google Analytics’ when the ‘Page View’ is for a user already logged in, so we need to create a custom Trigger Filter to supplement the Trigger Type.
If there is some Cookie in the browser e.g., ‘First Name’, which is only set when a user is already logged in, we can create a Variable ‘FirstName’ based on that Cookie, and then set Trigger Filter to activate when the Variable ‘FirstName’ is not empty in the ‘Add Trigger’ configuration panel (see image below).
6: Create Custom Tag to Create Data Layer Events or Cookies
The Data Layer events and Cookies can then be used to create custom Trigger Type (see Section ‘3: Create Custom Trigger Type With Data Layer Event’) or Trigger Filter (see Section ‘4: Create Custom Trigger Filter With Data Layer Event’ and ‘5: Use Cookie In Custom Trigger Filter’),which provides finer control of when tags will fire.
In short ‘Custom Tag’ are used to create Data Layer events and Cookies required to create custom Trigger Filters.
Example: Create Custom Tag to Create Data Layer Events and Cookies
You can ‘Fire Tag on 3rd Page View’. The full explanation is here.
You can then map the Cookie to a Variable ‘PageCountView’, and then create a custom Trigger Filter (‘PageCountView’ = 3) to fire a tag.
Complete Google Tag Manager (GTM) Flow Diagram
This is the most important reference diagram for Google Tag Manager (GTM). If you understand the 4 GTM major components (in red), and how they interact, this diagram will help to figure out how & what to configure GTM to achieve your user tracking goals.
The Technical Goals of Google Tag Manager (GTM)
We touched on the business value goal of GTM to empower digital marketers to track user events with minimum developer assistance. Here are 3 technical goals of GTM:
- Link events on GTM to other platforms (Google Ads, etc.) since users may be sent over to your website by those platforms, so sending user events back to those platforms enable them to close the loop on the cause and effect
- A central channel where all user events are aggregated and redistributed