How to Get Started With Google Tag Manager: Event Tracking in the New User Interface (Part 2) - Fresh Egg Blog

How To Get Started With Google Tag Manager: Event Tracking in the New User Interface (Part Two)

Technical web analyst

Fresh Egg now offers Google Tag Manager training courses. Find out more here

This is part two of our Google Tag Manager (GTM) guide. If you’ve followed part one, you’ve already setup a Universal Analytics pageview tag. We will now focus on how you can set up events that are determined by clicking a specific link or element on the page.

We will walk through setting up tags to track the following actions:

Tracking outbound links

Tracking PDF views

Tracking phone calls from mobile

Tracking clicks on email addresses

Tracking clicks on buttons

But first let’s understand how we are going to identify these clicks and how to test any changes made in GTM before publishing.

Identify HTML Element Attributes, their values and GTM Variables

It is useful to have a basic knowledge of HTML when setting up advanced tracking. I will be highlighting how to identify what attributes your GTM variables come from but if you want to read more on HTML, and practice understanding, I would recommend Codecademy’s free and interactive lessons on HTML fundamentals.

Individual elements on the page, such as buttons or forms, can have various attributes, which are in the form of key=”value” pairs. You can identify what attributes a specific button has by locating the HTML when you right click and view page source.

The list below explains how to identify the commonly used ‘built-in variables’ used in GTM:

Click Classes – This refers to the active classes on the clicked element. This looks like the following in HTML:

<button class=”fruit apple”>Test</button> 

In the above example, the HTML element has both a class of fruit and a class of apple.

Click ID – This refers to the ID attribute of the clicked element.

E.g. <button id=”grape”>Test</button> 

In the example above, the HTML element has an id of ‘grape’. The ID of an HTML element should be unique on any singular page of your website. For this reason, it is often used for specific click tracking.

Click URL – This refers to the href attribute or action attribute of the clicked element.

E.g. <a href=”test.html”>Cherry</a> 

Click Text – This is filled with the inner text contained within the clicked html element.

E.g. <a href=”test.html”>Pineapple</a> 

Pineapple would be the Click Text value if this element was clicked.

Testing and Debugging Event Tags

You should test any change you make in GTM, even if you feel like you’ve done it enough times, always test. We’re all human and so we make mistakes, which is why there is a versioning system in Google Tag Manager.

In the part one of this tutorial we covered the testing of a simple pageview tag. But there are a few more steps to make when testing an event tag because they generally have more complex triggers.

Step 1 – Enter Preview Mode

The publish menu is located in the top right of the page. This allows you to test tags before publishing them. You can select preview and debug mode at any time. When you are in preview mode, you’ll be able to see the debug window on your website; you need to view it in the same browser.



Step 2 – The desired result test

Click the element or link that you are expecting your new event to occur/fire on. The example below is for tracking ‘Mailto:’ links and will fire on a ‘gtm.linkClick’ event and when the trigger conditions are met.

debug mode


In the summary, an event called ‘gtm.linkClick’ will fire when a link is clicked. Select this in the summary and you’ll see the Mailto Tracking tag.


The most common reason for a tag not firing is that the trigger conditions are not working as expected.

Select your tag, it will be in the ‘Tags Fired on This Event’ list or the ‘Tags Not Fired on This Event’. There will be a green tick under firing triggers if the conditions were met and a red cross if they weren’t.

mailto triggers

Check values

To check that the event parameters are set up with the values you expect, select your tag from the gtm.linkClick Summary. 

tag values

Select the option ‘Display Variables as Values’ and the properties will display as the values contained in the variables, rather than the names of them. You can then view the ‘Event Action’, ‘Event Category’ and ‘Event Label’ values under the ‘Properties’ heading.

Step 3 – The undesired result test

You should also check that your new tag doesn’t fire when it isn’t supposed to. Click a link on the page that you don’t want to track. In the Mailto example, you would click a non-email link.

Check that your tag doesn’t fire in the new gtm.linkClick event. If it does, then your trigger conditions may not be specific enough.

The GTM community is an excellent place to share any issues you are having with your tag setup; you can expect fast and expert support there.

Tracking outbound links

Why set up outbound link tracking?

Analysing where users exit your site and where they are heading is often a key element of reporting. You may have various outbound links on one page, it is useful to know where they are going before deciding that page is performing badly. For example, if they’re going to your Facebook page that may be a desired departure. Or it may be that you want to rethink the placement of your external link.

Step 1 – Check Variables

Ensure the built-in variable ‘Click URL’ is selected:

built in variables

Step 2 – Set up trigger

Create a new trigger with the following settings:

trigger click url


Replace ‘’ with your website domain.

Step 3 - Set up tag

Set up a Universal Analytics Event Tag, selecting the trigger you set up to control when your tag will fire and use the ‘{{Click URL}}’ variable as your event label to differentiate the links. Your tag should have the following settings:

outbound link tracking

In the configure trigger setup you also have the"Wait for Tags" and "Check Validation" options, (which I've left unticked in the example above):

configure wait for tags

  • Wait for tags will delay the link from opening until all tags have fired or the specified time (in milliseconds) has elapsed. 
  • Check validation will ascertain whether any other code on the page prevented the default action from occurring, this is used for setting up form tracking.
  • If either of these boxes are ticked, the "Enable When" section will appear, where you will need to specify the page(s) where your trigger will be active
  • I usually use these options when I'm setting specific tracking on a unique button or form


Tracking PDF views

This is a common requirement; you’ve invested time in creating PDF documents with great content, so you want to know if visitors download them and which ones are popular.

Step 1 – Check Variables

Ensure the ‘Click Url’ built-in variable is selected

Step 2 – Set up trigger

Set up your trigger with the following settings:

pdf trigger


The regular expression in this example is checking that the clicked link contains ’.pdf’. The regular expression ‘\.pdf$’ would also work but could potentially exclude URLs that contain characters following the ‘.pdf’ such as query string.

Step 3 – Setting up tag

Create a new tag with the following settings: select the trigger you just created and use the ‘{{Click URL}}’ variable in the label so you can differentiate specific PDFs in your reports.

pdf tag


Tracking phone calls from mobile

Phone numbers displayed on a mobile device can be made instantly dialable with a click when you use the following syntax:

<a href=”tel:1111111111”>111111</a>

It is possible to set up a tracking tag to check for this syntax in GTM.

Step 1: Check Variables

Check the variable ‘{{Click URL}}’ is ticked.

Step 2: Set up trigger


Step 3: Set up tag

Select the trigger you set up previously and use the ‘{{Click URL}}’ variable as the event label. This will capture the specific phone number that was called – especially useful when you may have different numbers for departments.

phone tracking tag


Step 4: Set up blocking trigger

Phone number links won’t contain the hostname of your site, so they may be captured by an outbound link-tracking tag if you have set one up. You don’t want to capture the same data twice so you would want to use your phone trigger as a blocker on your outbound link tracking tag.

blocking trigger

Tracking clicks on email addresses

Step 1: Check variables

Check the variable ‘{{Click URL}}’ is ticked.

Step 2: Set up trigger

mailto trigger

Step 3 – Set up tag

Create a new tag with the following settings: use the trigger you just set up and the ‘{{Click URL}}’ as the label. This is so you can differentiate email clicks in your data without having to set up multiple tags.

mailto tag


Step 4 – Add blocking trigger to outbound link tag

Email links may not contain the hostname of your site, so they may be captured by an outbound link tracking tag if you have set one up. You don’t want to capture the same data twice so you would want to use your Mailto link trigger as a blocker on your outbound link tracking tag.

mail to blocker


Blocking triggers always take precedence. Your outbound link tag will fire for all outgoing links apart from ‘Mailto:’ clicks.

Tracking clicks on buttons

A regular requirement is to track how many clicks there are on a specific button or call to action (CTA).

“What is the purpose of my specific click tracking?”

It may be that you have the same CTA at a different place on the page and from a user experience perspective you will want to know which one is working most effectively. It is important to identify a specific purpose for why you track something, instead of tracking everything. Setting up a measurement plan should be a key step for your business.

Step 1 - Variable setup

You need to know how you are going to identify your button(s). This is often via an attribute of the HTML element and there are built-in variables that refer to these, as explained in the HTML attribute section.

For the purposes of this example I will use the Click ID variable.

Step 2 – Set up trigger

Use the Click ID variable and replace ‘example’ with the ID of your element.

click trigger


Step 3 - Set up tag

Set up a tag with the following settings, replacing the event category in the example. I haven’t used an event label in this set up. While setting an event category and action are mandatory, event labels are optional.

specific click tag


Remember to refer to the testing and debugging GTM section before publishing your tag. 


The main limit of using GTM is that you are relying on the quality of the HTML code on your website. If the elements you want to track don’t have anything to uniquely identify them (no IDs or classes) then you will still need to make code changes on your website to add a specific attribute.

Part Three

Don’t forget to come back to the site to look for part three of this series, which will guide you through setting up tracking on form submissions: subscribe to our emails to be notified when this is available.

Do you need help implementing Google Tag Manager? Then contact our Insights team to find out more.

Share this post

comments powered by Disqus