This article is related to Google Tag Manager (GTM). If you are brand new to GTM then read the following two articles first:

1. Beginner’s Guide to Google Tag Manager
2. Google Tag Manager Implementation and Deployment Guide

Introduction to GTM Variables

A variable is a storage location in the computer memory. It has got ‘name‘ and ‘value‘. A variable is referenced by its name. Value is that expression that can not be solved any further. For example, the expression ‘2+3’ is not a value because it can be solved further into 5. However the expression ‘5’ can not be solved further, so it can be used as a value.

In the context of GTM, a variable is a function that can be called from within a tag, trigger or another variable. A variable tells GTM where to fire a tag. For example,

{{url}} matches RegEx .* // fire the tag on any page that is downloaded by a user.

Here {{url}} is a built-in variable (predefined variable) which refers to the URL of the currently loaded page.

Following is the syntax for calling/referencing a variable in GTM:

{{Variable Name}}

You can reference/call a variable in any text field in GTM wherever you can see the ‘variable’ button:

Note: The value of the GTM variable is populated during run time.

A variable is used to store data that is used in defining a trigger and/or to pass information (like product price, google analytics account id etc) to tag(s) at runtime from:

• Data layers
• JavaScript Variables
• First Party Cookies
• HTML DOM

In GTM there are two categories of variables:

1. Built-in variables (or predefined variables)
2. User-defined variables

Built-in Variables in Google Tag Manager

Built-in variables are predefined variables. These variables can not be customized. In order to see the list of built-in variables available to you, click on the ‘Variables’ menu:

Configuring a built-in variable means activating or deactivating the variable from within the GTM interface. Only a particular set of built-in variables are activated by default:

Once a built-in variable is activated it can be used just like any user-defined variable. Activate all of the built-in variables so that they are available to be used anytime. 

Types of Built-in Variables Available in GTM

Pages

Page URL: Provides/returns the full URL of the current page e.g. ‘www.abc.com/products/newsunglasses’

Page Hostname: Provides the hostname portion of the current page e.g. if the current page is www.abc.com/products/newsunglasses then the Page Hostname variable would return ‘www.abc.com’

Page Path: Provides the path portion of the current page e.g. if the current page is www.abc.com/products/newsunglasses then the Page Path variable would return ‘/products/newsunglasses’

Referrer: Provides the full URL of the page which brought a user to the current page.

Utilities

Event: Gives details of current data layer events like DOM Ready, Page Load, Window Load, Click, etc

Environment Name: Returns the user-provided name of the environment currently being previewed.

Container ID: Provides the GTM container’s public ID. Example value: GTM-XXX12

Container Version: Provides the current version number of the container, as a string.

Random Number: Returns a random number value.

HTML ID: Returns the identifier of the custom HTML tag.

Errors

Error Message: This variable returns a string value that contains the error message displayed to a user.

Error URL: This variable returns a string value that contains the URL where the error occurred.

Error Line: This variable returns a numerical value or number of the line in the file where the error occurred.

Debug Mode: This variable returns true if the GTM container is currently in preview mode.

Clicks

Click Element: This variable returns the HTML element that was clicked.

Click Classes: This variable returns the value (of type ‘string’) of the ‘class’ attribute of the HTML element that was clicked.

Click ID: This variable returns the value (of type ‘string’) of the ‘ID’ attribute of the HTML element that was clicked.

Click Target: This variable returns the value (of type ‘string’) of the ‘target’ attribute of the HTML element that was clicked.

Click URL: This variable returns the string contained in the ‘href’ or ‘action’ attribute of the HTML element that was clicked.

Click Text: This variable returns the value of text clicked by a user.

Forms

Form Element: This variable returns the form element (like Dropdown, Radio Button, Text Box) that was clicked.

Form Classes: This variable returns the string contained in the ‘class’ attribute of the form element that was clicked.

Form ID: This variable returns the string contained in the ‘ID’ attribute of the form element that was clicked.

Form Target: This variable returns the string contained in the ‘target’ attribute of the form element that was clicked.

Form URL: This variable returns the string contained in the ‘href’ or ‘action’ attribute of the form element that was clicked.

Form Text: This variable returns the text provided by a user in a form field

History

These variables are used to track virtual page views when there is no change in URL.

New History Fragment: This variable returns the string value of the fragment (aka hash) portion of the page’s URL after the history event.

Old History Fragment: This variable returns the string value of the fragment (aka hash) portion of the page’s URL before the history event.

New History State: This variable returns the value of the state object that the page pushed onto the history to cause the history event.

Old History State: This variable returns the value of the state object that was active before the history event took place.

History Source: This variable returns a string which refers to the event that initiated the history change.

Videos

Video Provider: This variable returns the name of the video provider (i.e.’YouTube’).

Video Status: This variable returns the current state of video like Play, Pause, Stop, buffering etc.

Video URL: This variable returns the URL of the embedded video e.g. ‘https://www.youtube.com/watch?v=optimisesmart’.

Video Title: This variable returns the title of the embedded video.

Video Duration: This variable returns the total duration of a video in seconds.

Video Current Time: This variable returns an integer that represents the time in seconds where a user currently is.

Video Percent: This variable returns an integer that represents the percentage of video watched by a user.

Video Visible: This variable returns true or false, depending upon if the video was visible in the browser viewport.

Scrolling

Scroll Depth Threshold: This variable returns a numeric value from 0 to 100 specified as scrolling threshold.

Scroll Depth Units: This variable returns either ‘pixels’ or ‘percent’ depending upon which threshold type a trigger is tracking.

Scroll Direction: This variable returns the direction of Scroll with string value like “Vertical” or “Horizontal”

Visibility

Percent Visible: This variable returns a numeric value (0-100) that indicates how much of the tracked element has been in the browser viewport when the trigger fires.

On-Screen Duration: This variable returns a numeric value that indicates how many milliseconds the tracked element has been in the browser viewport when the trigger fires.

In GTM the number and type of built-variables that are available depend upon the type of GTM container being used. Following are the different types of GTM containers:

1. Web container
2. AMP container
3. Android container
4. IOS container

User-Defined Variables in Google Tag Manager

User-defined variables are the variables defined by people like me and you.

User-defined variables are custom created variables to suit a specific set of requirements which are not covered in built-in variables.

If you have created user-defined variables then you can see them by clicking on the ‘Variables’ menu:

In order to create a new user-defined variable, follow the below steps:

Step-1: Click on the ‘Variables’ tab and click on ‘New’ under user-defined variables.

Step-2: A new window will pop up like below, give it a proper name and click on ‘Variable Configuration’

Step-3: In the variable configuration, you will see several types of user-defined variables, as below (click on the type of variable you want to create)

Type of User-Defined Variables Available in GTM

Navigation

• HTTP Referrer: This variable returns “Previous Page URL” or Referrer (Type of value: String)
• URL: Current URL: This variable returns current URL of page loaded on the website (Type of Value: String)

Page variables

• 1st party cookie: This variable returns cookie value set in with specific domain name (Type of value could be String or number based on business requirement)
• Custom JavaScript: This variable is a custom JavaScript function which is used to pass website parameters in a variable
• Data layer: The data layer variable corresponds to an array of values that are collected across your site and the visitor interactions and events that are tracked

Page elements

• Auto-event variable: this variable identifies auto events like click, form submission, element visibility on the website and returns parameters associated with the event
• DOM element: This variable returns the value of the text of the DOM (Document Object Model) element or the value of the specified DOM element attribute on the page.
• Element visibility: This variable returns the value to True for a specified object when its visible like a pop-up. It also returns the percentage of an element’s visibility like 50%

Utilities

• Constant: This variable returns a constant number
• Custom event: This variable returns custom event sent to dataLayer
• Environment name: Returns the user-provided name of the environment currently being previewed.
• Google Analytics settings: This variable returns Google Analytics Account ID
• Lookup table: This variable based on the certain conditions evaluates the condition first and then accordingly sets a value of a specific variable
• Random number: This variable returns a random number between 0 and 2147483647

Regex table: this variable is the advanced version of the lookup table which runs on regular expressions

The real power of Google Tag Manager lies in the usage of variables.

Introduction to Triggers in Google Tag Manager

A trigger is a condition that must evaluate to either true or false at run time.

In GTM, triggers are an integral part of a tag creation process. So you can not create a tag without first creating a corresponding trigger.

There are two methods for creating a trigger in GTM. One is while you are creating a new tag and one is through the triggers menu:

Now watch this short video to improve your understanding of GTM triggers:

There are two categories of triggers in GTM:

1. Firing triggers (commonly known as triggers)
2. Blocking triggers

Firing Triggers

A firing trigger (or firing rule) is a condition that must be met (must evaluate to true) at run time, for a tag to fire/execute.

A firing trigger tells GTM when the tag should fire. Following is an example of a firing trigger:

{{url}} matches http://www.abc.com/cart/thankyou.html

This trigger fires the tag when the URL of the currently loaded page matches http://www.abc.com/cart/thankyou.html

There are two categories of firing triggers:

1. Built-in firing triggers
2. User-defined firing triggers (also known as custom triggers)

Built-in and User-Defined Firing Triggers

Built-in triggers are predefined firing triggers. These are ready to use triggers. User-defined triggers are the ones defined by people like me and you.

There are two methods to see the list of built-in and user-defined triggers. One is while you are creating/editing a tag and one is through the triggers menu.

Method-1: While creating/editing a tag

In order to see the list of built-in and user-defined triggers, follow the steps below:

Step-1: Create or edit a new tag.

Step-2: Click on the ‘Choose a trigger to make this tag fire…’ button:

Step-3: Click on the ‘+’ button on the top right-hand side:

Step-4: Click on ‘Choose a trigger type to begin setup’:

You will now see the list of available built-in triggers:

For each built-in trigger, there is a corresponding user-defined trigger available. In other words, GTM lets you customize built-in triggers.

For example, in order to customize a built-in trigger say ‘DOM Ready‘ just click on it and then select ‘Some DOM Ready Events‘:

Following is a complete list of built-in triggers along with their corresponding user-defined trigger:

Method-2: Using the ‘Triggers’ menu

In order to see the list of built-in and user-defined triggers using the ‘Triggers’ menu, follow the steps below:

Step-1: Click on the ‘Triggers’ menu:

Step-2: Click on the ‘New’ button:

Step-3: Click on ‘Choose a trigger type to begin setup’:

You will now see the list of available built-in triggers:

Blocking Triggers

A blocking trigger is a condition that must be met (must evaluate to true) for a tag to not fire/execute. A blocking trigger tells GTM when the tag should not fire. You can create a blocking trigger (or blocking rule) by clicking on the ‘Add Exception‘ link while creating/editing your tag. Follow the steps below:

Step-1: Create/edit a tag

Step-2: Scroll down to the ‘Triggering’ section and hover your mouse over this section. You should now see a ‘Pencil’ button. Click on it:

Step-3: Once you clicked on the ‘Pencil’ button you will see an ‘Add Exception’ link. Click on it:

The rest of the process of creating a blocking trigger is similar to the process of creating a firing trigger.

Note: Whenever your firing trigger contradicts with your blocking trigger then the blocking trigger takes precedence.

For example, if you set a trigger to fire tag on all pages of your website and then you set a blocking trigger which prevents the same tag from firing on the ‘order confirmation’ page then your tag will not fire on the ‘order confirmation’ page even when the tag is supposed to fire on all pages of your website according to the firing trigger.

Setting up Trigger Conditions

Understanding trigger conditions in GTM is of prime importance as trigger conditions are the rules which will only fire if the condition is true.

In Google Tag Manager, you can set up a trigger condition in two ways:

1. Multiple “AND” conditions in a single trigger
2. “OR” condition using multiple triggers or “OR” condition in a single trigger using regular expressions

Multiple “AND” conditions in a single trigger

Let’s take the example of an “AND” condition. Suppose you have an ecommerce business and you want to fire a tag on a product page only if the product category is ‘Men’s’.

In this scenario we have two conditions, first, it should be a product page and second, it should be the ‘Men’s’ category. You can create a single trigger for this with multiple “AND” conditions like Page Path Contains ‘product’ and Product Category equals ‘Men’s’.

Keep in mind that multiple conditions in a single trigger are always connected using “AND” condition and the trigger will fire the tag only if all the conditions are returned as true.

“OR” condition using multiple triggers or “OR” condition in a single trigger using regular expressions

An “OR” condition is used in a trigger if you want to fire a tag when any of the conditions from the given set returns true.

Suppose you want to fire a tag to measure a promotional impression on the home page and on a product category page. At a given point in time, a user can only be on the home page or a product category page. To set an “OR” condition for this there are two options:

Option1: Create two separate triggers and add them in a single tag, like below

Trigger 1: Page Type equals ‘Home’:

Trigger 2: Page Type equals ‘product category page’:

Now add them in a single tag:

Keep in mind that multiple triggers associated with a single tag are always connected using the “OR” condition and the tag will fire the tag when any one of the conditions are returned true.

Option2: “OR” condition in a single trigger using regular expressions

The more sophisticated way to use an “OR” condition in GTM is by using regex in a trigger condition.

Using regex, you can limit the number of triggers and redundancy in analytics implementation. In this case, instead of creating two separate triggers, we will create only one trigger as below and it serves the same functionality as in option one.

More on regex: Regular Expressions (Regex) for Google Analytics & Google Tag Manager Tutorial

Trigger Groups

Trigger groups are a new concept brought by GTM. You can create a group of multiple triggers at one place and the corresponding tag will fire only after all triggers in a group are fired at least once.

If you add more than one instance of a particular trigger, it will need to fire the same number of times before this trigger group will fire. All the triggers in a trigger group are inconsequential, this means the trigger group will fire after all the triggers in a group are fired, regardless of order.

Trigger groups are very helpful in the case that there is a dependency for an event to fire on two or more conditions.

Let’s take an example, suppose you want to measure if the user had read the content of a blog page or not. You can do this by scroll tracking but if a user directly scrolls to the bottom of the page without reading the content, it is really hard to measure.

In this case, you would like to fire a scroll depth trigger along with a timer trigger (time spent to read the whole content). If it takes 30 seconds to read the content and then the scroll has happened that means the user has read the content.

So, to fire an event, the scroll depth trigger has to depend on the timer trigger. We can achieve this by creating a trigger group with two triggers, first scroll depth and second timer trigger set to 30 seconds. When the timer trigger fires after 30 seconds and scroll happens, or vice versa, the event will also fire.

We can create the trigger group for this using the following steps:

Step 1: Click on Trigger:

Step 2: Click on New:

Note: You can also create a trigger group while creating\editing a tab

Step 3: Click on Trigger Configuration:

Step 4: Choose Trigger Type as “Trigger Group” in Others:

Step 5: Click the “+” Sign to Add required triggers to the group, you can also add conditions to the trigger group if you want to fire it on specific conditions.

Since we are measuring if the user has read the content on a blog page or not we have three conditions here

1. Scroll depth should be 50%
2. Timer trigger should be 30 seconds
3. Page type should be blog

Keep in mind that multiple triggers in a single trigger group are always connected using the “AND” condition and the trigger group will fire the tag only if all the conditions are returned as true.

Another article you will find useful: Google Tag Manager Training Resources

Frequently Asked Questions About Google Tag Manager Variables and Triggers