How to set up event tracking in Google Tag Manager

Events in Google Analytics are important for understanding how people interact with your website. They give you additional insight into their behaviour and how effective your pages are for leading users towards a conversion.

With event tracking you could see how many users clicked on a button or played a video, scrolled down a page or clicked on your contact and social media icons.

I mostly use Google Tag Manager (GTM) for analytics setup so I will show how to set up event tracking for clicks on buttons with GTM. Instead of hard coding events in the code, GTM allows you to create, test and amend tags within its interface.

Before you go ahead creating your event tags, make sure your built-in pages and clicks variables are enabled. This will avoid you having to go back and forth between different sections.

The setup below covers only one action – a click on a specific button – but if you have multiple actions to track, then look into implementing a lookup table variable.

Tracking button clicks

Here’s my scenario.

I want to track our BENCHMARK YOUR SITE button that allows users to sign up to our free software plan and get benchmarked against competitors.

And here’s how to set it up.

1. Create a tag

It will be a Universal Analytics tag type where tracking ID is a constant string variable (you need to create this variable before using it) and track type ‘Event’.

Think of your event tracking parameters as a way to organise the events into a hierarchy:

• Category – the main aim of the button or its placement
• Action – what the user clicked or the action
• Label – provides additional information like on what page the button was clicked or the outbound link they clicked on
• Value – if you have a numerical value to set for your click (not in my case tho)

In my example, the category is ‘Get started’ because we have a number of similar buttons across the site with the same purpose to get the user started with the signup, so all of them have the same event category.

For action, I specify the type of button that was clicked on so I can compare how these different buttons perform – ‘Benchmark your site’ in this case.

My event label is the {{Page Path}} where they clicked on the button. The buttons take the user to the same place so I’m more interested in which pages these buttons were clicked on. Alternatively, if you have buttons that take people to different URLs you might want to track that instead.

Is it a non-interaction hit?

This is an important one to keep in mind.

By default this is set to False. If you don’t want this event to impact your bounce rate, then change it to True, which you would do if the click or action didn’t take the user to the new page, or if you didn’t want it to be included in your bounce rate calculations.

Now click ‘Continue’ to go to the trigger setup.

2. Create a trigger

Trigger is like a rule that allows you to tell the tag, ie specify the conditions, when it should fire.

Under ‘Fire On’ select ‘Click’ as your trigger type and then ‘New’.

For configuring the trigger, you have a choice between two types:

• Just Links – use this when the target is a link or anchor tag <a>
• All Elements – use this when the target is any other element that’s not a link

To determine what’s best for your purposes you need to have a look at how your button is set up. You can do this by selecting ‘inspect element’ or simply ‘inspect’ depending on what browser you’re using. It’s usually available when you right click on the button or element.

Our button has been set up the following way:

<a href=”https://littledata.uk/signup” class=”btn btn-ltd btn-green”>benchmark your site</a>

It has a link so I will use ‘Just Links’ for targets and I have a choice between three elements to use in further configuration:

• https://littledata.uk/signup as click url
• btn btn-ltd btn-green as click class
• benchmark your site as click text

It is best to use a unique condition if you can. This way, if similar class or click url gets reused in other parts of the website you don’t have to go back to this trigger to update it.

With ‘Just Links’ you will get additional configuration options:

• Wait for tags – delays opening of links until all other tags have fired or the wait time has lapsed, whichever happens first
• Check validation – fires the tag only when opening the link was a valid action, without the tag will fire whenever the user clicks on the button/link
• Enable when – this options is shown only when either of the above is ticked so you can be specific about where you want the trigger to be active

If you want the trigger to listen to the interactions on all pages, then set that section to be  URL or Page Path matches regex .*. (without that very last full stop – that one’s for the sentence)

In my case, I only want it to work on benchmark pages and all of them start with /benchmark/.

The very last step in trigger setup is specifying on which actions or clicks the tag should fire.

As said above, I’m using the button’s click class here.

All done?

This is what your tag should now look like.

Click ‘Create Tag’.

3. Test

Test your tag in GTM’s preview mode by checking two things:

• the tag fires in the preview interface,
• and the tag is seen in Google Analytics real time view under ‘Events’ with the event parameters you specified

I hope you got on with the setup above just fine, but if you have questions or clarifications, feel free to ask below.

Further reading:

• Know who converts on your site with Google Analytics goals
• Using lookup table variable in Google Tag Manager
• Intro to Google Tag Manager’s key concepts and terminology

Image: Courtesy of suphakit73 at FreeDigitalPhotos.net