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.

Google Tag Manager Crash Course | MnSummit

843 views

Published on

If you’re a digital marketer, Google Tag Manager is your secret weapon — you just might not know it yet. Join Mike Arnesen of UpBuild and journey from the foundational foothills of GTM essentials all the way to the highest peaks of tag manager innovation (i.e., hackery). We’ll go over everything from understanding the building blocks of GTM and using things like GTM variables to simplify your life all the way to how to push out dynamic structured data to Googlebot and even make indexable changes to your site’s content without ever editing source code. Basically, you’re going to learn how to crush it with GTM like it’s your job.

Published in: Marketing

Google Tag Manager Crash Course | MnSummit

  1. 1. GOOGLE TAG MANAGER ULTIMATE CRASH COURSE #MnSummit @mike_arnesen | upbuild.io
  2. 2. #MnSummit @mike_arnesen | upbuild.io WHO AM I?
  3. 3. #MnSummit @mike_arnesen | upbuild.io — @MIKE_ARNESEN "I’M THAT GUY YOU KNOW FROM THE INTERNET!"
  4. 4. #MnSummit @mike_arnesen | upbuild.io at UpBuild FOUNDER/CEO
  5. 5. #MnSummit @mike_arnesen | upbuild.io at UpBuild FOUNDER/CEO
  6. 6. #MnSummit @mike_arnesen | upbuild.io in the REAL WORLD MASSIVE GEEK
  7. 7. #MnSummit @mike_arnesen | upbuild.io GET THIS DECK BIT.LY/GTM-CRASH-COURSE
  8. 8. CRASH COURSE! THIS WILL BE A #MnSummit @mike_arnesen | upbuild.io
  9. 9. #MnSummit @mike_arnesen | upbuild.io THIS IS A CRASH COURSE IF YOU WANT A BETTER UNDERSTANDING OF THE FUNDAMENTALS, YOU'RE IN THE RIGHT PLACE.
  10. 10. #MnSummit @mike_arnesen | upbuild.io THIS IS A CRASH COURSE IF YOU ALREADY KNOW GTM AND WANT TO LEARN ADVANCED TACTICS, YOU'RE ALSO IN THE RIGHT PLACE.
  11. 11. #MnSummit @mike_arnesen | upbuild.io THIS IS A CRASH COURSE IF YOU'RE HOPING TO LEARN HOW TO DO THINGS YOU DIDN'T EVEN KNOW YOU COULD DO, YOU'RE IN THE RIGHT PLACE!
  12. 12. #MnSummit @mike_arnesen | upbuild.io I WANT YOU TO GET TAKEAWAYS
  13. 13. #MnSummit @mike_arnesen | upbuild.io TAG MANAGEMENT? WHAT IS TAG MANAGEMENT?
  14. 14. #MnSummit @mike_arnesen | upbuild.io TAG MANAGER: A SOLUTION FOR MANAGING WEBSITE TAGS THROUGH A CENTRAL INTERFACE DECOUPLED FROM THE SOURCE CODE OF THE WEBSITE.   * TECHNICAL DEFINITION
  15. 15. #MnSummit @mike_arnesen | upbuild.io TAG MANAGER: A WAY TO ADD CODE TO YOUR THING WITHOUT CHANGING YOUR THING. * SIMPLIFIED DEFINITION
  16. 16. YOUR PORTAL INTO THE SOURCE CODE! #MnSummit @mike_arnesen | upbuild.io
  17. 17. #MnSummit @mike_arnesen | upbuild.io A WARP ZONE TO SKIP THE HARD PARTS!
  18. 18. THE ULTIMATE HACK TO OVERRIDE THE SYSTEM! #MnSummit @mike_arnesen | upbuild.io
  19. 19. #MnSummit @mike_arnesen | upbuild.io BY THE POWER 
 OF GTM ADD, CHANGE, OR REMOVE TAGS What
  20. 20. #MnSummit @mike_arnesen | upbuild.io tagmanager.google.com BY THE POWER 
 OF GTM IN A WEB INTERFACE Where
  21. 21. #MnSummit @mike_arnesen | upbuild.io BY THE POWER 
 OF GTM USING A SMALL SNIPPET OF JAVASCRIPT CODE How
  22. 22. #MnSummit @mike_arnesen | upbuild.io BY THE POWER 
 OF GTM BECAUSE IT SOLVES ALL OUR PROBLEMS! Why?
  23. 23. #MnSummit @mike_arnesen | upbuild.io PROBLEMS? WHAT PROBLEMS?
  24. 24. #MnSummit @mike_arnesen | upbuild.io – Marketing Manager “We love that idea, 
 but realistically it's not going to happen until next quarter. 
 We've run out of development budget."
  25. 25. #MnSummit @mike_arnesen | upbuild.io – Business Owner “I know you checked last week, 
 but our outsourced dev thinks the semantic markup implementation 
 is right this time. Can you check?"
  26. 26. #MnSummit @mike_arnesen | upbuild.io –Director of Marketing “Our new homepage went live 
 this morning and we noticed that analytics stopped working. 
 How hard is that to fix?"
  27. 27. #MnSummit @mike_arnesen | upbuild.io – Marketing Strategist “We need to have this new pop-up asking for donations on our site by the end of the week. 
 I don't think it's going to happen, but do you have any ideas?"
  28. 28. #MnSummit @mike_arnesen | upbuild.io – Marketers “Why is everything on fire?"
  29. 29. #MnSummit @mike_arnesen | upbuild.io – Marketers “Why is everything on fire?"
  30. 30. #MnSummit @mike_arnesen | upbuild.io THE DECK CAN SEEM LIKE IT’S STACKED AGAINST US
  31. 31. #MnSummit @mike_arnesen | upbuild.io THE DECK CAN SEEM LIKE IT’S STACKED AGAINST US WHY MUST LIFE BE SO HARD?!
  32. 32. #MnSummit @mike_arnesen | upbuild.io THE DECK CAN SEEM LIKE IT’S STACKED AGAINST US WHY MUST I FAIL AT EVERY ATTEMPT AT MARKETING?!
  33. 33. #MnSummit @mike_arnesen | upbuild.io GOOGLE TAG MANAGER SOLVES ALL OUR PROBLEMS!*
  34. 34. #MnSummit @mike_arnesen | upbuild.io GOOGLE TAG MANAGER SOLVES ALL OUR PROBLEMS!* * Well, a lot of things
  35. 35. #MnSummit @mike_arnesen | upbuild.io GOOGLE TAG MANAGER SOLVES ALL OUR PROBLEMS!* * Well, a lot of things ** Your mileage may vary
  36. 36. #MnSummit @mike_arnesen | upbuild.io — All of us, I hope "But how?!"
  37. 37. BASIC COMPONENTS OF GTM #MnSummit @mike_arnesen | upbuild.io Tags Triggers Variables
  38. 38. #MnSummit @mike_arnesen | upbuild.io TAGS THE WORKERS, THE MOVERS & SHAKERS, THE STARS OF THE SHOW
  39. 39. #MnSummit @mike_arnesen | upbuild.io TAGS Common Tags • UA Page View — Page View • UA Event Tracking — Events • AdWords — Conversion Tracking • Facebook Pixel — Custom HTML • LinkedIn — Insights • DoubleClick — Floodlight Counter
  40. 40. #MnSummit @mike_arnesen | upbuild.io TRIGGERS EVERY TAG NEEDS A TRIGGER
  41. 41. #MnSummit @mike_arnesen | upbuild.io TRIGGERS Common Triggers • All Pages — on Page View • All Pages — on Window Loaded • Some Pages — Matching Certain Paths • Link Clicks — Matching Certain Attributes • Form Submission — Matching Certain Forms • Custom Event — DataLayer Events
  42. 42. #MnSummit @mike_arnesen | upbuild.io VARIABLES ANY DATA SUBJECT TO CHANGE. MOST TRIGGERS LEVERAGE SOME TYPE OF VARIABLE.
  43. 43. #MnSummit @mike_arnesen | upbuild.io VARIABLES Common Variables • Page Path, URL , & Hostname — Built-Ins • Google Analytics Tracking ID — Constant • Click Classes & Click IDs — Built-In • Click Element — For CSS Selection • Form ID — Built-In • GA Settings — Settings Configuration
  44. 44. BY THE POWER OF JAVASCRIPT #MnSummit @mike_arnesen | upbuild.io
  45. 45. GOOGLE TAG MANAGER IS AN ABSTRACTION OF JAVASCRIPT #MnSummit @mike_arnesen | upbuild.io
  46. 46. #MnSummit @mike_arnesen | upbuild.io FROM GTM INTERFACE Tag Trigger Variable
  47. 47. #MnSummit @mike_arnesen | upbuild.io TO JAVASCRIPT CODE $(document).ready( function() { ga('create', 'UA-XXXXX-Y', 'auto'); ga('send','pageview',
 location.pathname); } ) Tag Trigger Variable Variable
  48. 48. #MnSummit @mike_arnesen | upbuild.io TO JAVASCRIPT CODE $(document).ready( function() { ga('create', 'UA-XXXXX-Y', 'auto'); ga('send','pageview',
 location.pathname); } ) Tag Trigger Variable Variable Sorry, purists. jQuery is way easier to look at.
  49. 49. #MnSummit @mike_arnesen | upbuild.io TO JAVASCRIPT THE CAUSE OF, AND SOLUTION TO, ALL OF LIFE’S PROBLEMS
  50. 50. #MnSummit @mike_arnesen | upbuild.io LIMITATIONS OF GTM IT’S A CLIENT-SIDE APPLICATION
  51. 51. #MnSummit @mike_arnesen | upbuild.io SERVER-SIDE RUNS ON A SERVER BEFORE IT GETS TO THE BROWSER
  52. 52. #MnSummit @mike_arnesen | upbuild.io CLIENT-SIDE RUNS IN A USER’S BROWSER AFTER INITIAL DELIVERY
  53. 53. #MnSummit @mike_arnesen | upbuild.io AJAX Asynchronous JavaScript and XML
  54. 54. #MnSummit @mike_arnesen | upbuild.io AJAX Asynchronous JavaScript and XML JSON!
  55. 55. ENTER, 
 THE DATALAYER #MnSummit @mike_arnesen | upbuild.io
  56. 56. #MnSummit @mike_arnesen | upbuild.io DATALAYER MAKE IMPORTANT DATA AVAILABLE TO YOUR CLIENT-SIDE APPLICATION Server Client DataLayer
  57. 57. #MnSummit @mike_arnesen | upbuild.io DATALAYER SLIDE THINGS THROUGH TO THE OTHER SIDE OF THE BULLETPROOF GLASS Server Client DataLayer
  58. 58. #MnSummit @mike_arnesen | upbuild.io GET THE DATA OUT OF THERE! BECAUSE BEING TRAPPED ON THE WRONG SIDE OF THE GLASS SUCKS
  59. 59. #MnSummit @mike_arnesen | upbuild.io Client THE DATALAYER IS VERSATILE IT CAN BE USED TO PASS DATA FROM THE SERVER THROUGH TO THE CLIENT ServerDataLayer
  60. 60. #MnSummit @mike_arnesen | upbuild.io Client THE DATALAYER IS VERSATILE OR PUSH CLIENT-SIDE DATA INTO AN EASY- TO-ACCESS POCKET ServerDataLayer
  61. 61. #MnSummit @mike_arnesen | upbuild.io DATALAYER BASICS <script>   dataLayer = []; </script> Goes ABOVE your GTM snippet!
  62. 62. #MnSummit @mike_arnesen | upbuild.io DATALAYER BASICS <script>   dataLayer = [{     'userType': 'registered',     'lifetimeValue': 108.00,   }]; </script> Pass through data from your server
  63. 63. #MnSummit @mike_arnesen | upbuild.io DATALAYER BASICS <script>   dataLayer = [{     'userType': 'registered',     'lifetimeValue': 108.00,   }]; </script>
  64. 64. #MnSummit @mike_arnesen | upbuild.io DATALAYER BASICS <script>   dataLayer = [{     'userType': 'registered',     'lifetimeValue': 108.00,   }]; </script>
  65. 65. #MnSummit @mike_arnesen | upbuild.io ADVANCED DATALAYER <script>   dataLayer.push({   'event': 'KPI Event',   'eventCategory': 'nav click',   'eventAction': 'about us' });   </script> Pass in your own data
  66. 66. #MnSummit @mike_arnesen | upbuild.io HOW TO USE GTM LIKE A PRO IMPRESS YOUR COWORKERS
  67. 67. #MnSummit @mike_arnesen | upbuild.io HOW TO USE GTM LIKE A PRO IMPRESS YOUR COWORKERS IMPRESS YOUR FRIENDS
  68. 68. #MnSummit @mike_arnesen | upbuild.io HOW TO USE GTM LIKE A PRO IMPRESS YOUR COWORKERS IMPRESS YOUR FRIENDS IMPRESS YOUR SIGNIFICANT OTHER
  69. 69. #MnSummit @mike_arnesen | upbuild.io MY BEST 
 GTM PRO TIPS
  70. 70. #MnSummit @mike_arnesen | upbuild.io MY BEST GTM PRO TIPS 1. Track Clicks, the basic way 2. Track Clicks, the UpBuild way 3. Page-Level Custom Dimensions 4. Implement JSON-LD, at scale 5. Analyze Form Abandonment 6. VPVs for Single-Page Experiences 7. Make Website Changes, without developers 8. Recruiting Technical Talent, bonus!
  71. 71. #MnSummit @mike_arnesen | upbuild.io MY BEST GTM PRO TIPS 1. Track Clicks, the basic way 2. Track Clicks, the UpBuild way 3. Page-Level Custom Dimensions 4. Implement JSON-LD, at scale 5. Analyze Form Abandonment 6. VPVs for Single-Page Experiences 7. Make Website Changes, without developers 8. Recruiting Technical Talent, bonus!
  72. 72. #MnSummit @mike_arnesen | upbuild.io MY BEST GTM PRO TIPS 1. Track Clicks, the basic way 2. Track Clicks, the UpBuild way 3. Page-Level Custom Dimensions 4. Implement JSON-LD, at scale 5. Analyze Form Abandonment 6. VPVs for Single-Page Experiences 7. Make Website Changes, without developers 8. Recruiting Technical Talent, bonus!
  73. 73. #MnSummit @mike_arnesen | upbuild.io MY BEST GTM PRO TIPS 1. Track Clicks, the basic way 2. Track Clicks, the UpBuild way 3. Page-Level Custom Dimensions 4. Implement JSON-LD, at scale 5. Analyze Form Abandonment 6. VPVs for Single-Page Experiences 7. Make Website Changes, without developers 8. Recruiting Technical Talent, bonus!
  74. 74. #MnSummit @mike_arnesen | upbuild.io MY BEST GTM PRO TIPS 1. Track Clicks, the basic way 2. Track Clicks, the UpBuild way 3. Page-Level Custom Dimensions 4. Implement JSON-LD, at scale 5. Analyze Form Abandonment 6. VPVs for Single-Page Experiences 7. Make Website Changes, without developers 8. Recruiting Technical Talent, bonus!
  75. 75. #MnSummit @mike_arnesen | upbuild.io MY BEST GTM PRO TIPS 1. Track Clicks, the basic way 2. Track Clicks, the UpBuild way 3. Page-Level Custom Dimensions 4. Implement JSON-LD, at scale 5. Analyze Form Abandonment 6. VPVs for Single-Page Experiences 7. Make Website Changes, without developers 8. Recruiting Technical Talent, bonus!
  76. 76. #MnSummit @mike_arnesen | upbuild.io MY BEST GTM PRO TIPS 1. Track Clicks, the basic way 2. Track Clicks, the UpBuild way 3. Page-Level Custom Dimensions 4. Implement JSON-LD, at scale 5. Analyze Form Abandonment 6. VPVs for Single-Page Experiences 7. Make Website Changes, without developers 8. Recruiting Technical Talent, bonus!
  77. 77. #MnSummit @mike_arnesen | upbuild.io MY BEST GTM PRO TIPS 1. Track Clicks, the basic way 2. Track Clicks, the UpBuild way 3. Page-Level Custom Dimensions 4. Implement JSON-LD, at scale 5. Analyze Form Abandonment 6. VPVs for Single-Page Experiences 7. Make Website Changes, without developers 8. Recruiting Technical Talent, bonus!
  78. 78. #MnSummit @mike_arnesen | upbuild.io Goal: Understand which clickable elements get the most (or least) use. Optimize accordingly. TRACK CLICKS
  79. 79. #MnSummit @mike_arnesen | upbuild.io Goal: Understand which clickable elements get the most (or least) use. Optimize accordingly. Approach: Tell GTM to listen for clicks on the elements we care about and then send readable data to Google Analytics. TRACK CLICKS
  80. 80. #MnSummit @mike_arnesen | upbuild.io TRACK CLICKS 1. Enable built-In Variables 2. Create new GA (Universal) Tag 3. Create new Trigger 4. Preview (Test), Submit, & Publish
  81. 81. #MnSummit @mike_arnesen | upbuild.io TRACK CLICKS 1. Enable built-In Variables 2. Create new GA (Universal) Tag 3. Create new Trigger 4. Preview (Test), Submit, & Publish
  82. 82. #MnSummit @mike_arnesen | upbuild.io TRACK CLICKS 1. Enable built-In Variables 2. Create new GA (Universal) Tag 3. Create new Trigger 4. Preview (Test), Submit, & Publish
  83. 83. #MnSummit @mike_arnesen | upbuild.io TRACK CLICKS 1. Enable built-In Variables 2. Create new GA (Universal) Tag 3. Create new Trigger 4. Preview (Test), Submit, & Publish nav > ul > li > a
  84. 84. #MnSummit @mike_arnesen | upbuild.io 1. Enable built-In Variables 2. Create new GA (Universal) Tag 3. Create new Trigger 4. Preview (Test), Submit, & Publish TRACK CLICKS
  85. 85. #MnSummit @mike_arnesen | upbuild.io QUICK TESTING FOR SELECTORS function testSelector (s){ var te = document.querySelectorAll(s), prettyData = "Includes: "; for (var i = 0; i < te.length; i++) { prettyData += te[i].innerHTML + " (Link " + (i+1) + ")"; if (i < te.length-1) { prettyData += ", " } } return prettyData; } 1. Ctrl + Shift + J / Cmd + Option + J in Chrome 2. Copy + Paste 3. type: testSelector('your css'); codepen.io/mike_arnesen/pen/mwMqee/
  86. 86. #MnSummit @mike_arnesen | upbuild.io QUICK TESTING FOR SELECTORS
  87. 87. #MnSummit @mike_arnesen | upbuild.io Goal: Understand which clickable elements get the most (or least) use. Optimize accordingly. TRACK CLICKS The UpBuild Way!
  88. 88. #MnSummit @mike_arnesen | upbuild.io Goal: Understand which clickable elements get the most (or least) use. Optimize accordingly. Approach: Collect the same data, but… TRACK CLICKS The UpBuild Way!
  89. 89. #MnSummit @mike_arnesen | upbuild.io Goal: Understand which clickable elements get the most (or least) use. Optimize accordingly. Approach: Collect the same data, but… A. in the most efficient way possible B. with the fewest GTM tags C. in a way that scales TRACK CLICKS The UpBuild Way!
  90. 90. #MnSummit @mike_arnesen | upbuild.io 1. Create 3 New DataLayer Variables 2. Create a Tag to Send All Event Data 3. Create a Trigger for "KPI Event" 4. Establish an HTML Tag to Manage Click Tracking TRACK CLICKS The UpBuild Way!
  91. 91. #MnSummit @mike_arnesen | upbuild.io 1. Create 3 New DataLayer Variables 2. Create a Tag to Send All Event Data • use {{dataLayer variables}} 3. Create a Trigger for "KPI Event" 4. Establish an HTML Tag to Manage Click Tracking TRACK CLICKS The UpBuild Way!
  92. 92. #MnSummit @mike_arnesen | upbuild.io 1. Create 3 New DataLayer Variables 2. Create a Tag to Send All Event Data 3. Create a Trigger for "KPI Event" 4. Establish an HTML Tag to Manage Click Tracking TRACK CLICKS The UpBuild Way!
  93. 93. #MnSummit @mike_arnesen | upbuild.io 1. Create 3 New DataLayer Variables 2. Create a Tag to Send All Event Data 3. Create a Trigger for "KPI Event" 4. Establish an HTML Tag to Manage Click Tracking TRACK CLICKS The UpBuild Way!
  94. 94. #MnSummit @mike_arnesen | upbuild.io ADVANCED CLICK TRACKING <script> // Primary navigation jQuery("nav > ul > li > a").each(function(index) { jQuery(this).click(function() { dataLayer.push({ 'event': 'KPI Event', 'eventCategory': 'Navigation', 'eventAction': 'Primary Nav Click', 'eventLabel': jQuery("nav > ul > li > a")[index].text.toLowerCase() }); }); }); </script> 1. Find a selector for the tracked element 2. Define your data labeling 3. Use jQuery to build dynamic event values codepen.io/mike_arnesen/pen/OgjOXb
  95. 95. #MnSummit @mike_arnesen | upbuild.io ADVANCED CLICK TRACKING <script> // Dropdown nav items jQuery(".sub-menu > li > a").each(function(index) { jQuery(this).click(function() { dataLayer.push({ 'event': 'KPI Event', 'eventCategory': 'Navigation', 'eventAction': 'Dropdown Nav Click', 'eventLabel': jQuery(".sub-menu > li > a")[index].text.toLowerCase() }); }); }); </script> 4. Add a new block for each KPI group 5. Put everything within one <script> tag. codepen.io/mike_arnesen/pen/OgjOXb
  96. 96. #MnSummit @mike_arnesen | upbuild.io Goal: Enable GA segmentation by page attributes like author, publication month, word count, etc. PAGE-LEVEL CUSTOM DIMENSIONS
  97. 97. #MnSummit @mike_arnesen | upbuild.io Goal: Enable GA segmentation by page attributes like author, publication month, word count, etc. Approach: Use GTM variables to harvest on-page information and pass in back with our analytics page view tag. PAGE-LEVEL CUSTOM DIMENSIONS
  98. 98. #MnSummit @mike_arnesen | upbuild.io 1. Create a New Custom Dimension in GA 2. Create a New "DOM Element" Variable, based on the CSS selector of attribute 3. Update your GA Settings variable to set the Custom Dimension based on the Variable from Step 2 PAGE-LEVEL CUSTOM DIMENSIONS upbuild.io/blog/track-post-publish-date-custom-dimension-google-analytics/
  99. 99. #MnSummit @mike_arnesen | upbuild.io 1. Create a New Custom Dimension in GA 2. Create a New "DOM Element" Variable, based on the CSS selector of attribute 3. Update your GA Settings variable to set the Custom Dimension based on the Variable from Step 2 PAGE-LEVEL CUSTOM DIMENSIONS upbuild.io/blog/track-post-publish-date-custom-dimension-google-analytics/
  100. 100. #MnSummit @mike_arnesen | upbuild.io 1. Create a New Custom Dimension in GA 2. Create a New "DOM Element" Variable, based on the CSS selector of attribute 3. Update your GA Settings variable to set the Custom Dimension based on the Variable from Step 2 PAGE-LEVEL CUSTOM DIMENSIONS upbuild.io/blog/track-post-publish-date-custom-dimension-google-analytics/
  101. 101. #MnSummit @mike_arnesen | upbuild.io Goal: Improve SEO by delivering structured data to Googlebot in JSON-LD format IMPLEMENT JSON-LD
  102. 102. #MnSummit @mike_arnesen | upbuild.io Goal: Improve SEO by delivering structured data to Googlebot in JSON-LD format Approach: Use GTM variables to harvest on-page information (a lot of it), assemble everything in a JSON- LD template, and make available to Google. IMPLEMENT JSON-LD
  103. 103. #MnSummit @mike_arnesen | upbuild.io 1. Map out all the data points you need 2. Create a new "DOM Element" (or "Custom JavaScript") variable for each 3. Get a JSON-LD template from schema.org 4. Replace placeholder values with {{variables}} 5. Place within a <script> that outputs indexable JSON-LD IMPLEMENT JSON-LD moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags
  104. 104. #MnSummit @mike_arnesen | upbuild.io 1. Map out all the data points you need 2. Create a new "DOM Element" (or "Custom JavaScript") variable for each 3. Get a JSON-LD template from schema.org 4. Replace placeholder values with {{variables}} 5. Place within a <script> that outputs indexable JSON-LD IMPLEMENT JSON-LD moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags
  105. 105. #MnSummit @mike_arnesen | upbuild.io 1. Map out all the data points you need 2. Create a new "DOM Element" (or "Custom JavaScript") variable for each 3. Get a JSON-LD template from schema.org 4. Replace placeholder values with {{variables}} 5. Place within a <script> that outputs indexable JSON-LD IMPLEMENT JSON-LD moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags
  106. 106. #MnSummit @mike_arnesen | upbuild.io 1. Map out all the data points you need 2. Create a new "DOM Element" (or "Custom JavaScript") variable for each 3. Get a JSON-LD template from schema.org 4. Replace placeholder values with {{variables}} 5. Place within a <script> that outputs indexable JSON-LD IMPLEMENT JSON-LD moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags
  107. 107. #MnSummit @mike_arnesen | upbuild.io 1. Map out all the data points you need 2. Create a new "DOM Element" (or "Custom JavaScript") variable for each 3. Get a JSON-LD template from schema.org 4. Replace placeholder values with {{variables}} 5. Place within a <script> that outputs indexable JSON-LD IMPLEMENT JSON-LD moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags
  108. 108. #MnSummit @mike_arnesen | upbuild.io 1. Map out all the data points you need 2. Create a new "DOM Element" (or "Custom JavaScript") variable for each 3. Get a JSON-LD template from schema.org 4. Replace placeholder values with {{variables}} 5. Place within a <script> that outputs indexable JSON-LD IMPLEMENT JSON-LD moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags
  109. 109. #MnSummit @mike_arnesen | upbuild.io 6. Get rich snippets! • Take over world. IMPLEMENT JSON-LD moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags
  110. 110. #MnSummit @mike_arnesen | upbuild.io Goal: Understand when users stop filling out forms to improve form fill conversion rate. FORM ABANDONMENT
  111. 111. #MnSummit @mike_arnesen | upbuild.io Goal: Understand when users stop filling out forms to improve form fill conversion rate. Approach: Use GTM to deliver JavaScript that will progressively log interactions and, upon abandonment, send a record to GA. FORM ABANDONMENT
  112. 112. #MnSummit @mike_arnesen | upbuild.io 1. Modify the sample script 2. Create a new analytics tag in GTM 3. Create three new DataLayer variables FORM ABANDONMENT
  113. 113. #MnSummit @mike_arnesen | upbuild.io 1. Modify the sample script 2. Create a new analytics tag in GTM 3. Create three new DataLayer variables FORM ABANDONMENT
  114. 114. #MnSummit @mike_arnesen | upbuild.io 1. Modify the sample script 2. Create a new analytics tag in GTM 3. Create three new DataLayer variables FORM ABANDONMENT
  115. 115. #MnSummit @mike_arnesen | upbuild.io 1. Modify the sample script 2. Create a new analytics tag in GTM 3. Create three new DataLayer variables 4. Use your existing Click Tracking tag & DataLayer variables FORM ABANDONMENT
  116. 116. #MnSummit @mike_arnesen | upbuild.io 1. Modify the sample script 2. Create a new analytics tag in GTM 3. Create three new DataLayer variables 4. Use your existing Click Tracking tag & DataLayer variables FORM ABANDONMENT Learn more JavaScript!
  117. 117. #MnSummit @mike_arnesen | upbuild.io FORM ABANDONMENT <script> var formSelector = "#wpcf7-f511-p15-o1 > form"; var submitSelector = ".wpcf7-submit"; var formInteractions = []; var attribute = "name"; var pagePath = window.location.pathname; ... 1. Specify your form selector 2. Specify a submit selector 3. Specify the attr you want as a label codepen.io/mike_arnesen/pen/gRxorv
  118. 118. #MnSummit @mike_arnesen | upbuild.io FORM ABANDONMENT ... document.querySelector(formSelector).addEv entListener("change", function(e) { var input = e["target"].getAttribute(attribute); if (formInteractions[i] !== input) { formInteractions.push(input); } }); ... 4. This listens for changes to the form 5. Each change is stored in "formInteractions" codepen.io/mike_arnesen/pen/gRxorv
  119. 119. #MnSummit @mike_arnesen | upbuild.io FORM ABANDONMENT ... function pushToDataLayer(cause, formInteractions) { var prettyPath; if (formInteractions == "") { prettyPath = "Nothing set"; } else { prettyPath = formInteractions.join(" > "); }; dataLayer.push({ event: "KPI Event", eventCategory: "Form Abandon Contact Us", eventAction: prettyPath, eventLabel: "form abandoned on " + pagePath + " triggered by " + cause }); } ... 6. This lets you push all interactions to the dataLayer 7. Change "eventCategory" to suit your needs codepen.io/mike_arnesen/pen/gRxorv
  120. 120. #MnSummit @mike_arnesen | upbuild.io FORM ABANDONMENT ... jQuery(window).on('beforeunload', function(){ pushToDataLayer("page bounce", formInteractions); }); ... 8. Before anyone leaves, call pushToDataLayer function (previous slide) 9. You can provide a custom "cause" codepen.io/mike_arnesen/pen/gRxorv
  121. 121. #MnSummit @mike_arnesen | upbuild.io FORM ABANDONMENT ... jQuery("submitSelector").on("click", function(){ jQuery(window).off('beforeunload'); }); </script> 10. On submission, remove abandonment monitoring codepen.io/mike_arnesen/pen/gRxorv
  122. 122. #MnSummit @mike_arnesen | upbuild.io Goal: Define checkpoints in single-page experiences (e.g., one-page checkout, configurators, wizards, long forms) to understand how they perform. VIRTUAL PAGE VIEWS
  123. 123. #MnSummit @mike_arnesen | upbuild.io Goal: Define checkpoints in single-page experiences (e.g., one-page checkout, configurators, wizards, long forms) to understand how they perform. Approach: Use GTM to sent page view info to the dataLayer, fire a dedicated VPV tag to send info to GA as pageviews, and set up a traditional GA goal funnel for analysis. VIRTUAL PAGE VIEWS
  124. 124. #MnSummit @mike_arnesen | upbuild.io VIRTUAL PAGE VIEWS 1. Break the process into defined steps. Decide on virtual titles & URLs 2. Set up the goal in GA 3. Create 2 new "DataLayer" variables (pagePath & pageTitle) 4. Build new Config variable for VPVs 5. Set up a VPV Analytics Tag 6. Deploy JS that attaches handlers to the breakpoints and pushes to the dataLayer.
  125. 125. #MnSummit @mike_arnesen | upbuild.io VIRTUAL PAGE VIEWS 1. Break the process into defined steps. Decide on virtual titles & URLs 2. Set up the goal in GA 3. Create 2 new "DataLayer" variables (pagePath & pageTitle) 4. Build new Config variable for VPVs 5. Set up a VPV Analytics Tag 6. Deploy JS that attaches handlers to the breakpoints and pushes to the dataLayer.
  126. 126. #MnSummit @mike_arnesen | upbuild.io 1. Break the process into defined steps. Decide on virtual titles & URLs 2. Set up the goal in GA 3. Create 2 new "DataLayer" variables (pagePath & pageTitle) 4. Build new Config variable for VPVs 5. Set up a VPV Analytics Tag 6. Deploy JS that attaches handlers to the breakpoints and pushes to the dataLayer. VIRTUAL PAGE VIEWS
  127. 127. #MnSummit @mike_arnesen | upbuild.io 1. Break the process into defined steps. Decide on virtual titles & URLs 2. Set up the goal in GA 3. Create 2 new "DataLayer" variables (pagePath & pageTitle) 4. Build new Config variable for VPVs 5. Set up a VPV Analytics Tag 6. Deploy JS that attaches handlers to the breakpoints and pushes to the dataLayer. VIRTUAL PAGE VIEWS
  128. 128. #MnSummit @mike_arnesen | upbuild.io 1. Break the process into defined steps. Decide on virtual titles & URLs 2. Set up the goal in GA 3. Create 2 new "DataLayer" variables (pagePath & pageTitle) 4. Build new Config variable for VPVs 5. Set up a VPV Analytics Tag 6. Deploy JS that attaches handlers to the breakpoints and pushes to the dataLayer. VIRTUAL PAGE VIEWS
  129. 129. #MnSummit @mike_arnesen | upbuild.io 1. Break the process into defined steps. Decide on virtual titles & URLs 2. Set up the goal in GA 3. Create 2 new "DataLayer" variables (pagePath & pageTitle) 4. Build new Config variable for VPVs 5. Set up a VPV Analytics Tag 6. Deploy JS that attaches handlers to the breakpoints and pushes to the dataLayer VIRTUAL PAGE VIEWS
  130. 130. #MnSummit @mike_arnesen | upbuild.io VPV TRACKING <script> var vpvData = [ {selector: "#serviceneed > input[type='submit']", title: "Create a Project Form - Step 1", path: "/vpv/create-project/step-01/"}, {selector: "#gform_next_button_1_27", title: "Create a Project Form - Step 2", path: "/vpv/create-project/step-02/"}, {selector: "#gform_next_button_1_28", title: "Create a Project Form - Step 3", path: "/vpv/create-project/step-03/"} ]; ... 1. Define three things for each virtual step • Selector for click activation, Virtual title, Virtual page path codepen.io/mike_arnesen/pen/GEvgww
  131. 131. #MnSummit @mike_arnesen | upbuild.io VPV TRACKING ... function pushToDataLayer(i) { dataLayer.push({ event: "vpv", pageTitle: vpvData[i].title, pagePath: vpvData[i].path }); }
 ... 2. Write another pushToDataLayer function codepen.io/mike_arnesen/pen/GEvgww
  132. 132. #MnSummit @mike_arnesen | upbuild.io VPV TRACKING ... jQuery(vpvData[0].selector).click(function (){ pushToDataLayer(0); }); jQuery(vpvData[1].selector).click(function (){ pushToDataLayer(1); }); jQuery(vpvData[2].selector).click(function (){ pushToDataLayer(2); })
 ... 3. Do this for as many steps as you have, starting at zero. codepen.io/mike_arnesen/pen/GEvgww
  133. 133. #MnSummit @mike_arnesen | upbuild.io Goal: Make updates to the website without having to wait for developers or use budget prematurely. UPDATE YOUR WEBSITE
  134. 134. #MnSummit @mike_arnesen | upbuild.io Goal: Make updates to the website without having to wait for developers or use budget prematurely. Approach: Use GTM to deliver a custom HTML tag containing site- modifying JavaScript to update the site as the page loads. UPDATE YOUR WEBSITE
  135. 135. #MnSummit @mike_arnesen | upbuild.io Goal: Make updates to the website without having to wait for developers or use budget prematurely. Approach: Use GTM to deliver a custom HTML tag containing site- modifying JavaScript to update the site as the page loads. UPDATE YOUR WEBSITE These changes are indexable!*
  136. 136. #MnSummit @mike_arnesen | upbuild.io Goal: Make updates to the website without having to wait for developers or use budget prematurely. Approach: Use GTM to deliver a custom HTML tag containing site- modifying JavaScript to update the site as the page loads. UPDATE YOUR WEBSITE These changes are indexable!* * usually
  137. 137. #MnSummit @mike_arnesen | upbuild.io Goal: Make updates to the website without having to wait for developers or use budget prematurely. Approach: Use GTM to deliver a custom HTML tag containing site- modifying JavaScript to update the site as the page loads. UPDATE YOUR WEBSITE These changes are indexable!* * usually ** your mileage may vary
  138. 138. #MnSummit @mike_arnesen | upbuild.io Goal: Make updates to the website without having to wait for developers or use budget prematurely. Approach: Use GTM to deliver a custom HTML tag containing site- modifying JavaScript to update the site as the page loads. UPDATE YOUR WEBSITE These changes are indexable!* * usually ** your mileage may vary *** a lot.
  139. 139. #MnSummit @mike_arnesen | upbuild.io 1. Write your HTML and CSS 2. Determine where you want it on the page & find a CSS selector for that spot 3. Remove line breaks from your new code at http://removelinebreaks.net/ 4. Deliver another <script> via a GTM HTML tag on applicable pages UPDATE YOUR WEBSITE
  140. 140. #MnSummit @mike_arnesen | upbuild.io 1. Write your HTML and CSS 2. Determine where you want it on the page & find a CSS selector for that spot 3. Remove line breaks from your new code at http://removelinebreaks.net/ 4. Deliver another <script> via a GTM HTML tag on applicable pages UPDATE YOUR WEBSITE #about > .col > .vc_col-sm-6:first
  141. 141. #MnSummit @mike_arnesen | upbuild.io 1. Write your HTML and CSS 2. Determine where you want it on the page & find a CSS selector for that spot 3. Remove line breaks from your new code at http://removelinebreaks.net/ 4. Deliver another <script> via a GTM HTML tag on applicable pages UPDATE YOUR WEBSITE
  142. 142. #MnSummit @mike_arnesen | upbuild.io 1. Write your HTML and CSS 2. Determine where you want it on the page & find a CSS selector for that spot 3. Remove line breaks from your new code at http://removelinebreaks.net/ 4. Use a <script> to combine your selector with .append() or .prepend() on applicable pages UPDATE YOUR WEBSITE
  143. 143. #MnSummit @mike_arnesen | upbuild.io CHANGE PAGE CONTENT jQuery(yourSelector).prepend('<h 1 id="awesomeHeading">How do we not have an H1 yet?</h1>'); Definitely this easy. ;-) codepen.io/mike_arnesen/pen/GEvyYX
  144. 144. #MnSummit @mike_arnesen | upbuild.io Goal: Bury some treasure for those who might come looking. Encourage them to apply within. GEEKY RECRUITING
  145. 145. #MnSummit @mike_arnesen | upbuild.io Goal: Bury some treasure for those who might come looking. Encourage them to apply within. GEEKY RECRUITING Approach: Use GTM to print out a message in the developer console and link to our jobs page.
  146. 146. #MnSummit @mike_arnesen | upbuild.io 1. Come up with your message 2. Format according to these specs 3. Test in your own console 4. Deploy as a custom tag through GTM 5. Wait for awesome applicants to come knocking GEEKY RECRUITING
  147. 147. #MnSummit @mike_arnesen | upbuild.io 1. Come up with your message 2. Format according to these specs 3. Test in your own console 4. Deploy as a custom tag through GTM 5. Wait for awesome applicants to come knocking GEEKY RECRUITING
  148. 148. #MnSummit @mike_arnesen | upbuild.io 1. Come up with your message 2. Format according to these specs 3. Test in your own console 4. Deploy as a custom tag through GTM 5. Wait for awesome applicants to come knocking GEEKY RECRUITING
  149. 149. #MnSummit @mike_arnesen | upbuild.io 1. Come up with your message 2. Format according to Chrome’s specs 3. Test in your own console 4. Deploy as a custom tag through GTM 5. Wait for awesome applicants to come knocking GEEKY RECRUITING
  150. 150. #MnSummit @mike_arnesen | upbuild.io 1. Come up with your message 2. Format according to Chrome’s specs 3. Test in your own console 4. Deploy as a custom tag through GTM 5. Wait for awesome applicants to come knocking GEEKY RECRUITING
  151. 151. #MnSummit @mike_arnesen | upbuild.io PRINT CONSOLE MESSAGES console.info( "%cOne of us!! n%cIt looks like you love poking around in the console. Us, too!…", "color: blue; font-size: 25px;text-transform: uppercase;", "color: green; font-size: 12px;" ); codepen.io/mike_arnesen/pen/owepqe
  152. 152. PARTING THOUGHTS AS WE WRAP UP #MnSummit @mike_arnesen | upbuild.io
  153. 153. #MnSummit @mike_arnesen | upbuild.io TACKLE ANY GTM CHALLENGE 1. Define the goal first 2. Determine where in GA you want data to go 3. Establish a data-labeling convention 4. Understand the available components & functions 5. Test, fail, learn, repeat 6. Learn more JavaScript
  154. 154. #MnSummit @mike_arnesen | upbuild.io TROUBLESHOOT ANYTHING IN GTM 1. Use preview mode liberally 2. Run your code in the dev tools console 3. Is the tag firing too soon or too late? 4. Read blog posts and comment with questions 5. When all else fails, StackOverflow
  155. 155. #MnSummit @mike_arnesen | upbuild.io QUICK TIPS & TOOLS 1. Cmd + Click to follow links without leaving the page 2. Use GTM Injector to access preview mode without having a container live on the site 3. Use GTM Sonar to see how/if clicks & forms register 4. Scroll Depth Tracking by Parsnip.co 5. YouTube Tracking on Cardinal Path
  156. 156. #MnSummit @mike_arnesen | upbuild.io DIG DEEPER 1. Google Tag Manager Fundamentals 2. Simo Ahava’s Blog 3. UpBuild’s Blog 4. MeasureSchool on YouTube
  157. 157. #MnSummit @mike_arnesen | upbuild.io THANK YOU! GET THIS DECK: BIT.LY/GTM-CRASH-COURSE READ OUR BLOG: UPBUILD.IO/BLOG FOLLOW ME: @MIKE_ARNESEN | MIKEARNESEN.COM

×