How to Implement a Custom Data Layer in Google Tag Manager

By: Bluegum Creations
Wednesday, 6th December 2017
How to Implement a Custom Data Layer in Google Tag Manager

Google Tag Manager is an extremely powerful tool. Understanding the data layer is key to get most out of Google Tag manager. Data Layer sends user and page information to Google Tag Manager (GTM). It helps you to achieve rule-based tag delivery also sending variables to 3rd party tags. The two most common uses for the Data Layer is to push up custom variables and custom events. Today we are going to discuss custom variables. Before we push a variable to Data Layer we must define in the GTM.

Google Tag Manager functions best when deployed alongside a data layer.  Now that, a data layer is an object that contains all of the information that you want to pass to Google Tag Manager. Pass events and variables via the data layer to GTM and then, set up triggers in Google Tag Manager. Rather than referencing variables, GTM is designed to easily reference information that you put in this data layer.

You will understand the real strength of GMT if you use it long enough. It lies in using a custom variable which requires coding knowledge.

Custom Variables

First, you need to create a new custom variable with a type of “Data Layer Variable”. Let us assume, we intend to track the identity of the currently logged in user. The tag which I intend to use later requires passing that User ID along with every conversion. Name the variable User ID and Data Layer variable as user_id. The first name will help you identify the variable as within the GTM interface and the second is the name which you will refer to it as from within the JavaScript. Having them same is a no problem.

After then also there is an option to set a default value to use if this variable isn’t present in the DataLayer.

Pushing the Variable Up to GTM

Push variables to DataLayer as they are defined. But what exactly is Data layer? GTM requires you to cut and paste their standard block of JavaScript code into your page source, this will trigger GTM to load and run for that given page. Remember that Data Layer is already running. Through a page level variable named as ‘dataLayer’ (case sensitive), DataLayer is accessible. On your developer console on a page with GTM running on it and type ‘dataLayer’ and press enter.

We have a JavaScript object array carrying a single object in it. After adding the new item to this array, GTM checks this dataLayer. Immediately GTM pushes these changes. Then, according to the interaction, push batches of data up to GTM at varying times within the page life cycle.

Let’s take a most common scenario.

In this script block, define the dataLayer variable. Then after, push in three custom variables including user_id which we defined in the earlier example. After GTM is initialized, immediately these three variables will be pushed to GTM. If you examine the dataLayer object on the console again, you will see it now has a second object that contains the three variables which I defined in the page level script block. Till now variables are pushed up to GMT.

Dynamic Tags

Now we have our Data Layer, customization of the tags that we serve out of GTM is possible.

Embedding dynamic tags isn’t possible through GTM without DataLayer. The developer would have had to form the tag script block through the code on the server side which is a mess to maintain and manage.