The Cheatsheet Intro to All Possible Google Tag Manager Customization

11 min readJan 6, 2019

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

If you are new to GTM, read until ‘The Most Basic GTM Flow’, and you should understand the major GTM components (GTM Javascript, Trigger Type, Trigger Filter, and Tag Type), and how they interact with one another
If you are familiar with major GTM components (GTM Javascript, Trigger Type, Trigger Filter, and Tag Type), then use the ‘Complete Flow Diagram For GTM’ image to figure out which flow can help you achieve your user event tracking goal, and jump straight into the appropriate section

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

Complete Flow Diagram for Google Tag Manager (GTM)

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.

GTM Javascript: The Javascript that you install on each webpage that will trigger user events of interest
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

Install GTM Javascript script on your webpage. By default, the script can fire upon various built-in Trigger Types, e.g., Page View, Mouse Click, Form Submit, etc.

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 is the most basic flow; GTM Javascript fires a ‘tag’ when Trigger Type is matched, and the ‘tag’ is send to the Tag Type.

This image shows the GTM ‘Add Tag’ configuration page, and it gives you an idea how ‘Tag’ configuration is done.

Basic Tag Configuration Comprises Tag Type and Trigger

Example: Basic GTM Flow

One of the most basic GTM flow is GTM Javascript triggering on every ‘Page View’ event, and sending each user visit event to Tag Type ‘Google Analytics’.

If you are familiar with ‘Google Analytics’, this example seems contrived; it seems no different from foregoing GTM, and installing ‘Google Analytics’ Javascript manually on the web page. Yet that exactly is one of the technical goals of GTM; you do not need to install various 3rd party platform Javascripts onto your webpage, which gets messy very fast; you only install GTM script, and you can configure GTM to redirect any user events to other 3rd party platforms by configuring under Tag Type.

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.

Configuration Panel To Associate Trigger Filter To A Trigger Type

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.

In webpages with GTM Javascript installed, you can write custom Javascript code to push Events into Data Layer. If you argue that deploying these custom Javascripts yourself onto your website violates the purpose of GTM, you can use ‘Custom Tag’ (see Section ‘6: Create Custom Tag to Create Data Layer Events or Cookies’ at the end) so that GTM will deploy the custom Javascripts for you.

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:

dataLayer.push({'event': 'AddCartItem'});

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.

Configuration Panel To Add Custom Trigger Type Using Data Layer Custom Event

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

If you want to to send ‘Page View’ user event to Tag Type ‘Google Analytics’ only if a user is currently logged in, then on web pages with GTM Javascript installed, you can create a ‘LoggedIn’ event in Data Layer if the user is logged in, with the following snippet:

dataLayer.push({'event': 'LoggedIn'});

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.

Configuration Screen To Map Data Layer Events to Variable

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.

Trigger Configuration Panel To Use The Data Layer Event In Trigger Filter

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).

Configure Trigger Filter to Use A Variable Whose Value Is Derived From A Cookie

6: Create Custom Tag to Create Data Layer Events or Cookies

Custom Tag runs Javascript Code which Creates Custom Events

‘Custom Tag’ is unlike other Tag Types; it is not associated with a destination where the user event is sent. Instead it merely runs Javascript code that you associate with it when a Trigger Type & Trigger Filter matches.

When the Javascript code is run, it can do anything since it is arbitrary code. However, it is usually used to create Data Layer events, or create/modify 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.

You could argue that you can embed the Javascript code to create/modify Cookies or push Data Layer events in your web page directly instead of defining them in ‘Custom Tag’ (see Section 3 & 4), however there are 2 advantages of running the Javascript code in ‘Custom Tag’:

You can easily control when the ‘Custom Tag’ fires (thus when the Javascript code runs) by setting Trigger Type and Trigger Filter since ‘Custom Tag’ is a Tag Type
You make changes to Javascript code on GTM, and it will be be deployed to your web pages, without requiring assistance from developers to create/modify the Javascript code on webpages

Example: Create Custom Tag to Create Data Layer Events and Cookies

You can ‘Fire Tag on 3rd Page View’. The full explanation is here.

Basically you create a ‘Custom Tag’ with a Javascript code to set/increment page count in a Cookie with the conditions of Trigger Type ‘Page View’ and no Trigger Filter, i.e., trigger on every user ‘Page View’.

Add A Custom Tag Trigger Type To Set Cookie or Data Layer Events in

You can then map the Cookie to a Variable ‘PageCountView’, and then create a custom Trigger Filter (‘PageCountView’ = 3) to fire a tag.

Summary

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
Centralize installation of the various Javascripts of other platforms, e.g, mouse tracking (Hotjar, CrazyEgg, etc.), A/B testing (Google Optimize, Optimizely, etc.), paid ads (Google Ads, Facebook, etc.)
Install custom Javascript scripts to that would otherwise need to be installed manually other platforms
A central channel where all user events are aggregated and redistributed