Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Google Tag Manager For Nerds Slide 1 Google Tag Manager For Nerds Slide 2 Google Tag Manager For Nerds Slide 3 Google Tag Manager For Nerds Slide 4 Google Tag Manager For Nerds Slide 5 Google Tag Manager For Nerds Slide 6 Google Tag Manager For Nerds Slide 7 Google Tag Manager For Nerds Slide 8 Google Tag Manager For Nerds Slide 9 Google Tag Manager For Nerds Slide 10 Google Tag Manager For Nerds Slide 11 Google Tag Manager For Nerds Slide 12 Google Tag Manager For Nerds Slide 13 Google Tag Manager For Nerds Slide 14 Google Tag Manager For Nerds Slide 15 Google Tag Manager For Nerds Slide 16 Google Tag Manager For Nerds Slide 17 Google Tag Manager For Nerds Slide 18 Google Tag Manager For Nerds Slide 19 Google Tag Manager For Nerds Slide 20 Google Tag Manager For Nerds Slide 21 Google Tag Manager For Nerds Slide 22 Google Tag Manager For Nerds Slide 23 Google Tag Manager For Nerds Slide 24 Google Tag Manager For Nerds Slide 25 Google Tag Manager For Nerds Slide 26 Google Tag Manager For Nerds Slide 27 Google Tag Manager For Nerds Slide 28 Google Tag Manager For Nerds Slide 29 Google Tag Manager For Nerds Slide 30 Google Tag Manager For Nerds Slide 31 Google Tag Manager For Nerds Slide 32 Google Tag Manager For Nerds Slide 33 Google Tag Manager For Nerds Slide 34 Google Tag Manager For Nerds Slide 35 Google Tag Manager For Nerds Slide 36
Upcoming SlideShare
Advanced Remarketing in Google Analytics Using CRM Data
Next
Download to read offline and view in fullscreen.

42 Likes

Share

Download to read offline

Google Tag Manager For Nerds

Download to read offline

Here's the slides from my MeasureCamp presentation on Google Tag Manager, the data layer, and the tool-specific data model.

Here's an accompanying blog post as well:

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Google Tag Manager For Nerds

  1. 1. Simo Ahava | NetBooster
  2. 2. GTM For Nerds MeasureCamp V – 20 September 2014 function MeasureCampV() { this.awesome = awesome; }
  3. 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. 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. 5. What is dataLayer  A JavaScript Array @SimoAhava | MeasureCamp V
  6. 6. What is dataLayer  A JavaScript Array  dataLayer = []; @SimoAhava | MeasureCamp V
  7. 7. What is dataLayer  A JavaScript Array  dataLayer = [];  dataLayer.push('item1'); // dataLayer[0] => 'item1’ @SimoAhava | MeasureCamp V
  8. 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. 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. 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. 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. 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. 13. What is dataLayer  …but it looks like GTM overrides the default push() method: @SimoAhava | MeasureCamp V
  14. 14. What is dataLayer  …but it looks like GTM overrides the default push() method:  This does three (visible) things: @SimoAhava | MeasureCamp V
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • ssuser80e36c

    Nov. 9, 2021
  • AmrdeepAthwal

    Jul. 22, 2019
  • tech9uur

    Oct. 14, 2018
  • ArkadiuszMoszczyski

    Jul. 3, 2018
  • MetodiDeribanov

    Jun. 19, 2018
  • youngchoi7127

    Jul. 31, 2017
  • mediaplan

    Mar. 21, 2017
  • MelissaLarson6

    Mar. 8, 2017
  • iancockayne

    Dec. 2, 2016
  • yan4eg

    Oct. 12, 2016
  • ykagal

    May. 25, 2016
  • ssuserb4110b

    Mar. 10, 2016
  • umeshkrishnak

    Mar. 4, 2016
  • volyakostova

    Jan. 11, 2016
  • SunnyBritto

    Sep. 3, 2015
  • sebpujade

    Jun. 12, 2015
  • stevenstadler3

    Jun. 10, 2015
  • amokrushin

    May. 30, 2015
  • AhmedAwwad3

    May. 15, 2015
  • HannahPoferl

    Mar. 15, 2015

Here's the slides from my MeasureCamp presentation on Google Tag Manager, the data layer, and the tool-specific data model. Here's an accompanying blog post as well: http://www.simoahava.com/analytics/google-tag-manager-data-model/

Views

Total views

10,385

On Slideshare

0

From embeds

0

Number of embeds

1,108

Actions

Downloads

195

Shares

0

Comments

0

Likes

42

×