www.ivantage.co.uk
1
Google	
  Tag	
  Manager	
  101
Matt	
  Trimmer
Principal	
  Consultant	
  &	
  Managing	
  Director
...
www.ivantage.co.uk
2
slideshare.net/ivantage
Friday, 26 June 15
3
www.ivantage.co.uk
4
Timings and housekeeping
• Start 9:30
• Break 11:00-11:15
• Lunch 12:45-13:45
• Break 14:45-15:00
•...
4
www.ivantage.co.uk
2
Training
• Analytics 101: Introduction & User Training
• Analytics 201: Advanced Analysis & Measure...
5
www.ivantage.co.uk
9
Be social
• Say hello to your neighbour!
• Google+
• https://plus.google.com/118368778596879435387/...
6
www.ivantage.co.uk
9
Agenda
• Agenda and introductions
• GTM history, components and architecture
• Creating an account ...
www.ivantage.co.uk
7
Introductions
• First
• Me	
  (Matt	
  Trimmer)	
  &	
  ivantage	
  overview
• In	
  a	
  moment
• Yo...
www.ivantage.co.uk
8
Me
• Founder,	
  Principal	
  Consultant	
  and	
  Managing	
  Director	
  of	
  
ivantage
• Love	
  ...
9
www.ivantage.co.uk
2
About ivantage
• Internet marketing agency
• Established in 2002
• Independent
• 44th Ranked UK Age...
www.ivantage.co.uk
10
Introductions	
  –	
  your	
  turn!
• You
• Your	
  role
• Your	
  department/website/website	
  are...
www.ivantage.co.uk
11
Google	
  Tag	
  Manager
• Launched	
  October	
  2012
• Basic	
  JavaScript	
  tag	
  management
• ...
www.ivantage.co.uk
12
Google	
  Tag	
  Manager	
  documentation
• Release	
  notes
• https://support.google.com/tagmanager...
13
www.ivantage.co.uk
24
Components
• Container Tag
• Asynchronous loading of all tags within it
• No dependency
• Cannot ...
14
www.ivantage.co.uk
24
Installing the container
• Exercise
• Create a Google Tag Manger account
• Old UI
• google.com/ta...
15
www.ivantage.co.uk
24
Adding users
• Exercise
• Add me to yours
• I’ll add you to mine
• Workflow is not yet available
...
16
www.ivantage.co.uk
24
Let’s add some tags!
• Exercise to add some GA tags
• Use Ghostery
• Google Tag Assist
• Google C...
17
www.ivantage.co.uk
24
GTM UI structure
• Tags
• The actual JavaScript that will execute
• Rules (Triggers)
• The reason...
18
www.ivantage.co.uk
24
JavaScript
• The triad of web technologies
• HTML to specify content of web pages
• CSS to specif...
19
www.ivantage.co.uk
24
JavaScript hierarchy and components
• Window (or frame)
• The window or tab in the browser
• Docu...
20
www.ivantage.co.uk
24
Document elements
• Elements
• <a id="blog link" href="blog.html">Blog Page</a>
• Tag Name
• <a>
...
21
www.ivantage.co.uk
24
JavaScript event handlers
• Allow scripts to specify behavior when user events occur
• JavaScript...
22
www.ivantage.co.uk
24
GTM’s auto-event listeners
• Listen out for behavior in the DOM
• In order for rules to be evalua...
23
www.ivantage.co.uk
24
GTM’s dataLayer
• See it load in the Chrome console
• Four components
• Specific values set
• gtm...
24
www.ivantage.co.uk
24
Timer listener
• When this tag is fired, Google Tag Manager starts a countdown timer
that fires a...
25
www.ivantage.co.uk
24
History listener
• This tag will listen for changes to the page's history. These History
events t...
26
www.ivantage.co.uk
24
JavaScript error listeners
• When this tag is fired, Google Tag Manager will listen for uncaught
...
27
www.ivantage.co.uk
24
Let’s add some event listeners
• Exercise to add event listeners
• Add the listener
• Define a ta...
28
www.ivantage.co.uk
24
Auto-event macros (Variables)
• Standard auto-event macros
• element
• element classes
• element ...
29
www.ivantage.co.uk
24
Other macros (variables)
• Standard other macros
• 1st Party Cookie
• Constant String
• Container...
30
www.ivantage.co.uk
24
DOM Element ID - example 1
• Given a link element on a page
• <a id="blog link" href="blog.html">...
31
www.ivantage.co.uk
24
DOM Element ID - example 2
• Given a link element on a page
• <a id="blog link" href="blog.html">...
32
www.ivantage.co.uk
24
DOM Element CSS Selector- example 1
• Given a link element on a page
• <h1>E-commerce Promotions<...
33
www.ivantage.co.uk
24
DOM Element CSS Selector- example 2
• Given a link element on a page
• <iframe width="640" height...
34
www.ivantage.co.uk
24
Other event listeners (non standard)
• You Tube Video Tracking
• http://www.cardinalpath.com/yout...
www.ivantage.co.uk
35
Getting	
  help
• support@ivantage.co.uk	
  for	
  	
  60	
  days
• Google	
  Analytics	
  Support	
...
www.ivantage.co.uk
36
Feedback
• http://www.ivantage.co.uk/feedback
• support@ivantage.co.uk
• Write	
  an	
  honest,	
  c...
www.ivantage.co.uk
37
Break	
  time
http://www.slideshare.net/ivantage
Friday, 26 June 15
www.ivantage.co.uk
38
Lunch	
  time
Friday, 26 June 15
www.ivantage.co.uk
39
Break	
  time
Friday, 26 June 15
Upcoming SlideShare
Loading in...5
×

Google tag manager 101

2,436

Published on

Published in: Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,436
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
119
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Google tag manager 101

  1. 1. www.ivantage.co.uk 1 Google  Tag  Manager  101 Matt  Trimmer Principal  Consultant  &  Managing  Director Slides: http://www.slideshare.net/ivantage WIFI: SSID: ITTRH Password: welcome1 Friday, 26 June 15
  2. 2. www.ivantage.co.uk 2 slideshare.net/ivantage Friday, 26 June 15
  3. 3. 3 www.ivantage.co.uk 4 Timings and housekeeping • Start 9:30 • Break 11:00-11:15 • Lunch 12:45-13:45 • Break 14:45-15:00 • Wrap-up 16:00 • Nearest fire exit • Toilets • Please ask questions! Friday, 26 June 15
  4. 4. 4 www.ivantage.co.uk 2 Training • Analytics 101: Introduction & User Training • Analytics 201: Advanced Analysis & Measurement • Analytics 202: Advanced Analysis & Measurement • Analytics 301: Advanced Tracking & Technical Implementations • AdWords 101: Introduction to Paid Search Management • AdWords 201: Building Profitable Paid Search Campaigns • AdWords 301: Advanced AdWords Optimisation Techniques • AdWords 302: Advanced AdWords Conversion Optimisation • Tag Manager 101 • SEO Essentials - On-page • SEO Advanced - Link Building and Publicity Friday, 26 June 15
  5. 5. 5 www.ivantage.co.uk 9 Be social • Say hello to your neighbour! • Google+ • https://plus.google.com/118368778596879435387/posts • LinkedIn • http://www.linkedin.com/in/matttrimmer • Twitter • #measure • #googleanalytics • @googleanalytics Friday, 26 June 15
  6. 6. 6 www.ivantage.co.uk 9 Agenda • Agenda and introductions • GTM history, components and architecture • Creating an account and installing the GTM container • Adding and managing users • Deploying, testing and managing basic tags • Tools and processes for debugging basic tags • JavaScript history, structure and components • JavaScript and HTML elements • JavaScript and event handlers • GTM auto-event listeners • The GTM data layer and loading priority • Deploying, testing and managing auto-event tags Friday, 26 June 15
  7. 7. www.ivantage.co.uk 7 Introductions • First • Me  (Matt  Trimmer)  &  ivantage  overview • In  a  moment • You • Your  role • Your  department/website/website  area • Your  objectives  for  attending  today Friday, 26 June 15
  8. 8. www.ivantage.co.uk 8 Me • Founder,  Principal  Consultant  and  Managing  Director  of   ivantage • Love  the  Internet,  23  years  IT,  technical  experience,  14   years  Internet   • One  of  15  Google  Accredited  Seminar  Leaders  Globally Friday, 26 June 15
  9. 9. 9 www.ivantage.co.uk 2 About ivantage • Internet marketing agency • Established in 2002 • Independent • 44th Ranked UK Agency according to New Media Age rankings Friday, 26 June 15
  10. 10. www.ivantage.co.uk 10 Introductions  –  your  turn! • You • Your  role • Your  department/website/website  area • Your  objectives  for  attending  today • Experience  with  GTM? • Plans  for  upgrading  GA  to  UA? • Other  Tags? Friday, 26 June 15
  11. 11. www.ivantage.co.uk 11 Google  Tag  Manager • Launched  October  2012 • Basic  JavaScript  tag  management • Auto-­‐event  tracking  -­‐  October  2013 • JavaScript  event  listener • More  powerful  possibilities • Version  2    (Forced  Migration,  June  1st  2015) • Much  easier  to  use? • Easier  to  configure? • Terminology  change • No  need  to  configure  event  listeners  -­‐  already  on • Built  in  variables  -­‐  need  to  make  available • Every  trigger  has  an  associated  event Friday, 26 June 15
  12. 12. www.ivantage.co.uk 12 Google  Tag  Manager  documentation • Release  notes • https://support.google.com/tagmanager/answer/4620708? hl=en-­‐GB • Developer  guide • https://developers.google.com/tag-­‐manager/ • Help  center • https://support.google.com/tagmanager/?hl=en-­‐ GB#topic=3441530 • Product  site • http://www.google.com/tagmanager/ Friday, 26 June 15
  13. 13. 13 www.ivantage.co.uk 24 Components • Container Tag • Asynchronous loading of all tags within it • No dependency • Cannot control order that tags will fire • Speeds up JavaScript execution • DataLayer • Work surface where jobs are queued Friday, 26 June 15
  14. 14. 14 www.ivantage.co.uk 24 Installing the container • Exercise • Create a Google Tag Manger account • Old UI • google.com/tagmanager • New UI • tagmanager.google.com/ • Look at the container tag • Container components • No script tag for non-JavaScript • Unique ID • Reference to the data layer • Name can be changed • Deploy after first <body> tag Friday, 26 June 15
  15. 15. 15 www.ivantage.co.uk 24 Adding users • Exercise • Add me to yours • I’ll add you to mine • Workflow is not yet available • Two step authentication is (Google Account) Friday, 26 June 15
  16. 16. 16 www.ivantage.co.uk 24 Let’s add some tags! • Exercise to add some GA tags • Use Ghostery • Google Tag Assist • Google Chrome Debugger • Preview and Debug • GTM Debugger Friday, 26 June 15
  17. 17. 17 www.ivantage.co.uk 24 GTM UI structure • Tags • The actual JavaScript that will execute • Rules (Triggers) • The reason tags fire (execute) • Macros (Variables) • Data available from GTM’s dataLayer Friday, 26 June 15
  18. 18. 18 www.ivantage.co.uk 24 JavaScript • The triad of web technologies • HTML to specify content of web pages • CSS to specify presentation of web pages • JavaScript to specify behavior of web pages • Turns HTML documents into interactive applications • All modern web browsers include a JS interpreter • Created by Netscape • Formally called ECMAScript • Current standard is 3 • 5 is also being implemented by browsers • JavaScript implemented in HTML • Executes client-side, in the browser • Using <script> tags Friday, 26 June 15
  19. 19. 19 www.ivantage.co.uk 24 JavaScript hierarchy and components • Window (or frame) • The window or tab in the browser • Document (Document Object Model - DOM) • The document in the browser tab • Methods • getElementByID() • getElementsByTagName() • Document elements • <html>,<head>,<body> • Pair of open/close pair of HTML tags • <a id="blog link" href="blog.html">Blog Page</a> • Elements • Tag Name • Attributes • May have an ID • Some have a Name • CSS Class • CSS selector Friday, 26 June 15
  20. 20. 20 www.ivantage.co.uk 24 Document elements • Elements • <a id="blog link" href="blog.html">Blog Page</a> • Tag Name • <a> • Attributes • id, href • May have an ID • “blog link” • Some have a Name • <form method="post" name="simple goal" action="contact- thanks.asp"> • CSS Class or CSS selector • <li class="title">Sub Navigation</li> Friday, 26 June 15
  21. 21. 21 www.ivantage.co.uk 24 JavaScript event handlers • Allow scripts to specify behavior when user events occur • JavaScript programs do something in response to these events Friday, 26 June 15
  22. 22. 22 www.ivantage.co.uk 24 GTM’s auto-event listeners • Listen out for behavior in the DOM • In order for rules to be evaluated and tags fired • Click Listener • Google Tag Manager event gtm.click is generated • Link Click Listener • Google Tag Manager event gtm.linkClick is generated • Form Submit Listener • Google Tag Manager event gtm.formSubmit is generated • Timer Listener • Custom event is generated • History Listener • Google Tag Manager event gtm.historyChange is generated • JavaScript Error Listener • Google Tag Manager event gtm.pageError is generated Friday, 26 June 15
  23. 23. 23 www.ivantage.co.uk 24 GTM’s dataLayer • See it load in the Chrome console • Four components • Specific values set • gtm.js • gtm.dom • gtm.load • Work surface where jobs are queued Friday, 26 June 15
  24. 24. 24 www.ivantage.co.uk 24 Timer listener • When this tag is fired, Google Tag Manager starts a countdown timer that fires an event at the Interval (in milliseconds) that you specify. An Interval of 5000 will fire an event every five seconds. • The name of the event is whatever name you specify in Event Name Friday, 26 June 15
  25. 25. 25 www.ivantage.co.uk 24 History listener • This tag will listen for changes to the page's history. These History events typically happen when the URL fragment (hash) changes in an Ajax app, or when a site is using the HTML5 push-state APIs. • This event listener is useful for tracking virtual pageviews. • When a history event occurs, this tag will push the following message onto the data layer: Friday, 26 June 15
  26. 26. 26 www.ivantage.co.uk 24 JavaScript error listeners • When this tag is fired, Google Tag Manager will listen for uncaught JavaScript exceptions. When one of these exceptions occurs, it will push an object onto the Data Layer with key value pairs describing the error. • The following table describes each key available from a JavaScript Error Listener event: Friday, 26 June 15
  27. 27. 27 www.ivantage.co.uk 24 Let’s add some event listeners • Exercise to add event listeners • Add the listener • Define a tag • Use alerts to understand the dataLayer values • Define a rule triggering from the event • Define a rule triggering from the event and a condition under which the tag will fire • Use the dataLayer to name a Google Analytics Event Friday, 26 June 15
  28. 28. 28 www.ivantage.co.uk 24 Auto-event macros (Variables) • Standard auto-event macros • element • element classes • element id • element target • element text • element url • event • history change source • history new state • history new url fragment • history old state • history old url fragment • referrer • url • url hostname • url path Friday, 26 June 15
  29. 29. 29 www.ivantage.co.uk 24 Other macros (variables) • Standard other macros • 1st Party Cookie • Constant String • Container Version Number • Custom Event • Custom JavaScript • DOM Element ID Attribute Value • DOM Element ID Text Value • Data Layer Variable • Debug Mode • HTTP Referrer • JavaScript Value • Lookup Table • Random Number • URL Friday, 26 June 15
  30. 30. 30 www.ivantage.co.uk 24 DOM Element ID - example 1 • Given a link element on a page • <a id="blog link" href="blog.html">Blog Page</a> • iv DOM Element ID Text Value= Blog Page • Text value retrieved Friday, 26 June 15
  31. 31. 31 www.ivantage.co.uk 24 DOM Element ID - example 2 • Given a link element on a page • <a id="blog link" href="blog.html">Blog Page</a> • iv DOM Element ID Attribute Value= blog.html • Attribute retrieved Friday, 26 June 15
  32. 32. 32 www.ivantage.co.uk 24 DOM Element CSS Selector- example 1 • Given a link element on a page • <h1>E-commerce Promotions</h1> • iv DOM Element CSS Selector= E-COMMERCE PROMOTIONS • Text value retrieved Friday, 26 June 15
  33. 33. 33 www.ivantage.co.uk 24 DOM Element CSS Selector- example 2 • Given a link element on a page • <iframe width="640" height="360" src="// www.youtube.com/embed/eUagcqLLrKQ? feature=player_embedded&enablejsapi=1” frameborder="0" allowfullscreen></iframe> • iv DOM Element CSS Selector Attribute Name= // www.youtube.com/embed/eUagcqLLrKQ? feature=player_embedded&enablejsapi=1Ó frameborder= • Attribute retrieved Friday, 26 June 15
  34. 34. 34 www.ivantage.co.uk 24 Other event listeners (non standard) • You Tube Video Tracking • http://www.cardinalpath.com/youtube-video-tracking-with-gtm- and-ua-a-step-by-step-guide/ • Page Scroll Depth • http://andygibson.us/2013/10/track-scroll-depth-using-google- tag-manager/ • Drop down change tracking • http://www.conversionworks.co.uk/blog/2013/12/13/extending- auto-event-tracking-in-google-tag-manager/ • Hovers over an Element • http://www.lunametrics.com/blog/2013/12/12/track-hover- events-google-tag-manager/#sr=g&m=o&cp=or&ct=- tmc&st=(opu%20qspwjefe)&ts=1422020346 Friday, 26 June 15
  35. 35. www.ivantage.co.uk 35 Getting  help • support@ivantage.co.uk  for    60  days • Google  Analytics  Support  (http://www.google.com/analytics/support.html) • Setup  Checklist • http://www.google.com/analytics/discover_analytics.html • Help  Center • http://www.google.com/support/analytics/?hl=en • User  Forums • http://www.google.com/support/forum/p/Google+Analytics/?hl=en • Google  Code • http://code.google.com/intl/en/apis/analytics/ • Google  Analytics  blog • http://analytics.blogspot.com/ Friday, 26 June 15
  36. 36. www.ivantage.co.uk 36 Feedback • http://www.ivantage.co.uk/feedback • support@ivantage.co.uk • Write  an  honest,  considered  and  fair  review  to  receive  for  each  day  attended: Friday, 26 June 15
  37. 37. www.ivantage.co.uk 37 Break  time http://www.slideshare.net/ivantage Friday, 26 June 15
  38. 38. www.ivantage.co.uk 38 Lunch  time Friday, 26 June 15
  39. 39. www.ivantage.co.uk 39 Break  time Friday, 26 June 15
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×