Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Google Tag Manager - an Introduction

5 909 vues

Publié le

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.

Publié dans : Internet

Google Tag Manager - an Introduction

  1. 1. Agile Web Development Liip.ch – Fribourg, 07.10.2014 GOOGLE TAG MANAGER Introduction and beyond …
  2. 2. Agile Web Development Liip.ch – GEOFFROY PERRIARD Web Developer, Liip AG
  3. 3. Agile Web Development Liip.ch – BENOIT POINTET UX Architect, Liip AG
  4. 4. Agile Web Development Liip.ch – GTM TAG MANAGEMENT Overview
  5. 5. 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 Tracking nowadays: powerful, yet complex - pageviews + events - sites, apps + things - lots of solutions - tag pollution - evolution & maintenance - COM, IT, CM and BI depts
  6. 6. MARKETING MEASUREMENT DESERVES ITS OWN MANAGEMENT SOLUTION
  7. 7. 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/
  8. 8. 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
  9. 9. Agile Web Development Liip.ch – GTM TAG MANAGEMENT detailed
  10. 10. 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
  11. 11. Container Big 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
  12. 12. Tags Bits 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
  13. 13. Listener Tags Observe 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
  14. 14. Tracking Tags Observe 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.
  15. 15. Rules When-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!
  16. 16. Macros Accessors 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}}
  17. 17. GTM Tracking Architecture gtm.dom gtm.linkClick Link Click Listener click GA pageview Google Analytics GA linkClick DoubleClick DC linkClick GA c. dims. type:shirt, gender:male … dataLayer.push({…}); tracking APIs . tracking tags in GTM container dataLayer JS Array of events and key-value pairs listener tags in GTM container DOM events custom pushes in frontend logic capture track gtm.start gtm.load
  18. 18. GTM Tracking Process 1. 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
  19. 19. Agile Web Development Liip.ch – Ort, Datum A FEW REMARKS
  20. 20. Risks Anyone 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
  21. 21. Limitations GTM is not for precise page speed tracking - tags are lazy and late loaded GTM is not for everyone - It still need some tech abilities
  22. 22. Advantages GTM 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
  23. 23. Advantages GTM 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
  24. 24. Key "Tech-aways" gtm.dom gtm.linkClick Link Click Listener click GA pageview Google Analytics GA linkClick DoubleClick DC linkClick GA c. dims. type:shirt, gender:male … dataLayer.push({…}); tracking APIs . tracking tags in GTM container dataLayer JS Array of events and key-value pairs listener tags in GTM container DOM events custom pushes in frontend logic capture track gtm.start gtm.load
  25. 25. Agile Web Development Liip.ch – Ort, Datum THANK YOU
  26. 26. Further readings - SimoHava - demystify GTM and examples - Lunametric intro to GTM - GTM developer guide

×