Improve event tracking with custom data attributes

Supercharge your event tracking by adding custom data attributes to your website.

Using custom data attributes will mean your analytics are less likely to break and you get a more detailed view of what your user is doing.

A custom data attribute looks something like this:

data-example="Some text or data"

You can add custom data attributes within any html element. For example a link to a product page could look something like this:

<a href="/product-page/" 
    data-value="5.50" 
    data-offer="2 for 1" 
    data-category="House plant" 
    data-SKU="SKU0001" 
    >Venus Flytrap
</a>

A tag manager, like Google tag manager or Ensighten, can then pass the data within the custom attribute to your web analytics. This information can then give that event (for example a link click) extra context.

Custom data attribute format

A custom data attribute is made up of two parts – its name and the data.

The attribute name should always start with data-.

After data- you can add anything you want as long as it’s just plain lowercase text. You can’t use special characters or uppercase.

The data you can pass within an attribute can be any string of text or number or both.

You can read the full W3 spec on custom data attributes.

Benefits of custom data attributes

Event tracking is less likely to break

Custom data attributes separate code required to display content to your user and the code required for your analytics. One can be edited without impacting the other.

A lot of sites still use ID or class names for tracking. This is a bad idea as they change over time as the visual appearance of the site is updated.

Consistent and easier to understand data

ID and class names aren’t always descriptive which makes them a lot harder to understand in your web analytics.

Data attributes solve this problem as you can add exactly what you want to be displayed in GA in the format you prefer.

Pass extra information not seen on the page

Data attributes can pass extra information which might not be seen on the page. What information you add is entirely up to you.

For example if you wanted to track the position of search results you could add a custom data attribute of search position and search term to each search result.

  • data-position=”1″
  • data-searchterm=”something”

If you searched for “t-shirt” on a clothing site the results might look like this…

Screenshot of t-shirt on a fictional e-commerce website

And the html something like this.

<a data-searchposition="1" data-searchterm="t-shirt" href="/compton-t-shirt" >Compton</a>
<a data-searchposition="2" data-searchterm="t-shirt" href="/comverges-t-shirt">Comverges</a>
<a data-searchposition="3" data-searchterm="t-shirt" href="/flexigen-t-shirt" >Flexigen</a>
<a data-searchposition="4" data-searchterm="t-shirt" href="/fuelworks-t-shirt" >Fuelworks</a>

In Google Analytics you can then start to understand how people are using your site search and if the right search results are appearing first.

Conclusion

Setting up custom data attributes improves the quality of the information within your web analytics.

As long as you have a tag manager already installed setting up and maintaining custom data attributes is relatively low. You just have to remember to include the relevant custom attribute whenever you add a new feature or component.

Finally, before you add any custom data attribute make sure you’ve already got an event tracking naming convention. This is to ensure consistency in how you collect data – without consistency your data can get into a mess very quickly.

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts