How tags, triggers, variables, and the data layer work together
Google Tag Manager uses "triggers", "variables" and a "data layer" to control how tags fire on your website or mobile app.
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
- Fire the tag when these conditions are true:
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.
To learn more about implementing a data layer on your site, please see the Google Tag Manager Developer Guide.
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 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 webGoogle 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.