Track cliks on specific links with Google Tag Manager 2

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.

Around Analytics English Button

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

Now we are going to check what values the dataLayer is providing upon click. This is explained using the Google Chrome Developers JavaScript Console, but you can alternatively use Firebug.

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:

Around Analytics Prevent Default

(*) 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.

table(dataLayer,0)

Table DataLayer

As you can see, GTM has received four events so far:

  • gtm.js – The JavaScript file is loaded
  • 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:

  • gtm.element
  • gtm.elementClass
  • gtm.elementID
  • gtm.elementTarget
  • gtm.elementURL

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.

Google Tag Manager Macro ELement URL

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.

Google Tag Manager Rule Click

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:

Google Tag Manager Click Listener Step 1 Google Tag Manager Click Listener Step 2 Google Tag Manager Click Listener Step 3

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!!

2 thoughts on “Track cliks on specific links with Google Tag Manager

  1. Comentar John Khel jul 24, 2015 11:24

    Hola,

    Muy buena la explicación y bien detallada pero, una vez tengo esto configurado en GTM, ¿qué tengo que hacer para ver los datos en GA?

    Muchas gracias

    • Comentar Elías Nuevo ago 13, 2015 10:12

      Hola John,

      En la sección de eventos podrás encontrar los datos enviados con los valores Categoría, Acción y Etiqueta que has escogido.

      Espero que sea de ayuda.

      Gracias!

Escribir un comentario