Google Tag Manager click listener and associated triggers

Reading time: 5 minutes

In our previous article, we’ve had an overview of Google Tag Manager, and a quick view on all available triggers. Let’s have a more precise look on one of these triggers: the click trigger, an easy way to track clicks on some events.

2 different triggers type

Google Tag Manager offers us 2 types of click triggers as mentioned in our previous article:

  • Click on links elements only: the trigger only fire when the visitor clicks on an HTML element. Other clicks are not tracked.
  • All clicks: any click made by the visitor will be tracked. It includes some non-relevant click that we will need to filter in order to avoid creating a non-understandable list of click events.

Depending on what you exactly want to track, both have their own pros and cons but remains specific to your case.

Data gathered while tracking

Each time a click trigger fires, it automatically populates some built-in variables:

  • Click Element: the HTML element that has been clicked
  • Click Classes: the HTML “class” attribute, if applicable, on the Click Element
  • Click ID: the HTML “id” attribute, if applicable, on the Click Element
  • Click Target: the HTML “target” attribute, if applicable, of the Click Element
  • Click URL: the HTML “href” attribute, if applicable, of the Click Element
  • Click Text: the visible text inside the Click Element

These 6 variables need to be enabled in the Variable tab:

Google Tag Manager Built-in Click Variables

Google Tag Manager Built-in Click Variables

Let’s take an example, for a link, with the hypothesis that our domain name is example.com. Here is our HTML:

<div>
<a href="/contact-page" target="_blank" title="Contact Page" class="link-blue" id="top-link-contact">Contact Us</a>
</div>

With a basic “click on link only” trigger:

Google Tag Manager Links Triggers

Google Tag Manager Links Triggers

When a visitor would click on the link on the page, the trigger would fire, and we would get the following data in the variables:

  • Click Classes: link-blue
  • Click Element: http://example.com/contact-page
  • Click ID: top-link-contact
  • Click Target: _blank
  • Click Text: Contact Us
  • Click URL: http://example.com/contact-page

Google Tag Manager Debug Tool - Click Variables

Google Tag Manager Debug Tool – Click Variables

Transform variables values into data

The values available in the built-in variables do not seem very understandable. If we are using such trigger, we should think about transforming a little these data before sending them to our Web Analytics tool.

As an example, Google Analytics expect, for any event (click including), an Event Category, an Event Action, an Event Label (facultative) and an Event Value (facultative).

For a click on a link that redirects to a contact page, we could imagine that we would have

  • category: link
  • action: click
  • label: contact-header (for a link in the header)
  • value: none, as this click is not that much valuable

In order to do that, we have several options:

  • change our trigger, thanks to filters, to target only this link: this is an option if you don’t need to track several links: if the link has an ID, then you should filter by its ID and the page path (if you want to trigger only on a specific page), otherwise, you should consider the URL and other parameters that would make the event sufficiently unique for the pursued purpose
  • “translate” our values into something more understandable

Translating the variable values can be made by creating new variables, based on the click built-in variables. For example, we could create 3 new variables (or as many as needed depending on the need):

  • Link – Event Category
  • Link – Event Action
  • Link – Event Label

based on a lookup table, that would link an input value (values of one of the variables) to the data you want to send to your Web Analytics tool.

In order to use a lookup table, you need to choose one variable (and only one), that will be the ‘input’ data and that will be transformed into the corresponding ‘output’ data. In case you need to use several of the built-in variables, you may concatenate them into a new variable to create only one variable that would be sufficiently unique for the pursued purpose.

Let’s say that, that we will base the unique click identification on the combination of:

  • Click URL
  • Page Path

We will create a new variable named “Click URL – Page” that would be a concatenation of the 2 variables Click URL and Page Path. This variable would be “ Custom Javascript” variable, and its value would be:

function() {
return {{Click URL}}+" - "+{{Page Path}};
}

Now, we would have a unique variable that would define our clicks.

It is now possible to define our Category, Action, and Label.

These variables are defined by Lookup Tables. The input variable would be the newly created variable (or if you didn’t need such new variable, the one you consider sufficiently unique to represent clicks). For each of the values of this variable, you will associate the value of the Category (in your Link – Event Category variable), the Action (in your Link – Event Action variable) and the Label (in your Link – Event Label variable).

You would also put a default value to undefined to make sure that you don’t have the click in your Lookup Table, you don’t assign it a category, action, and label.

Google Tag Manager - Lookup Table Variable Configuration

Google Tag Manager – Lookup Table Variable Configuration

Thanks to these new variables, you will be able to create tags to send these data to your web analytics tool. For Google Analytics, for example, you can use the built-in tag to send these data very easily.

 

Using the Google Tag Manager can be a good start, but as explained previously, we need to do a workaround to be able to send “clean” data to our Analytics tool. We will see in future articles other ways to track specific clicks, using custom events to avoid any workaround in Google Tag Manager.

 

 

Sources & Copyright:


Stay updated! Join our newsletter for webanalysis tips