dataLayer push: definition and examples
Updated: Sunday, October 8, 2023
Definition
The Data Layer is a JavaScript array that is grafted on your website to expose data and/or user behavior (events) to Google Tag Manager.
This data layer has two major advantages:
- you can expose data that isn’t necessarily available on your website (here we’ll talk about metadata), but which is interesting to collect.
- you can track events very precisely, thus reducing the discrepancy between collected data and reality.
![Data Layer exposes data and events to your website](https://data-marketing-school.com/images/blog/data-layer/schema_dl_huea48269598c1c4578f2dc1760f734a50_18390_1610x0_resize_q75_h2_box_3.webp)
Implementing the dataLayer
GTM-XXXXXXX
to match your container id.<head>
<script>
// If there is already a data layer I keep its content, if not I create an empy JavaScript array
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
</head>
Adding data to the dataLayer
Just after it has been set up, you can send data to the Data Layer if you wish to transmit metadata about the current page, for example.
<head>
<script>
// If there is already a data layer I keep its content, if not I create an empy JavaScript array
window.dataLayer = window.dataLayer || [];
dataLayer.push({
pageCategory: "Cosmetics",
user_id: 1231654
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<head>
Sending events to the dataLayer
If we take a basic example of a button that is supposed to send a form, we can trigger an event in the dataLayer as soon as the user clicks on the “Send form” button.
<body>
<button id="btn">Send form</button>
<script>
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
// I send an event to the dataLayer
dataLayer.push({ event: "form_sent" });
});
</script>
</body>
The right order (data then events)
It’s important to add the data (any information that doesn’t contain the event
key) to the dataLayer before loading Google Tag Manager in the <head>
tag.
All events are to be sent AFTER the Google Tag Manager code before the </body>
tag.
Here’s the final rendering:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// If there is already a data layer I keep its content, if not I create an empy JavaScript array
window.dataLayer = window.dataLayer || [];
dataLayer.push({
pageCategory: "Cosmetics",
user_id: 1231654
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<button id="btn">Envoyer le formulaire</button>
<script>
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
// I send an event to the dataLayer
dataLayer.push({ event: "form_sent" });
});
</script>
</body>
</html>
View the dataLayer content in your browser
Using the console
If you type dataLayer
into your browser’s console, you can access its contents.
![Visualiser le contenu du Data Layer dans la console du navigateur](https://data-marketing-school.com/images/blog/data-layer/viz_console.en_huc7b61401a295ce6b4c3894163246dff8_204244_1800x0_resize_q75_h2_box.webp)
Using the Chrome Extension
You can also use one of the following extensions to view the dataLayer’s content:
![Visualiser le contenu du Data Layer grâce à une extension chrome](https://data-marketing-school.com/images/blog/data-layer/viz_ext_chrome.en_huc7b61401a295ce6b4c3894163246dff8_48815_1052x0_resize_q75_h2_box.webp)
Debug the Data Layer in Google Tag Manager
In Google Tag Manager’s debug mode, you’ll find a Data Layer tab that lets you view its content in relation to events occurring on the page.
![Interface de debug de Google Tag Manager](https://data-marketing-school.com/images/blog/data-layer/debug_dl_gtm.en_hu7b66bd9917135868a1404a032850ef37_222002_1508x0_resize_q75_h2_box.webp)
Didn't find what you were looking for?
Get help from the Data Marketing Club