Tracking Setup: Google Tag Manager

This article explains how to set up Distil Tracking using Google Tag Manager (GTM). Google Tag Manager [external link]  is a free tool that can be used to add and manage JavaScript tracking code on a website without editing the website code directly each time a tracking change is required.

Distil Tracking can also be added directly to a website or app via GTM. For more information, see Tracking Setup: Distil Tracking Code.

There are other options for setting up Distil Tracking and further information in these articles: 

• Introduction to Tracking
• Tracking setup: Distil Tracking Code

Getting started with Google Tag Manager (GTM)

Before setting up Distil Tracking, you will need to create a GTM account and deploy the GTM code with a data layer to your website if you haven't already done so. 

The instructions for installing GTM on a website are available from your GTM account when a new account is created, or here on the Google Support website [external link].

Deploy the Data Layer

The data layer offers numerous benefits in terms of data management, performance, flexibility, integration, security, and collaboration, making it a valuable component in modern website development practices. You must create a data layer for Tag Manager web page installations.

Adding a data layer to your website requires you to add a Google Tag Manager variable, called dataLayer, to your code. This has to be placed before the GTM code you installed in the previous section. Google has a great guide for developers on the data layer [external link], that explains this in detail.

When loading a web page, Google Tag Manager first loads its container script before loading all of the tags set up for the page.  If a user is quickly navigating around the site and navigates away from the page before the Distil script has loaded, the interaction may not be tracked.

The best way to mitigate any potential loss of tracking is to setup the Google Tag Manager dataLayer object correctly in the page structure, so that it is available as soon as the page loads, and then push events into the data layer as described in the section below.

It’s important that the data layer contains a custom parameter populated when a user accepts cookies through whichever consent mechanism used on your site. An example is shown below. 

Set Up Distil Tracking with GTM

Once you have deployed Google Tag Manager, you are ready to set up the Distil Tracking script.

Distil Tracking uses two parts of JavaScript tracking code:

1. Session-persistent attribution tracking
2. Cookie-dependent event tracking

The first part does not collect personally identifiable information. It uses local storage in the visitor’s browser to store attribution tokens, including the first referrer URL.

These tokens are only called if the visitor subsequently accepts cookies. At that point, the second part of the Distil tracking code is deployed and cookie-dependent tracking events can be captured.

We recommend using a custom event in the trigger for step 2 to capture the cookie consent event relevant to your unique website configuration (more on that below). 

You will find both parts of the customised script for your individual Distil account in Settings < Tracking in the platform.

Step 1 - Session-persistent attribution tracking

1. In Google Tag Manager Click Tags from the menu on the left, and then click New. 

2. Give the tag a meaningful name such as Distil Tracking - Step 1 

2. Select Custom html from Tag Configuration. Copy and paste the script from your Distil Account shown under Step 1.

3. Select Initialise on all pages from Triggering options.

Note - if you have other tags deployed through Google Tag Manager, we recommend setting the tag firing priority to 1.

Step 2 - Cookie-dependent event tracking

1. Follow the same process again to create a new tag and name it appropriately.

2. Again, select Custom html from the Tag Configuration options. This time copy and paste the script from Step 2 of the tracking code in your Distil Account. Set the tag firing priority to 1 (or 2 if you have set step 1 to tag firing priority to 1).

3. We recommend using a combination of triggers - Initialise-all pages with a custom cookie consent event. This will ensure the maximum coverage of users who consent to cookies. There should be a parameter pushed into the data layer that’s populated when a user accepts cookies on the website, which is then used to create the custom cookie consent trigger. An example of this configuration is shown below. 

Final checks

Check you have both tags and triggers successfully saved.

Save and deploy

When you’re ready to publish your container,  click Submit on the top right of the screen. Enter a Version Name such as Distil Tracking deployed, enter a brief description, and then click the Publish button on the top right.

Calling Distil Tracking Functions from within Google Tag Manager

When using Google Tag Manager to host the Distil Tracking script, we recommend that you push event data into the data layer, and then let Google Tag Manager code fire the relevant triggers based off of that event. See the Google Tag Manager for Web Tracking - Event Handling [external link] guide.

This is due to the nature of the data layer acting as a client side queue, collecting the events as they are pushed, and then triggering these events once the Tag Manager code has fully loaded. This is an asynchronous operation, so it does not block other elements from rendering on the page. See the Google Tag Manager for Web Tracking - Asynchronous guide [external link].

Adding a Distil Event

The events that are tracked with the Distil Tracking code will need to be set up and triggered within Google Tag Manager. These event functions include: identifyCustomer, trackProduct, trackContent and trackOrder. These functions, their arguments and properties are described in our article on Distil JavaScript Tracking Code.

For each of the events, define a new HTML Tag within Google Tag Manager and add the relevant script and properties.  For example, below is a script that calls the identifyCustomer event using properties available in the dataLayer object.

Once the tag is set up, then it can be triggered to run whenever the correct conditions apply.  For example, the above identifyCustomer event would be triggered either whenever someone logs in, or fills in a form on the site where they enter their details.