{"id":2387,"date":"2022-06-17T10:39:12","date_gmt":"2022-06-17T10:39:12","guid":{"rendered":"https:\/\/wearekemb.com\/?p=2387"},"modified":"2026-08-12T14:47:03","modified_gmt":"2026-08-12T14:47:03","slug":"data-layer-in-google-analytics-4","status":"publish","type":"post","link":"https:\/\/wearekemb.com\/en\/data-layer-in-google-analytics-4\/","title":{"rendered":"Data Layer in Google Analytics 4"},"content":{"rendered":"\n

Data layer is one of the most important concepts to grasp in web tracking, especially if you are working with Google Tag Manager. It is an invisible, virtual \u201ccontainer\u201d or layer that temporarily stores important data points (product id, client id, information about a click element etc.). <\/p>\n\n\n\n

What is the Data layer?<\/h2>\n\n\n\n

In its technical definition, the data layer is a JavaScript array. And thus you can extract elements from the array and use them as firing triggers and variables that will help in tracking custom information on your website. In fact, Google Tag Manager heavily relies on the data layer to track certain custom events (like eCommerce tracking) and is the \u201csource\u201d that it depends on to read data points from your website and then send them to other tools like Facebook pixel, Google Ads, and Google Analytics. It is the \u201cbread and butter\u201d of GTM. <\/p>\n\n\n\n

How does Google tag manager Data Layer work?<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

This is an example of a Google Tag manager container snippet that should be placed in the head of the source code to start tracking events. Notice in the snippet code, there is a data layer creation. Once you implement the Google Tag Manager container\u2019s JavaScript snippet in the head of your website\u2019s source code, the data layer will be automatically created. If however, your website already has a data layer, then the snippet code will adjust to it and use it.<\/p>\n\n\n\n

How to insert data in the data layer?<\/h2>\n\n\n\n

So we talked about what is the data layer. You might ask, how is it used and where does this data come from, basically how is data pushed to the data layer ?<\/p>\n\n\n\n

Remember the GTM container created an empty<\/strong> data layer. Therefore it needs to be filled with data that later on can be used by Google Tag manager in order to track custom events.
There are two ways that this can be done (the data layer will be filled with data that gets automatically tracked, however we will explain how to insert additional data).<\/p>\n\n\n\n

Be careful<\/strong>
This requires technical knowledge in manipulating the source code of a website. Your web developer might not be familiar with what a data layer is. That is why it is best to collaborate in setting up the data layer. The developer handles the technical implementation of the events you want to track. However, if you feel comfortable handling the backend code of your website, you can proceed on your own.<\/p>\n\n\n\n

 <\/p>\n\n\n\n

1. Data Layer declaration<\/h3>\n\n\n\n

The first method is called a data layer declaration. With this method, you add the data layer <\/span>before <\/span><\/strong>the GTM container snippet and it would look something like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So this method is very rarely used, and not recommended but we just wanted to also explain it clearly. <\/p>\n\n\n\n

First, it is a very limited method, as it <\/span>needs<\/strong> <\/span>to be added above the GTM container. What it basically means is that you are <\/span>defining<\/strong> <\/span>a data layer where certain variables that Google Tag manager can then fetch, and transfer to <\/span>Google Analytics 4<\/a><\/strong> <\/span>are already given when GTM is loaded. Imagine that you want to change certain variables that you have defined in the data layer, or update certain values if you <\/span>re-implement it<\/strong> <\/span>below<\/strong> <\/span>the container, you will <\/span>redefine<\/strong> <\/span>the data layer as a <\/span>new array and overwrite <\/span><\/strong>everything you have set up before. It can potentially break your entire tracking setup.<\/p>\n\n\n\n

2. Data Layer push method<\/h3>\n\n\n\n

The datalayer.push method allows you to add the data layer <\/span>anywhere<\/strong> <\/span>in the code (before or after the GTM container snippet) and it will not stop any of your tracking tags. And it would look something like this: <\/p>\n\n\n\n

window.datalayer = window.dataLayer <\/span> || <\/span><\/strong> [];<\/p>\n\n\n\n

window.dataLayer.push ({})<\/p>\n\n\n\n

This is just the statement in itself (like the one shown in the first method) <\/p>\n\n\n\n

So you can see that with this method, the data layer is called first, and then a push request is added to <\/span>push<\/strong> <\/span>or <\/span>add <\/span><\/strong>information into the existing data layer. Usually data or variables comes in \u201cpairs\u201d in the data layer. You have a variable <\/span>key <\/span><\/strong>and a <\/span>value<\/strong> <\/span>for that key. Let\u2019s check out the following example. Let\u2019s say you want to track newsletter subscriptions. Form tracking method may not work on subscriptions, you might also catch the subscription with a click event, but you can also ask your developer to <\/span>push<\/strong> <\/span>this event to the data layer whenever it occurs on the website.<\/p>\n\n\n\n

window.datalayer = window.dataLayer <\/span> || <\/span><\/strong> [ ];<\/p>\n\n\n\n

window.dataLayer.push ({
\u2018event \u2018 : \u2018 new_subscription_complete\u2019
})<\/p>\n\n\n\n

With this statement, the \u2018event\u2019 <\/span>key<\/strong> <\/span>is being pushed to the data layer, and the <\/span>value<\/strong> <\/span>of this key is \u2018new_subscription_complete\u2019. And then, this event can be used as a custom trigger (custom event trigger) to fire a tracking <\/span>tag<\/strong> <\/span>on that event. <\/p>\n\n\n\n

eCommerce object and variables (purchase event example)<\/h2>\n\n\n\n

Usually, data layer is <\/span>mostly<\/strong> <\/span>used to track an eCommerce funnel. Google analytics does not automatically track eCommerce events, therefore events like add to cart, begin checkout, purchase are manually configured and pushed to the data layer. In this article we will not dive into the technical <\/span>setup<\/strong> <\/span>of an eCommerce object in the data layer, rather, we will show you what a \u201cpurchase\u201d event might look like for example and how you can extract valuable information to use in Google Tag manager.<\/p>\n\n\n\n

If you have already set up an eCommerce object in Universal Analytics (UA) you can <\/span>still<\/strong> <\/span>use it in setting up tags when <\/span>migrating to Google Analytics 4<\/a><\/strong>. The eCommerce object structure is a bit different between the two analytics versions, however, as mentioned, the main topic of this article is to understand the data layer. So in our example, we will show what an eCommerce purchase event might look like in the data layer in UA and how to access the different variables. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In Javascript, the {} designates an object. We can see that we have three \u201cnested\u201d objects, <\/span>ecommerce, purchase, and actionField.<\/strong> <\/span>Within those objects there are variables (remember that variables are defined in \u201cpairs\u201d meaning a <\/span>key<\/strong> <\/span>and a <\/span>value<\/strong>) that are important to extract. <\/p>\n\n\n\n

We also notice the \u201canalyzify_purchase\u201d event was pushed to the data layer. In order to first track the event, we need to set up a <\/span>trigger <\/span><\/strong>that will fire a tracking tag. We can use it as a <\/span>custom event<\/strong> <\/span>trigger. Remember, the name of the event should <\/span>exactly match<\/strong> <\/span>the name of the <\/span>pushed<\/strong> <\/span>event. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then, we set a tag that will fire under this condition (aka. When this event occurs).  But, before we do that, let\u2019s see how we can extract some of the important variables or \u201cdata\u201d from the data layer and <\/span>forward<\/strong> <\/span>them to GA4. <\/p>\n\n\n\n

As mentioned previously, when migrating to Google Analytics 4 you can still use the eCommerce data layer you set up in the previous version. Let\u2019s say we want to get the transaction ID and save it in a variable. To access it, we need to access all three objects because it lies in the third one. So it will look like this, <\/span>ecommerce.purchase.actionField.id  <\/span><\/strong>As you notice, we \u201cdrill down\u201d through objects with the \u201c.\u201d operator up until we reach the key we want. Let\u2019s then go back to Google Tag manager and set this variable up. <\/p>\n\n\n\n

We need to set a <\/span>data layer variable<\/strong> <\/span>configuration because that\u2019s where we are extracting the data from. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can probably guess by now how to get the other variables. <\/span>ecommerce.purchase.actionField.revenue.xxx (xxx being the variable you want). <\/strong><\/p>\n\n\n\n

Other than <\/span><\/strong>the actionField object, we have the <\/span>Products array <\/span><\/strong>(defined by [ ]) that contains an <\/span>object<\/strong> <\/span>itself. [ { } ] 
To select the product array, select <\/span>ecommerce.purchase.products<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now that we have set up all our variables, we go back to our initial tag we were setting up to track the purchase event.<\/p>\n\n\n\n

The tag configuration will look something like this: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We <\/span>forward<\/strong> <\/span>all the event parameters to GA4. To finally make sure that all the variables are properly set up, head to the variables section in GTM preview mode and check whether they show correct results. As you can see below, the variables indeed show the exact same values as the variables in the data layer. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Closing Notes<\/h2>\n\n\n\n

The data layer is a very important concept to grasp when dealing with web tracking. The more you familiarize yourself with the data layer, the more useful you\u2019ll find it. It may seem a bit difficult and too technical, however it is essential to understand. Once you know how to push data into the data layer, you will have much more flexibility in tracking very custom events that happen on your website. If you require any help or consultation in setting up Google Analytics 4, Google Tag manager, or configuring an entire data infrastructure for your business, <\/span>we are one click away<\/strong><\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"

We explain how to leverage valuable information from the data layer to effectively create tracking tags for every important ecommerce event<\/p>\n","protected":false},"author":4,"featured_media":19236,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[59,65],"tags":[47],"class_list":["post-2387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business-intelligence-en","category-data-reporting-en","tag-google-analytics"],"_links":{"self":[{"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/posts\/2387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/comments?post=2387"}],"version-history":[{"count":3,"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/posts\/2387\/revisions"}],"predecessor-version":[{"id":20450,"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/posts\/2387\/revisions\/20450"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/media\/19236"}],"wp:attachment":[{"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/media?parent=2387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/categories?post=2387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wearekemb.com\/en\/wp-json\/wp\/v2\/tags?post=2387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}