Google Tag Manager DataLayer Explained

Updated: March 4th, 2018. The Data layer is one of the key concepts in the world of Google Tag Manager. It ensures maximum flexibility, portability, and ease of implementation. Remember, GTM works best when deployed alongside the data layer.

At first, Google Tag Manager Data Layer might seem like one of those mysterious concepts that no one really understands (by saying “no one” I mean non-developers, like you and me). But it’s not nearly as complicated as it sounds. Understanding and leveraging the data layer is the key to unlocking GTM’s potential.

Of course, it takes a while to understand how everything works, but once you get the idea, you’ll start putting puzzle pieces together. The purpose of this blog post (and entire analyticsmania.com) is to educate non-developers, how they can master GTM, have (almost) full control of Google Analytics or Adwords implementation. And don’t limit yourself only to those two tools. You can connect GTM with A LOT of other online tools (but we’ll talk about that in other blog posts).

Before we continue: Data Layer is also explained in two of my GTM courses

If you prefer video material over lengthy blog posts, some of my Google Tag Manager courses go deeper into the Data Layer:

• Google Tag Manager Masterclass for Beginners explains the essentials of the Data Layer, why is it important in GTM, how to use it properly.
• Intermediate Google Tag Manager course goes even deeper into the Data Layer (explaining even some technical aspects that are behind the DL). Also, the course teaches some nuances that are not covered in the blog post.

Do you want to dive even deeper into The Google Tag Manager Data Layer?

Before you continue reading this guide, I have another suggestion. Even though this blog post (that you’re currently on) is still good and worth your time, for your convenience, I have prepared the Ultimate Google Tag Manager Data Layer Tutorial.

If you are interested in a more in-depth guide with additional (and, of course, useful) chapters, you should better go here and read it in full. There I explain:

• What is Data Layer and what’s its role in tag management
• How to send data to the Data Layer
• How to read the data from the Data Layer (3 methods), etc.

Nevertheless, if you decided to stay here, have a good read! I hope you’ll enjoy it.

How does Google tag manager Data Layer work?

Technically speaking, a Data Layer is a JavaScript object or variable that stores and sends information from your site to Google Tag Manager (later that data is transferred to other tools, like Google Analytics). In other words – it’s like a virtual layer of your website which contains various data points (Get it? That’s why it’s call data layer.).

P.S. Google Tag Manager can also push data into Data Layer and then read it from there. Here’s how GTM and Data Layer work in a nutshell:

Once you place GTM container’s JavaScript Snippet in your website’s source code, Data Layer is automatically created. You don’t need to add anything additionally. Here’s an example of GTM’s container snippet.

Google Tag Manager Data Layer can contain various information. For example, you can put static information, such as the page category, or transaction value into the Data Layer. You (or your developers) can send this information to the data layer instantaneously using a push command.

Data Layer snippet vs dataLayer.push event

There are two ways, how data can be pushed to Data Layer:

1. By adding dataLayer snippet above the GTM container snippet.
2. Or by pushing data with dataLayer.push API call. What’s the difference, you ask?

The first method can be implemented only if you have access to your website’s source code AND you’ve got some coding skills. For a non-developer, this might be too difficult.

Nonetheless, this option is really useful if you want to push any custom data right after the page loads. Example – transaction or product data. Let’s say, you want to implement Google Analytics Ecommerce Tracking. In this case, your developers should add a dataLayer snippet above GTM tracking container with the following parameters: transactionID, transactionTotal, etc. (you can read the full guide here). Once this information is added to dataLayer, Google Tag Manager can fetch it and transfer to Google Analytics.

The second method (dataLayer.push) lets you push additional data when certain events occur on your website. Here are few examples:

1. You have a newsletter signup form (which cannot be easily tracked with automatic GTM’s form listeners). You should ask your website developer to push a dataLayer event once a new subscriber has entered his/her email on your website. The code of this event should look like this:
   
   JavaScript

   dataLayer.push({'event': 'new_subscriber'});

   1	dataLayer.push({'event': 'new_subscriber'});

   
   If you wish you can ask your developer for additional information (for example, form location (because you might have more than one form on the same page)).
   
   JavaScript

   window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'formLocation': ‘footer’, 'event': new_subscriber });

   1 2 3 4 5

   window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'formLocation': ‘footer’, 'event': new_subscriber });

2. When a visitor adds a product to his/her cart, a dataLayer event (containing product’s information) could be fired.

Update: After I wrote this blog post in 2016, I’ve noticed multiple GTM experts suggesting that you ALWAYS should use window.dataLayer.push (even if you want to add data above the GTM container snippet. You can read this conversation on Google+ community.

How GTM tags use Data Layer’s information/content?

Tags use the information (stored in the data layer) in two ways:

1. To gather certain pieces of data;
2. To evaluate more advanced firing rules (you can use dataLayer events as triggers).

The first way comes in handy when tags need something more than static information – such as your account ID – which never changes (during the entire user session). Other tags, however, might require dynamic data, such as a purchase total or item number.

Secondly, tags can use the data layer’s information to decide whether to fire. Remember my previous example where dataLayer event is pushed when a new subscriber enters his/her email address? That’s a great trigger that can fire a Google Analytics event tag.

How can I fetch the information from dataLayer and push it to other analytics tools?

Let’s imagine that I have a website and all registered users are split into two groups:

• Paying customers.
• Users with a Free plan.

I want to segment these users and all their events/pageviews in Google analytics by their pricing plan. I have already asked my developers to add static information to dataLayer when the page loads. The dataLayer snippet looks like this:

The code (between <script> and </script> tags) is our static Data Layer information. We’ll use it later.

It’s very important that dataLayer snippet is placed above Google Tag Manager’s container code in your website’s code. First, you need to send data to dataLayer, then this data is fetched by Google Tag Manager. If the snippet is placed after GTM container code, dataLayer’s data won’t be fetched by GTM.

1. Create a dataLayer variable in Google Tag Manager

First, you need to create a dataLayer variable in GTM’s account. This way Tag Manager will recognize the parameter. Open Variables > Scroll down to User-defined variables and click New.

• All my Google Tag Manager Data Layer variables titles start with “dlv” (it’s easier to keep everything in order. Read this useful blog post by Lunametrics how you should name all your tags, triggers, and variables)
• Choose a type – Data Layer Variable
• Set pricingPlan as Data Layer variable name, because this variable was added to dataLayer’s snippet by your developer.
• Click Save.

2. Enable Preview and Debug mode in Google Tag Manager

Let’s check if Google Tag Manager catches pricingPlan variable.

• In your GTM panel, enter Preview and Debug mode (by clicking Preview button)
  
• When Debug mode is enabled, you should see an orange notification bar:
  
• Go to your website (or refresh a page if you’re already on it).
• A GTM debug console should appear at the bottom of the screen.
  
• Click Variables and look for pricingPlan.  Check its value. If pricingPlan is undefined, you should double-check whether you have entered a correct Data Layer Variable name in GTM’s admin panel (by the way, it’s case-sensitive). In my case, pricingPlan variable is defined correctly, because I get the value Free.

3. Create a custom dimension in Google Analytics

pricingPlan is a custom parameter that was defined by you (or your developer) so Google Analytics will not catch it by default. You need to create a custom dimension pricingPlan in order to inform Google Analytics about this new parameter.

• Login to your Google Analytics account.
• Open your website’s account and then click Admin. You should see something like this.
  
• Scroll down and in Property section click Custom definitions > Customer dimensions
  
• Click Create custom dimension
• Enter name pricingPlan, choose User as a scope and click Create. User scope will apply this custom dimension to all further events of this particular user.
  
• When custom dimension is created, you’ll see a short code snippet.
  
  Take a closer look at the second line of code and you’ll see dimension3. Number 3 is the index of pricingPlan custom dimension. Keep this in mind.

4. Push pricingPlan Data Layer Variable to Google Analytics

• Go back to your Google Tag Manager account.
• Open Google Analytics Pageview tag. If you don’t have one, let’s create it.
• Go to Tags and click New:
  
• Enter name for the tag – GA pageview (actually, you can name it whatever you want)
• Click Tag Configuration box.
  
  Choose a tag type – Universal Analytics
  
  If you don’t know which version of Google Analytics you are using, ask your developer. Usually, it’s Universal Analytics.
• Now it’s time to configure a tag. Enter Google Tracking ID (UA-xxxxxxx). I don’t recommend entering the actual ID here. It would be better if you created a variable with Google Analytics Settings.
• Track type – Pageview
• Click More settings > Custom dimensions
• Enter 3 in Index field (that’s the index that you got in step 3)
• Enter {{dlv – pricingPlan}} dataLayer variable in Dimension value field
  
• In Triggering section choose All pages.
• This way with every page view you’ll also send the value of pricingPlan variable as custom dimension No. 3.

That’s how you can transfer additional data from Google Tag Manager Data Layer to Google Analytics.

Update: I have also published a blog post which extensively explains 3 ways how to fetch data from the Data Layer. Make sure you check it out!

Using Data Layer data as triggers

As it was mentioned before, you can also use Data Layer for more advanced tag-firing rules. For example, you can fire an Adwords remarketing tag only when a user is on a Free plan. Let’s take a closer look at this example.

• Open GTM admin panel.
• Go to Tags and click New.
  
• Enter name, i.e. Adwords remarketing tag
• Choose Tag Type – Adwords Remarketing
• Enter Conversion ID and Conversion Label
• Leave all other settings as default and click Continue
• In Triggering section, Click Plus icon in the top right corner and enter the name – I’d suggest “Pageview – Users with free plan”. Choose trigger type –” Pageview”. Why? It’s because this trigger is checked every time the page is loaded.
• You don’t want this tag to fire on every page. In This Trigger Fires on section click Some Page Views and enter the following rule: dlv – pricingPlan equals Free. This means that Adwords remarketing tag will fire only when pricingPlan Data Layer variable is exactly Free. Premium users will not trigger this rule.
  

Using Data Layer events as triggers

Another common example of Data-layer-based triggers is using events. Remember that dataLayer.push examples mentioned in the beginning of this post? Here’s a quick reminder:

Parameter event indicates that this is a Data Layer event. All events can be seen in Preview and Debug mode’s stream.

Now let’s set this event as a trigger for Google Analytics Event Tag.

• Go to Triggers and click New
• Enter name. I’d suggest naming it Custom – new email subscriber
• Choose event – Custom event (all Data Layer events are treated as custom events in GTM).
• Fire on – new_subscriber. You need to enter the exact title of the event that you see in Preview and Debug console.
• Let’s get back to our dataLayer.push event example. Here’s the code:

• Wouldn’t it be nice if we also passed the formLocation data to Google Analytics? GTM will not catch this parameter by default, so we need to create another variable. Go to Variables > User-defined variables and click New.
• I’d suggest naming it dlv – formPosition.
• Choose type – Data Layer Variable. Variable Name – formPosition (that’s exactly how the parameter is called in the previous code example. Leave all other settings as is and click Create Variable.

Let’s create a Google Analytics Event tag when a new subscriber submits his/her email address.

• Go to Tags and click New
• Choose product – Google Analytics
• Choose Tag Type – Universal or Classic Analytics (depending on your currently installed version of GA).
• Set Tracking ID parameter
• Track type – Event
• Category – Form Submit (this means that all events (related to this trigger) will have the same Category
• Action – New subscriber
• Label – {{dlv – formPosition}}. That’s the variable that we have just created. The value of this parameter might change depending on the position of your form. If you have 3 different forms on the same page, and they all fire the same new_subscriber Data Layer event but with different formPosition value, Google Tag Manager will pass this value as GA event’s label. This is extremely useful if you want to understand which forms are performing better.
• Click Continue
• Fire On – Click More and choose Data-layer-based trigger Custom – new email subscriber.
• Click Create Tag

The following (and final) steps are:

• Check all new tags in GTM Preview and Debug console (if they fire correctly).
• Check your Real-time reports in Google Analytics account (whether new_subscriber events is working properly).
• Install Google Tag Assistant (in Chrome Browser) to make sure whether your remarketing tag fires correctly.

Update: by the way, you can learn more about Custom Event Trigger in this blog post.

Conclusion

If you read the entire article, well done (and thank you)! If you skipped to the summary without reading the entire thing, then I suggest you bookmarking this page so you can come back later.

Google Tag Manager Data Layer is incredibly helpful when it comes to custom data and triggers. If you that this feel that this concept is difficult to master, I suggest starting with few events and then scale up. You’ll become better with time.

If you enjoyed this article and found it useful, please share it.

Further reading:

• 3 ways to pull data from the Data Layer
• Custom Event Trigger: Fully Explained
• A Guide to Data Layer Variable