google tag manager - an introduction
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
Agile Web Development Liip.ch
–
Fribourg, 07.10.2014
GOOGLE TAG MANAGERIntroduction and beyond …
Agile Web Development Liip.ch
–
GEOFFROY PERRIARDWeb Developer, Liip AG
Agile Web Development Liip.ch
–
BENOIT POINTETUX Architect, Liip AG
Agile Web Development Liip.ch
–
GTM TAG MANAGEMENTOverview
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
MARKETING MEASUREMENT DESERVES ITS
OWN MANAGEMENT SOLUTION
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/
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
Agile Web Development Liip.ch
–
GTM TAG MANAGEMENTdetailed
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
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
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
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
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.
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!
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}}
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
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
Agile Web Development Liip.ch
–
Ort, Datum
A FEW REMARKS
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
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
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
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
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
Agile Web Development Liip.ch
–
Ort, Datum
THANK YOU
Further readings- SimoHava - demystify GTM and examples - Lunametric intro to GTM - GTM developer guide