Google Tag Manager - an Introduction
description
Transcript of Google Tag Manager - an Introduction
![Page 1: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/1.jpg)
Agile Web Development Liip.ch
–
Fribourg, 07.10.2014
GOOGLE TAG MANAGERIntroduction and beyond …
![Page 2: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/2.jpg)
Agile Web Development Liip.ch
–
GEOFFROY PERRIARDWeb Developer, Liip AG
![Page 3: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/3.jpg)
Agile Web Development Liip.ch
–
BENOIT POINTETUX Architect, Liip AG
![Page 4: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/4.jpg)
Agile Web Development Liip.ch
–
GTM TAG MANAGEMENTOverview
![Page 5: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/6.jpg)
MARKETING MEASUREMENT DESERVES ITS
OWN MANAGEMENT SOLUTION
![Page 7: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/7.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/8.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/9.jpg)
Agile Web Development Liip.ch
–
GTM TAG MANAGEMENTdetailed
![Page 10: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/10.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/11.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/12.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/14.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/16.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/17.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/18.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/19.jpg)
Agile Web Development Liip.ch
–
Ort, Datum
A FEW REMARKS
![Page 20: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/20.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/21.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/22.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/23.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/24.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/25.jpg)
Agile Web Development Liip.ch
–
Ort, Datum
THANK YOU
![Page 26: Google Tag Manager - an Introduction](https://reader034.fdocuments.in/reader034/viewer/2022042700/5582f7b2d8b42a2c168b4ee7/html5/thumbnails/26.jpg)
Further readings- SimoHava - demystify GTM and examples - Lunametric intro to GTM - GTM developer guide