Search
Clear search
Close search
Google apps
Main menu

Tags, triggers, variables, and the data layer

Google Tag Manager uses "triggers", "variables" and a "data layer" to set up the firing of tags on your website or mobile app.

Watch this video for a quick introduction to key concepts and terminology in Google Tag Manager.

In this article:

Tags and triggers

A tag is a snippet of code that executes on a page. Tags can serve a variety of uses, but most of the tags used in Google Tag Manager are designed to send information from your site to a third party. Examples include the Google Analytics tag and the AdWords Conversion Tracking tag, which send information about activity on your site to Google.

If you don't use a tag management solution such as Google Tag Manager, you add the code for each of your tags directly to the source code of your site. With Google Tag Manager, you can instead control all of your tags conveniently from a web user interface.

Tags typically execute, or fire, when the page loads, or in response to some interaction on the page. In Google Tag Manager, you define triggers with tags to specify when they should fire. An example of a trigger is the predefined "All pages", which as the name implies may be used to set your tag to fire on any page on your site as it is loaded.

Triggers and variables

A trigger is a condition that evaluates to either true or false at runtime. It does this by comparing the value in a variable with the value that you specified when you defined the trigger.

A Tag Manager variable is a configured name-value pair for which the value is populated during runtime. Tag Manager has many built-in variables, and you may configure custom variables as well.

For example, the predefined variable "url" always contains the URL of the currently loaded page. If you want a tag to fire only on the page example.com/purchase/receipt.html, you would define a trigger that looks like this:

  • Event: Page View
  • Trigger Type: Page View
  • Fire On: Some Page Views
    • Fire the tag when these conditions are true:
      URL contains example.com/purchase/receipt.html

You can define variables to suit your needs, each containing some piece of information that needs to be available at runtime. You can then use these variables in trigger conditions, or to pass information to tags. For example, you might define a variable that contains the price of an item that the user is viewing. Or, you might define a variable to contain a constant value such as your Google Analytics account id string.

Variables and the data layer

Let's say that you want to define a variable that contains the price of an item that the user is viewing. How does the variable know an item's price at runtime? It can retrieve the price from the data layer in your source code. (You'll need to work with your site developer to set up a data layer object that contains the information you need.) The data layer is an object that can be configured to contain information that you want to pass to Google Tag Manager. Data Layer Variables may be configured in Google Tag Manager to capture these values for later use. In order for GTM to assess the value of a Data Layer Variable, an event has to be pushed as well.

For example, let’s say that you want to fire a GDN Remarketing tag whenever a visitor spends more than $100 on your site. The trigger for the tag will need to know the value of visitor's transaction in order to evaluate whether or not it exceeds $100. To set this up, you could push the transaction value onto the data layer (using the dataLayer.push method) and define a variable that retrieves the value on checkout so that it can be evaluated by the trigger.

You don't necessarily need to set up a data layer in order for variables to retrieve runtime information. Tag Manager Variables can also be configured to retrieve values directly from JavaScript variables, first-party cookies, from the DOM. For example, when using a Click or Form Trigger, you can retrieve information about the elements that are being interacted with. Read Variables and Google Analytics Events for more information.

However, it is a best practice to have your variables retrieve information directly from a well-organized data layer object instead of relying on JavaScript variables or the DOM. If your variables depend upon specific variables or DOM elements and those variables or elements change during the course of site updates, your variables may no longer work. Referencing all of the relevant information in a data layer minimizes the likelihood of such a problem, allows for a well organized and accessible data model, and makes troubleshooting easier. Note that every page must have code that pushes the needed information onto the data layer; the data layer does not persist across pages. Read our Solutions Guide article Data Layer or Google Tag Manager UI? to learn more about why a data layer implementation might be in your best interests.

To learn more about implementing a data layer on your site, please see the Google Tag Manager Developer Guide.

Implementation scenarios

What do you need to do to implement Google Tag Manager on your site? When should I implement a data layer? There are three possible implementation scenarios:

  • If your tags only need to fire when pages load (i.e. they don't need to fire in response to user interactions on the page) and the tags don't need any information beyond URL and referrer, you'll only need to add the container snippet to each page of your site.

  • If your tags only need to fire when pages load, but need information beyond URL and referrer (such as the page type or user ID), you may need to add code that creates a data layer and pushes information to it. Add the data layer code above the container snippet so that the data layer information is available on page load. Note that every page must have the code to create a data layer and push information to it; the data layer does not persist across pages.

    If the information you need is available on page load directly from JavaScript variables and the DOM, you may not need to implement a data layer. However, retrieving information directly from JavaScript variables and the DOM should be considered an intermediate solution. The best practice is to set up a data layer that contains the needed information. Referencing all of the information in a data layer allows for a well organized and accessible data model and makes troubleshooting easier.

  • If the data you wish to collect or use to trigger a tag isn't available until after the user has interacted with the page (i.e. you need to fire a tag in response to a user interaction, not simply on page load), you will need to add code that pushes data to the data layer, and then you will have to configure Tag Manager to leverage the data layer when certain events occur. For example, you might want to push metadata associated with a video that the user is playing, the color of a product (e.g. a car) customized by the user, or the destination URLs of clicked links.

Default data layer events for web

Google Tag Manager pushes a certain set of values to the data layer of web applications by default. These values are:
  • gtm.js – Pushed to the data layer as soon as Google Tag Manager is ready to run.
  • gtm.dom – Pushed to the data layer when the DOM is ready.
  • gtm.load – Pushed to the data layer when the window is fully loaded.
Was this article helpful?
How can we improve it?