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 a ‘name‘ and a ‘value‘. A variable is referenced by its name. Value is that expression that cannot 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’ cannot 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 and when 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) that 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 cannot be customized. 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

Pages: These variables provide values of the form page URL

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. For example, if the user arrives at ‘https://optimizesmart.com’ from the referrer. document.referrer will contain the value of the previous URL.

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 from a range ‘0’ to ‘2147483647’.

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. Its values are boolean (true/false).

Clicks

Click Element: This variable returns the HTML element that was clicked. This variable gets its value from the ‘gtm.element’ key in the data layer.

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

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

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

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

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 that 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 representing 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 the 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 the scroll with a 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-in 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 that 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:

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 from which users come to your website. This variable value is of type String, and you can also specify the component of the URL (like hostname, Full URL, Fragment, Path, Port, Protocol, and Query)

  

• URL: Current URL: This variable returns the value of the current URL of the page loaded on the website. This variable value is type String, and you can also specify the URL component (like Filename extension, Hostname, Full URL, Fragment, Path, Port, Protocol, and Query). This is very handy if you want to capture a particular part of the URL, like Campaign parameters.

Its components are

• Filename Extension: Returns the value of filename extension like “.txt”, “.pdf”, etc.
• Fragment: Returns the value of URL’s fragment without “#”.
• Full URL: Returns full URL like  https://www.optimizesmart.com/blog/
• Host Name: Returns the hostname of the URL like “www.optimizesmart.com”.
• Path: Returns the full path of the URL without hostname like if the URL is “https://www.optimizesmart.com/blog/”, it will return the path as “/blog/”.
• Port: This component returns the value of the port number used in the URL. So, if the URL begins with “HTTP” it will return the value “80”, and if the URL begins with “HTTPS”, it will return the value “443”.
• Protocol: Returns the protocol of URL like “HTTP” or “HTTPS”.
• Query: Returns the entire query parameter without “?”. If no query parameter is present, then it will return “undefined”.

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 used to pass website parameters in a variable. Generally, if you have a particular value that you need to pass in Google Analytics but can’t use any of the predefined variables, then you can use a custom JavaScript variable to return the value.

  

• 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.
  You can read more about dataLayer here: Google Tag Manager Data Layer Tutorial with Examples.

  

• JavaScript Variable: If your website has a global JavaScript object, you can have its value using this variable. Note that this is not the custom JavaScript variable since it does not require function declaration.

  

  The above command in the variable name will return the value of the browser language.

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.

  

You can access different parts of the page like

• Element: Returns the DOM Element accessed. You can use the “gtm.element” key to access it.
• Element Class: Return the class value of the DOM element accessed. You can use the “gtm.elementClasses” key to access it.
• Element ID: Return the ID attribute of the DOM element accessed. You can use the “gtm.elementId” key to access it.
• Element Target: Returns the value of the target attribute of the auto-event element. You can use the “gtm.elementTarget” key to access it.
• Element Text: Returns the value of the “textContent” or “innerText” property of the auto-event element.
• Element URL: Returns the value of the “href” attribute of the auto-event element. You can use “gtm.elementUrl” to access it.
• History Change Source: Returns a string value of the event that triggered the history change event (popstate, pushState, replaceState, or polling). You can use the “gtm.historyChangeSource” key to access it.
• History New State: Returns the new state object set with a browser history event. You can use the “gtm.newHistoryState” key to access it.
• History Old State: Returns the old state object set with a browser history event. You can use “gtm.oldHistoryState” key to access it.
• History Old URL Fragment – Returns the old URL fragment replaced in the browser history event. You can use “gtm.oldUrlFragment” key to access it.

• 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. You can use the selection method as ‘ID’ or ‘CSS Selector’ to specify.
• Element visibility: This variable returns the value to True for a specified object when it is visible, like a pop-up. It also returns the percentage of an element’s visibility like 50%.

  

Utilities

• Constant: This variable returns a constant string you specify.

  

• Custom event: This variable returns custom events sent to the dataLayer.There are many events that you sent to GTM using dataLayer.push command. The custom event will return the value of the event name pushed to the dataLayer.

  

• Environment name: Returns the user-provided name of the environment currently being previewed, for example,  Live, Dev, or Staging. You could use this variable if you want to fire a tag if the environment matched the condition.

  

• Google Analytics settings: This variable returns the Google Analytics Account ID that you specify.

  

• Lookup table: This variable, based on certain conditions, evaluates the condition first and then accordingly sets a value of a specific variable. For example, let’s suppose you have multiple environments such as Live, Preview, and each environment has separate Google Analytics property. In this case, you can use a lookup table to check for the environment name first and then send data to the specific GA property of the corresponding domain.

  

• 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. You can use this variable if you have any value defined by regex.

  

• Undefined value: This variable simply returns the JavaScript to “Undefined”.

  

Container Data

• Container ID: This variable returns the GTM container ID like “GTM-NZHQ123”. This is a built-in variable as well.

  

• Container Version Number: This variable returns the value of the container version number. Note that when you use GTM preview mode, it returns the value of the preview version number; otherwise, it returns the live version number of the GTM container.

  

• Debug Mode: This is a Boolean variable and returns the value of debug mode to either “True” or “False”.

  

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

Debugging Variables in GTM

If you want to debug your GTM variables, you can also do it in GTM preview mode.

Follow the below steps to know more:

Step-1: Navigate to your GTM container and click on ‘Preview’ mode.

Step-2: A new pop-up window will appear like below. Add your website URL where the GTM code is installed, and then click on “Connect”.

Step-3: It will open a new window in the browser. Now navigate back to the GTM preview window and click on “Continue”.

Step-4: Now click on the “Variables” tab.

Step-5: Now, you will get a screen like the below image. Select an event from the summary to check the variables for the corresponding event.

Now you will be able to see the list of variables and the values they contain for the selected event, as below.

So that’s how you can debug variables in preview mode.

Introduction to Triggers in Google Tag Manager

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

In GTM, triggers are an integral part of a tag creation process. So, you cannot 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 trigger’s 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

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, 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

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 your blocking trigger, then the blocking trigger takes precedence.

For example, if you set a trigger to fire a tag on all pages of your website, and then you set a blocking trigger that 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 the “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. A user can only be on the home page or a product category page at a given point in time. 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 return 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 whether the user has read the content on a blog page, we have three conditions.

1. Scroll depth should be 50%
2. The timer trigger should be 30 seconds
3. Page type should be a 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.

Debugging Triggers in GTM

If you want to debug your GTM Trigger, you can do it in the GTM preview mode as well. Actually, for every event in GTM, you will get to know whether a tag has fired or not. You can check the details about all the conditions.

Follow the below steps to know more:

Step-1: Navigate to your GTM container and click on preview mode.

Step-2: A new pop-up window will appear like below. Add your website URL where the GTM code is installed, and then click on “Connect”.

Step-3: It will open a new window in the browser. Now navigate back to the GTM preview window and click on “Continue”.

Step-4: You will get a screen like below. And as you can see from the below image, the tags are divided into two groups as “Tags Fired” and “Tags Not Fired”.

Step-5: You can select any event from the summary tag and see the status of each tag. As an example, I have selected the “Container Loaded” event, and as you can see, the “GA4 Configuration Tag” and “GA4 Scroll Tag” are fired, but the “Purchase event” tag is not fired.

Step-6: Now, let’s click on any of the tags which fired. You can see the Firing trigger condition below.

The first condition that matches is the “ALL Pages”, and the second condition matches the “gtm.js” loaded. There are no blocking trigger conditions here, and hence the tag is fired. And this is the same condition that we have applied for the tag trigger.

Step-7: Now, let’s select any of the tags which are not fired and check their details.

As you can see from the below image, the trigger condition did not match (custom event equals purchase), and hence the purchase tag is not fired.

Step-8: Now, if I click on the purchase event from the summary tag, I can see the purchase tag is fired.

Step-9: Now, let’s click on the Purchase tag and see the triggering conditions. As you can see from the image below, it matches the trigger condition, and the tag is fired.

The trigger configuration for the purchase event is configured like the below image.

So, this is how you can debug your trigger conditions. 

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

Frequently Asked Questions About Google Tag Manager Variables and Triggers