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