Download to read offline
![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](https://image.slidesharecdn.com/taggingdifferently-slideshare-190515074032/85/Tagging-differently-19-320.jpg)
![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](https://image.slidesharecdn.com/taggingdifferently-slideshare-190515074032/85/Tagging-differently-20-320.jpg)
Uploaded byAlban Gérôme
Tagging differently
The document discusses advancements in tag management and analytics implementation, highlighting the use of HTML5 data attributes and the need for server-side handling of cookies and analytics hashes. It emphasizes the importance of a data layer and outlines ongoing challenges and potential improvements in the tracking systems. Additionally, references to a tool named Kermit are made for managing analytics code in an open-source manner.
More Related Content
More from Alban Gérôme
![[DSC Europe 25] Bojan Djuricic - Predictive Design Process.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/5awdrbedqdek3gqu2ezy-4-the-predictive-design-bojan-djuricic-260120105856-6c399e9b-thumbnail.jpg?width=640&height=640&fit=bounds)
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 Datalayer TMS ?
- 4.
- 5. The devs keep messingwith my analytics!
- 6. The client-side cookies areunder attack!
- 7. I will haveto migrate all my analytics server- side!
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. @albangerome Different tracking requeststructure but fundamentally the same job
- 17. HTML5 data- elements <body data-analytics-pageview-description="homepage" data-analytics-pageview-sitesection="home" > … <inputvalue="B" type="button" data-analytics-interaction-description="Button XYZ was clicked" /> … </body> @albangerome
- 18. Events inference <textarea data-analytics-interaction-description="feedback"> </textarea> <selectdata-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(){ varmatches = 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 methodsthat help us describe an analytics implementation
- 22. @albangerome Inspect an elementand know immediately if it’s tracked It’s in plain English, Italian, whatever you want
- 23. @albangerome You can usethe data-analytics-* footprint to generate a data layer … if you need one still
- 24. @albangerome You can tracksingle-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 Youranalytics 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
- 34.