Page Elements Click Tracking

Problem

Do you want to know:

• What button did users click on the most?
• If a visitor has seen a content hidden in tabs (typically in an eshop on  product details tabs like Reviews, Photos, Tech Specs)?

Having these data, you will:

• be able to recognize which call-to-action elements (buttons, menu items) work & which ones do not work
• have deeper insights, e.g. who are the most interested users and then you can (re)target them

 

Solution

In short, you must:

• Add HTML attributes identifying the element you want to track.
• Use Google Tag Manager and set up a click tracking trigger.

How

There are two options how you can identify the elements you want to track:

1. Check the current HTML source code and find out if you can identify element(s) you want to track by CSS selector.
   a. If you want to track a single element (e.g. a button), it should have its specific HTML ID.
   b. If you want to track e.g. a group of buttons, they should have the same HTML class (in reports, you will distinguish buttons by the button text).
2. Add special HTML element data attributes just for web analytics purposes (my preferred approach). Then you can create only one GTM trigger that will work on your whole website.

Option 1: Click trigger based on CSS selectors

In this case you have to create a new GTM Google Analytics tag for every HTML element (or group of elements defined by a single CSS selector).

E. g. if you have a button with unique HTML ID…

<a href="#buttonA" id="buttonA" class="btn btn-lg btn-success">Button A</a>

… you have to create the specific trigger for it.

Option 2: Click trigger based on element data attributes

In this case you create one universal GTM Google Analytics tag connected to the universal GTM Trigger.

Just add some HTML attributes (all with data-ga-) that match Google Analytics event category (data-ga-ec), event action (data-ga-ea) and event label (data-ga-el). Setup GTM Element Click trigger, read the values of element data attributes (set up GTM variables) and push them as Google Analytics event values.

<ul class="nav nav-tabs color3" role="tablist">
    <li role="presentation" class="active"><a href="#desc" aria-controls="desc" role="tab" data-toggle="tab" data-ga-type="event-cal" data-ga-ec="Clicks" data-ga-ea="Tabs" data-ga-el="Description"  >Decription</a></li>
    <li role="presentation"><a href="#techspecs" aria-controls="techspecs" role="tab" data-toggle="tab" data-ga-type="event-cal" data-ga-ec="Clicks" data-ga-ea="Tabs" data-ga-el="Tech Specs" >Tech Specs</a></li>
    <li role="presentation"><a href="#photos" aria-controls="photos" role="tab" data-toggle="tab" data-ga-type="event-cal" data-ga-ec="Clicks" data-ga-ea="Tabs" data-ga-el="Photos" >Photos</a></li>
    <li role="presentation"><a href="#reviews" aria-controls="reviews" role="tab" data-toggle="tab" data-ga-type="event-cal" data-ga-ec="Clicks" data-ga-ea="Tabs" data-ga-el="Reviews" >Reviews</a></li>
  </ul>

You can see the live demo here.

We use this approach in the Advanced Analytics Setup Bundle.