What is Google Tag Manager
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.
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.
- Google Analytics Academy – Google Tag Manager Fundamentals
- Developers: Guide to placing the Google Tag Manager Code on your website
- Developers: Guide to using a 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 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.
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.
Please sign in to leave a comment.