In this tutorial, I’ll explain how to combine Google Tag Manager and Events Tracking to set up Conversion Tracking, offering a new level of insight for your websites and simultaneously freeing up development resources.
There are two main ways of adding event tracking to your website. One way is to hard code each click action with Javascript, for example something like: ga(‘send’, ‘event’, [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]); in analytics.js. This works great, but in order to do this you need to be a developer or at least have access to one.
(At Parallax, we’re fortunate to have a talented in-house development team. We also have our own CMS called Expose, which means we can implement these events immediately, unlike other scenarios where an outside development agency would need to schedule this as paid work.)
The second way – the subject of this tutorial – is much simpler, and that’s by using Google Tag Manager. Done this way, anyone can add tracking pixels and events to a website with no development experience whatsoever, freeing up valuable dev time. You can create event tags and fire them with triggers based on predefined or user-defined variables built within the application. If you’d like to know more about Google Tag Manager itself and how to set it up, you can read more over at the official support page.
OK – let’s get started. There are three essential steps you need to complete in Google Tag Manager to get event tracking up and running.
Step 1 – Variables
Before you do anything, make sure you have enabled the built-in variables. Simply click the big red “configure” button then click to enable the relevant variables. These will be used later when we set up tags and triggers.
Google Tag Manager also has the option for you to create your own variables, but that’s for another time – on this occasion the built-in variables will do just fine.
Once you’ve enabled the variables it’s time to set up the tags and triggers. There is no real order to these, but personally I prefer to set up triggers first and tags last before publishing.
Step 2 – Triggers
Google Tag Manager offers several trigger types that can be used to fire tags. You can find a full list of them whenever you create a new trigger.
Page View – listens for the page being fully loaded and ready to view
Click trigger – listens for any click on the page (on any type of elements)
Form Submission – fires when a form is successfully validated and submitted
History Change – fires when the browser history changes, i.e. a page change
Custom Event – trigger listens to the events being pushed via the dataLayer
JavaScript Error – fires when the script errors out
Timer – fires after an interval of time
The video below demonstrates how we set up event tracking for a client who was about to launch a free exercise and training manual and wanted to track how many downloads it achieved (over 10K to-date).
Begin by setting up a new trigger. In the triggers > menu, click the red (new) button. Once clicked, you’ll see a pop out giving you options to choose a trigger type. On this occasion, we used (click – just links). You will be given an option of (all clicks) or (some clicks) – choose the latter because we want to be very specific in what we track and not every click on the site.
You need to make sure the conditions are true for the triggers to work. Before you do that, you’ll need to first find out the name of the element you want to wrap the trigger around, as shown in the video example. Then go to the page you want to track and on the element right click (inspect element) to find out the class name (each button or link should have a unique name that Google Tag Manager can reference).
You have now set up a new trigger. The final step is to combine it all using a tag.
Step 3: Tags
The last stage is to create a new tag and link it all together and publishing it to the live site.
In the tag options, you’ll be asked to fill out a number of Event Tracking Parameters. These are important as they will be used when you start setting goals in Google Analytics.
When filling out the [category], [action] and [label], try to make them as clear as possible. If you have a number of different events, categorise them appropriately and use the correct UA code.
Now you’ve set up variables and triggers and combined them all with a tag, Google Tag Manager has another very useful trick up its sleeve – the (preview) button. Using preview, you can test the triggers are firing and, if necessary, make amends until everything is working correctly. Once you’re happy, simply publish the new tags.
Important Note: Don’t forget to leave preview mode when complete, otherwise it will follow you around all day. (I’m talking from experience here!)
You’ve now used Google Tag Manager to set up events.
Setting up goals in Google Analytics
Once you’re happy that Google Tag Manager triggers are firing and everything is working correctly, you can quickly check if Google Analytics is recording these events.
In Google Analytics go to Behaviour > Events > Overview and you should see the event you’ve set up in Tag Manager. Alternatively, if you’ve just set it up, you can do the same in Real Time.
Next you’ll need to set up the all important conversion goals. For this you going to need admin access. Go to Admin > View > Goals and click the red button to set up a new goal.
Google Analytics also has preset goal templates, but you may want to create your own. Simply click “custom”, then name the goal description after the event, e.g. “pdf download”. Just make sure you remember to choose “event” as the category type.
Under “event conditions” (in the goal details section) you also need to fill out the category, action and label exactly as you did in Google tag Manager. You can add a value to each conversions, but it’s not vital. Remember to click save, then you’re done.
And there you go – it’s as simple as that. We have used Google Tag Manager and Google Analytics to combine event tracking and conversions to give a new level of user engagement insight across your website.