Google Tag Manager: tracking events with jQuery

by Beatrice Bottoni

facebooktwittergoogle_pluspinterestlinkedintumblr

One of the main Google Tag Manager benefits is the ease you can track events on a site using a convenient interface with no need to involve developers from you IT department.

Sometimes, however, the site’s layout or the HTML can make things more complicated than what we expected – in fact, it is not always possibile to implement tracking by using HTML elements to identify a specific button or clickable element; in these cases it is necessary to use a bit of JavaScript and jQuery.

In the following case we started with a basic tracking and then used a custom HTML tag to uniquely identify user interactions on the site.

Let’s imagine you have to track events on your company’s site where there are several links that lead to offered products/services sections.

Consider, for example, the layout in the picture: in the header we have some links pointing to the catalog, information about the business and contact sections. Right below we have a sliding carousel of images, each of these pointing to a link. The link on button #2 in the header is the same of element #4 on the carousel (they both refer to /products section).

mockupOur goal is to track user interactions with these elements on the homepage. How can we do this by using the Tag Manager?

First idea that may come to mind is to create an Event Tag for each element (eg. ButtonHeader1, buttonHeader2, carouselElement1, carouselElement2…) and trigger them using Auto-Event variables “Element ID” or “Element Class” equals to related values in the HTML.

For example, Element ID equals menuProdotti if we want to trigger the event when the “Products” button on the header is clicked or we can also use the new operator “Matches CSS Selector”, triggering the event when Click Element matchess CSS selector #menuProdotti.

This solution is simple but Tag Manager is not always able to identify the element ID or class – at this point we considered the solution to use the Element URL auto-event variable to trigger the tag when an element refers to a specific URL is clicked – in our case, Element URL contains “/catalog/products”.

To avoid creating too many tags we can create a Lookup Table variable, setting as input {{element URL}} and as output the name we want for the item. This variable has then to be passed to the event as Event Label.

This solution may seem satisfying but…

What if the button header is referring to the exact same URL of one of the elements on the carousel?

This will trigger a double event and thus tracking will lose accuracy. To work around this problem we have to use a bit of JavaScript and jQuery following these steps:

1. create a Custom HTML tag as follows:

This code identifies the clicks made on the element with ID “menuProdotti” inside the HTML <body> and using the dataLayer.push method sends the values of variables to DataLayer:  eventCategory, eventAction eventLabel and will then be passed as values in event tag.

2. After that, you have to create 3 DataLayer variables with the same name you have given in the cose (eventCategory, eventAction, eventLabel).

3. Create then a Custom Event that is activated when the event matches “Header_Event”.

4. Last step is the creation of a tag to pass these parameters to GA, giving as event parameters the 3 dataLayer variables previously created.