google tag manager 101

34
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 Monday, 2 June 14

Upload: ivantage

Post on 08-May-2015

1.950 views

Category:

Business


5 download

TRANSCRIPT

Page 1: Google tag manager 101

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

Page 2: Google tag manager 101

www.ivantage.co.uk

2

slideshare.net/ivantage

Monday, 2 June 14

Page 3: Google tag manager 101

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

Page 4: Google tag manager 101

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

Page 5: Google tag manager 101

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

Page 6: Google tag manager 101

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

Page 7: Google tag manager 101

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

Page 8: Google tag manager 101

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

Page 9: Google tag manager 101

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

Page 10: Google tag manager 101

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

Page 11: Google tag manager 101

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

Page 13: Google tag manager 101

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

Page 14: Google tag manager 101

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

Page 15: Google tag manager 101

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

Page 16: Google tag manager 101

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

Page 17: Google tag manager 101

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

Page 18: Google tag manager 101

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

Page 19: Google tag manager 101

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

Page 20: Google tag manager 101

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

Page 21: Google tag manager 101

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

Page 22: Google tag manager 101

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

Page 23: Google tag manager 101

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

Page 24: Google tag manager 101

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

Page 25: Google tag manager 101

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

Page 26: Google tag manager 101

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

Page 27: Google tag manager 101

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

Page 28: Google tag manager 101

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

Page 29: Google tag manager 101

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

Page 30: Google tag manager 101

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

Page 31: Google tag manager 101

www.ivantage.co.uk

31

Feedback§ http://www.ivantage.co.uk/feedback

§ [email protected]

§ Write  an  honest,  considered  and  fair  review  to  receive  for  each  day  attended:

Monday, 2 June 14

Page 32: Google tag manager 101

www.ivantage.co.uk

32

Break  time

http://www.slideshare.net/ivantage

Monday, 2 June 14

Page 33: Google tag manager 101

www.ivantage.co.uk

33

Lunch  time

Monday, 2 June 14

Page 34: Google tag manager 101

www.ivantage.co.uk

34

Break  time

Monday, 2 June 14