Data Layer in Google Tag Manager Guide

Updated: January 21, 2025

This article introduces the Data Layer in GTM.

What is Data Layer？

The GTM Data Layer is a JavaScript object that is stored on a web page and is used to capture and store information about user behavior, page content, and other relevant data. It acts as an intermediary between the GTM tags and the website’s base code, providing a structured, unified way to pass data.

Advantages of the Data Layer

The Data Layer has the following advantages:

• Unified data collection: The data layer ensures that data is collected in a consistent manner regardless of how the tags change, reducing code redundancy.
• Dynamic data delivery: Allows data to be dynamically inserted or modified after the page is loaded without reloading the page.
• Enhanced analysis and marketing: With structured data, marketing and analysis tools can track user behavior more accurately and perform more complex analysis.
• Improved user experience: By controlling the collection and transmission of data, page loading time can be reduced and the user experience can be improved.

Initialize the Data Layer（dataLayer）

Initialize the Data Layer:

window.dataLayer = window.dataLayer || [];

What this code does is make sure that the dataLayer array exists in the global window object. If dataLayer doesn’t exist yet, it creates an empty array; if it already exists, it doesn’t make any changes.

Push data to the Data Layer（dataLayer.push）

dataLayer.push = ({
    'event': 'test',
    'pageType': 'product'
});

The above code pushes an object to the dataLayer array, which can contain any data you want to pass:

• event is a common key used to trigger a specific event or action
• pageType is the Data Layer Variable, which is the data you want to pass. There can be multiple data layer variables, and they can also be nested

dataLayer.push = ({
	'event': 'test',
	'pageType': 'product'
});

dataLayer.push = ({
	'event': 'test',
	'pageType': 'product',
        'pageTitle': 'BCS'
});

dataLayer.push = ({
	'event': 'test',
	'pageType': 'product',
        'pageInfo':{
              pageURl:"https://www.bbccss.com"
         }
});

If you are sending dataLayer.push continuously, you must add：

window.dataLayer = window.dataLayer || [];

Which also clears the data layer variables sent last time to avoid the data layer variable errors from the last push appearing in this push. The complete code is as follows:

window.dataLayer = window.dataLayer || [];
dataLayer.push = ({
    'event': 'test',
    'pageType': 'product'
});

The difference between dataLayer and dataLayer.push:

• dataLayer: Initialize the data layer
• dataLayer.push: Push data to the data layer, that is, send data

Configuration Example in GTM

Suppose now we want to do dataLayer.push tracking on this location:

Step 1 : DE add dataLayer.push

The source code for tracking location is:

<a>dataLayer.push demo test</a>

DE needs to add dataLayer.push as:

dataLayer.push = ({
    'event': 'test',
    'pageType': 'product'
});

The effect after adding it to the required position is:

<a onclick="dataLayer.push({'event': 'test','pageType': 'product'});">dataLayer.push demo test</a>

As long as the location is clicked, dataLayer.push is executed.

Step 2 : Set Up the Variables

In GTM, click「 Variables」——「New」——「Choose a variable type to begin setup…」——「Data Layer Variable」, name it “dlv-Page Type”, and then set as follows:

Step 3 : Set Up the Triggers

In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「Custom Event」，Name it “dataLayer.push demo”, and make the following settings:

Whatever the value of the event in dataLayer.push is, fill in the event name.

Step 4 : Set Up the Tags

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics: GA4 Event」，Name it “GA4-Event-dataLayer.push”, and make the following settings:

Step 5 : Preview and Publish

Next is the Preview test:

Tags is triggered, click it to open and check whether the value of the event parameter page_type is accurate:

The event parameters are accurate, and can be published.

Read More：

• Understand DebugView in Google Analytics 4
• New Preview Mode Google Tag Manager：Tag Assistant

Validate Data Layer

When using the Data Layer, we need to check whether the assembled data format is correct and whether the transmitted data is correct during testing, especially when testing e-commerce, or whether the relevant information in the Data Layerr has been pushed out. Here are two methods for viewing Data Layer information to help you use GTM better.

Tag Assistant

In GTM, you can enter the preview mode and look at the 「Data Layer」:

Or API Call：

You can find Data Layer information.

You can also use other plug-ins to verify, such as: ADSWERVE, Data Layer checker, datalayers, Simple Data Layer Viewer

Browser Console

Type dataLayer in the browser console and you will see an array containing all the information pushed to the data layer. You can find it by event name:

Application Scenarios

• E-commerce tracking: Such as tracking product display, product clicks, adding to shopping cart, submitting checkout, successful payment, etc. further reading: Google Analytics 4: Google Tag Manager Ecommerce Setup Guide
• Advanced custom event tracking: more complex event tracking, further reading： GA4 Event Tracking Series ⑩ —— Custom Events (dataLayer.push Method）
• User data: For example, after a user logs in, the user’s ID, name and other information can be pushed.