Google Tag Manager – Part 2: Event Tracking with code

Johan Nyberg

Google Tag Manager is clearly a step in the right direction. Besides that you gather all your tracking script in one place, you can also create rules inside the GTM to track custom events.

It is relatively easy to set up a rule to track all links leading out of the site. Or to track downloads of pdf files. But in some cases it may be more time efficient to set the tracking code directly in the code.

You can read more about the basics of Google Tag Manager in our previous post, Part 1 Google Tag Manager – Part 1: Intro and Auto-Event Tracking.

But before we go into how to track events using code in Google Tag Manager, it may be useful to talk about what you generally should think about when you start tracking events on your website.

Event tracking – best practices

We often encounter Google Analytics implementations where the customer does not have set up event tracking properly. With Event Tracking you have the freedom to submit any values you want, and sometimes this freedom lead to chaos.

Let’s look at the recommendations from Google: Find Google’s best practices here. I’ve also made a summary below.

Category (text, mandatory) – the element the user interact with, eg. ’button’.

Action (text, mandatory) – type of interaction eg. ’click’.

Label (text) – name your event.

Value (numerical) – cannot be a negative value. Isn’t applicable to all events and therefore not mandatory.

But I use this a little more pragmatic. Category for collecting things, such as a click on the Facebook button, I would put that ’social’, and then ’facebook’ as a label.

The key to mastery is just that you put up a kind of structure, so that there is a common thread in how things are track.

Then you build a Custom Report in Analytics, which you break down what your visitors click on. But that’s a whole other blog post.

Now let’s move on and look at how to track events in the three different flavors of Google Analytics: old version, Universal Analytics, and Google Tag Manager.

Event tracking in old Google Analytics script version

In the older version of Google Analytics, event tracking looks like this:

_gaq.push(['_trackEvent', category, action, label, value]);

It could look like this:

_gaq.push(['_trackEvent', ‘social’, ‘click’, ‘facebook’]);

Event tracking in Universal Analytics

The Universal Analytics uses the same concept but the code that looks a little different:

ga('send', 'event', ‘social’, 'click', 'facebook');

Event tracking in Google Tag Manager

In Google Tag Manager the Event Tracking has become more abstract. They are now using dataLayer.push to send values into the data layers.

You name the values that you submit to whatever you want. I have in my example chosen to call them events, eventCategory, eventAction and eventLabel .

An example of an event tracking could look like this:

    'event': 'GAevent',
    'eventCategory': ‘social’,
    'eventAction': ‘click’,
    'eventLabel': 'facebook'

And an implementation could look like this:

<a id=”facebook” href="#" 
onClick="dataLayer.push({'event': 'GAevent', 'eventCategory': 'social',
'eventAction': 'click', 'eventLabel': 'facebook'});”>

But.. I recommend you not to enter the tracking code directly into your html, a much better solution is to separate it in a javascript file where you use jQuery to implement event tracking. Talk with your developers, they’ll solve it for you.

A better implementation of the above would look like this in jQuery:

$('#facebook').on(‘click’, function () {
    'eventCategory': 'social',
    'eventAction': 'click',
    'eventLabel': 'facebook'

Implementation in Google Tag Manager

When you set up the code for what you want to track, then it’s time to go into Google Tag Manager.

Create macros

The first thing you must do is create a macro for the event itself. Name this macro ’event’ and select ’Custom Event’ as type. This is a generic macro that will capture all types of events. It is only in the rule that we check that the event is called GAEvent.

Create the macro 'event' as a Custom Event

Create the macro ’event’ as a Custom Event

Then, you create macros for eventAction, eventCategory and eventLabel , and then choose the type ’Data Layer Variable’. We will then have access to the values inside Google Tag Manager. Set the Macro Name and Data Layer Variable Name to the same thing (ie, eventAction, eventCategory each eventLabel).

Create macros for eventCategory, event action and event label as type Data Layer Variable

Create macros for eventCategory, event action and event label as type Data Layer Variable

Create a Rule

Then, create a Rule in Google Tag Manager, name it GAEvent. You choose yourself what you rename all things in GTM, but I name everything so it matches the code example above. The rule, you choose which condition {{event}} equals GAEvent.

Create a Rule 'GAEvent'

Create a Rule ’GAEvent’

Almost there, hang in there!

Create an Event Tag

Now we come to the Event Tag. If you kept up with from Part 1, you know that this is where everything is put together and the magic happens. Next, name your Tag to ’Event Tag’ or by your preference. Then you enter Tag Type to Universal Analytics (or Google Analytics, if you remain in the old). You enter your tracking-ID (if you’ve not already made a macro of it, if so then select it).

Under the Event Tracking Parameters, select the macros you just created. And as Firing Rule, choose the rule you just created: GAEvent.

Creating a Tag you name 'Event Tag'

Creating a Tag you name ’Event Tag’

So! Now your events will make it into Google Analytics all by themselves.

Google Tag Manager is not a walk in the park, it definitely has a threshold to get into, but I hope I do with this blog post has made your journey a little easier.

How do you use event tracking on your site or in your app to measure what your visitors are doing?

Please write a comment and tell me.

Läs även