Tracking Setup: Google Tag Manager

This article is a step-by-step guide to setting up Distil Tracking using Google Tag Manager (GTM). Google Tag Manager is a free tool that is part of Google Analytics. It allows you to manage third-party JavaScript tracking code snippets on your site via the Tag Manager interface.

If you are already using Google Analytics then it might be a good idea to set up your Distil Tracking via Google Tag Manager (GTM), so that your Product and Purchase History Tracking data is also available in Google Analytics.

If you are not yet using GTM, then it may be worth revisiting your Google Analytics setup at the same time as deploying Distil Tracking to make sure you are getting the best out of both products.

This article is about Google Analytics 4 properties (and not Universal Analytics properties, which will stop processing data on July 1, 2023).

There are other options for setting up Distil Tracking. Read our introduction to Tracking article for more information, and other options.

Deploy Google Tag Manager (GTM)

Before we can setup Distil Tracking, you will need to deploy Google Tag Manager (GTM) code with a data layer to your website if you haven't already done so.

If you've already got GTM and your data layer set up, then skip to the section below on setting up Distil Tracking with GTM. If you're not sure if you have a data layer set up, see the section below on deploying the data layer.

Create a Google Tag Manager (GTM account)

This requires that you have a Google account, and that you have signed up for Google Tag Manager. Click or tap here and then click the Start for free button, and then:

• Click Create Account.
• Enter an account name and select your home country.
• Complete container setup by entering your website URL as the container name, and select your platform type.

You will then see a pop-up with your Google Tag Manager code. You can close this window if you need to - to see it again just click your account ID near the top of the page within Google Tag Manager (your account ID will look something like this: GTM-T5RGRJH).

Deploy GTM Code to your Website

There are many ways to achieve this, requiring varying degrees of technical knowledge. All of these approaches will result in the Google Tag Manager code snippets being placed in the Head and Body sections of each page on your website.

If you are using a Content Management System (CMS) such as Wordpress, Squarespace or Weebly, then the process can be straightforward. Search online for instructions for the CMS you are using.

Google has published a simple guide to deploying Google Tag Manager (GTM) code to your website.

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, 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.

If you'd like to learn more, Google has a video from their Academy explaining the data layer: Understanding the Data Layer.

Set Up Distil Tracking with GTM

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

Adding the Distil Tracking Script

1. Sign into Google Tag Manager (GTM) and select your Account

2. Click Tags from the menu on the left, and then click New

3. Give the tag a meaningful name such as Distil Tracking Code

4. Click Tag Configuration, and then select Custom HTML from the list

5. Log into Distil, navigate to Settings > Tracking > Bespoke JS, and copy the code in the first section (this includes the unique tracking identifier for your Distil account).

6. Go back to Google Tag Manager (GTM), and paste the Distil Tracking code into the HTML field.

7. Expand Advanced Options and set the Tag firing priority value to 1 (or as high as possible in the order preference).

7. Scroll down and click the Triggering section (below Tag Configuration).

8. Select Initialization – All Pages with the type Initialisation

8. Click Save at the top right, and click Submit on the top right of the following screen.

9. On the next 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 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.

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.