Complete Google Tag Manager Data Layer Tutorial

Updated: December 19, 2022

Data Layer is one of the main Google Tag Manager concepts, which ensures maximum flexibility, portability, and ease of implementation. Without it, there would be no variables or triggers in GTM, no tags would be fired. It keeps your tag management running properly and is the key to unlocking Google Tag Manager’s potential.

I have already published several articles on this blog related to this topic, but they are scattered. That’s why I decided to collect all the important resources, tips, and knowledge (that I’ve accumulated so far) and put them in one place.

This is an extended Google Tag Manager Data Layer tutorial that explains:

1. What is the Data Layer?
2. Why is it useful?
3. How to use it?
4. Best practices when dealing with the Data Layer.

 

Table of Contents

– Hide table of contents –

• Two additional options to learn Data Layer
• #1. What is Data Layer?
• #2. Storing data in the Data Layer (dataLayer.push)
• #3. Reading Data from the Data Layer
  • #3.1. Data Layer Variable
  • #3.2. Data Layer Version
    • #3.2.1. Version 1
    • #3.2.2. Version 2
    • #3.2.3. Default Value
  • #3.3. But what about other data structures?
  • #3.4. Pull Data from Child Keys
  • #3.5. Pull Data from Array Members
• #4. Send Data from the Data Layer to Other Tools
  • #4.1. Enable Preview and Debug Mode in Google Tag Manager
  • #4.2. Send pagePostAuthor Data Layer Variable to Google Analytics
  • #4.3. Create a custom dimension in Google Analytics 4
• #5. Using Data Layer Data as Triggers
• #6. Using Data Layer Events as Triggers
• Final words

 

Video tutorial

If you prefer video content, here is a tutorial from my Youtube channel.

 

Two additional options to learn Data Layer

This blog article is a compilation of all the resources you need to get started. But there’s only so much you can read and implement. If you want to get into the nitty-gritty of handling Google Tag Manager, I explain it in two of my premium GTM courses:

1. Google Tag Manager Masterclass for Beginners
2. Intermediate Google Tag Manager course

In the beginners’ course, we take a solid overview of what Data Layer is in general, why it is important and how to work with it. I also let you directly interact with the data layer and gain more experience that way.

In the Intermediate course, we take a lot deeper dive into topics that are out of the scope of this blog post. Understanding the full potential (and technicalities) of the Data Layer is key to successful tracking implementations.

 

 

#1. What is Data Layer?

Technically speaking, a Data Layer is a JavaScript array that stores certain information. If that does not ring a bell, here’s a simpler explanation.

It’s an invisible/virtual website layer where you, your developers, or various tools can store data (about the user, page content, etc.). From there, Google Tag Manager reads that information, uses it in tags/triggers/variables, or sends it further to tools like Google Analytics, Google Ads, Facebook Pixel, you name it.

The Data Layer is automatically created once you place the Google Tag Manager container’s JavaScript Snippet in your website’s source code. You don’t need to add anything more unless you want to fill it with additional data.

This additional information in the Google Tag Manager Data Layer can be passed by placing an additional Data Layer snippet above the GTM snippet or using dataLayer.push method (which is the best method, in my opinion).

Continue reading this Google Tag Manager Data Layer tutorial to find out why dataLayer.push should be your only option to add the data to the Data Layer.

 

#2. Storing data in the Data Layer (dataLayer.push)

There are two ways to push data to the Data Layer. Actually, there is only one you should use, but for the sake of knowledge, I’ll mention both:

1. By adding a Data Layer snippet above the GTM container snippet (this method is called Data Layer Declaration).
2. Or by pushing data with dataLayer.push method.

What’s the difference, you ask?

The first method is useful if you want to push custom data right when the page loads, for example, product data when the product page loads. You might want to send that product data from the Data Layer to the Meta Pixel (with View Content event).

In this case, your developers must add a Data Layer snippet above the Google Tag Manager tracking container with parameters like product ID, product title, etc. Here’s an example:

<script>
 dataLayer = [{
 'productID': '123456',
 'productTitle': 'Very awesome product',
 'productPrice': '13.00'
 }];
</script>
<!-- Google Tag Manager --> 
... 
<!-- End Google Tag Manager -->

Later, with the help of the Data Layer variable, you can read that information and transfer it to Meta Pixel.

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

Let’s say you have a newsletter signup form that cannot be easily tracked with a default form listener in Google Tag Manager. You should ask your website developer to fire a Data Layer event when a new subscriber has successfully filled out the form.

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

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

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

Or for example, when a visitor adds a product to his/her cart, a Data Layer event (containing the product’s information) could be fired.

If you want to learn more about dataLayer.push, read this guide.

Like this Google Tag Manager Data Layer tutorial so far? Consider subscribing! Just enter your email address in the form below. I promise to share only awesome GTM content.

 

 

#3. Reading Data from the Data Layer

Imagine there are several authors in this blog:

• Me
• John Doe
• Jack Torrance
• etc.

I want to determine which authors write the most engaging content and then segment sessions in Google Analytics. I use Tamás Geiger’s WordPress plugin that stores the post author name in the Data Layer. If you don’t have WP, ask a developer to add additional data points to the Data Layer.

The snippet looks like this:

<head>
   <script>
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push [{
    pagePostAuthor: 'Julius Fedorovicius'
  }];
   </script>
   <!-- Google Tag Manager -->
   ...
   <!-- End Google Tag Manager -->
</head>

 

#3.1. Data Layer Variable

Google Tag Manager, by default, does not recognize custom data in the Data Layer. I mean that you cannot use it unless you use the Data Layer Variable.

To create a variable, you’ll need to specify the Data Layer key of the value you want to retrieve. When the variable is resolved, it will return whatever was recently pushed into the key. Easy as that!

If I wanted to fetch the pagePostAuthor value, I’d need to set the pagePostAuthor key in the variable’s settings.

Say you want to send an event to Google Analytics 4 when someone leaves a comment. Let’s say you want to push the full name of the article’s author along with the event. This way, you’ll see which authors drive the highest reader engagement.

In this example, I will not go into details on how to create a tag. I will only demonstrate how to pull the data from the Data Layer and turn it into a variable (within Google Tag Manager).

In your Google Tag Manager account, go to Variables and create a Data Layer Variable with the following settings:

That’s it! Save this variable, refresh Preview and Debug (P&D) mode, and open the website you’re working on. You should then see your newly created variable in the Variables tab of the Preview & Debug window.

 

#3.2. Data Layer Version

Another setting available in the Data Layer Variable is Version. When you select the Version, you’re instructing Google Tag Manager to treat the values in the data model in two different ways.

 

#3.2.1. Version 1

Version 1 is pretty limited and does not allow you to access nested values. If you create a Data Layer variable and try to access the information stored in pagePostAuthor (in the example below), you’d fail because it’s not in the root of the object (instead, it’s a direct child of the attributes key).

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"attributes": {
'pagePostAuthor': 'Julius Fedorovicius'
}
});
</script>

So if you want to fetch the Post Author’s name, the object in the Data Layer should look like this:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'pagePostAuthor': 'Julius Fedorovicius'
});
</script>

See? There’s no attributes key, and pagePostAuthor is at the root level.

That’s not the only limitation of Version 1. When you push the data to the Data Layer, it will overwrite the entire object.

Confused? Here’s an example.

Imagine that we have two Data Layer push codes with different data. The first push contains only pagePostAuthor, the other one includes two more keys, pageCategory and pagePostType.

<script>
//The 1st Push
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'authorData' : {
'pagePostAuthor': 'Julius Fedorovicius'
}
});

//The 2nd Push
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'authorData' : {
'pageCategory': 'google-tag-manager-tips',
'pagePostType': 'post'
}
});
</script>

As a final result, you’d have only two values in the Data Layer: pageCategory and pagePostType. Why? Because the second push to the authorData object has completely overwritten the data of the 1st push.

So what’s the point of the 1st Version? It sounds like a useless thing, you might say.

That’s not entirely true. I’ve noticed that sometimes (e.g., in GA4 e-commerce), it’s important to have a “clean” Data Layer without previous values, meaning that every time a window.dataLayer.push occurs, it completely wipes out the old data and stores the new one.

 

#3.2.2. Version 2

The 2nd version is much more flexible. It allows you to access nested values and arrays and merge data.

Let’s go back to the previous example of two subsequent Data Layer Pushes. The first push contains only pagePostAuthor, while the second one includes two more keys, pageCategory and pagePostType.

<script>
//The 1st Push
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'authorData' : {
    'pagePostAuthor': 'Julius Fedorovicius'
   }
});

//The 2nd Push
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'authorData' : {
   'pageCategory': 'google-tag-manager-tips',
   'pagePostType': 'post'
}
});
</script>

Contrary to Version 1, all three values would remain in the Data Layer when you use Version 2.

{
'authorData' : {
   'pagePostAuthor': 'John Doe',
   'pageCategory': 'google-tag-manager-tips',
   'pagePostType': 'post'
   }
}

Simo Ahava has posted a detailed guide about Data Layer Versions. If you still have some questions, go check it out.

 

#3.2.3. Default Value

The last setting in the Data Layer Variable is Default Value. If you’re trying to access the value of a particular key in the Data Layer AND that key does not exist, a default value of “undefined” will be returned.

Sometimes you might need to get a different default value (e.g., not set), empty, or whatever fits your business goal.  In that case, click the checkbox and set the default value.

 

#3.3. But what about other data structures?

Remember that data can be stored in the Data Layer using different structures. Here’s an example where the key pagePostAuthor is in the root level:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'pagePostAuthor': 'Julius Fedorovicius'
});
</script>

Or this one (pagePostAuthor key is now a descendant of the attributes key):

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'attributes': {
    'pagePostAuthor': 'Julius Fedorovicius'
   }
});
</script>

Or even like this (there are two arrays that are the descendants of the ecommerce.items key):

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   event: 'purchase',
   ecommerce: {
    transaction_id: 'T_12345',
    affiliation: 'Google Merchandise Store',
    value: 25.42,
    tax: 4.90,
    shipping: 5.99,
    currency: 'USD',
    coupon: 'SUMMER_SALE',
    items: [
     {
      item_id: 'SKU_12345',
      item_name: 'Stan and Friends Tee',
      item_category: 'Apparel',
      price: 9.99,
      quantity: 1
     },
     {
      item_id: 'SKU_12346',
      item_name: 'Google Grey Women's Tee',
      item_category: 'Apparel',
      price: 20.99,
      quantity: 1
     }]
    }
   });

In the first two examples, entering the key’s name (pagePostAuthor) wouldn’t return its value. There’s something else you need to know.

 

#3.4. Pull Data from Child Keys

This section might sound confusing, so I’ll make this as non-technical as possible.

Keys that are descendants of other keys are called child keys (to be honest, I’ve found various terms on this one, but child key sounds the most comprehensible for non-developers).

In the example below, you can see that attributes are at the first level, and pagePostAuthor is on the 2nd.

Here, pagePostAuthor is a child key because it is nested within the attributes key.

{
 attributes: {
   pagePostAuthor: 'Julius Fedorovicius'
 }
}

To pull its value, you should slightly change one setting in a variable (within Google Tag Manager). Instead of pagePostAuthor, you should enter attributes.pagePostAuthor as the Data Layer Variable Name.

What if pagePostAuthor also had a child key? What would you do?

{
  attributes: {
    pagePostAuthor: {
      authorName: 'Julius Fedorovicius',
      authorTag: 'Google Tag Manager'
    }
  }
}

That’s right. You should define the full path to that particular key: attributes.pagePostAuthor.authorName, and so on. Every level should be separated by a dot.

Accessing child keys in Data Layer is pretty common. When someone asks me to give an example, I always tell them about the AJAX listener that tracks AJAX form submissions.

In my blog post about Google Tag Manager AJAX form tracking, I’ve explained how to use the AJAX listener which listens to all AJAX requests and pushes valuable information to the Data Layer. Here’s an example:

There are a lot of nested keys. To pull data from Data Layer, you’ll need to use dot notation in the Data Layer variable’s settings, e.g., attributes.response.

 

#3.5. Pull Data from Array Members

I was working with a developer on implementing Ecommerce Tracking with GA4. Following Google’s guidelines, I asked a developer to push successful order data to the Data Layer. Then, I could fetch that event via a GA4 tag within Google Tag Manager.

It’s very important that the developer follows guidelines and pushes data using the structure as instructed by Google. Here’s the official example from their knowledge base:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 event: 'purchase',
 ecommerce: {
   transaction_id: 'T_12345',
   affiliation: 'Google Merchandise Store',
   value: 25.42,
   tax: 4.90,
   shipping: 5.99,
   currency: 'USD',
   coupon: 'SUMMER_SALE',
   items: [
    {
     item_id: 'SKU_12345',
     item_name: 'Stan and Friends Tee',
     item_category: 'Apparel',
     price: 9.99,
     quantity: 1
    },
    {
     item_id: 'SKU_12346',
     item_name: 'Google Grey Women's Tee',
     item_category: 'Apparel',
     price: 20.99,
     quantity: 1
    }]
   }
 });

You know what? This is very useful information. Let’s say that I’d also want to push this order data to other marketing tools. It made sense for me to push data for price, name, and quantity. Here’s what I *could* do for price.

Unfortunately, this would not work. The same would happen with ecommerce.items.price, ecommerce.items.item_name, etc. All those newly created Data Layer variables always returned undefined. So what’s wrong?

Notice anything suspicious? In my GA4 Ecommerce example (taken from Google Knowledge Base), ecommerce.items has 2 item_name keys, 2 price keys, etc. So how will Google Tag Manager know which value I am interested in? The first item or the second one? And what would happen if a user purchased 5 products?

What we are dealing here with is called arrays. ecommerce.items. It is an array containing two products with the same collections of keys: item_id, item_name, item_category, price, and quantity.

In Javascript, if you want to pull the value of the first product’s price, you’d need to use ecommerce.items[0].price (the index starts from 0). Google Tag Manager does not support square brackets in this context, so you’d need to use dot notation. So the final key would look like this: ecommerce.items.0.price.

In Google Tag Manager, your Data Layer variable should look like this:

When set correctly, this will now return the value of the first item. Refer to the screenshot below.

If there were 5 products in the array and you wanted to access the price of the 5th product, the Data Layer Variable name should be ecommerce.items.4.price. Remember, the index here starts from zero, so the first product is actually not the 1st, but the 0th.

Tired? If yes, feel free to bookmark this Google Tag Manager Data Layer tutorial and return later.

 

 

#4. Send Data from the Data Layer to Other Tools

A quick checkpoint in our Google Tag Manager Data Layer Tutorial. So far, let’s see what we have achieved:

• Custom data was stored in the Data Layer (thanks to your coding skills, your developer’s coding skills, or some 3rd party plugin).
• Google Tag Manager started recognizing that custom data (thanks to the Data Layer variable).
• Now, we need to send this data to other tools, like Google Analytics 4.

 

#4.1. Enable Preview and Debug Mode in Google Tag Manager

Let’s head back to the example of fetching the name of the author who is most ready on my website. So, we must check if Google Tag Manager captures a value in the pagePostAuthor variable.

In your GTM panel, enter Preview and Debug mode (by clicking the Preview button)

When Debug mode is enabled, a new tab should be loaded where you will have to enter the URL of your website.

Click Start, and the URL will open in a new tab.

Click Variables in the Preview mode’s tab and look for pagePostAuthor. Check its value. If pagePostAuthor returns 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, the pagePostAuthor variable is defined correctly because I get the value Julius Fedorovicius.

 

#4.2. Send pagePostAuthor Data Layer Variable to Google Analytics

• Go back to your Google Tag Manager account.
• Go to Tags and click New.
• Click the Tag Configuration box.
• Select the Google Analytics: GA4 Configuration tag. If you don’t have one, create one.
• Enter the name for the tag – GA4 config (actually, you can name it whatever you want)
• Now it’s time to configure the tag. Enter your GA4 Measurement ID.
• Enter the Event Name as page_view
• Click Event Parameters
• Enter the Parameter Name as page_post_author and {{dlv – pagePostAuthor}} Data Layer variable in the Value field. In Google Tag Manager, variables are surrounded by double curly brackets {{}}.

• In the Triggering section, choose a condition that matches when your audience visits any article on the Blog page. In my case, it would be All Page Views where Click URL contains blogs/news/.
• This way, with every page view, you’ll send the value of a pagePostAuthor variable as an event parameter.

That’s how you can transfer additional data from Google Tag Manager Data Layer to Google Analytics. But don’t limit yourself just to custom dimensions. You can use Data Layer variables for Meta Pixel, LinkedIn Insight Tag, etc.

 

#4.3. Create a custom dimension in Google Analytics 4

page_post_author is a custom parameter defined by you (or your developer). Google Analytics 4 will not display the parameter in your reports unless you add it as a custom dimension. Let’s name it Page Post Author (actually, you can call it whatever you want).

• Login to your Google Analytics 4 account.
• Open your website’s account, and click on Admin. You should see something like this:

 

• Click on Custom Dimensions. Select Create a custom dimension to add the desired custom parameter (in this case, page_post_author).

• Enter the Dimension name as Page Post Author (or anything else), choose Event as a scope, add page_post_author as the Event Parameter, and click Create.

 

#5. Using Data Layer Data as Triggers

Data Layer can also be used for more advanced tag-firing rules. For example, you can fire a Google Ads remarketing tag only when a user is on a Free plan. Let’s take a closer look at this example.

• Open the Google Tag Manager admin panel.
• Go to Tags and click New.
• Enter a name, i.e., Google Ads remarketing tag
• Choose Tag Type – Google Ads Remarketing
• Enter Conversion ID and Conversion Label
• Leave all other settings as default and click Continue
• In the Triggering section, Click the Plus icon in the top right corner and enter the name – I suggest “Pageview – Users with the free plan”. Choose Pageview as a trigger type.
• Suppose 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 Google Ads remarketing tag will fire only when pricingPlan Data Layer variable is exactly Free. Premium users will not trigger the rule.

 

#6. Using Data Layer Events as Triggers

Another common example of Data-layer-based triggers is to use events. In addition to custom data, you can also push events to the Data Layer by using window.dataLayer.push.

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

The parameterevent 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 suggest calling it Custom – new email subscriber
• Choose type – 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 window.dataLayer.push event example. Here’s the code:

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

Wouldn’t it be nice to pass the formLocation data to Google Analytics? Google Tag Manager will not catch this parameter by default, so we need to create another variable. Go to Variables > User-defined variables and click New.

• I recommend 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.

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

• Go to Tags and click New
• Choose the Tag Type – Google Analytics: GA4 Event
• Set the Configuration Tag Tracking ID parameter.
• Add event name as new_subscriber.
• In the Event Parameters, put form_location as the Parameter Name and {{dlv – formPosition}} as the value.
• For triggering conditions, select the Custom – new email subscriber trigger previously created.

• Click Continue
• Done. You’re good to go!

The following (and final) steps are:

• Check all new tags in Google Tag Manager Preview and Debug console (whether they fire correctly)
• Check Debugview in the Google Analytics account (whether new_subscriber event is working properly)
• Install Google Tag Assistant legacy (in Chrome Browser) to make sure whether remarketing tag fires correctly

You can learn more about Custom Event Trigger in this blog post.

 

Google Tag Manager Data Layer: Conclusion

If you read the entire Google Tag Manager Data Layer tutorial, well done (and thank you)! If you skipped to the summary without reading the entire thing, I suggest bookmarking this page so you can return later.

In this Google Tag Manager Data Layer tutorial, I’ve explained the key concepts of what the Data Layer is, why you should bother learning more about it, why is it important, etc. If you haven’t read this guide and just scrolled down to the conclusion, then spoiler alert, it’s SUPER IMPORTANT.

In a nutshell, here’s what the Data Layer is and how it works:

• Data Layer is a central place (virtual layer) of a website where you, your developers, various tools can store data (about the user, his/her behavior, etc.). From there, Google Tag Manager reads that information and sends it further to other tools, Google Analytics, Google Ads, Facebook, etc.
• Data Layer is not some magical place on a server where you keep the data. It’s a temporary data storage created after GTM has loaded and is completely wiped out whenever the page refreshes or is closed.
• When the Google Tag Manager code is loaded on the page, the Data Layer is created automatically.
• If you want to have some custom data in the Data Layer, you (or your developer) have to use window.dataLayer.push method to push the data. If you don’t know how to code, ask developers to do that or look for 3rd party plugins/tools which can do that.
• By default, Google Tag Manager does not recognize custom data stored in the DL. Therefore, you need to create Data Layer variables in GTM. In the case of Data Layer events, you also have to create Custom Event Triggers.
• Finally, feel free to insert Data Layer variables in tags (within Google Tag Manager), e.g., Google Analytics 4 event tag, Custom HTML tag, etc. Variables must be surrounded by double curly brackets {{ }}.

Is there anything I missed in this Google Tag Manager Data Layer tutorial? Let me know in the comments section below.