Google Universal Analytics Event Tracking

Mit dem Event Tracking von Google Analytics kann man weitere Informationen an den Tracking Code übergeben und das Nutzerverhalten auf Webseiten analysieren.

Google Universal Analytics Event Tracking

Im letzten Blogartikel über Breadcrumbs hatte ich ja angekündigt etwas über die Event Tracking zum Beispiel von zusätzlichen Navigationen und deren Akzeptanz bei den Benutzern zu schreiben. Mit ein paar Handgriffen ist dies mit dem Event Tracking von Google Analytics kein Problem. Beim alten Trackingcode hieß die Methode noch „_trackEvent“, ich möchte hier aber auf das neue Google Universal Analytics eingehen.


Im Mai 2013 hatte Google Emails versendet, indem die Beta des neuen Google Universal Analytics vorgestellt wurde. Mit Google Universal Analytics ändert sich nicht nur das eingebunde Javascript, auch die Funktionen wurden vereinfacht. Das Event Tracking wird hier, wie alle andere Trackings auch, über die Funktion „ga“ gesteuert. 


Google Analytics Univeral Tracking Syntax


Die Integration das Event Tracking Codes ist denkbar einfach:


ga('send', 'event', 'breadcrumb', 'click' );  


bzw. kann man auch die Weitergabe der Tracking Parameter mit einem Objekt übergeben:


ga(
   'send',
   'event',
   {
      'eventCategory':'breadcrumb',
      'eventAction':'click',
   }
)
 


Durch die Kategorisierung und die Action, würde man mit dem Code herausbekommen, dass auf die Breadcrumb Navigation geklickt wurde. Da diese aber aus unterschiedlichen Ebenen besteht, wäre noch von Interesse, welche Ebene hier angeklickt wurde. Das kann man mit ein wenig jQuery leicht realisieren.


Dazu schauen wir uns nochmal die Struktur der Breadcrumb Navigation an:


<div class="breadcrumb" role="navigation" aria-label="Breadcrumbs">
 <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://deineurl.com/" itemprop="url"><span itemprop="title">Home</span></a>
 </div>
 <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://deineurl.com/cottage"><span itemprop="title">Cottage</span></a>
 </div>
 <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://deineurl.com/cottage/france"><span itemprop="title">France</span></a>
 </div>
 <div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
  <span itemprop="title">Provence</span>
 </div>
</div>


Und verwenden dann folgendes jQuery zum Senden der Event Tracking Informationen:


$('.breadcrumb a').click(
   function()
   {
      ga('send', 'event', 'breadcrumb', 'click', 'deep-' + $(this).parent().index() );
   }
);
 


Wir werden dann nach kurzer Zeit in Google Analytics im Content Bereich unter Ereignisse bei den Ereignis-Labeln auch die deep-0 bis deep-x Einträge finden. 


Wendet man die Technik des Event Tracking auf alle Navigationselemente an, kann man somit die von den Webseitenbesuchern bevorzugten Navigationselemente ermitteln und dann mit weiteren Deeplinks versehen. Weiterführend kann man aber mit dem Event Tracking noch viel mehr, vor allem auch sogenannte non-interaction-events tracken, d.h. wie weit scrollen die Webseitenbesuchen auf einer Seite oder werden bestimmte Elemente der Webseite zwar mit der Mouse angesteuert, aber nicht geklickt.