The Design System has a script that adds ‘data attributes’ to components. Analytics software can use these data attributes to track user behaviour and measure performance. The script adds data attributes automatically, but developers still have some control over them.
Calling the function
tracking.init() adds data attributes to all Design System components.
The script logic picks:
- the attribute name from a set of broad categories
- the attribute value, derived from the context the component is used in
For example, this is some markup for a simple Design System button:
<button class="ds_button"> Start here </button>
The script gives that button a data-button attribute with a value that uses the button’s text:
<button class="ds_button" data-button="button-start-here"> Start here </button>
The simplest use of the script is to call
tracking.init() after the DOM is loaded. In some cases, you might want to have more control over:
- the values used
- what gets data attributes added
Custom data attribute values
The developer can set the data attribute manually in the component’s markup. The script will only add a data attribute if one is not already there.
For example, if you had a button with a very long text, you might want to shorten that attribute value. If you specify the
data-button attribute in your markup before calling
tracking.init(), the script will not change that value.
<button class="ds_button" data-button="button-start-here"> Really super duper start here </button>
Add data attributes to new components added to the page
If new components are added to the DOM after calling
tracking.init(), they will not automatically have these data attributes. In most cases, it will be safe to call
tracking.init() again. But, it is also possible to restrict the addition of data attributes to a particular DOM node by using an optional ‘scope’ parameter.
const myContainer = document.getElementById('my-container'); // ... add elements to myContainer tracking.init(myContainer);
Add data attributes to specific component types
You can add data attributes to specific component types instead of adding them to everything.
In general this is less useful than restricting the addition of data attributes to a particular DOM node, but it is available if you need it.
This also supports the use of a ‘scope’ parameter. Without a scope parameter, the script will apply to the whole page (the document element).
Feedback, help and support
There is a problem
Thanks for your feedback