With the advent and widespread adoption of tag management solutions like Google Tag Manager, Adobe Dynamic Tag Manager, Ensighten and Tealium iQ it’s now easy for website analysts and marketers to set up measurement based on visitor interactions with web page elements such as clicks on id or class.
But what about when website updates are made causing these id or class values to change? There are times when web developers can forget to check if a specific element value is required for any other use or simply aren’t across its wider use. As a result, the analytics measurement of the specific interaction ceases to work. But it may be some time before it is noticed. More often than not, you’ll discover it further down the track when you go to check a report or when one of your stakeholders requests data. In order to combat this issue, let me introduce the HTML5 Custom Data Attribute – a better way to trigger your interaction-based measurement.
What are custom data attributes?
Custom data attributes allow you to add your own information to tags in HTML. Although the name suggests otherwise, they are not specific to HTML5 and you can use the data-* attribute on all HTML elements in the major browsers including IE6/7.
‘Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.’ W3C
They consist of two parts:
- Attribute Name: must be at least one character long, contain no capital letters and be prefixed with ‘data-‘.
- Attribute Value: can be any string.
Custom data attributes are most useful for capturing additional information when users click on elements that you’ve assigned the tracking code to on your web page. For example, if you have social share buttons implemented on your website, you could add the following data attributes to the ‘share-link‘ elements:
Facebook Twitter Linkedin Email
Tracking can be triggered using the data-event=”social-share” and simply adding the social network into the data-social-share-destination value. You will now be able to track the clicks and capture which social network the user shared the page to.
3 reasons they’re a better way to track website interactions.
- All major browsers support them including the dreaded Internet Explorer 6 and 7 (via getAttribute).
- Web developers can change ids and class names at will without breaking tracking once tracking is changed to trigger off the data attribute.
- Multiple data attributes can be applied to a single element, meaning you can capture as many data values as you like.
Applying data attributes in tag management platforms.
Once you’ve applied custom data elements to your website you can easily set up the tracking in your respective Tag Management Solution (TMS). Below are examples of how to set this up within both Google Tag Manager and Adobe Dynamic Tag Management (DTM) using my previous social-share code example. Upon setting up the configuration, both of the TMS will detect clicks on elements where the data-event value of social share exists and will capture the date-social-share-destination value.
Google Tag Manager (GTM).
Firstly, go to the Variables section in GTM and ensure that “Click Element” has been ticked in the Enabled Built-In Variables.
Next up, still in the Variables section, we need to create two new user-defined variables for the data-event and data-social-share-destination data attributes.
In custom variable type choose “Data Layer Variable” and configure the name as follows “gtm.element.dataset.{attribute name}”. So, for example data-event becomes “gtm.element.dataset.event”.
Note that data attributes containing multiple hyphens will need to be input as lowerCamelCase (for example data-social-share-destination will become gtm.element.dataset.socialShareDestination).
Once the custom variables have been set up you’re ready to create the trigger for the rule. In the Triggers section of GTM choose ‘click’ for both the event and the trigger type. For the Fire On settings, select the data-event variable created and set it to fire when the value equals social-share.
Lastly, to set up the Google Analytics Event Tracking, navigate to the Tag section of GTM and set up the following:
Product: Google Analytics
Tag Type: Universal Analytics
Configure Tag:
- Tracking ID: {Insert your GA Tracking ID}
- Track Type: Event
- Category: {Type the value you wish to set as the category – I’ve set my rule below to the data-event value}
- Action: {Type the value you wish to set as the action – I’ve set my rule below to click}
- Label: Insert your Social Share Destination Custom Variable. This will populate the label with the value in the data-social-share-destination attribute.
Fire On: Click and select the “Data Event equals social-share” trigger created in the last step.
Adobe Dynamic Tag Management (DTM).
Within Adobe DTM we can set up event based rules. We simply set up a rule to trigger when the data attribute is clicked, and assign different attribute values for capturing the data.
Using the social share example again, input “a” as the element tag and tick the Manually assign properties & attributes option. In the property and value fields input ‘data-event’ and ‘social-share‘ respectively.
Next, set the analytics you wish to fire on click. The values of data attributes on the element clicked can easily be captured and sent to your analytics platform using DTM. To capture the value of the data-social-share-destination simply input ‘%this.getAttribute(data-social-share-destination)%’
And there you have it. A simple way to trigger event based tracking within Google Tag Manager and Adobe Dynamic Tag Management using HTML Data Attributes. By using data attributes to trigger your tracking, you will reduce the risk of tracking errors thus increasing your data quality.
Tag management is a favourite topic of ours so make sure you download our one page Guide to Tag Management and have a read of our other articles. If you’re new to tag management Getting familiar with Adobe DTM will walk you through.
