Getting To Grips With Google Tag Manager

Arrive at the Google Tag Manager home page and you are presented with the message “Digital Marketing Made (Much) Easier”. Whilst this is true for long term project and tag management, the initial learning curve for Google Tag Manager can be somewhat... frustrating.

Documentation from Google is at present somewhat confusing, yet this is obviously something Google is going to be looking to dedicate more time to in the future as suggested by the extra focus on Google Tag Manager in the new version of the GAIQ Exam.

I have recently had a couple of clients move to using Google Tag Manager to allow us as an agency to be able to deploy code for programs such as Optimizely, Qualaroo and Google Analytics without these items having to sit in their development queues for weeks or maybe even months.

This post outlines the way I implemented the changes for them and whilst there may be other methods (I used this post when I was first getting to grips with Google Tag Manager), this method is the one I found worked for my clients who needed to ensure their event tracking would be scalable in the future.

Understanding Google Tag Manager - Tags, Rules and Macros

Ok so, first of all, let’s get a little more familiar with some of the language used in Google Tag Manager and their meanings. Google Tag Manager operates around three main elements: Tags, Rules and Macros.

  • Tags = A tag is HTML code that executes (or fires) on a page

  • Rules = Specify when a tag should be fired such as when a specific page is loaded or in response to an action on the page

  • Macros = a pre-defined set of conditions that allow rules to be executed

For an in depth explanation of how all these functions operate, check out this Google Support Document.

Moving Google Analytics to Google Tag Manager

Before we continue, you need to have already set up a Google Tag Manager account and have placed the relevant code on your site. Ready? Ok let’s go.

1. Once you have signed in and opened the correct profile and account, the first thing youneed to do is create a new tag (Image 1 & 2). Give the tag an easily recognisable name such as “Google Analytics” and set the tag type as either Classic Google Analytics or Universal Analytics depending upon which version is currently in use.

WARNING - If you are planning to upgrade a classic Google Analytics account to Universal Analytics, please be aware that Universal Analytics currently has numerous features such as Remarketing and Google Display Network Impression Reporting still unavailable.

Image 1 - Create a new tag

2. Add the relevant Analytics tracking code to Web Property ID and set the tracking type as Page View. (Image 2)

Image 2 - Fill in the highlighted sections

3. We have now created the Tag for Google Analytics but need to define rules that will allow the Tag to fire and pass information back to Google Analytics.

  • Click Add on the firing rules section of Google Tag Manager (Image 3).

  • Check the predefined rule for all pages (Image 4).

  • Save the Rule.

  • Save the Tag.

Image 3 - Set Up Firing Rules


Image 4 - Select all pages

That is how to move Google/Universal Analytics into Google Tag Manager. The final step in this transition is to remove the existing Analytics code from all pages.

Setting Up Event Tracking

Google Tag Manager uses slightly different mark up to track events compared to the Event Tracking we have become familiar with from Google Analytics. To ensure Event Tracking continues to function correctly we need to change any _gaq.push instructions that already exist on our site.  

1. Create a new Tag (Image 5) and name the Tag so it’s easily recognisable for future reference (e.g. Google Analytics Event Tracking).

Image 5 - Create a new tag

2. Set the Tag Type as either Classic Google Analytics or Universal Analytics depending upon which version is in use and then enter the Analytics Tracking Code into Web Property ID (Image 6).

Image 6 - Name Tag and Set Tag Type

3. Set the Track Type as Event (Image 7)

Image 7 - Change Track type to Event

4. We then need to create Macros that can be used in the Event Tracking Parameters. To do this, click on the symbol to the right of the Category field. (Image 8)

Image 8 - Create A Macro


5. Set the Macro name so it is easy to recognise in the future (e.g. Event Category) and then complete the following actions.

  • Set Macro Type as Data Layer Variable

  • Set Data Layer Variable Name as gtmCategory

  • From the Data Layer Version drop down menu, select Version 1

Image 9 - Configuring Macros

6. Save the Macro and repeat Step 5 for both the Action and Label fields. We should end with 3 newly created Macros that have the following information:

Macro Name

Macro Type

Data Layer Variable Name

Data Layer Version

Event Category

Data Layer Variable

gtmCategory

Version 1

Event Action

Data Layer Variable

gtmAction

Version 1

Event Label

Data Layer Variable

gtmLabel

Version 1


7. Finally we need to create a rule to fire this Tag. Select the Add Firing Rules (Image 10) option and create a recognisable Rule Name (e.g. GA Event Trigger).

Image 10 - Create a firing rule for Event Tracking

8. Define the Conditions for the rule as:

{{event}} equals trackEvent (Image 11)

Image 11 - Event Tracking Rules

9. Save the rule and you should have an Event Tag that is ready to go with the following set up (Image 12).

Image 12 - How the Event Tracking Tag Should Look

Change Tracking Code in HTML

10. The final action we need to take is to modify any existing event tracking in the site code to ensure it functions correctly.

Previous Event Tracking for Google Analytics  would look something like this:

onclick=“_gaq.push([’_trackEvent’, ‘Cars’, ‘Twitter’, ‘302366’]);

These lines of code should be replaced with the information used to create our Macros, resulting in them looking like the following:

onclick=”dataLayer.push({’event’: ‘trackEvent’, ‘gtmCategory’: ‘Cars’, ‘gtmAction’: ‘Twitter’, ‘gtmLabel’: ‘302366});”

Use the below image (Image 13) as a guide to find where each Macro fits into the code.

Image 13 - How the tracking code should change

Creating and Testing a Version

11. Finally we can check that the implementation of Google Tag Manager is working correctly. First of all we will check tags are firing correctly before pushing the Google Tag Manager code live.

Using Google Tag Manager Debug Mode

To do this enter the Debug mode which is found under Preview in Google Tag Manager (Image 14). This will load the site with Google Tag Manager with a list of tags at the base of the page (Image 15). Navigate around the site loading pages, and click on elements that have Event Tracking applied to them and check their status.

12. Once you are happy that everything is working correctly, click Create Version. It is important to take note that Create Version doesn’t make the tags live. In order to put the new version live click Publish.

Image 14 - Open Google Tag Manager Debugger

Image 15 - Google Tag Manager Debugger

Google Analytics Real Time Event Tracking

13. Finally to check that our new Event Tracking is working correctly open up Google Analytics. Within Analytics open the Real Time tab and select Events (Image 16).

14. Head over to your site and click on a few elements where Event Tracking has been applied. Refer back to the Real Time Events in Google Analytics and check the events have been correctly tracked (Image 17).

Image 16 - Real Time Tab

Image 17 - Use Real Time Data to Check Event Tracking

And that’s it, you have now migrated your Google Analytics account and Event Tracking onto Google Tag Manager. While some of this initial process is time consuming and takes a fair amount of effort, it’s a really great way to become familiar with Tag Manager and its functions.

Have you moved to Google Tag Manager yet? How did you find the transition?

About the author
Tim Allen

Tim Allen

Tim joined Distilled in March 2013 after making a considerable impression upon Duncan and Tom Anthony by wearing a Panda jumper to his interview. Originally moving from Lincolnshire to London to study acting at Reynolds Performing Arts, Tim soon...   read more