The document discusses the data layer in Google Tag Manager (GTM), explaining its structure as a JavaScript array and how it functions with methods such as push() and get(). It elaborates on the interactions between GTM and the data layer, including how data is processed and managed through specific commands. Various peculiarities of the data model are also highlighted, particularly in terms of value updates and the handling of complex object structures.

1. Simo Ahava | NetBooster

2. GTM For Nerds
MeasureCamp V – 20 September 2014
function MeasureCampV() { this.awesome = awesome; }

3. GTM For Nerds
MeasureCamp V – 20 September 2014
@SimoAhava
function MeasureCampV() { this.awesome = awesome; }
http://google.me/+SimoAhava
simo@simoahava.com
www.simoahava.com

4. MASTERED by desire impulsive,
By a mighty inward urging,
I am ready now for singing,
Ready to begin the coding --
A. Gallen-Kallela: The Boat’s Lament

5. What is dataLayer
 A JavaScript Array
@SimoAhava | MeasureCamp V

6. What is dataLayer
 A JavaScript Array
 dataLayer = [];
@SimoAhava | MeasureCamp V

7. What is dataLayer
 A JavaScript Array
 dataLayer = [];
 dataLayer.push('item1'); // dataLayer[0] => 'item1’
@SimoAhava | MeasureCamp V

8. What is dataLayer
 A JavaScript Array
 dataLayer = [];
 dataLayer.push('item1'); // dataLayer[0] => 'item1'
 dataLayer.push({'item2' : [{'data1' : true},{'data2' : 'Peter'}]});
// dataLayer[1] => 'item2' : Array[2]
@SimoAhava | MeasureCamp V

9. What is dataLayer
 A JavaScript Array
 dataLayer = [];
 dataLayer.push('item1'); // dataLayer[0] => 'item1'
 dataLayer.push({'item2' : [{'data1' : true},{'data2' : 'Peter'}]});
// dataLayer[1] => 'item2' : Array[2]
 var item2 = dataLayer.pop(); // item2 => Array[2], dataLayer[1] =>
@SimoAhava | MeasureCamp V
undefined

10. What is dataLayer
 A JavaScript Array
 dataLayer = [];
 dataLayer.push('item1'); // dataLayer[0] => 'item1'
 dataLayer.push({'item2' : [{'data1' : true},{'data2' : 'Peter'}]});
// dataLayer[1] => 'item2' : Array[2]
 var item2 = dataLayer.pop(); // item2 => Array[2], dataLayer[1] =>
@SimoAhava | MeasureCamp V
undefined
 dataLayer.push({'event' : 'gtm.js'}); // No special effects

11. What is dataLayer
 A JavaScript Array
 dataLayer = [];
 dataLayer.push('item1'); // dataLayer[0] => 'item1'
 dataLayer.push({'item2' : [{'data1' : true},{'data2' : 'Peter'}]});
// dataLayer[1] => 'item2' : Array[2]
 var item2 = dataLayer.pop(); // item2 => Array[2], dataLayer[1] =>
@SimoAhava | MeasureCamp V
undefined
 dataLayer.push({'event' : 'gtm.js'}); // No special effects
 There is absolutely nothing special about dataLayer ... or is there?

12. What is dataLayer
 A JavaScript Array
 dataLayer = [];
 dataLayer.push('item1'); // dataLayer[0] => 'item1'
 dataLayer.push({'item2' : [{'data1' : true},{'data2' : 'Peter'}]});
// dataLayer[1] => 'item2' : Array[2]
 var item2 = dataLayer.pop(); // item2 => Array[2], dataLayer[1] =>
@SimoAhava | MeasureCamp V
undefined
 dataLayer.push({'event' : 'gtm.js'}); // No special effects
 There is absolutely nothing special about dataLayer ... or is there?
 It’s the default name of the data structure that Google Tag Manager uses

13. What is dataLayer
 …but it looks like GTM overrides the default push() method:
@SimoAhava | MeasureCamp V

14. What is dataLayer
 …but it looks like GTM overrides the default push() method:
 This does three (visible) things:
@SimoAhava | MeasureCamp V

15. What is dataLayer
 …but it looks like GTM overrides the default push() method:
 This does three (visible) things:
1. Initiates a listener which processes the new state of dataLayer after each push()
2. Sets the maximum length of dataLayer to 300
3. Instead of returning the length of the Array, a push() returns true if no tags were fired and
false if tags were fired – synchronous operation for ”Wait for Tags”!
@SimoAhava | MeasureCamp V

16. What is dataLayer
 …but it looks like GTM overrides the default push() method:
 This does three (visible) things:
1. Initiates a listener which processes the new state of dataLayer after each push()
2. Sets the maximum length of dataLayer to 300
3. Instead of returning the length of the Array, a push() returns true if no tags were fired and
false if tags were fired – synchronous operation for ”Wait for Tags”!
 These will all be part of the specification that vendors need to adhere to
 Memory management such as setting the maximum length of the Array will
eventually be configurable
@SimoAhava | MeasureCamp V

17. A. Gallen-Kallela: Lemminkainen’s Mother
THERE the blood-stained data model,
There Google's son and hero,
Cuts in pieces dataLayer,
Chops it with his mighty hatchet --

18. What is Google Tag Manager’s data model
 An abstract data model, which passes and processes data from dataLayer to
Google Tag Manager
@SimoAhava | MeasureCamp V

19. What is Google Tag Manager’s data model
 An abstract data model, which passes and processes data from dataLayer to
Google Tag Manager
dataLayer Data model
Tool-agnostic Tool-specific
Generic Unique
Accessed directly Accessed via helper
Structured Abstract
@SimoAhava | MeasureCamp V

20. What is Google Tag Manager’s data model
 In GTM, the interface exposes two methods:
 google_tag_manager["GTM-XXXX"].dataLayer.get('key')
 google_tag_manager["GTM-XXXX"].dataLayer.set('key','value')
@SimoAhava | MeasureCamp V

21. What is Google Tag Manager’s data model
 In GTM, the interface exposes two methods:
 google_tag_manager["GTM-XXXX"].dataLayer.get('key')
 google_tag_manager["GTM-XXXX"].dataLayer.set('key','value')
 These are used to access the data stored in the data model, and should not be
used directly
@SimoAhava | MeasureCamp V

22. What is Google Tag Manager’s data model
 In GTM, the interface exposes two methods:
 google_tag_manager["GTM-XXXX"].dataLayer.get('key')
 google_tag_manager["GTM-XXXX"].dataLayer.set('key','value')
 These are used to access the data stored in the data model, and should not be
used directly
 Using get() retrieves the most recent value for ’key’
 dataLayer.push({'key1' : 'value1'}); // dataLayer[0]
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // 'value1'
 dataLayer.push({'key1' : 'value2'}); // dataLayer[1]!
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // 'value2'
@SimoAhava | MeasureCamp V

23. What is Google Tag Manager’s data model
 Cool, get() works nicely with dotted names and nested objects
 dataLayer.push({'key1.id' : '123'});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1.id'); // '123'
 dataLayer.push({'key2' : {'id' : '234'}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key2.id'); // '234’
@SimoAhava | MeasureCamp V

24. What is Google Tag Manager’s data model
 Cool, get() works nicely with dotted names and nested objects
 dataLayer.push({'key1.id' : '123'});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1.id'); // '123'
 dataLayer.push({'key2' : {'id' : '234'}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key2.id'); // '234’
 Yes, get() is the method that is called by your Data Layer Variable Macros
@SimoAhava | MeasureCamp V

25. What is Google Tag Manager’s data model
 Cool, get() works nicely with dotted names and nested objects
 dataLayer.push({'key1.id' : '123'});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1.id'); // '123'
 dataLayer.push({'key2' : {'id' : '234'}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key2.id'); // '234’
 Yes, get() is the method that is called by your Data Layer Variable Macros
 So…
 When a dataLayer.push() occurs, the arguments are copied to the data
model
@SimoAhava | MeasureCamp V

26. What is Google Tag Manager’s data model
 Cool, get() works nicely with dotted names and nested objects
 dataLayer.push({'key1.id' : '123'});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1.id'); // '123'
 dataLayer.push({'key2' : {'id' : '234'}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key2.id'); // '234’
 Yes, get() is the method that is called by your Data Layer Variable Macros
 So…
 When a dataLayer.push() occurs, the arguments are copied to the data
model
 The get() method can be used to retrieve data from the data model
@SimoAhava | MeasureCamp V

27. A. Gallen-Kallela: The Forging Of The Sampo
dataLayer, worthy brother,
Thou, my faithful indexed Array,
Come and see this wondrous beauty,
Abstract structure, awesome methods --

28. Peculiarities of the data model
 Changing value type overwrites the previous value
 dataLayer.push({'key1' : [1, 2, 3]});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // Array[3]
 dataLayer.push({'key1' : 'cool'});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // 'cool'
@SimoAhava | MeasureCamp V

29. Peculiarities of the data model
 Changing value type overwrites the previous value
 dataLayer.push({'key1' : [1, 2, 3]});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // Array[3]
 dataLayer.push({'key1' : 'cool'});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // 'cool'
 Array to Array and plain object to plain object behave a bit differently
 dataLayer.push({'key1' : [1, 2, 3]});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // [1, 2, 3]
 dataLayer.push({'key1' : [4, 5]});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // [4, 5, 3]!
@SimoAhava | MeasureCamp V

30. Peculiarities of the data model
 Updating an Array in the data model is clumsy (and not a good idea)
 dataLayer.push({'key1' : [1, 2, 3]});
 var k = google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // [1, 2, 3]
 k.push(4, 5);
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // [1, 2, 3, 4, 5]
@SimoAhava | MeasureCamp V

31. Peculiarities of the data model
 Updating an Array in the data model is clumsy (and not a good idea)
 dataLayer.push({'key1' : [1, 2, 3]});
 var k = google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // [1, 2, 3]
 k.push(4, 5);
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // [1, 2, 3, 4, 5]
 So there’s a special ’command array’ you can use, which accesses all supported
methods of the value
 dataLayer.push({'key1' : [1, 2, 3]});
 dataLayer.push(['key1.push', 4, 5]); // Note the square brackets!
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // [1, 2, 3, 4, 5]
@SimoAhava | MeasureCamp V

32. Peculiarities of the data model
 Plain object to plain object is more straightforward
 dataLayer.push({'key1' : {'one' : 1}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // {one: 1}
@SimoAhava | MeasureCamp V

33. Peculiarities of the data model
 Plain object to plain object is more straightforward
 dataLayer.push({'key1' : {'one' : 1}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // {one: 1}
 dataLayer.push({'key1' : {'two' : 2}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // {one: 1}, {two: 2}
@SimoAhava | MeasureCamp V

34. Peculiarities of the data model
 Plain object to plain object is more straightforward
 dataLayer.push({'key1' : {'one' : 1}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // {one: 1}
 dataLayer.push({'key1' : {'two' : 2}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // {one: 1}, {two: 2}
 dataLayer.push({'key1' : {'one' : {'two' : 3}}});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // {one: {two: 3}},
@SimoAhava | MeasureCamp V
{two: 2}

35. Peculiarities of the data model
 You can also run your own functions on values in the data model
 dataLayer.push({'key1' : {'one' : 1}});
 dataLayer.push(function() {
var key1 = this.get('key1');
if(key1.hasOwnProperty('one') {
this.set('key1', {'one' : 2});
}
});
 google_tag_manager["GTM-XXXX"].dataLayer.get('key1'); // {one: 2}
@SimoAhava | MeasureCamp V

36. @SimoAhava | MeasureCamp V
Thank you
www.simoahava.com/analytics/data-layer/
www.simoahava.com/analytics/google-tag-manager-data-model/
#GTMtips
http://google.me/+SimoAhava @SimoAhava