#GoogleTagManager101	@ivantage	with	@matt_trimmer
1
WIFI:
SSID: TOG5
Password: TOGether
Matt Trimmer
Principal Consultant ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
2
slideshare.net/ivantage
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
3
Timings and housekeeping
• Start 9:30
• Break 11:00-11:15
• Lunch 12:4...
#GoogleAnalytics202	@ivantage	with	@matt_trimmer
4
Google Analytics & Tag Manager curriculum
• Google Analytics 101 - Fund...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
5
Be social
• Say hello to your neighbour!
• Google+
• https://plus.goog...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
6
Session 1 - Architecture, implementation,
understanding the user inter...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
7
Session 2 - JavaScript, event listeners,
variables and tracking websit...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
8
Session 3 - More listeners, variables and
tracking website interaction...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
9
Session 4 - Extending GTM with additional
variables, pushes, custom ev...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
10
Introductions
• First
• Me (Matt Trimmer) & ivantage overview
• In a ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
11
Me
• Founder, Principal Consultant and Managing
Director of ivantage
...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
12
Introductions – your turn!
• You
• Your role
• Your department/websit...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
13
What is a tag?
• Google’s definition:
“Tags are tiny bits of website c...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
14
What do tags do?
• Help you measure
• Users, Sessions, Time on Site, ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
15
How do tags work?
• By sending data to your systems
• Eg, your CRM sy...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
16
Why manage tags?
• IT department’s responsibility is to keep your
web...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
17
So true?
• https://youtu.be/IPjZF5TVc94
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
18
So tag management:
• Shifts tagging work from IT to Marketing
• Deski...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
19
What’s a tag management system?
• A Content Management System (CMS) m...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
20
What are the benefits of a tag management
system?
• Bring order to tag...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
21
Why Google Tag Manager?
• It’s free!
• It’s easy to use
• It’s robust...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
22
Google Tag Manager
• Launched October 2012
• Basic JavaScript tag man...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
23
Google Tag Manager documentation
• Release notes
• https://support.go...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
24
Components
• Container Tag
• Asynchronous loading of all tags within ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
25
Installing the container
• Exercise
• Create a Google Tag Manger acco...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
26
Adding users
• Exercise
• Add me to yours
• I’ll add you to mine
• Wo...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
27
GTM UI structure
• Tags
• The actual JavaScript that will execute
• R...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
28
Let’s add some tags!
• Exercise to add some GA tags
• Use Ghostery
• ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
29
GTM’s dataLayer
• See it load in the Chrome console
• Four components...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
30
Break time
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
31
JavaScript
• The triad of web technologies
• HTML to specify content ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
32
JavaScript hierarchy and components
• Window (or frame)
• The window ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
33
Document elements
• Elements
• <a id="blog link" href="blog.html">Blo...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
3424
JavaScript event handlers
• Allow scripts to specify behavior when ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
35
GTM’s auto-event listeners
• Listen out for behavior in the DOM
• In ...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
36
Let’s add some event listeners
• Exercise to add event listeners
• Ad...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
37
Event tag
• iv 003 - GA UA Event Tag
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
38
Event tag
• iv 003 - GA UA Event Tag
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
39
Event tag
• iv 004 - GA UA Event Tag - Top Navigation
Friday, 10 Marc...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
40
Event tag
• iv 005 - GA UA Event Tag - Right Navigation
Friday, 10 Ma...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
41
Event tag
• iv 006 - GA UA Event Tag - Buttons
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
42
Event tag
• iv 007 - GA UA Event Tag for PDFs
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
43
Lunch time
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
44
Event tag
• iv 008 - GA UA Virtual Page Tag For Form Submit
Friday, 1...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
45
Timer listener
• When this tag is fired, Google Tag Manager
starts a c...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
46
History listener
• This tag will listen for changes to the page's his...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
47
JavaScript error listeners
• When this tag is fired, Google Tag Manage...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
48
Break time
Friday, 10 March 17
#GoogleTagManager101	@ivantage	with	@matt_trimmer
49
Other macros (variables)
• Standard other macros
• 1st Party Cookie
•...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
50
Auto-event macros (Variables)
• Standard auto-event macros
• element
...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
51
DOM Element ID - example 1
• Given a link element on a
page
• <a id="...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
52
DOM Element ID - example 2
• Given a link element on a
page
• <a id="...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
53
DOM Element CSS Selector- example 1
• Given a link element on a page
...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
54
DOM Element CSS Selector- example 2
• Given a link element on a page
...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
55
Static DataLayer variables
• Place values on a page
• ivantage.info/c...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
56
Pushing to the DataLayer
• Push a custom event
• Tag fires as a conseq...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
57
Event tag
• iv 009 - GA UA Custom Event Display Trigger
Friday, 10 Ma...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
58
Blacklists and whitelists
• Whitelists - allow
• Blacklists - don’t a...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
59
Google Analytics Enhanced Ecommerce
• Deployed with customer GTM even...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
60
Google Analytics Enhanced Ecommerce
• New JavaScript library - ec.js
...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
61
Google Analytics’ customisations
• allowAnchor
• allowLinker
• always...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
62
Other event listeners (non standard)
• You Tube Video Tracking
• http...
#GoogleTagManager101	@ivantage	with	@matt_trimmer
63
Getting help
• support@ivantage.co.uk for 60 days
• Google Analytics ...
#GoogleAnalytics101	@ivantage	with	@matt_trimmer
6476
Feedback
• Login at:
• http://www.ivantage.co.uk
• My Account > My F...
#GoogleAnalytics101	@ivantage	with	@matt_trimmer
65
The End
Friday, 10 March 17
Upcoming SlideShare
Loading in …5
×

Google Tag Manager 101 - Fundamentals, key concepts, basic tagging and advanced event listener tagging

4,619 views

Published on

Google Tag Manager 101 - Fundamentals, key concepts, basic tagging and advanced event listener tagging

Published in: Data & Analytics

Google Tag Manager 101 - Fundamentals, key concepts, basic tagging and advanced event listener tagging

  1. 1. #GoogleTagManager101 @ivantage with @matt_trimmer 1 WIFI: SSID: TOG5 Password: TOGether Matt Trimmer Principal Consultant & Managing Director These Slides: http://www.slideshare.net/ivantage Google Tag Manager 101 - Fundamentals, key concepts, basic tagging and advanced event listener tagging Friday, 10 March 17
  2. 2. #GoogleTagManager101 @ivantage with @matt_trimmer 2 slideshare.net/ivantage Friday, 10 March 17
  3. 3. #GoogleTagManager101 @ivantage with @matt_trimmer 3 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 Friday, 10 March 17
  4. 4. #GoogleAnalytics202 @ivantage with @matt_trimmer 4 Google Analytics & Tag Manager curriculum • Google Analytics 101 - Fundamentals, key concepts and reporting basics • Google Analytics 201 - Goals, events, views, basic filters, segments, alerts and best practice campaigns • Google Analytics 202 - Analysing organic search, paid search, in-bound social media and attribution modelling • Google Analytics 301 - Architecture, processing, configuration, extending and auditing • Google Tag Manager 101 - Fundamentals, key concepts, basic tagging and advanced event listener tagging Friday, 10 March 17
  5. 5. #GoogleTagManager101 @ivantage with @matt_trimmer 5 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, 10 March 17
  6. 6. #GoogleTagManager101 @ivantage with @matt_trimmer 6 Session 1 - Architecture, implementation, understanding the user interface and deploying basic tags • Introductions, your objectives and building your 101 action plan • GTM history, components and architecture • Exploring and understanding the GTM user interface • Defining and understanding tags, triggers and variables • Creating an account and installing the GTM container • Deployment planning and considerations • Adding and managing users and their permissions • Deploying, testing and managing basic tags • Editing, versions and rolling back • Deploying Google Analytics page tags • Best practice implementations with constant string variables • Understanding the Google Tag Manager debugger • Understanding and exploring the GTM datalayer • Understanding Google Tag Manager internal events and loading priority • Exploring and understanding the Google Tag Assistant • Exploring and understanding more tools and techniques for debugging tags Friday, 10 March 17
  7. 7. #GoogleTagManager101 @ivantage with @matt_trimmer 7 Session 2 - JavaScript, event listeners, variables and tracking website interactions • Defining and understanding JavaScript, history, structure and components • Defining and understanding HTML elements and attributes • Defining and understanding JavaScript event handlers • Defining and understanding Google Tag Manager auto-event listeners • Configuring and deploying click listeners • Understanding and capturing the status and properties of a click • Deploying Google Analytics event tracking to measure clicks on banners, buttons, links and PDFs • Configuring and deploying link click listeners • Exploring and understanding GTM variables related to clicks, page and utilities Friday, 10 March 17
  8. 8. #GoogleTagManager101 @ivantage with @matt_trimmer 8 Session 3 - More listeners, variables and tracking website interactions • Configuring and deploying form submit listeners • Understanding and capturing the status and properties of a form submit • Deploying Google Analytics event tracking to measure submissions on forms • Configuring and deploying the Time Listener • Configuring and deploying the JavaScript Error Listener • Configuring and deploying the History Listener Friday, 10 March 17
  9. 9. #GoogleTagManager101 @ivantage with @matt_trimmer 9 Session 4 - Extending GTM with additional variables, pushes, custom events and 3rd party code • Understanding the additional GTM variables such as auto-event variables, 1st party cookies, lookup tables and DOM elements • Placing data into the GTM data layer with data layer variables • Pushing data into the GTM data layer with data layer variables and custom events • Deploying Google Analytics Enhanced E-commerce event tracking to track sales • Advanced options for Google Analytics tags • Extending GTM with 3rd part event listeners • Wrap up, conclusions, your action plan and feedback Friday, 10 March 17
  10. 10. #GoogleTagManager101 @ivantage with @matt_trimmer 10 Introductions • First • Me (Matt Trimmer) & ivantage overview • In a moment • You • Your role • Your department/website/website area • Your objectives for attending today Friday, 10 March 17
  11. 11. #GoogleTagManager101 @ivantage with @matt_trimmer 11 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, 10 March 17
  12. 12. #GoogleTagManager101 @ivantage with @matt_trimmer 12 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, 10 March 17
  13. 13. #GoogleTagManager101 @ivantage with @matt_trimmer 13 What is a tag? • Google’s definition: “Tags are tiny bits of website code (JavaScript) or pixels that let you measure traffic and visitor behavior, understand the impact of online advertising and social channels, use remarketing and audience targeting, test and improve your site, and more.” • Generally • The more tags on your site the more sophisticated your digital marketing • Use Ghostery to see tags Friday, 10 March 17
  14. 14. #GoogleTagManager101 @ivantage with @matt_trimmer 14 What do tags do? • Help you measure • Users, Sessions, Time on Site, Bounce Rate, Sales, AoV, etc • Help you observe • User behaviour -click paths, session recordings, conversions • Help you react • Serve content to segmented customers • Help you attract • Re-marketing Friday, 10 March 17
  15. 15. #GoogleTagManager101 @ivantage with @matt_trimmer 15 How do tags work? • By sending data to your systems • Eg, your CRM system • By sending data to 3rd party systems • Eg, Google Analytics, Click Tale, Google AdWords, Facebook, Twitter • By requesting small images - pixels • By setting counters - cookies • Generally via JavaScript code Friday, 10 March 17
  16. 16. #GoogleTagManager101 @ivantage with @matt_trimmer 16 Why manage tags? • IT department’s responsibility is to keep your website running securely • Tags are added to development schedules • Tagging can have lead times of 1-12 months • Campaigns are delayed or run without measurement • Marketers never ask for tags to be removed! • Data leakage from redundant tags • Tags are often deployed incorrectly • Poor specification or instructions • Syntax, configuration, spelling • IT/Software engineers don’t enjoy tagging! Friday, 10 March 17
  17. 17. #GoogleTagManager101 @ivantage with @matt_trimmer 17 So true? • https://youtu.be/IPjZF5TVc94 Friday, 10 March 17
  18. 18. #GoogleTagManager101 @ivantage with @matt_trimmer 18 So tag management: • Shifts tagging work from IT to Marketing • Deskills the tagging process • No coding, deploy via a user interface • Marketers (given training) can: • Deploy tags • Remove tags • Reconfigure tags • Do really powerful things • All within seconds • Yes IT can still veto dangerous tags • This is live JavaScript after all! Friday, 10 March 17
  19. 19. #GoogleTagManager101 @ivantage with @matt_trimmer 19 What’s a tag management system? • A Content Management System (CMS) manages content • A Tag Management Systems (TMS) manages JavaScript • HTML to specify content of web pages • CSS to specify presentation of web pages • JavaScript to specify behaviour of web pages • Turns HTML documents into interactive applications • Two components • The Container Tag • The only tag IT must install • Then you can use the user interface • The Datalayer Friday, 10 March 17
  20. 20. #GoogleTagManager101 @ivantage with @matt_trimmer 20 What are the benefits of a tag management system? • Bring order to tagging chaos • Accelerated campaign deployment • Improved site speed performance • Better protect users’ privacy • Collect, share and act on better marketing data Friday, 10 March 17
  21. 21. #GoogleTagManager101 @ivantage with @matt_trimmer 21 Why Google Tag Manager? • It’s free! • It’s easy to use • It’s robust • It’s trusted • It’s very good Friday, 10 March 17
  22. 22. #GoogleTagManager101 @ivantage with @matt_trimmer 22 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, 10 March 17
  23. 23. #GoogleTagManager101 @ivantage with @matt_trimmer 23 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, 10 March 17
  24. 24. #GoogleTagManager101 @ivantage with @matt_trimmer 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, 10 March 17
  25. 25. #GoogleTagManager101 @ivantage with @matt_trimmer 25 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, 10 March 17
  26. 26. #GoogleTagManager101 @ivantage with @matt_trimmer 26 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, 10 March 17
  27. 27. #GoogleTagManager101 @ivantage with @matt_trimmer 27 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, 10 March 17
  28. 28. #GoogleTagManager101 @ivantage with @matt_trimmer 28 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, 10 March 17
  29. 29. #GoogleTagManager101 @ivantage with @matt_trimmer 29 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, 10 March 17
  30. 30. #GoogleTagManager101 @ivantage with @matt_trimmer 30 Break time Friday, 10 March 17
  31. 31. #GoogleTagManager101 @ivantage with @matt_trimmer 31 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, 10 March 17
  32. 32. #GoogleTagManager101 @ivantage with @matt_trimmer 32 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, 10 March 17
  33. 33. #GoogleTagManager101 @ivantage with @matt_trimmer 33 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, 10 March 17
  34. 34. #GoogleTagManager101 @ivantage with @matt_trimmer 3424 JavaScript event handlers • Allow scripts to specify behavior when user events occur • JavaScript programs do something in response to these events Friday, 10 March 17
  35. 35. #GoogleTagManager101 @ivantage with @matt_trimmer 35 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, 10 March 17
  36. 36. #GoogleTagManager101 @ivantage with @matt_trimmer 36 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, 10 March 17
  37. 37. #GoogleTagManager101 @ivantage with @matt_trimmer 37 Event tag • iv 003 - GA UA Event Tag Friday, 10 March 17
  38. 38. #GoogleTagManager101 @ivantage with @matt_trimmer 38 Event tag • iv 003 - GA UA Event Tag Friday, 10 March 17
  39. 39. #GoogleTagManager101 @ivantage with @matt_trimmer 39 Event tag • iv 004 - GA UA Event Tag - Top Navigation Friday, 10 March 17
  40. 40. #GoogleTagManager101 @ivantage with @matt_trimmer 40 Event tag • iv 005 - GA UA Event Tag - Right Navigation Friday, 10 March 17
  41. 41. #GoogleTagManager101 @ivantage with @matt_trimmer 41 Event tag • iv 006 - GA UA Event Tag - Buttons Friday, 10 March 17
  42. 42. #GoogleTagManager101 @ivantage with @matt_trimmer 42 Event tag • iv 007 - GA UA Event Tag for PDFs Friday, 10 March 17
  43. 43. #GoogleTagManager101 @ivantage with @matt_trimmer 43 Lunch time Friday, 10 March 17
  44. 44. #GoogleTagManager101 @ivantage with @matt_trimmer 44 Event tag • iv 008 - GA UA Virtual Page Tag For Form Submit Friday, 10 March 17
  45. 45. #GoogleTagManager101 @ivantage with @matt_trimmer 45 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, 10 March 17
  46. 46. #GoogleTagManager101 @ivantage with @matt_trimmer 46 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, 10 March 17
  47. 47. #GoogleTagManager101 @ivantage with @matt_trimmer 47 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, 10 March 17
  48. 48. #GoogleTagManager101 @ivantage with @matt_trimmer 48 Break time Friday, 10 March 17
  49. 49. #GoogleTagManager101 @ivantage with @matt_trimmer 49 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, 10 March 17
  50. 50. #GoogleTagManager101 @ivantage with @matt_trimmer 50 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 Friday, 10 March 17
  51. 51. #GoogleTagManager101 @ivantage with @matt_trimmer 51 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, 10 March 17
  52. 52. #GoogleTagManager101 @ivantage with @matt_trimmer 52 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, 10 March 17
  53. 53. #GoogleTagManager101 @ivantage with @matt_trimmer 53 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, 10 March 17
  54. 54. #GoogleTagManager101 @ivantage with @matt_trimmer 54 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, 10 March 17
  55. 55. #GoogleTagManager101 @ivantage with @matt_trimmer 55 Static DataLayer variables • Place values on a page • ivantage.info/contact.html Friday, 10 March 17
  56. 56. #GoogleTagManager101 @ivantage with @matt_trimmer 56 Pushing to the DataLayer • Push a custom event • Tag fires as a consequence • http://ivantage.info/index.html Friday, 10 March 17
  57. 57. #GoogleTagManager101 @ivantage with @matt_trimmer 57 Event tag • iv 009 - GA UA Custom Event Display Trigger Friday, 10 March 17
  58. 58. #GoogleTagManager101 @ivantage with @matt_trimmer 58 Blacklists and whitelists • Whitelists - allow • Blacklists - don’t allow • https://developers.google.com/tag-manager/devguide#restricting-tag- deployment Friday, 10 March 17
  59. 59. #GoogleTagManager101 @ivantage with @matt_trimmer 59 Google Analytics Enhanced Ecommerce • Deployed with customer GTM events pushing to the datalayer • Sent on to Google Analytics as event/page hits Friday, 10 March 17
  60. 60. #GoogleTagManager101 @ivantage with @matt_trimmer 60 Google Analytics Enhanced Ecommerce • New JavaScript library - ec.js • Product data (productFieldObject) • SKU, Name, Brand, Category, Price, Variant, Price, Quantity • Product impressions data (impressionFieldObject) • Impressions in lists (results) and categories • Product promotion data (promoFieldObject) • ID, Name, Creative, Position • Product and promotion action • Click, detail, add, remove, checkout, checkout_option, purchase, refund, promo_click • Purchase or Refund • Transactional action data (actionFieldObject) • Transaction, affiliation, revenue, tac, shipping, coupon, list, step, check out option • Demo • https://ga-dev-tools.appspot.com/enhanced-ecommerce/ Friday, 10 March 17
  61. 61. #GoogleTagManager101 @ivantage with @matt_trimmer 61 Google Analytics’ customisations • allowAnchor • allowLinker • alwaysSendReferrercampaignContent • campaignId • campaignKeyword • campaignMedium • campaignName • campaignSource • clientId • cookieDomain • cookieExpires • cookieName • cookiePath • encoding • expId • expVar • flashVersion • forceSSL • hitCallback • hitCallback • hostname • javaEnabled • language • legacyCookieDomain • linkid • location • page • referrer • sampleRate • screenColors • screenName • screenResolution • sessionControl • siteSpeedSampleRate • title • useBeacon • userId • viewportSize Friday, 10 March 17
  62. 62. #GoogleTagManager101 @ivantage with @matt_trimmer 62 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, 10 March 17
  63. 63. #GoogleTagManager101 @ivantage with @matt_trimmer 63 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, 10 March 17
  64. 64. #GoogleAnalytics101 @ivantage with @matt_trimmer 6476 Feedback • Login at: • http://www.ivantage.co.uk • My Account > My Feedback Friday, 10 March 17
  65. 65. #GoogleAnalytics101 @ivantage with @matt_trimmer 65 The End Friday, 10 March 17

×