Start KnowHow Online Marketing Google Analytics Event Tracking in 3 Schritten

Google Analytics Event Tracking in 3 Schritten

Von
Simon Marqua

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

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.

Event Tracking in 3 Schritten

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.

ParameterTypMuss angegeben werdenBeschreibung
eventCategoryTextJaEnthält normalerweise das Objekt, mit dem interagiert wird  (z.B. 'Video')
eventActionTextJaBeschreibung der durchgeführten Aktion, wie 'Klick', 'Play' oder 'Scroll'
eventLabelTextNeinDient zur Kategorisierung der Events innerhalb der gewählten Kategorie
eventValueZahl (Integer)NeinMuss eine positive Zahl sein
fieldsObjectJavaScript Objekt NeinBeinhaltet weitere Optionen, die wir später noch erklären

 

Achtung: Wenn eventValue keine positive Zahl (integer) ist, wird das Event von Google Analytics nicht gespeichert und die Interaktionen gehen verloren. Der Browser (und auch die Developer Tools) zeigen in diesem Fall keinen Fehler an!

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

<script>
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.

<a href="http://www.beispiellink.de" onclick="captureOutboundLink(jQuery(this).attr('href'));return false;">Beispieltext</a>

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.

<script>

// 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.

ga('send', 'event', 'NavigationTab', 'click', 'Reiter 2');

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.

ga('send', 'event', 'Videos', 'play', 'Video XYZ');

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.

Echtzeit Event Tracking Google Analytics

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:

Ereignisse in der Echtzeit Übersicht

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.

Haben Sie Probleme mit Ihrem Event Tracking?
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:

 

https://www.trafficdesign.de/sites/default/files/styles/twittercard/public/google_analytics_event_tracking_0.jpg?itok=5GcuLnCi
Fanden Sie den Artikel hilfreich?
Durchschnitt: 4 (329 votes)
Bild des Benutzers Simon
Simon Marqua
Seit bereits über einer Dekade habe ich mich dem Online Marketing verschrieben, bin leidenschaftlicher FC Fan sowie Inhaber & Geschäftsführer von TrafficDesign.

Brauchen Sie Unterstützung bei diesem Thema?

Sprechen Sie uns unverbindlich an und lassen Sie sich von uns beraten.

Anfrage schicken »


Kommentieren Sie diesen Artikel!

Schreiben Sie einen Kommentar und Sie bekommen zeitnah eine Rückmeldung von uns.

Kommentare

Bild des Benutzers Tn Rmml
Tn Rmml - 3. November 2019 - 16:04

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

Bild des Benutzers Simon
Simon - 27. November 2019 - 16:05

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);
 
Der Event-Tracking-Code, der mit (alten) Universal Analytics Code so aussieht: 
ga('send', 'event', 'Videos', 'play', 'Fall Campaign');
sieht mit dem neuen gtag folgendermaßen aus:
gtag('event', 'play', {   'event_category': 'Videos',   'event_label': 'Fall Campaign' });
Ich hoffe, das hilft weiter und wünsche viel Erfolg beim event-tracken! :-)
 
Viele Grüße
Simon
Bild des Benutzers Jörg
Jörg - 15. April 2020 - 22:31

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

Bild des Benutzers octavio
octavio - 27. April 2020 - 14:55

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

Bild des Benutzers Melvin
Melvin - 6. April 2021 - 4:02

Hallo Simon,

vielen Dank für diese tolle Anleitung.

Wir selber nutzen allerdings eher die Möglichkeiten, die der GTM gemeinsam mit Google Analytics bietet. Hier erstellen wir dann eine Variable für automatisches Ereignis und wählen als Variablentyp "Element-URL" und als Komponententyp "Ist ausgehend" aus. Diese Variable wird dann in den Tag für die ausgehenden Links eingearbeitet. Funktioniert auch einwandfrei.

Freundliche Grüße,
Melvin

Kommentar verfassen