Tagging differently
•Download as PPTX, PDF•
1 like•549 views
Web analytics brought us data layers and tag management systems, but what could be next in web analytics implementation?
Recommended
Recommended
More Related Content
What's hot
What's hot (7)
Similar to Tagging differently
Similar to Tagging differently (20)
More from Alban Gérôme
More from Alban Gérôme (20)
Recently uploaded
Recently uploaded (20)
Tagging differently
- 1. Tagging differently Data layers, tag management, what’s next? Alban Gérôme @albangerome MeasureCamp Rome 18 May 2019
- 3. @albangerome Logs SaaS Data layer TMS ?
- 4. What progress we have made!
- 5. The devs keep messing with my analytics!
- 6. The client-side cookies are under attack!
- 7. I will have to migrate all my analytics server- side!
- 15. @albangerome Different tracking request structure but fundamentally the same job
- 17. HTML5 data- elements <body data-analytics-pageview-description="homepage" data-analytics-pageview-sitesection="home" > … <input value="B" type="button" data-analytics-interaction-description="Button XYZ was clicked" /> … </body> @albangerome
- 18. Events inference <textarea data-analytics-interaction-description="feedback"> </textarea> <select data-analytics-interaction-description="size"> <option value="S">Small</option> <option value="S">Large</option> </select> <input type= "submit" data-analytics-interaction-description= "submit" /> @albangerome onblur onchange onclick
- 19. data-analytics-* footprint (XPath) (function(){ var matches = document.evaluate( "//@*[starts-with(name(),'data-analytics-')]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); var i = matches.snapshotLength; while(i--) console.log(matches.snapshotItem(i)); })(); @albangerome
- 20. DOM Mutations new MutationObserver(function(mutations){ if(a = mutations.filter(function(mutation){ return !!mutation.target.dataset.analyticsPageviewDescription; })){ console.log(a[0]); //returns the DOM element with the page name }; }).observe( document.body, { subtree : !0, attributes : !0 } ); @albangerome
- 21. @albangerome HTML5 provides vendor-agnostic methods that help us describe an analytics implementation
- 22. @albangerome Inspect an element and know immediately if it’s tracked It’s in plain English, Italian, whatever you want
- 23. @albangerome You can use the data-analytics-* footprint to generate a data layer … if you need one still
- 24. @albangerome You can track single-page applications and know nothing about Angular, React or Ember
- 26. • Expected: 971003a4fe4fe8596cee02d4192459e3 • Before release: 6997729ea6c3a9896f6931a40d97b726 Mismatching hashes at build time tells the devs that they might have broken the analytics implementation Hashes and page names @albangerome
- 29. What’s still missing • Cookies to be handled server-side • Generate the hashes server-side • Modules bundling done server-side • Idle until urgent • Full TypeScript rewrite, transpile to WASM • Anything else, you tell me! @albangerome
- 31. @albangerome Analytics #1 Analytics #2 (DL+)TMS+Kermit Your analytics tools code are just Kermit modules!
- 33. Kermit is open-source • Latest version is 0.8.4 • Demos: https://www.albangerome.com/kermit/demo.php https://www.albangerome.com/kermit/demo2.php • Articles: https://www.albangerome.com/kermit/kermit-article-1.php • GitHub repo: https://github.com/alban-gerome/kermit/blob/master/README.md