3 Event Tracking Methods for Google Analytics Via Google Tag Manager

Before we start, if you’re unaware of what Google Tag Manager is, find out all about it in Jon Hibbitt’s blog post here!

Background

Google Tag Manager (GTM) promises to reduce development time and project timelines, especially in the area of Event Tracking. Event Tracking allows you track user interactions outside of link clicks and other user touchpoints that GA doesn’t automatically track, such as:

• Tracking document downloads (.pdf, .docx, .xlsx, .jpeg)
• Tracking form submissions (newsletter signup, account registration, contact page)
• Tracking button clicks (mailto: clicks, outbound link clicks, video plays, social media interactions)

These interactions are often valuable user touch points on your site that you’ll want to track as Events in GA.  These Events can be used as building blocks for a Google Analytics Goal, signalling that a valued website objective has been achieved.

GTM’s features have opened the door to tracking which would previously have been considered unimaginable,

E.g.

• Tracking weather data at your customer’s location
• Tracking bounce rate timings from Google’s SERPs for your landing pages
• Tracking complex AJAX interactions in modal popups on a page where the URL does not change

Historically, event tracking on your site required adding code to your pages– typically developer territory. With GTM you have three methods to deploy event tracking without developer assistance at your disposal! Happy days for marketers huh? Well, that’s the theory at least…

In practice, you’re still going to encounter scenarios where developer support is required. For some businesses, embedded analytics deployed by a developer might well be the preferred option. We’ll get to that shortly.

This post introduces you to the three options for adding Event Tracking via GTM and considers their relative pros and cons.

Here’s the three main GTM Event Tracking methods:

1. Auto Event Tracking
2. Custom JavaScript Event Tracking
3. Event pushes using code on the page

Method 1: Auto-Event Tracking in GTM

Google Tag Manager comes with some great built in features, which in theory, allow you to immediately send Event data to your GA Account without adding a single piece of code to your site.

Auto Event tracking in GTM relies on the use of built in ‘listeners’ you enable for clicks, link clicks, forms and other DOM elements which you can fire using GTM’s trigger functionality.

A typical example would be tracking an outbound link to another website:

Enable GTM’s Listeners

To get started you need to enable the built in variables within GTM which match the listener you want to set up. In our example, we want to track ‘outbound’ link clicks to other sites. Tick the boxes in the ‘Clicks’ window.

Now the listeners are ready, you’ll want to set the Trigger which fires your GTM Tag when someone clicks a link to an external website.

And finally, here’s the Event Tag configured to fire when the Trigger you set up in the previous step fires.

Looking for the links? Scroll down to the bottom of this post!

Advantages:

• Quick and easy to implement
• No development resource required to implement tracking
• Introduces you to how GTM works

Disadvantages:

• Easy to break if based on a CSS class. One design change or tweak to the CSS class name can break your tracking.
• Some sites will still require developer support to ensure the necessary HTML hooks fire in GTM.
• Limitations – there’s only so much you can track out of the box with this method. That being said, there’s some great pre-built scripts you can import and deploy in the blink of an eye (scroll to the resources section if you can’t wait a second longer to get these up and running).

Method 2: Custom HTML and JavaScript in GTM

GTM is, in essence, a JavaScript injector; but the flexibility of the Custom HTML tag allows you to insert JavaScript in your web page without touching any code. This means you can develop and add new JavaScript functionality to a site entirely from GTMs cloud based dashboard.

When you need to get something done which exceeds the limitations of auto tracking, and you have good JavaScript and Document Object Model (DOM) knowledge, this approach gives you all the flexibility of adding custom JavaScript and full version control and testing capability in GTM. Wow!

Example:

Couldn’t resist it, a while ago Gerry White set up a funky script on the SiteVisibility website. Here’s a link with the code example: https://www.simoahava.com/gtm-tips/add-konami-code-to-your-site/

GTM Trigger

We’ve set the tag to fire on all pages. (note to ed, change this to just the team page!)

GTM Tag

And here’s the beautiful JavaScript we inject into the site which does all the lovely action. Cool!

Advantages:

• Expand tracking in GTM well beyond what is possible using Auto-Event Tracking
• Deploy JavaScript code to track interactions without touching any page code
• Utilise version control, testing and debugging environments within GTM to increase confidence  your new code isn’t going to break customer experience.

Disadvantages:

• Best for advanced users. Requires knowledge of JavaScript and the DOM, suited to developers rather than marketers
• Possibility of code conflicts if other developers are also adding JavaScript on the site
• Development teams may not have sight of your JavaScript, increasing the risk of tracking breaking due to development changes
• Can cause user experience issues so robust testing is required which can be lengthy and complicated

Method 3. Push Events to the Data Layer using Site Code

Before GTM arrived, if you wanted to send Event hits to Google Analytics, you’d have to add some tracking code to your pages(s).

You can apply a similar methodology to send the data into Google Tag Manager’s data layer where you can set triggers and tags based on the information sent from the page. This is known as the dataLayer.push method and can be implemented in different ways.

Example:

Hard coded on a button click:

<a class=”btn” href=”/example-job.htm” onclick=”dataLayer.push({‘event’: ‘job application’,’job_application_stage’: ‘job view’,’job_reference’: ‘xxxxxx’,’job_title’: ‘Database Administrator’});”>View</a>

Alternatively, this code could also be implemented in an event listener or included in other JavaScript implemented on the site:

<script>

dataLayer.push({

‘event’: ‘job application’,

‘job_application_stage’: ‘job view’,

‘job_reference’: ‘{reference ID}’,

‘job_title’: ‘{job title}’

});

</script>

Advantages:

• Developer friendly. Implemented by your developers who will have it on their radar going forward. They should be more conscious of the JavaScript configured on the site, which reduces risk of conflicts.
• Less likely to break when the site changes as code is visible in site code and developers ‘own’ it
• Great if you already have existing on-page Event Tracking and want to quickly integrate these into GTM
• Considered best practice for fully integrated analytics solutions – you work hand in hand with your developer on fixing SEO technical issues anyway, right?

Disadvantages:

• Reliant on developer for implementation
• Reduces centralised control of tracking within GTM
• Increases project turnaround times
• Resource heavy

Summary

We hope you’ve got a feel for the three main methods of deploying Event tracking in GTM. Deciding on which method to use isn’t clear cut and is going to vary based on the size of the project, the resources available and the granularity of tracking you require. Smaller business may be able to get by with the auto-event tracking while larger brands are more likely to integrate analytics via developers. There’s no hard and fast rule on this though and we’d love to hear your thoughts in the comments below.

So that’s it. Let us know your thoughts on the different methods specified above. And here’s a list of links below for you to explore the subject further.

BTW, Measurefest London is fast approaching, I’ll be there with Scott Colenutt– Hopefully we can meet some of you then!

Resources:

Our Other Google Tag Manager Resources

• What is Google Tag Manager?
• How to Track to Multiple Google Analytics Properties in GTM
• How to Test Google Analytics Event & Goal Tracking Using Google Tag Assistant

Google Tag Manager Supported Templates

• https://support.google.com/tagmanager/answer/6106924?hl=en.

Event Tracking with Google Tag Manager

• https://www.simoahava.com/analytics/auto-event-tracking-gtm-2-0/
• https://www.simoahava.com/analytics/variable-guide-google-tag-manager/
• https://www.optimizesmart.com/event-tracking-in-google-tag-manager-v2-complete-guide/
• https://support.google.com/analytics/answer/6164470?hl=en

Google Analytics App

And in case you’re not already using the Google Analytics App (you should be just for the awesome assistant feature)

• https://play.google.com/store/apps/details?id=com.google.android.apps.giant&hl=en_GB
• https://itunes.apple.com/gb/app/google-analytics/id881599038?mt=8

Google Tag Manager Handy pre built Event Tracking Recipes (Tnx @SimoAhava & Lunametrics)

• https://www.simoahava.com/analytics/measure-serp-bounce-time-with-gtm/
• https://www.simoahava.com/analytics/send-weather-data-to-google-analytics-in-gtm-v2/

Custom Alerts (You do want to know when your Google Analytics Events break, right?)

• https://support.google.com/analytics/answer/1033021?hl=en
• https://www.lunametrics.com/blog/2012/09/24/55-google-analytics-custom-alerts-check-engine-light-data/