google tag manager for nerds

Simo Ahava | NetBooster

GTM For NerdsMeasureCamp V – 20 September 2014

function MeasureCampV() { this.awesome = awesome; }

GTM For NerdsMeasureCamp V – 20 September 2014

@SimoAhava

http://google.me/+SimoAhava

simo@simoahava.com

www.simoahava.com

function MeasureCampV() { this.awesome = awesome; }

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

@SimoAhava | MeasureCamp V

What is dataLayer

A JavaScript Array

@SimoAhava | MeasureCamp V

What is dataLayer

A JavaScript Array dataLayer = [];

@SimoAhava | MeasureCamp V

What is dataLayer

A JavaScript Array dataLayer = [];

dataLayer.push('item1'); // dataLayer[0] => 'item1’

@SimoAhava | MeasureCamp V

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

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] =>

undefined

@SimoAhava | MeasureCamp V

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] =>

undefined

dataLayer.push({'event' : 'gtm.js'}); // No special effects

@SimoAhava | MeasureCamp V

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] =>

undefined

dataLayer.push({'event' : 'gtm.js'}); // No special effects

There is absolutely nothing special about dataLayer ... or is there?

@SimoAhava | MeasureCamp V

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] =>

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

@SimoAhava | MeasureCamp V

What is dataLayer

…but it looks like GTM overrides the default push() method:

@SimoAhava | MeasureCamp V

What is dataLayer

…but it looks like GTM overrides the default push() method:

This does three (visible) things:

@SimoAhava | MeasureCamp V

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

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

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 --

@SimoAhava | MeasureCamp V

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

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

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

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

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

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

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

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

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

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 --

@SimoAhava | MeasureCamp V

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

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

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

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

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

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

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}},

{two: 2}

@SimoAhava | MeasureCamp V

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

Thank you

www.simoahava.com/analytics/data-layer/

www.simoahava.com/analytics/google-tag-manager-data-model/

#GTMtips

@SimoAhavahttp://google.me/+SimoAhava