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 […]
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.
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!
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.
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:
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.
Klicks 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
Welche Aktion wurde am meisten ausgeführt.
Klicks nach Labels
Welche Aktion wurde auf welcher Seite am meisten ausgeführt.