Skip to main content

Example setup - Google Analytics and Dynatrace RUM

Quick setup

Follow these steps to quickly get Google Analytics (through Google Tag Manager) and Dynatrace RUM working using @hmcts/cookie-manager

1. Add the library and some event listeners

         
import cookieManager from '@hmcts/cookie-manager';

cookieManager.on('UserPreferencesLoaded', (preferences) => {
  const dataLayer = window.dataLayer || [];
  dataLayer.push({'event': 'Cookie Preferences', 'cookiePreferences': preferences});
});

cookieManager.on('UserPreferencesSaved', (preferences) => {
  const dataLayer = window.dataLayer || [];
  const dtrum = window.dtrum;

  dataLayer.push({'event': 'Cookie Preferences', 'cookiePreferences': preferences});

  if(dtrum !== undefined) {
    if(preferences.apm === 'on') {
      dtrum.enable();
      dtrum.enableSessionReplay();
    } else {
      dtrum.disableSessionReplay();
      dtrum.disable();
    }
  }
});

const config = {
  userPreferences: {
    cookieName: '<SERVICE-NAME>-cookie-preferences',
  },
  cookieManifest: [
    {
      categoryName: 'analytics',
      cookies: [
        '_ga',
        '_gid',
        '_gat_UA-'
      ]
    },
    {
      categoryName: 'apm',
      cookies: [
        'dtCookie',
        'dtLatC',
        'dtPC',
        'dtSa',
        'rxVisitor',
        'rxvt'
      ]
    }
  ]
};

cookieManager.init(config);



3. Add the preferences form to your cookies page


4. Round-up

Now when the user updates their cookie preferences, or their preferences are loaded from the preferences cookie (when the page is first loaded), an event is fired which will activate the callbacks we added. These callbacks will

  • Adds a variable to the Google Tag Manager (GTM) datalayer which represents the current cookie preferences. This datalayer variable can be used within GTM to enable/disable any Google Analytics based tags. The analytics preference is represented in the analytics category
  • Tell Dynatrace to enable/disable it’s remote user monitoring (RUM) functionality, based on the value of the apm category.

5. Configuring Google Analytics / GTM and Dynatrace.

Warning All tracking platforms/services/libraries used with @hmcts/cookie-manager need to be configured to be `opt-in` rather than `opt-out`. Even if the library deletes the tracking cookies, it can still lead to tracking without consent.

Google Analytics through GTM

  1. Ensure that you have configured your site and included the Google Tag Manager script for your app within your page. A guide on this can be found here.

  2. With GTM configured and the above event listeners / callbacks added, whenever the user’s preferences are saved or loaded, an event is added to the GTM datalayer.

  3. Next we need to add a variable into GTM, we need to use the Data Layer variable (version 2).

    • We need to first set our default value to off, as we don’t want to auto-consent for users.
    • Next we set the Data Layer Variable Name to cookiePreferences.analytics. We’ve named our cookie preferences as cookiePreferences within the datalayer (set within the callback), and we’re interested in the value the analytics sub-property.
    • Lastly we just need to name and save our variable, I suggest Analytics Preferences.

      This is how it should look:

  4. Following the addition of the variable, we need to add a custom trigger event which will fire whenever any event is fired and the cookiePreferences.analytics / Analytics Preferences variable we added is set to off.

    • We need to set the ‘Event name’ field to * and enable RegEx matching
    • Select Some Custom Events for the field ‘This trigger fires on’
    • Set ‘Fire this trigger when an Event occurs and all of these conditions are true’ to Analytics Preferences (the variable from the previous step), contains then off.
    • Name it Analytics off and hit save.

      This is how it should look:

  5. You now need to add this as an ‘Exception’ trigger on each of your Google Analytics based tags, this should look like:

  6. To ensure that ‘page view’ events are fired correctly after the user has accepted cookies, you need to add a second trigger which listens for the user updating their cookie preferences. We need to add another custom trigger event with the following settings

    • ‘Event name’ set to Cookie Preferences.
    • ‘This trigger fires on’ set to All custom events
    • Name it Cookie preferences and save it.

      This should look like:

  7. You now just need to add this as trigger to your Google Analytics page view tag and set the tag to ‘Tag firing options’ within the ‘Advanced tag options’ to Once per page. The triggers should look like:

Dynatrace RUM

  1. To configure Dynatrace RUM, we need to setup the RUM script to be injected through OneAgent.
  2. After setting up the script to be injected, we need to setup Dynatrace to respect cookie opt-in, this can be done through the ‘Advanced settings’ for an application within Dynatrace.

It should look like this: