Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google Tag Manager - an Introduction

5,571 views

Published on

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.

Published in: 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

×