google tag manager - an introduction

26
Agile Web Development Liip.ch Fribourg, 07.10.2014 GOOGLE TAG MANAGER Introduction and beyond …

Upload: liip

Post on 18-Jun-2015

831 views

Category:

Internet


7 download

DESCRIPTION

An introduction to the concepts of Tag Management through Google Tag Manager. Talk given at a webmardi.ch meeting at Liip Fribourg on Oct 7, 2014.

TRANSCRIPT

Page 1: Google Tag Manager - an Introduction

Agile Web Development Liip.ch

Fribourg, 07.10.2014

GOOGLE TAG MANAGERIntroduction and beyond …

Page 2: Google Tag Manager - an Introduction

Agile Web Development Liip.ch

GEOFFROY PERRIARDWeb Developer, Liip AG

Page 3: Google Tag Manager - an Introduction

Agile Web Development Liip.ch

BENOIT POINTETUX Architect, Liip AG

Page 4: Google Tag Manager - an Introduction

Agile Web Development Liip.ch

GTM TAG MANAGEMENTOverview

Page 5: Google Tag Manager - an Introduction

Tracking nowadays:

powerful, yet complex

- pageviews + events

- sites, apps + things

- lots of solutions

- tag pollution

- evolution & maintenance

- COM, IT, CM and BI depts

WHY TAG MANAGEMENT?Tracking in the 90s :

limited and easy

- only pageviews

- only websites

- one tracking solution

- a handful of tags

- not likely to change

- by&for webmasters

Page 6: Google Tag Manager - an Introduction

MARKETING MEASUREMENT DESERVES ITS

OWN MANAGEMENT SOLUTION

Page 7: Google Tag Manager - an Introduction

Tag management solutions- Google Tag Manager

- h!p://www.google.com/tagmanager/

- Qubit Enterprise TM aka Opentagmanager - h!p://www.qubitproducts.com/tag-management

- Adobe Digital Tag Manager - h!p://www.adobe.com/solutions/digital-marketing/dynamic-tag-

management.html

- Tealium iQ - h!p://tealium.com/products/enterprise-tag-management/

Page 8: Google Tag Manager - an Introduction

Tag Management Setup- On the page … a single "container" tag

- the GTM tag (similar to GA <script> snippet) - GTM tag injects other tags dynamically

- On Tag Management Server - A tag management system to define …

- what interaction information - gets captured …

- on what page - under what conditions

- and tracked … - how and in what tracking solution

Page 9: Google Tag Manager - an Introduction

Agile Web Development Liip.ch

GTM TAG MANAGEMENTdetailed

Page 10: Google Tag Manager - an Introduction

GTM Jargon- tag = bits of tracking logic to inject - rules = when is a tag allowed to proceed - macros = interaction infos that the tag needs - container = the bag of tags to inject on a website

- versions = container changes deploy in batch - dataLayer = a common queue between capture and tracking

Page 11: Google Tag Manager - an Introduction

ContainerBig bag where you put all tags, macros and rules to management tracking on a domain/site. - rule of thumb: 1 container per site - 1 GTM user account can manage/view many containers - container ID passed by GTM tag to server - versions

- published/dra" container versions - publish changes once for all

- don’t break tracking when updating it - preview and debug your changes before publishing them

Page 12: Google Tag Manager - an Introduction

TagsBits of tracking logic to inject/instantiate on the page. - complexity

- ready-made tags (GA, AdWords, …) - custom tags (for Piwik tag, …)

- behavior - listener tags - tracking tags

Page 13: Google Tag Manager - an Introduction

Listener TagsObserve interactions and changes (DOM events) and throw gtm.* events on the dataLayer. Not bound to a specific tracking solution.

Listener tags available in GTM: - Link Click Listener

- listens to clicks on <a> elements - throws gtm.linkClick event

- Form Submit Listener - Click Listener - Timer Listener - JS Error Listener - History Listener

Page 14: Google Tag Manager - an Introduction

Tracking TagsObserve interactions flow on dataLayer and perform tracking operations / sends information to specific tracking solution.

Examples: - Google Analytics pageview, event, transaction, social,

timing, … - Custom Tag, to add any tracker not known to GTM, like Piwik.

Page 15: Google Tag Manager - an Introduction

RulesWhen-clauses that you can a!ach to tags to specify when each listener/tracking tag should fire.

Examples: - "on all pages"

- {{url}} matches RegEx .* - "when mailto link clicked"

- {{event}} equals gtm.linkClick - AND {{element url}} starts with mailto:

BEWARE: a tag with no rule a!ached will not fire!

Page 16: Google Tag Manager - an Introduction

MacrosAccessors to element/event/page information. The double-bracket parts in rules …

Provided out-of-the-box by GTM: - {{url}}

- {{url hostname}} - {{url path}}

- {{referrer}} - {{element}}

- {{element id}} - {{element classes}} - {{element target}} - {{element url}}

- {{event}}

Page 17: Google Tag Manager - an Introduction

GTM Tracking Architecture

click

Link Click Listener

gtm.dom gtm.linkClick

GA pageview

Google Analytics

GA linkClick

DoubleClick

DC linkClick

dataLayer.push({…});

type:shirt, gender:male

GA c. dims.

tracking tags in GTM container

listener tags in GTM container

dataLayer JS Array of events and key-value pairs

DOM events

custom pushes in frontend logic

tracking APIs .

trac

kca

ptu

re

gtm.start gtm.load

Page 18: Google Tag Manager - an Introduction

GTM Tracking Process1. Browser loads page with GTM <script> tag 2. GTM tag interpreted

1. creates hidden iframe for browsers that doesn’t allow scripts OR 2. loads gtm.js:

1. your specific container (tags, rules, macros ) 2. generic GTM logic

3. GTM fires up: 1. if dataLayer does not exist, it creates it 2. all tags/rules/macros are instantiated and now listening 3. gtm events thrown

4. When a DOM event happens … 1. rules define which tracker tags gets fired and throws events on dataLayer

5. when any event or data gets pushed on the dataLayer … 1. rules define which tracker performs

Page 19: Google Tag Manager - an Introduction

Agile Web Development Liip.ch

Ort, Datum

A FEW REMARKS

Page 20: Google Tag Manager - an Introduction

RisksAnyone with credentials and rights can inject harmful code - probability: very probable (marketing dept ≠ security dept) - impact: legal trouble, loss of trust, loss of users private infos,

loss of business infos - mitigation: allow only one user to publish versions

"The marketing dudes will break everything!" - probability: it can happen - impact: injected code disturbs normal page behavior - mitigation: use of included tags is safe, get tech help when

doing special stuff

Page 21: Google Tag Manager - an Introduction

LimitationsGTM is not for precise page speed tracking

- tags are lazy and late loaded

GTM is not for everyone - It still need some tech abilities

Page 22: Google Tag Manager - an Introduction

AdvantagesGTM makes your page faster

- lazy loading, yet advanced load se!ing per tag

GTM lets you track more and faster - clear separation of concerns and schedules between content

publishing and tracking stakeholders

Page 23: Google Tag Manager - an Introduction

AdvantagesGTM plays well with Google Analytics

- advanced tracking building blocks provided out-of-the-box

GTM is for more than Google Analytics - display ads (DoubleClick, Mediaplex) - remarketing (AdRoll, AdWords) - search (AdWords, Marin) - audience (Advisor, Bizo, comScore, Dstillery, …) - analytics (GA, ClickTale, comScore) - A/B testing

Page 24: Google Tag Manager - an Introduction

Key "Tech-aways"

click

Link Click Listener

gtm.dom gtm.linkClick

GA pageview

Google Analytics

GA linkClick

DoubleClick

DC linkClick

dataLayer.push({…});

type:shirt, gender:male

GA c. dims.

tracking tags in GTM container

listener tags in GTM container

dataLayer JS Array of events and key-value pairs

DOM events

custom pushes in frontend logic

tracking APIs .

trac

kca

ptu

re

gtm.start gtm.load

Page 25: Google Tag Manager - an Introduction

Agile Web Development Liip.ch

Ort, Datum

THANK YOU