Google Tag Manager

Updated 13 September 2021 09:25

What is Google Tag Manager

Google Tag Manager (GTM) is a free tool provided by Google. It allows you to manage the third-party JavaScript tracking code snippets on your site via the Tag Manager Interface.

The pitch from GTM is that it saves you requiring development resource for each time you want to add or remove a third-party service.

This is mostly true. However, setting up GTM requires a bit more upfront effort than the other approaches detailed in JavaScript and RESTful HTTP Post documents. However GTM is closely tied to Google Analytics (GA). Best practice uses GTM to deploy tracking for GA. Distil.ai events cover e-commerce data; Products and Purchase History. This data can be fed into GA to enable its Advanced E-commerce reporting. If you are not yet using GTM it may be worth revisiting your GA setup at the same time as deploying Distil.ai Event Tracking to make sure you are getting the best out of both products. Of course you may feel that now is not the time to rock that particular boat.

Tracking is key to Distil.ai. As a result our team is experienced at making sure you get most out of it. Our Supported Onboarding team can work with your developers to ensure your Customer Data Layer and Google Analytics accounts are working perfectly together.

Google Tag Manager resources

This is a step-by-step guide to the deployment of the Distil.ai Tracking code using GTM. It is not a full explanation of the Google Tag Manager product. Google is, of course, the best resource for that.

Below are three links worth reading. The first is a comprehensive guide to GTM from the Google Analytics Academy. The second and third links are for developers. The second link contains details GTM JavaScript code and how this needs to be placed on your site. The third link explains the Data Layer.

In the next section we will review setting up Google Tag Manager and check that it is working correctly.

Google Tag Manager (GTM) Deployment Guide

Step 1: Deploy GTM Code to your Website

The first step is to ensure that the GTM code is deployed to your website. This involves adding two code snippets to your application's HTML. Instructions on how to do this are detailed in the Quick Start guide, provided by Google. Available here: Developers: Guide to placing the Google Tag Manager Code on your website.

You will of course have needed to create a Google Tag Manager account. And you will need to know your GTM ID. This is available in the top bar once you have logged in. See screenshot below. The code is displayed within the red circle, redacted here.

Once you have installed the Tag Manager Code you can check that it is working by clicking the Preview button. This will ask which site to connect to like so:

Once connected, the url entered will open with a small ‘Connected’ popup telling you that the debug information is available back in the original tag assistant window.

And back in the tag assistant window, you will be able to see a real time view of events being fired through the GTM:

Step 2: Deploy the Data Layer

What is the Data Layer?

The Data Layer is nothing more than a page level JavaScript Object that contains a hash-map of key/value pairs. Your code can push whatever key/values you like into this Object. dataLayer=[{userID:"100", visitorType:"new", favouriteColour:"Pistachio"}] for example. Later, in the GTM interface we can reference the Keys from this JavaScript Object and connect them to the third-party tracking code (or Tags).

The advantage of this is that, once setup, this data can be added to the Tags of multiple third-party tools without having to further modify code on our site. For example, at the end of this process we will be able to send Customer data from the Data Layer into both Distil.ai and Google Analytics, improving both at the same time.

Adding a Data Layer to your website requires you to add a variable, called dataLayer, to your code. This has to be placed before the GTM code you installed in the previous section.

This Google Developer documentation contains the full guide on how to implement the Data Layer in your code: Guide to using a Data Layer.

Google has also posted a video from their Academy explaining the Data Layer. It can be found here: Understanding the Data Layer

Adding Distil.ai Tag into GTM

In the Google Tag manager Resources section we highlighted resources provided by Google that describe the concepts behind Google Tag Manager (GTM). We linked to the GTM developer documentation that describes how to install the GTM Code and how to set up Data Layer Variables. And then, in the previous section, we set up our Google Tag Manager (GTM) account and tested that it was working.

Like any script, Distil.ai tracking script can be installed via GTM. Because of the way GTM works, we strongly recommend setting the highest priority for Distil.ai tracking to be loaded (see step 6 below for details of this).

The Types of Event Data that we need to pass through to Distil.ai are Customers, Products, Content and Orders. The first stage to get these passed through is to add the Distil Tracking script onto every page via the Tag Manager.

Adding the Distil Tracking Script

1. Sign into your Google Tag manager account and "Select Your Workspace"

2. Click on "Tags" from the left and "New"

3. Give the tag a name like “Distil Tracking Code” and click on "Tag Configuration"

4. Find “Custom HTML” from the list

5. From the Distil Tracking Page, select and copy all the text in the first setup instructions box - this includes the unique tracking identifier for your specific account setup:

6. Paste the script into the HTML field, and then click ‘Advanced Options’ and set the ‘Tag firing priority’ value to 1 ideally (or as high as possible in the order preference)

7. Choose a trigger below the Tag configuration screen: Select “Initialization - All Pages” with the type “Initialisation”

8. When done, click on "Save" to save the changes, and then “Submit” on the following screen.

9. Give a version name like “Distil script installed”

Calling Distil.ai Tracking functions from within GTM

To ensure the best chance of not dropping any interactions of the user and the website, it is advised that when using GTM to host the Distil.ai tracking tag (script), that you fire events using the dataLayer object by pushing ‘event’ data into it, and then letting the GTM code fire the relevant triggers based off of that event, see:

Developer Guide | Google Tag Manager for Web Tracking | Events

This is due to the nature of the dataLayer acting as a client side queue, collecting the ‘events’ as they are pushed, and then firing / triggering these events once the tag manager code has fully loaded (this is an asynchronous operation - so that it does not block other elements from rendering on the page), see:

Developer Guide | Google Tag Manager for Web Tracking | Async

Adding a Distil event

Each of the events (identifyCustomer / trackProduct / trackContent/ trackOrder) will need to be set up and triggered within GTM. For each of the events - define a new HTML Tag 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.

<script>

    let customerProperties = {
      CustomerId : dataLayer.UserId,
      EmailAddress: dataLayer.Email,
      FirstName: dataLayer.FirstName,
      LastName: dataLayer.LastName,
      GDPRStatus: {
        MarketingSubscribed: dataLayer.Subscribed
      }
    };

 distil.identifyCustomer(customerProperties);


</script>

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.

Considerations in using GTM to deploy Distil.ai tracking

Google Tag Manager has to first load its container script, and then load all of the tags set up for that page asynchronously whilst the page loads. Therefore, it can be possible that if a user is quickly navigating around the site and navigates away from the page before the Distil script has loaded, that an interaction may be lost.

The best way to mitigate any potential loss of tracking is to setup the GTM dataLayer object correctly in the page structure, so that it is available as soon as the page loads, and then push ‘events’ into the dataLayer to fire the relevant GTM Triggers, which then invoke the correct Tags to record the interaction.