www.ivantage.co.uk
1
Google Tag Manager 101
Matt TrimmerPrincipal Consultant & Managing Director
Slides:
http://www.slideshare.net/ivantage
WIFI:SSID: ITTRH
Password: welcome1
Monday, 2 June 14
www.ivantage.co.uk
2
slideshare.net/ivantage
Monday, 2 June 14
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!
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
www.ivantage.co.uk
10
Introductions – your turn!
§ You§ Your role
§ Your department/website/website area
§ Your objectives for attending today
Monday, 2 June 14
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
§ Major UI upgrade imminent§ Much easier to use§ Easier to configure§ Whitelist
§ UI§ API (Configuration)
Monday, 2 June 14
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/
Monday, 2 June 14
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
Monday, 2 June 14
14
www.ivantage.co.uk
24
Installing the container§ Exercise
§ Create a Google Tag Manger account§ 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
Monday, 2 June 14
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)
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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>
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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:
Monday, 2 June 14
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:
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
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
Monday, 2 June 14
www.ivantage.co.uk
30
Getting help§ [email protected] 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/
Monday, 2 June 14
www.ivantage.co.uk
31
Feedback§ http://www.ivantage.co.uk/feedback
§ Write an honest, considered and fair review to receive for each day attended:
Monday, 2 June 14
www.ivantage.co.uk
32
Break time
http://www.slideshare.net/ivantage
Monday, 2 June 14
www.ivantage.co.uk
33
Lunch time
Monday, 2 June 14
www.ivantage.co.uk
34
Break time
Monday, 2 June 14