We previously explained how to track links automatically using Google Tag Manager and Google Analytics. And also how to track downloads automatically.
In this article we’ll be more specific, we’ll select a link and we’ll track it. That simple. And we’ll explain it for both versions of Google Tag Manager, version 1 and version 2.
Selecting a link
In order to track the link, we need to decide which is the link we’ll be tracking! :). Along this post we’ll be explaining how to track the link situated in our blog. The link we’ll be measuring will be the English button that filters and shows only English articles.
Understanding the Click Listener
The Click listener of Google Analytics will be waiting and listening to any clicks that happen within the users navigation. Upon a user does a click, the dataLayer will be sending information about the element clicked to Google Tag Manager. This information is captured from the source code of the element.
As we know, Google Tag Manager is based on Tags, Rules (Triggers in version 2) and Macros (Variables in version 2). The latest will be storing information whilst the user clicks, and we’ll be able to use it to create conditions and activate the trigger or rule. These rule will then fire the tag that we’ve configured to send the information to Google Analytics.
The core here will be to be able to know which of the values provided by the dataLayer we should use. This is explained below for Google Tag Manager Version 1 and Version 2.
Configure the Click Listener – Version 1 only
First thing to do is to configure the click listener. Our plan is to listen to any click, and then use the dataLayer to measure our link.
If this tag is not configured firstly, we won’t be able to use the listener to fire tags.
GTM Version 2
Luckily for us, we don’t need to configure the listener in the second version of Google Tag Manager!! It’s already built-in by default :).
Debugging the dataLayer upon Click
The click listener configured will start sharing information on any click, but Google Tag Manager don’t have any trigger associated, hence won’t be doing anything with it.
The first thing we need to do is to deactivate the link to avoid going to the page that is driving us to. To do this, just execute the following code in the console:
(*) The previous code will only work if the jQuery library is present within the code of the page.
Now we’ve avoided to any link to work, but the dataLayer will stil share the information of the element clicked. Time to debug!! :).
Let’s click now on the button we want to measure (English button for us) and then type the following code within the console.
As you can see, GTM has received four events so far:
- gtm.dom – The DOM has loaded
- gtm.load – The page has loaded
- gtm.click – The click we’ve done!!
With each of the previous events, some information is shared. The information we’re interested within the click is:
The previous will have (or not) values depending on the DOM, the source code of the page. But we can use the to fire our triggers. In the previous table, to measure the click on the English button we can only use gtm.elementURL. And that’s the one we’ll use to configure the trigger.
Creating the macro / variable
This step will exclusively depend on if macros / variables are already created or not. They must be present within the macros or variables section of your container.
- With version 1, the first containers created didn’t have them configured. Then Google introduced it at a later date.
- With version 2, they are already created. We can just use them.
If they don’t exist, just create them. I’m creating below the one we are going to use, the gtm.elementURL.
Configuring the rule / trigger
Now that we know what values of the element we can use through macros / variables, it’s time to create our trigger or rule, our condition that will fire the tag.
GTM Version 1
As we already have the listener configured, we just need to decide the event and the values for the condition.
The previous trigger or rule will fire a tag once any user clicks on the button which Element URL contains aroundanalytics.com/english/. As we know this is the only button across the site that contains that value, then we are sorted!!
GTM Version 2
With the version 2 we don’t need to configure the click listener as a tag first, but we’ll have to select it when creating the rule. Just follow the steps below:
Create the Tag and add the Rule/Trigger
Now it’s time to create the tag and send the information to Google Analytics!
For those that are advanced users, there are more elements that can be extracted from the click: parent,child and many more attributes. Please don’t hesitate to ask if you are interested!!