Tags, Rules, Macros and the Data Layer

Tags and Rules

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

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. However, with Google Tag Manager, you don't add tag code to your site, but instead use the Google Tag Manager user interface to specify the tags that you want to use.

Tags typically execute – or fire – when the page loads, or in response to some interaction on the page. In Google Tag Manager, you attach rules to tags to specify when they should fire. An example of a rule is the predefined "All pages". If you attach this rule to a tag, then the tag will fire whenever any page loads.

Rules and Macros

A rule is a condition that evaluates to either true or false at runtime. It does this by comparing the value in a macro with the value that you specified when you defined the rule. For example, the predefined macro "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, then you would define a rule:

{{url}} matches example.com/purchase/receipt.html

Here's the definition of the "All Pages" rule. This rule always evaluates to true because any URL (Regex .*) will match the page URL that's currently loaded.

{{url}} matches RegEx .*

Macros contain runtime values. For example, the predefined macro "url" always contains the URL of the currently loaded page. You can define your own macros, each containing some piece of information that needs to be available at runtime. You can then use these macros in rule conditions, or to pass information to tags. For example, you might define a macro that contains the price of an item that the user is viewing. Or you might define a macro to contain a constant value, such as your Google Analytics account ID string.

Macros and the Data Layer

Let's say that you want to define a macro that contains the price of an item that the user is viewing. How does the macro know an item's price at runtime? It can retrieve the price from the data layer object in your source code. (You'll need to work with your site developer to set up a data layer object that contains the information that you need.) The data layer is an object that contains all of the information that you want to pass to Google Tag Manager. The data layer passes this information to Google Tag Manager via macros. The macros can then access the information where it can be used in rules, for example, to determine whether or not tags should fire.

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 firing rule for the tag will need to know the value of the 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 macro that retrieves the value so that it can be evaluated by the firing rule.

You don't necessarily need to set up a data layer in order for macros to retrieve runtime information. Macros can also retrieve information directly from JavaScript variables and the DOM. Read Macros for more information. However, it is generally best practice to have your macros retrieve information from a data layer instead of from JavaScript variables or the DOM. If your macros depend upon specific variables or DOM elements, and those variables or elements change during the course of site updates, then your macros may no longer work. Referencing all of the relevant information in a data layer minimises the likelihood of such a problem, allows for a well organized and accessible data model, and also makes troubleshooting easier.

Implementation Scenarios

What do you need to do to implement Google Tag Manager on your site? There are essentially three 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 other than URL and referrer, then 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 do need information other than URL and referrer, then you may need to add code that creates a data layer and pushes information to it. Add this code above the container snippet, so that the data layer information is available on page load. Note: 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 that you need is available on page load directly from JavaScript variables and the DOM, then you may not need to implement a data layer. However, retrieving information directly from JavaScript variables and the DOM should only 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-organised and accessible data model, and also makes troubleshooting easier.

  • If the data that 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. For example, you might want to push metadata associated with a video that the user is playing, the colour of a product (e.g. a car) customised by the user, or the destination URLs of clicked links. Note: As long as you don't need this data to be available when the page loads, you won't need to add code that instantiates the data layer itself. The container snippet code instantiates the data layer for you. However, you will need to add code that pushes the information onto the data layer in response to user events. Note: Every page must have code that pushes the needed information onto the data layer – the data layer does not persist across pages.