Tracking

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.

tracking.add.accordions()

This also supports the use of a ‘scope’ parameter. Without a scope parameter, the script will apply to the whole page (the document element).

tracking.add.accordions(document.getElementById('my-container'));