Google Analytics Event Tracking in 3 Schritten

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:

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.

Ü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).

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.

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.

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.