Tagging differently

Tagging differently
Data layers, tag management, what’s next?
Alban Gérôme
@albangerome
MeasureCamp Rome
18 May 2019

@albangerome
Logs SaaS Data layer TMS ?

The devs keep
messing with my
analytics!

The client-side
cookies are under
attack!

I will have to
migrate all my
analytics server-
side!

@albangerome
Monolithic
tagging

Metadata
@albangerome
Generic
tagging

Data Layer
@albangerome
Tag
Management
System

@albangerome
Analytics #1
Analytics #2

@albangerome
Analytics #1
Analytics #2
DL+TMS

@albangerome
Analytics #1
Analytics #2
DL+TMS+?

@albangerome
Different tracking request structure
but fundamentally the same job

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

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

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

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

@albangerome
HTML5 provides vendor-agnostic
methods that help us describe
an analytics implementation

@albangerome
Inspect an element and know
immediately if it’s tracked
It’s in plain English, Italian,
whatever you want

@albangerome
You can use the data-analytics-*
footprint to generate a data layer
… if you need one still

@albangerome
You can track single-page
applications and know nothing
about Angular, React or Ember

• 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

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

@albangerome
Analytics #1
Analytics #2
(DL+)TMS+Kermit
Your analytics tools code are just Kermit modules!

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

http://www.albangerome.com
@albangerome
Grazie mille!

Tagging differently

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