18.10.2011 Google Analytics

Google Analytics: Klicks mit automatisiertem Klick-Event-Tracking messen

Google Analytics setzt JavaScript ein um Aktionen wie Pageviews und Anderes zu messen. Dies funktioniert wunderbar für HTML Seiten (egal in welcher Programmiersprache diese entwickelt wurden) aber auch für Flash, Silverlight und andere Web-Technologien bzw. Applikationen. Alle Informationen werden von der eigenen Webseite / Web-Applikation mittels 1 Pixel Bild an Google Analytics übermittelt. Bei dieser Methode […]

Florian Muff
5 Min. Lesezeit
Keine Kommentare

Google Analytics setzt JavaScript ein um Aktionen wie Pageviews und Anderes zu messen. Dies funktioniert wunderbar für HTML Seiten (egal in welcher Programmiersprache diese entwickelt wurden) aber auch für Flash, Silverlight und andere Web-Technologien bzw. Applikationen. Alle Informationen werden von der eigenen Webseite / Web-Applikation mittels 1 Pixel Bild an Google Analytics übermittelt. Bei dieser Methode wird ein unsichtbares Bild in der Grösse 1×1 Pixel in die Webseite oder Applikation eingebaut. Jeder Aufruf des Pixels wird gemessen bzw. die Daten an Google Analytics zur Generierung von Statistiken herangezogen.  Ein grosser Vorteil ist: Automatische Zugriffe auf eine Webseite durch Spider oder Robots führen i.d.R. nicht zu einem Abruf dieses Bildes.

Nun ist es leider so, dass Google Analytics standardmässig nicht misst, wieviel mal ein PDF heruntergeladen wurde. Dies natürlich auch nicht für andere Filetypen wie XLS, ZIP, usw. Dies funktioniert aus dem Grund nicht, da diese Dateien nicht die Möglichkeit haben, dieses 1 Pixel Bild abzurufen bzw. die Möglichkeiten der Pixel-Analyse zu nutzen.

Hier möchte ich euch die Möglichkeiten darstellen, wie ihr Google Analytics Event-Tracking für einzelne Downloads einsetzen könnt, noch wichtiger jedoch, wie ihr Event-Tracking automatisieren könnt um jeden Klick auf einen Download oder auf eine externen Link messen zu können. Hierfür gibt es zwei versch. Tracking-Codes, eine für Links mit target=”_blank”, die andere für Links welche sich im selben Fenster öffnen.

PDF Downloads messen, welche in einem neuen Fenster geöffnet werden

Wenn der Download in einem neuen Fenster geöffnet wird, dann ist die Einbindung des Event-Tracking Codes sehr einfach zu bewerkstelligen.

Dein Link wird standardmässig so aussehen:

<a href=”pdf/meindownload.pdf” target=”_blank”>Download</a>

Der korrekt lautende Google Analytics Code würde in diesem Beispiel so aussehen:

<a href=”pdf/meindownload.pdf” target=”_blank” onclick=”_gaq.push([‘_trackEvent’,’Download’,’PDF’,this.href]);”>Download</a>

Wenn nun ein Nutzer auf diesen Link klickt wird das Tracking Pixel abgerufen und die Daten innerhalb Google Analytics protokolliert. Das ist es!

PDF Downloads messen, welche im selben Fenster geöffnet werden

Wenn der Download anstatt in einem neuen Fenster im selben geöffnet wird kann es vorkommen, dass gewisse Browser den Tracking-Request unterbrechen und den Besucher direkt zum Download der Datei führen. Dies bedeutet, in diesen Fällen werden die Downloads nicht gemessen, was die Statistik nicht mehr aussagekräftig macht.

Dein Link wird standardmässig so aussehen:

<a href=”pdf/meindownload.pdf”>Download</a>

Der korrekt lautende Google Analytics Code würde in diesem Beispiel so aussehen:

<a href=”pdf/meindownload.pdf” onclick=”var that=this;_gaq.push([‘_trackEvent’,’Download’,’PDF’,this.href]);setTimeout(function(){location.href=that.href;},200);return false;”>Download</a>

Mit der setTimeout() Funktion, welche wir auf 200ms setzen, geben wir dem Browser genügend Zeit, das Tracking-Pixel bzw. den Tracking-Request und die Informationen an Google Analytics zu senden. Bei vielen Requests muss dieser Wert eventl. erhöht werden, hier gibt es debugging tools um dies zu verstehen.

Google Analytics Event Tracking automatisieren

Nun gut. Wer möchte schon hunderte oder tausende Links manuell mit dem Tracking Code versehen. Welcher Webmaster erfreut sich daran, den Redakteuren jedesmal noch im nachhinein den Tracking-Code zu implementieren? Nobody, da gibt es sicher besseres was man mit der eigenen Zeit anfangen kann. Aus diesem Grund gibt es die Möglichkeit alle Klicks auf der eigenen Webseite automatisch zu überwachen. Kein manuelles nachkorrigieren mehr!!

Hierfür gibt es mehrere Möglichkeiten. Die eine ist z.B. der Einsatz von Tools wie Analytics Engine, welches ich auf meinem Blog einsetze und sehr zu empfehlen ist. Eine zweite Möglichkeit ist, ein Code-Schnipsel einzusetzen (Erklärung folgt weiter unten), dies setzt jedoch voraus, das man die jQuery JavaScript Bibliothek bereits auf der eigenen Seite einsetzt oder neu integriert.

Da die Integration mit Analytics Engine auf deren Webseite beschrieben wird, möchte ich hier auf die jQuery Variante eingehen. Diese bringt auch den Vorteil, dass man sie nach seinen eigenen Wünschen und Vorstellungen anpassen kann.

Mit dieser Variante kann folgendes gemessen werden:

  • Misst Klicks und Downloads für Dateitypen wie .zip, .exe, .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3 (Die Liste kann beliebig erweitert werden)
  • Misst Klicks auf alle ausgehenden Links sobald der Link http:// oder https:// beinhaltet oder aber nicht der eigenen Domain entspricht
  • Misst Mailto-Link Klicks

Vorgehen zum Einbau des Tracking Codes

  1. Einfügen der jQuery Javascript Bibliothek in den HEAD der Webseite
  2. Einfügen des untenstehende JavaScript Codes in den HEAD der Webseite. Muss nach dem jQuery Code eingebunden werden!
  3. Das ist es!

Code:

<script type=”text/javascript”>

if (typeof jQuery != ‘undefined’) {
jQuery(document).ready(function($) {
var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3)$/i;
var baseHref = ”;
if (jQuery(‘base’).attr(‘href’) != undefined)
baseHref = jQuery(‘base’).attr(‘href’);
jQuery(‘a’).each(function() {
var href = jQuery(this).attr(‘href’);
if (href && (href.match(/^https?\:/i)) && (!href.match(document.domain))) {
jQuery(this).click(function() {
var extLink = href.replace(/^https?\:\/\//i, ”);
_gaq.push([‘_trackEvent’, ‘External’, ‘Click’, extLink]);
if (jQuery(this).attr(‘target’) != undefined && jQuery(this).attr(‘target’).toLowerCase() != ‘_blank’) {
setTimeout(function() { location.href = href; }, 200);
return false;
}
});
}
else if (href && href.match(/^mailto\:/i)) {
jQuery(this).click(function() {
var mailLink = href.replace(/^mailto\:/i, ”);
_gaq.push([‘_trackEvent’, ‘Email’, ‘Click’, mailLink]);
});
}
else if (href && href.match(filetypes)) {
jQuery(this).click(function() {
var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
var filePath = href;
_gaq.push([‘_trackEvent’, ‘Download’, ‘Click-‘ + extension, filePath]);
if (jQuery(this).attr(‘target’) != undefined && jQuery(this).attr(‘target’).toLowerCase() != ‘_blank’) {
setTimeout(function() { location.href = baseHref + href; }, 200);
return false;
}
});
}
});
});
}
<script>

Das schöner formatiere JavaScript gibt es hier.

Edit 25.10.2016: Einen Lösungsansatz zur Implementation mit dem Google Tag Manager findet ihr hier im Blog von Christian Ebernickel.

Innerhalb von Google Analytics sieht das Ganze dann so aus

Klicks nach Kategorie

Event Tracking nach Kategorie

Event Tracking nach Kategorie

 

Unterteilung nach Kategorien. Ein Klick auf die Kategorie bringt weitere Details. Ein Klick auf Download zeigt so z.B. nur alle Downloads, ein Klick auf outbound z.B. alle Link-Klicks auf externe Webseiten, usw.

Klicks nach Ereignisaktionen

Event Tracking nach Ereignis-Aktion

Event Tracking nach Ereignis-Aktion

 

Welche Aktion wurde am meisten ausgeführt.

Klicks nach Labels

Event Tracking nach Ereignis-Labels

Event Tracking nach Ereignis-Labels

 

Welche Aktion wurde auf welcher Seite am meisten ausgeführt.

Facebook Instagram Twitter LinkedIn Xing TikTok

Kommentar via Facebook

Bitte akzeptieren Sie die Cookies um die Facebook Kommentare zu nutzen.

Schreib uns einen Kommentar

Möchtest Du immer auf dem neusten Stand mit unseren Newsletter sein?

Melde Dich jetzt an