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 applications 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 put your workspace into Preview mode.

With GTM in Preview mode head over to your website/application. in a browser. Now when it loads, as if by magic, you will see the GTM debugger panel appear at the bottom of the screen. See screenshot of the Distil.ai homepage below. The GTM debug panel showing.

You can use the GTM Debug Panel to test that Data Layer Variables and any Tags you have added are deployed correctly.

Tip: If you don’t see this panel, make sure you are signed into Google Tag Manager in the browser you are viewing your site on first.

You can close the GTM debug panel by pressing the down arrow in the panel or by leaving Preview mode from within the GTM interface.

Step 2: Deploy the Data Layer

Next we’re going to 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.

In the next section we will document the variables that need to be added to your Data Layer and how to configure these in Google Tag Manager.

Next: Distil.ai Variables.