Practice dataLayers for GTM

dataLayers are the backbone for any customized implementations for tracking and measurement. All complex GTM implementations are done using dataLayers.

dataLayer is a JavaScript Array

dataLayer is a JavaScript Array, which holds data in key-value pairs. The key is a variable name in String format, and values can be any allowed JavaScript type.

Values in the dataLayer are accessed using their index numbers since it is an Array. The values from the objects are accessed using the dot notation. If it's array of objects then both index position and the dot notation with the property name.

Below are examples of dataLayers with different data types:

GTM dataLayer push - with String data types

This standard dataLayer push syntax pushes an object with 3 properties with key-value pairs of the type string. We put the string data type values within quotes.

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

window.dataLayer.push({

});

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

window.dataLayer.push({

" " 

  :  

" " 

,

" " 

  :  

" " 

,

" " 

  :  

" " 

});

Lets see an example, if I push these 3 key value pairs:
We put the string data type values with quotes.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"firstName": "prashanth",
"lastName": "joel",
"company": "measure marketer"
});

Values in the array are accessed using their index numbers. Values in objects are accessed using the dot notation with the property name.

GTM dataLayer push - with Number data types

This standard dataLayer push syntax pushes an object with 3 properties with key-value pairs of the type Number. We put the number data type values without quotes.

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

window.dataLayer.push({

});

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

window.dataLayer.push({

" " 

  :  

,

" " 

  :  

,

" " 

  :  

});

Lets see an example, if I push these 3 key value pairs:
We put the number data type values without quotes.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"age": 31,
"year": 1989,
"weight": 69
});

If you need to access the value 31, then you need to create a dataLayer variable in GTM and access the value using the dot notation.

GTM dataLayer push - with Boolean data types

This standard dataLayer push syntax pushes an object with 3 properties with key-value pairs of the type Boolean. We put the boolean data type values without quotes.

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

dataLayer.push({

});

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

dataLayer.push({

" " 

  :  

,

" " 

  :  

,

" " 

  :  

});

Lets see an example, if I push these 3 key value pairs:
We put the boolean data type values without quotes.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"discount": false,
"certifications": true,
"placements": true
});

If you need to access the value 31, then you need to create a dataLayer variable in GTM and access the value using the dot notation.

GTM dataLayer push - with Object data types

This standard dataLayer push syntax pushes an object with 3 properties with key-value pairs of the type Object. We put the Object data type values in the {} (Object literal).

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

dataLayer.push({

"Name" : "John",

"Age" : 30,

"Country" : "India",

"Brands" : {

},

"Cars" : {

},

"Gender" : "Male"

});

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

dataLayer.push({

"Name" : "John",

"Age" : 30,

"Country" : "India",

"Brands" : {

" " 

  :  

" " 

,

" " 

  :  

,

},

"Cars" : {

" " 

  :  

" " 

,

" " 

  :  

,

" " 

  :  

},

"Gender" : "Male"

});

Lets see an example, if I push these different objects into an object:
We put the Object data type values {}.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
"name" : "John",
"cge" : 30,
"country" : "India",
"crands" : {
"car" : "honda city",
"owner" : true,
},
"cars" : {
"color" : "red ",
"price" : 500000,
"serviceFee" : 10000
},
"gender" : "Male"
});

NOTE: You can check the length of the dataLayer array using dataLayer.length. You can use this to find the index number.
If you need to access the value 500000, then you need to create a dataLayer variable in GTM and access the value using the cars.price notation.

GTM dataLayer push - with Array data types

This standard dataLayer push syntax pushes an object with 3 properties with key-value pairs of the type Array. We put the Array data type values in the [] (Array literal).

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

window.dataLayer.push({

"event" : "trackEvent",

"pageType" : "Blog",

"userID" : 12345,

"pageCategories" : [{

"Marketing" : [

],

"Measurement" : [

],

"Implementation" : [

]

}],

"loginStatus" : "logged in"

});

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

window.dataLayer.push({

"event" : "trackEvent",

"pageType" : "Blog",

"userID" : 12345,

"pageCategories" : [{

"Marketing" : [

" " 

" " 

" " 

],

"Measurement" : [

 

 

],

"Implementation" : [

 

]

}],

"loginStatus" : "logged in"

});

Lets see an example, if I push different Arrays into an object:
We put the Array data type values [].

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"event" : "trackEvent",
"pageType" : "Blog",
"userID" : 12345,
"pageCategories" : [{
"Marketing" : ["prashanth", "satish", "rajesh"],
"Measurement" : [30000, 2000],
"Implementation" : [true]
}],
"loginStatus" : "logged in"
});

NOTE: You can check the length of the dataLayer array using dataLayer.length. You can use this to find the index number.
If you need to access the values from pageCategories Object and Marketing Array, then you need to create a dataLayer variable in GTM and access the value "prashanth" then you use the pageCategories[0].Marketing[0] notation.

Our Measurement Tools

Data Layer Object Builder Tool for Web Measurement

Start an engineering team at the fraction of the cost with top remote developers in our network.

Facebook Pixel Event Code Generator Tool

Start an engineering team at the fraction of the cost with top remote developers in our network.

ReGex Numeric Range Generator Tool for Customer Segmentation​

Start an engineering team at the fraction of the cost with top remote developers in our network.
READY TO GET STARTED?

Ideas start differently and spread rapidly in the digital world.
At Measure Marketer, we help bring them to life.