Event Tracking mit Google Analytics

Heute geht es um Google Analytics. Ich vermute der Großteil meiner Leser wird bereits einmal Google Analytics eingebunden haben. Für WordPress oder die meisten anderen CMS gibt es Plugins oder Extensions die einem den Großteil der Arbeit abnehmen.

Im Quelltext der Seite steht dann in etwa folgender Code Block:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('set', 'anonymizeIp', true);
  ga('send', 'pageview');
 
</script>

Der obige Block weicht schon geringfügig von der Standard Implementierung ab. Die Zeile:

  ga('set', 'anonymizeIp', true);

ist in der Standardinstallation nicht vorgesehen, für eine Datenschutzkonforme Nutzung in Deutschland jedoch notwendig.

Mit der gerade beschriebenen Installation werden bereits alle normalen Seitenaufrufe getrackt. Für viele Anwendungsfälle ist dies vollkommen ausreichend. Mit dieser Integration ist es jedoch nicht möglich z.B. die Verwendung eines Tab Moduls zu tracken. Da kein wirklicher Seitenaufruf stattfindet sondern nur mittels Javascript Inhalte aus bzw. eingeblendet werden. Für diese Anwendungsfälle eignet sich das Event Tracking von Google. Diese Klicks werden nicht als Pageviews getrackt sondern als Events. Zu finden in Google Analytics unter Verhalten -> Ereignisse.

Um Event Tracking nutzen zu können muss ein zusätzlicher Javascript Aufruf dem Tab hinzugefügt werden.

ga('send', 'event', 'category', 'action', 'label', value);

Die ersten beiden Parameter sind immer fest. Die Parameter category, action, label und value sind variabel. Über diese kann man Daten an Google Analytics übergeben. Mit dem folgenden kleinen Javascript Code muss man nicht mehr in einem onClick Attribut den Funktionsaufruf unterbringen sondern kann die Daten mit data-Attributen auf die zu trackenden Elemente schreiben.

$(document).ready(function() {
$('[data-category]').each(function() {
    if($(this).attr('data-action')!=null) {
        $(this).click(function(e){
            var category = $(e.target).attr('data-category');
            var action = $(e.target).attr('data-action');
            var label = $(e.target).attr('data-label');
            var value = $(e.target).attr('data-value');
            if(label!=null) {      
                if(value!=null) {
                   ga('send','event', category, action, label, value);
                } else {
                   ga('send','event', category, action, label);   
                }
            } else {
               ga('send', 'event', category, action);   
            }
        });
    }
});
});

Ich nutze hier jQuery, die Bibliothek muss also eingebunden werden. Nachdem die Seite geladen wurde wird jedes Element welches ein data-category und ein data-action Attribut besitzt mit einem Klick Event versehen. Je nachdem ob die Attribute data-label und data-value vorhanden sind werden diese ggf. an Google übergeben. Mit diesem kleinen Javascript ist es einfach neue Events festzulegen. Es müssen lediglich die benötigten Attribute auf das entsprechende HTML Element geschrieben werden.