Event Tracking with Data Attributes in GTM

One common method of event tagging in Google Tag Manager uses GTM's built-in interaction tracking to fire tags off the classes and IDs that are already on the page. This method is fast and convenient, but not always robust in the long term because site updates often edit or remove the HTML elements that your tracking is based on.

There are a few options to deal with this, e.g. moving to a fully developer-maintained data layer. This option comes with its own disadvantages, though, since it brings you back to long wait times and lack of flexibility.

In this post I'll discuss another approach to event tracking: custom data attributes. Custom data attributes get added to the HTML just like regular IDs and classes, and can therefore leverage all the benefits of GTM's built-in triggers. However, they're explicitly designed to contain data, so your developers can change site layout and design without altering the site elements that your tracking is based on. In a practical sense, data attributes also keep analytics top-of-mind (i.e. less likely to overlooked) for your site developers, as they'll be visible to them every time they edit the source code.

DATA ATTRIBUTES HTML SYNTAX

Data attributes are input as key-value pairs consisting of an attribute name and an attribute value.

1. Attribute name: should be prefixed with "data-" and shouldn't contain any capital letters.
2. Attribute value: any string (numbers would be treated as a string as well)

For example, a data attribute may contain detail about the position of a product tile on a page, where the attribute name is data-tile-position, and the attribute value is the position in the list.

<id = "products">
<div class="product_tiles">
 <div class ="product_box" data-tile-position="1">
 <div class ="product_box" data-tile-position="2">
 </div>
</div>

In this example, there is a product listing page containing 2 products that have been marked with data-tile-position = "1" and data-tile-position = "2". Now your developers can freely change the class name from "product_box" to, say, "product_card", without breaking your analytics tracking.

ACCESS DATA ATTRIBUTES WITH JAVASCRIPT

1) Select HTML elements:

Using the above example, if we wanted to select all the HTML elements with a data-tile-position data attribute, we could using the following JS:

document.querySelectorAll('[data-tile-position]');

If we want to select HTML elements with a specific attribute value, it would be like this:

document.querySelectorAll('[data-tile-position="1"]');

2) Return data attribute values:

Returning the values associated with data attribute requires accessing the element's dataset property. There are a couple things to be aware of that make accessing data attribute values different from other HTML elements: 1) you need to drop the "data" prefix, and 2) all dashes are converted to camelCase, like this:

var tilePosition = dataset.tilePosition;

DATA ATTRIBUTES FOR GOOGLE TAG MANAGER

VARIABLES: 

Adding data attributes into a GTM variable will let you collect the value of your data attribute when the element is clicked. In this example, you'd use this to identify what tile position was clicked on.

In Google Tag Manager, navigate to Variables > New > Data Layer Variable.

Add your data attribute name like this: gtm.element.dataset.{attribute name in camelCase}. So data-tile-position would be entered as gtm.element.dataset.tilePosition.

TRIGGERS:

Adding data attributes to a GTM trigger lets you fire events when a user clicks on an element containing your data attribute.

In GTM, navigate to Triggers > New > Click Just Links. Choose "Some Link Clicks" and choose the following condition:

Click Element matches CSS selector [data-tile-position], [data-tile-position] *

(the asterisk is to include clicks on any nested elements)

You can now put this all together in Google Tag Manager to create an event tag that tracks clicks the position of each product click, like this:
Track Type = Universal Analytics > Event
Category = Product Tiles
Action = Clicked Position {{DL - dataset.tilePosition}}
Label = {{Click URL}}
Trigger = Click - Product Tile

The resulting event report will look something like this:

ADVANCED CASE

Just to make things slightly more complicated (more realistic!), what if your HTML actually nests part of the product tile under the data attribute? For example, the HTML might look like this:

<id = "products">
 <div class="product_tiles">
 <div class ="product_box" data-tile-position="1"> 
    <div class = "square">
    <a class = "link" href="/product-link"> </a></div>
 ...

Here, someone might not click on the exact part of the element that contains your data attribute. In this case you'll want to look up the DOM with the "closest" function.  You would add this into a custom JavaScript variable in GTM, and use this Variable in place of the dataset.tilePosition data layer Variable above.:

function(){
  var e = {{Click Element}};
  var closestTile = e.closest('[data-tile-position]');
  return closestTile.dataset.tilePosition;
}

As before, it uses the data attribute name ("data-tile-position") in the closest function to retrieve the entire HTML element, and then uses camelCase to return the data attribute value.

Note that here you'd only need to replace your Variable. You can still use the Trigger as shown above, because the trigger already contains an asterisk to include nested HTML elements.