Archive of ‘Google Tag Manager’ category

Using Google Tag Manager for Google Analytics

Google Tag Manager can be used to add tags to a website to integrate with many different technologies. This blog post focuses on explaining how to use it to power Google Analytics without the need to “write code”. This can makes it a very powerful tool, once setup, for enabling clients to create their own tracking tags without the constant need for a developer to mediate their setup.

Table Of Contents
  1. Setting Up Your Account & Container
  2. Tags, Rules & Macros
  3. Your Google Analytics Tracking ID
  4. Creating A Simple Page View
  5. Creating A Simple Link Click
  6. The Auto-Event Variable Macro
  7. The Custom JavaScript Macro
  8. The JavaScript Variable Macro
  9. The Data Layer
  10. Useful Links

Setting Up Your Account & Container

Create a new account and container by following the steps presented and entering all relevant information for your website:

Once complete, you will be presented with your container code (which can also be found under “Admin > Install GTM” at any time). This must be placed immediately after the opening body tag on each page of your website.

Note: Currently you cannot import/export the contents of a container. This means that applying the same tags created in a one container to a another container is a manual process. Google are looking into implementing this.

Note: If your website has never had Google Analytics on it before, you may need to add the Google Analytics Tracking Code into the page head. Once tracking has been registered, you can then remove it.

Tags, Rules & Macros

A Google Tag Manager account is made up of Tags, Rules and Macros. All three of these are used in conjunction with one another to replicate, for this blog post, the tracking given by Google Analytics code. Below is a summarised description of what each of them are.

Tags – These are the point of Google Tag Manager. They will be used to tell Google Analytics what data to store, when to store it and where to store it. With the focus on powering Google Analytics, a tag can be thought of as a Google Analytics “send” command, but in general use tags are much more powerful than this.

Rules – These are used within a tag to tell it when or when not to “fire”. A rule is a list of conditions that must be satisfied in order for it to match (i.e. a set of AND conditions). A tag fires if one of the firing rules applied to it is matched (i.e. a set of OR conditions), unless a blocking rule is also matched.

Macros – As the simplest explanation, these are like variables that allow you to store data required for use within tags, rules and other macros. They can be used both statically and dynamically.

Your Google Analytics Tracking ID

Create a new tag with a tag type of “Google Analytics > Universal Analytics”. You will want to enter your Google Analytics Tracking ID into the “Tracking ID” field.

For every tag, this field will need to be completed so lets create a macro instead of harcoding it.

This will allow us to use the Tracking ID stored here so that if it changes, we only need to change it in one place. As different Google Analytics could be used for each development environment, we can use a lookup table macro to set the Tracking ID value based on the environment we are in instead of one constant string. For this, you can use the built-in macro {{url hostname}} that returns the hostname of the current page:

Now that we have a macro for our Tracking ID, we can use it within our arbitrary tag.

Note: Macro names are case sensitive with capitalised macros appearing at the top.

Creating A Simple Page View

Create a new tag with the following settings:

As explanation, the built-in rule “All pages” uses a regular expression to match any URL. This tag will now track any page view made on your website within Google Analytics once published, previewed or debugged.

Creating A Simple Link Click

Creating a link click takes a bit more effort than a page view. First create a new tag with the following settings:

The tag type can be found under “Event Listener > Link Click Listener”. As the image above has been cropped, it is missing the description of Link Click Listener. The important part of the description to remember is, “When a link is clicked, the Google Tag manager event gtm.linkClick is generated”. This event will be used to pick up when a link has been clicked.

Next create a new rule with the following settings:

We now have a rule available for a tag to use and match, therefore firing when a gtm.linkClick event occurs (i.e. a link on the page is clicked).

Lastly, create a new tag with the following settings:

As an explanation, the built-in macros {{element url}} and {{element text}} retrieve the URL and text (respectively) of the link element within the document that has been clicked (i.e. the URL created by, and text within, the a tag that has been clicked).

The “Link Click” tag will now track any links that are clicked on your website within Google Analytics once published, previewed or debugged. They will be under the “link click” event category.

A useful example of this may be to track all PDF link clicks. The tag event tracking parameters could be:

  • Category pdf download
  • Action /pdf/{{element url}}
  • Label {{element text}}

And the rule could have the settings:

Note: It may be necessary to use a regular expression instead of ends with if the PDF extension could be lowercase or uppercase. Alternatively, you could create a macro to ensure the element URL is always lowercase.

The Auto-Event Variable Macro

The Auto-Event Variable macro allows you to use existing built-in variables to create additional macros that are similar in usage to the built-in macros. A potentially useful example of this could be the host name of an element’s URL:

Even if the href attribute of an a tag is a relative link, the {{element url}} built-in macro contains the entire path of the target location. Using an Auto-Event Variable will allow you to obtain any part of this link, in this case just the host name of the URL.

The Custom JavaScript Macro

The Custom JavaScript macro allows you to write your own JavaScript within the functionality of a macro. An example of this is:

This would allow you to retrieve the current date within your tags and rules. In addition to this, you can use macros within the code you write:

This would allow you to retrieve just the relative link and any query string from the {{element}} built-in macro. Alternatively you could use Auto-Event Variables to find the relative link and query and then use the Custom JavaScript to concatenate them together.

The JavaScript Variable Macro

The JavaScript Variable macro allows you to use any global JavaScript variable within the functionality of a macro. An example of this is:

This would allow you to use the title of the page the user is on within your tags and rules.

The Data Layer

Within any JavaScript on your website you can set your own variables and trigger your own events to be used by Google Tag Manager. Doing this requires the use of the Data Layer. Before you can use the Data Layer, you will need to initialise it:

Once initialised, you can then send data to the Data Layer at any point in your own code:

Once data has been sent to the Data Layer, you can set up a macro to get this data from the Data Layer and then use it within tags and rules:

The Data Layer can also be used to trigger custom events. The push command has a keyword event that can be used to create these custom events:

These custom events can then be used within rules to trigger tags:

Useful Links

Below are a list of useful links: