Google Analytics Event Tracking in 3 Schritten
Aktualisiert am 17.06.2020
Lesedauer: 7 min

Fast alle gängigen Web Analyse-Tools basieren darauf, die Bewegung von Benutzern zwischen verschiedenen Seiten einer Website aufzuzeichnen. Doch diese Vorgehensweise ist inzwischen nicht mehr ausreichend: Dank moderner JavaScript-Frameworks oder "One-Pagern" (Websites, die nur aus einer einzigen langen Seite bestehen) werden wichtige Interaktionsaspekte dadurch vernachlässigt. In solchen Fällen kann Event Tracking Ihnen dabei helfen zu erfassen, was Ihre Besucher auf Ihrer Website eigentlich tun. In diesem Artkel erklären wir Ihnen, welche Voraussetzungen für diese Technik erfüllt sein müssen und wie Sie Event Tracking erfolgreich implementieren und dafür nutzen, Ihren Zielen näher zu kommen.
Achtung: Die in diesem Artikel verwendeten Code Beispiele verwenden das weit verbreitete JavaScript Framework jQuery. Falls Sie jQuery nicht auf Ihrer Website verwenden, müssen Sie es installieren oder unsere Beispiele entsprechend anpassen. Eine Anleitung zur Integration von jQuery auf Ihrer Seite finden Sie zum Beispiel hier.
1. Vorbereitung
1.1 Die richtige Google Analytics Version
Die Grundvoraussetzung für die Nutzung von Event Tracking ist natürlich erst einmal ein funktionierender Google Analytics Tag. Im Laufe der Zeit hat Google den Google Analytics Tag mehrfach verändert, so dass es folgende Versionen gibt:
- Synchroner "Traditional" Google Analytics Code: ga.js mit z.B. der Funktion pageTracker.trackPageview()
Asynchroner Google Analytics Code: ga.js bzw. dc.js mit der Funktion _gaq.push(...)
Universal Analytics Code: analytics.js mit der Funktion ga(...)
Jede Version brachte erhebliche Weiterentwicklungen mit sich. Die neueste Version, Google Universal Analytics, vereinfacht oft benötigte Techniken wie Crossdomain-Tracking und bringt Neuerungen wie die Unterstützung von User-IDs, mit deren Hilfe bestimmte Benutzer geräteübergreifend identifiziert werden können. In diesem Artikel beziehen sich alle JavaScript-Code Beispiele auf Universal Analytics und sind nicht für den asynchronen oder synchronen Tag geeignet. Falls Sie eine ältere Version verwenden, finden Sie unter developers.google.com eine Anleitung zur Aktualisierung. Bei allen gängigen Content Management und Shopsystemen gibt es für Google Analytics meistens fertige Plugins oder Module, die nur aktualisiert oder ersetzt werden müssen. Eine Anleitung zur allgemeinen Installation von Google Analytics finden Sie unter Google Analytics in 4 Schritten einfach einrichten.
1.2 Verstehen der Syntax
Google Analytics funktioniert über die Scriptsprache JavaScript. Die Syntax und die Möglichkeiten des Event Trackings werden von Google hier ausführlich erklärt. Doch keine Angst: Sie müssen kein Programmierer sein, um erweiterte Funktionen wie Event Tracking zu verwenden. Wir versuchen Ihnen nachfolgend, die Basics näher zu bringen und bieten Ihnen fertigen Code, den Sie so auf Ihrer Website übernehmen können.
Die Basis für das Event Tracking bietet die Google Analytics Funktion ga(). Diese enthält enthält bis zu sieben durch Komma abgetrennte Parameter und sieht folgendermaßen aus:
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
Die ersten beiden Parameter 'send' und 'event' sind zur Identifikation des Event Trackings notwendig. Dahinter fängt der individuelle Teil an, der in der nachfolgenden Tabelle erklärt wird.
Parameter | Typ | Muss angegeben werden | Beschreibung |
---|---|---|---|
eventCategory | Text | Ja | Enthält normalerweise das Objekt, mit dem interagiert wird (z.B. 'Video' ) |
eventAction | Text | Ja | Beschreibung der durchgeführten Aktion, wie 'Klick', 'Play' oder 'Scroll' |
eventLabel | Text | Nein | Dient zur Kategorisierung der Events innerhalb der gewählten Kategorie |
eventValue | Zahl (Integer) | Nein | Muss eine positive Zahl sein |
fieldsObject | JavaScript Objekt | Nein | Beinhaltet weitere Optionen, die wir später noch erklären |
Über den letzten Parameter, das fieldsObject, ist es möglich optional weitere Konfigurationen an Google Analytics zu übergeben:
- nonInteraction (true / false): Legen Sie mit true fest, dass diese Interaktion keinen Einfluss auf Ihre Absprungrate hat. Das heißt: Ein Nutzer, der auf Ihre Startseite kommt, ein entsprechendes Event auslöst und wieder geht, gilt als Absprung. Steht dieser Wer auf false (so wie es standardmäßig ist), wird er aufgrund der ausgeführten Aktion nicht als Absprung gezählt. Eine ausführliche Erklärung finden Sie in der Google Hilfe.
- transport: Diese Option wird hauptsächlich bei Events verwendet, die einen Seitenwechsel erkennen sollen (Links oder Formulare). Der Hintergrund ist, dass die Übermittlung von Anfragen vom Browser abgebrochen wird, sobald ein Wechsel auf eine neue Seite stattfindet (es spielt hierbei keine Rolle, ob es sich um eine neue Seite auf Ihrer Domain oder um einen externen Link handelt). Um sicherzugehen, dass das Event auch wirklich bei Google Analytics ankommt, kann die Übertragungsmethode auf den Wert beacon gesetzt werden.
Wann genau Sie diese zusätzlichen Optionen brauchen und wie Sie sie weitergeben, werden wir in den nachfolgenden Anwendungsbeispielen erklären.
2. Planung und Implementierung
2.1 Planung & Naming
Wenn Sie sich über die konkreten Anwendungsfälle im Klaren sind, müssen Sie sich im nächsten Schritt mit dem Naming befassen. Vernachlässigen Sie diesen Schritt nicht: Machen Sie sich auf jeden Fall Gedanken um die Benennung und Nutzung von Category, Label und Value. Unserer Erfahrung nach ist es bei manchen Kunden schwierig, mit den verfügbaren drei "Dimensionen" alle Events wie gewünscht abzubilden.
Ein Beispiel: Wir benutzen Google Analytics Event Tracking, um zu erkennen, ob Benutzer unsere Beiträge auf TrafficDesign.de bewerten oder nicht. Als EventValue können wir jedoch nur Zahlen übergeben. Es macht daher Sinn, als Value die Anzahl der Sterne zu nutzen. Hätten wir diese Einschränkung in unserer Planung nicht berücksichtigt und beispielsweise EventLabel für die Anzahl der Sterne genutzt, könnten wir nicht den Artikel als Label) mit übergeben, der bewertet wurde. Ein nachträgliches Ändern der Zuordnung würde eine nicht mehr behebbare, inkonsistente Speicherung in Google Analytics bedeuten.
2.2. Anwendungsbeispiele & Implementierung
2.1. Klicks auf ausgehende Links und Downloads / PDF Dateien
Um einen Download oder externen Link auf Ihrer Seite entsprechend zu tracken, führen Sie einfach die nachfolgenden zwei Schritte durch.
Schritt 1: Fügen Sie den nachfolgenden Code-Schnipsel auf Ihrer Website ein (auch zu finden in der Google Hilfe).
var captureOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
}
</script>
Das eigentliche Event wird hier über die Funktion ga() versendet. Die hier verwendeten Werte für eventCategory (outbound), eventAction (click) und eventLabel (die entspr. url) sind zwar nur exemplarisch, werden in der Praxis jedoch tatsächlich häufig genau so benannt. Um ga() herum befindet sich jedoch noch die Funktion captureOutboundLink, die Ihnen dabei hilft das Event leichter mit Ihrem Link zu verknüpfen.
Schritt 2: Fügen Sie das nachfolgende onclick-Attribut zu dem Link hinzu, den Sie gerne mit dem Event versehen möchten.
Mit diesem Codeschnipsel stellen Sie sicher, dass auch ältere Browser, die kein transport: beacon unterstützen, das Event korrekt übertragen.
2.2. Klicks auf alle ausgehenden Links erfassen
Die oben genannte Methode funktioniert hervorragend für einzelne Links. Geht es jedoch darum alle ausgehenden Links zu kennzeichnen, haben Sie damit einen hohen Erst- und laufenden Wartungsaufwand. Mit dem nachfolgenden Code sorgen Sie dafür, dass alle ausgehenden Links automatisch entsprechend gekennzeichnet werden.
// Definieren der Funktion
var captureOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
}
// Sicherstellen, dass alle Links automatisch das Event verschicken
jQuery(document).ready(function() {
jQuery("a").click(function() {
if(this.host!=document.location.host) {
captureOutboundLink(jQuery(this).attr('href'));return false;
}
});
});
</script>
Eine Einschränkung gibt es hier: Dieser Code funktioniert nur mit ausgehenden Links und nicht mit einem Download oder Formular - dafür müssten Sie den Code noch erweitern.
2.3. Klicks auf Reiter oder ein-/ausklappbare und sich dynamisch verändernde Inhaltsbereiche
Falls Sie dynamische Elemente auf Ihrer Website verwenden und diese entsprechend kennzeichnen möchten, ist die Vorgehensweise ähnlich. Die Implementierung ist jedoch etwas komplizierter: Da dynamische Elemente häufig bereits JavaScript-UI Bibliotheken oder sogar ganze Frameworks (wie z.B. AngularJS) nutzen und Links daher oft nicht ganz so einfach mit den Events "ergänzt" werden können, sollten Sie sich hier Hilfe bei einem Experten holen. Alternativ bieten wir Ihnen an, Ihnen eine kostenfreie Hilfestellung über die Kommentarfunktion dieses Beitrags zu geben.
Beim Klick z.B. auf einen Reiter einer dynamisch ladenden Navigation wären sinnvolle Benennungen NavigationTab (eventCategory) click (eventAction) so wie ein passender und einmaliger Identifier als eventLabel.
2.4. Interaktionen mit einem Videoinhalt erfassen
Bei einem Videoinhalt verhält es sich ähnlich: Konkrete Hilfestellungen sind schwierig; zu unterschiedlich ist die Integration verschiedener Video-Player. Wir verweisen daher wieder auf die Kommentarfunktion und geben Ihnen nachfolgend einen Naming-Vorschlag.
2.5. Scrollverhalten auf einer Seite erfassen
Eine weitere, wichtige Möglichkeit der Anwendung betrifft das Scrollverhalten eines Nutzers. Um zu verhindern, dass ein einen Nutzer, der durch "scrollen" mit Ihrer Website interagiert als Absprung (Bounce) in Google Analytics vermerkt wird, können Sie das bereits fertige Google Analytics Plugin ScrollDepth verwenden.
Mit diesem Plugin können Sie sowohl feststehende absolute oder relative Scroll-Punkte nutzen (wie z.B. das Scrollen bis zu 25%, 50% oder 75% der Seitenhöhe), oder auch Events abschicken, sobald ein bestimmter, von Ihnen festgelegter Bereich erreicht wird.
Wichtig: Um Absprünge entsprechend zu deaktivieren, müssen Sie die ScrollDepth Option nonInteraction auf false setzen.
3. Auswertung in Google Analytics
Überprüfen Sie in jedem Fall, ob die Events erfolgreich erfasst werden. Die einfachste Methode dafür ist die Echtzeit-Messung von Google Analytics. Wechseln Sie dafür in den entsprechenden Google Analytics Account, und wählen Sie unter Echtzeit den Punkt Übersicht.
Wenn Sie parallel Ihre Website besuchen, sollte auf der rechten Seite nach einigen Sekunden (mindestens) ein Strich zu sehen sein. Ist dies der Fall, wechseln Sie in der linken Navigation auf den Punkt Ereignisse. Lösen Sie nun in einem anderen Fenster das zu überprüfende Event auf Ihrer Seite aus und beobachten Sie die Google Analytics Statistik. Wenn Sie alles richtig gemacht haben, sollte das Event so wie im nachfolgenden Beispiel nach kurzer Zeit korrekt dargestellt werden:
Sollte das funktionieren haben Sie es geschafft. Nutzen Sie nun den Menüpunkt Verhalten › Ereignisse › Übersicht um ausgelöste Ereignisse im Nachhinein anzusehen und zu analysieren.
Wir unterstützen Sie gerne und kostenfrei bei überschaubaren Problemstellungen. Nutzen Sie dafür einfach unsere Kommentarfunktion.
Externe Quellen
Die nachfolgenden externen Quellen bieten eine zusätzliche, gute Quelle zur Verwendung von Google Analytics Event Tracking:
- Event Tracking in Google Analytics (ganalyticsblog): Weiterführende Informationen und viele Fallbeispiele für den älteren, asynchronen Google Analytics Code
- Mit Event Tracking Google Analytics gezielter messen und auswerten (zielbar.de): Weiterführende Informationen (für die neue Google Analytics Version). Hier gibt es einen Code Schnipsel zur Erfassung von ausgehenden Links, der ohne jQuery auskommt.

Sprechen Sie uns unverbindlich an und lassen Sie sich von uns beraten.
Kommentieren Sie diesen Artikel!
Schreiben Sie einen Kommentar und Sie bekommen zeitnah eine Rückmeldung von uns.
Hallo,
danke für diese tolle, verständliche Anleitung.
Wenn ich den Code aus 2.2 einfüge, dann wird leider keine Aktion mehr auf meiner Homepage bei einem Click ausgeführt. Die Links öffnen sich einfach nicht mehr. Entferne ich den Code wieder, funktioniert alles wunschgemäß.
Haben Sie da eine Idee?
Viele Grüße
Tn Rmml
Hallo Tn Rmml,
welche Version des Google Analytics Code ist denn bei Ihnen hinterlegt?
In diesem Artikel noch nicht enthalten ist (s. Abschnitt 1.1 Die richtige Google Analytics Version) ist der sogenannte gtag, der inzwischen standardmäßig von Google Analytics vorgeschlagen wird.
Hier sieht der Code für das Event-Tracking folgendermaßen aus:
gtag('event', eventName, eventParameters);
ga('send', 'event', 'Videos', 'play', 'Fall Campaign');
gtag('event', 'play', { 'event_category': 'Videos', 'event_label': 'Fall Campaign' });
Hallo, danke für die ausführliche Erklärung. Gibt es jetzt noch die Möglichkeit im Feld "eventValue" einen späteren Umsatz zuzuordnen?
VG
J
Hallo Jörg,
du kannst dem Event nachträglich keinen eventValue zuordnen. Dieser Wert kann nur beim Ereignis selber vergeben werden. Du kannst jedoch ein Segment in Google Analytics erstellen, um dir Nutzer oder Sessions anzeigen zu lassen, bei denen das gewünschte Event ausgelöst wurde.
Viele Grüße
Octavio