Event Tracker mit HTML5 custom data Attributen

HTML5 bietet die Möglichkeit für custom data Attribute in HTML Elementen.
Diese beginnen mit dem Prefix data- und können danach beliebeig benannt werden.
Browser sollten diese Attribute ignorieren aber für interne Datenstrukturen sind sie sehr gut geeignet.

Zum Beispiel kann man sich in Javascript Paramter-Übergaben sparen und sich die Daten holen, die man braucht.
Das hält das Markup schön Javascript frei -im Sinne von unobtrusive.
In meinem Fall brauchte ich einen Event Tracker, der Aktionen auf dynamisch generierten Elementen aufzeichnet.

Dafür werden ins Markup die Attribute gesetzt und mit den dynamische Werten belegt:

<a data-mynamespace-query="<?php echo $q?>" 
data-mynamespace-site="<?php echo $s?>" 
href="<?php echo $l;?>" target="_blank">

Dann braucht man noch einen Event Listener, der sich die Daten holt und dann zB per Ajax zum wegspeichern versendet.
Mit Jquery sieht das dann so aus:

$(id + " a").click(function(event){  
var s = $(this).attr('data-mynamespace-site');
var q = $(this).attr('data-mynamespace-query');
var u = $(this).attr('href');
$.post('/go/'+s+'/'+q+'?url='+u);  
});  

Ist doch ne saubere Sache :)

Man könnte Google Analytics Event Tracker so füttern, wie es in diesem Blog gemacht wird.

Leave a Reply

Your email address will not be published. Required fields are marked *