Google Analytics Customising your Google Analytics tracking

You might want to customise your analytics tracking if your service holds personal information or you would like to collect more specific information.

How to set up custom tracking

To set up custom analytics tracking:

Set up the Google tag (gtag.js)

To set up the Google tag (gtag.js), follow Google’s guidance on how to add Google tags to your site (opens in a new tab)

When the gtag.js is enabled, the browser console will display a “Google Analytics (GA) active” message.

When a data-ga event has been triggered, the browser console will display a “data sent to data layer” message. This shows that the data is available in the data layer.

If the gtag.js configuration is correct and the right consent has been given, the data layer will be sent to Google Analytics 4 (GA4).

Once the gtag.js setup is completed, you can initiate manual tracking. The data-ga will be the event name of the custom event being sent to GA4.

Initiate manual tracking

To initiate manual tracking:

Use the Nunjucks macro provided in the example for each component.
Pass the data-ga attribute to the attributes parameter.

The data-ga attribute accepts three values:

click which tracks clicking events on the component with this attribute
visible and error which tracks the visibility of the component on page load

For example, if you are using the Nunjucks macro for a button:

{% from "components/button/_macro.njk" import onsButton %}
 
{{ onsButton({ 
     "text": "Save and continue", 
     "attributes": { 
          "data-ga": "click", 
          "data-ga-category": "Button", 
          "data-ga-action": "Click", 
          "data-ga-label": "SaveButton" 
    } 
  }) 
}}

Additional context (optional)

If you would like to collect additional information to give context to the users actions, you can also add your own attributes that start with data-ga-

For example:

data-ga-category: Specifies the category of the event
data-ga-action: Specifies the action performed
data-ga-label: Provides a label for additional details