What is Data Layer and how to use it?
What is Data Layer?
A data layer is an object that contains all of the information that you want to pass to Tag Management system such as Google Tag Manager. Data Layer is an additional layer that stays top of your page to provide all necessary information for tracking purpose. Such in ecommerce it is used to track the accurate data like which product sold, total amount, order id and other information. People using Google Tag Manager must be aware of Data Layer and already using it. Google Tag Manager functions best when deployed alongside a data layer although Data Layer is optional with GTM.
Creating Data Layer object on a Page
**You obviously need a bit of JavaScript and HTML knowledge to do it.
This is how you construct the Data Layer object on the page. Add the below snippet in the of your page
<script> dataLayer = []; </script>
The above code shows how you construct a data layer without any data. You can then use to populate the data using push method. You may also construct a data layer with some data like below. Assume you are populating the product data on the success/thank you page after an order.
<script>
dataLayer = [
{
"product": {
"name": "Men's Tshirt",
"id": "TS-001",
"price": 129.99,
"currency": "USD"
}
}
];
</script>
The another example is below that also sets a custom event to data layer object. Assume you want to track the products added to the shopping cart.
dataLayer = [
{
"event": "addToCart"
}, {
"product": {
"name": "Xbox One",
"id": "XB1",
"price": 449.99
} }
];
Inserting more data to already existing data layer object
Assume you already have data layer using for conversion tracking and now need to add more variables or another object for Google Ad Words Remarketing tag. This is how you can do it without disturbing your existing data layer variables.
dataLayer.push({
'ecomm_prodid':'12345',
'ecomm_pagetype' : 'cart',
'ecomm_totalvalue' : 39.99
});This will generate another object within the data layer and you can use both objects with Google Tag Manager for different tracking purpose.
The best place to insert your data layer code
Make sure the Data Layer code has been placed and populated all data before your GTM tag is placed. At least one line before the GTM tag is placed like below example.
<!-- Data Layer -->
<script>
dataLayer = [];
</script>
<!-- Data Layer -->
<!-- Google Tag Manager -->
<!-- Your Google Tag Manager Code here -->
<!-- End Google Tag Manager -->Note: If you are with Magento, OpenCart or other open source ecommerce frameworks you can also do it with an available plugin as well. There are some plugins available for these open sources. You just need to make sure they work correctly. You can always verify your data layer as well GTM firings using Google Tag Assistance.
Read here >> to see how Data Layer can be used with Google Tag Manager.