So verfolgen Sie das Benutzerverhalten mit Google Analytics-Ereignissen

Um es kurz zu machen; Sie haben Ihre Website gerade umgestaltet und Sie haben von allen bewährten Methoden Gebrauch gemacht. Die Website wird schnell geladen und sieht mit der neuen Benutzeroberfläche sicherlich viel besser aus.

Aber haben Sie darüber nachgedacht, wie es geht messen dein neues Design? Woher wissen Sie, ob das neue Popup, das Sie gerade hinzugefügt haben, die Konvertierung fördert oder der Erfahrung schadet? Wie oft wird das Popup angezeigt und wie viele Personen verlassen es? Wie viele Benutzer navigieren auf der Website über das gerade hinzugefügte Off-Canvas-Menü? Wie viele Personen sehen den Image-Slider auf der Homepage nach der ersten Folie? Die Fragen sind vielfältig.

In diesem Tutorial zeige ich Ihnen, wie Sie die Google Analytics Event Tracking-API (was für ein langer Name!) Für das Finden der Antworten nutzen können.

Fertig machen

Wenn Sie noch kein Google Analytics-Nutzer sind, erstellen Sie ein Konto und befolgen Sie die Onboarding-Anweisungen, um ein Tracking-Skript für Ihre Website zu generieren. Normalerweise sieht das Snippet, das Sie erhalten haben, wie im Beispiel unten mit der UA-XXXXXX-X die eindeutige Tracking-ID Ihrer Website.

(Funktion (i, s, o, g, r, a, m) i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || Funktion () (i [r] .q = i [r] .q || []). push (Argumente), i [r] .l = 1 * neues Datum (); a = s.createElement (o), m = s.getElementsByTagName (o) [ 0]; a.async = true; a.src = g; m.parentNode.insertBefore (a, m);) (Fenster, Dokument, 'Skript', 'http://www.google-analytics.com/ analytics.js ',' ga '); ga ('create', 'UA-XXXXXX-X', 'auto'); ga ('senden', 'seitenansicht'); 

Für diese Übung müssen Sie auch eine Chrome-Erweiterung (Google Analytics Debugger) installieren, um die Google Analytics-Skripts später auf unserer Website zu debuggen.

Google Chrome Debugger ist aktiviert

Sobald wir diese eingerichtet haben, können wir mit unserem ersten Beispiel beginnen.

Einen Klick verfolgen

Stellen Sie sich vor, wir haben ein paar Buttons (oder Ankerlinks, die als Buttons gestaltet wurden). Wir fügen den ersten über der Falte in unserem sogenannten "Heldenbereich" hinzu und einen zweiten Knopf unmittelbar vor der Fußzeile. Wie Sie unten sehen können, zeigt jede Schaltfläche auf dieselbe Seite, verfügt über verschiedene Stilklassen und eine eindeutige ID. In diesem Fall können wir die "Event Tracking API" verwenden, um herauszufinden, welche Schaltfläche mehr Klicks erhält.

 Kaufe jetzt  Kaufe jetzt

Die Verwendung der Ereignisverfolgung ist relativ einfach, da für die Definition des Ereignisses keine strengen Konventionen erforderlich sind. Zuerst müssen wir die Knöpfe an die binden klicken Veranstaltung.

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (function (btn) btn.addEventListener ('click', function (event) ););

Dann fügen wir hinzu ga () Hierbei handelt es sich um eine Funktion, die von den zuvor hinzugefügten Google Analytics-Skripts verfügbar gemacht wird. Dieselbe Funktion wird auch für das Aufzeichnen eines "Seitenaufrufs" verwendet. Ebenso verfolgen wir ein Ereignis mit dem senden Befehl mit Veranstaltung als einstellen hitType Argument zusammen mit einer Reihe von erforderlichen Parametern, nämlich:

• eventAction: spezifiziert die Benutzerinteraktion oder den Zustand der Benutzerschnittstelle, z. klicken, abspielen, Pause, usw.
• eventCategory: gibt das zu verfolgende Objekt an, z. Videos, Tasten, Pop-ups, usw.
• eventLabel: eine eindeutige Bezeichnung oder ID des Ereignisses. Wir fügen diese Variable hinzu, um mehrere Instanzen desselben Objekts zu kategorisieren.

Wie bereits erwähnt, legt Google keine strengen Regeln fest. Sie können diese auf beliebige Weise auf Ihrer Website anwenden. In unserem Fall setzen wir diese Variablen wie folgt:

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (function (btn) btn.addEventListener ('click', function (event)) ga ('send', 'event', eventAction: 'click', eventCategory: 'Jetzt Schaltflächen kaufen'), eventLabel: event .target.id // kaufen-jetzt-oben || kaufen-jetzt-unten);););

Wenn die Google Analytics Debugger-Erweiterung aktiv ist, können wir auf eine unserer Schaltflächen klicken und die DevTools-Konsole untersuchen, um zu sehen, ob der Tracker funktioniert:

Der Tracker sendet Daten an Google Analytics

Sobald Google Analytics die Daten erhalten hat, werden diese unter Echtzeit> Ereignisse und Verhalten> Ereignisse.

In diesem Screenshot sehen wir, dass unsere Schaltfläche "Jetzt kaufen" unterhalb der Falte mehr Klicks erhält als die oben abgebildete.

Ein Karussell aufspüren

Unser zweites Beispiel wird einen Image Slider oder Karussell enthalten. Sie haben wahrscheinlich Argumente für und gegen die Verwendung von Karussells auf Websites gefunden; "Menschen interagieren nicht wirklich mit Karussells" oder "Menschen interagieren nur mit der ersten Folie". Aber treffen diese Argumente auf Ihre Website zu? Ohne korrekte Daten ist es schwer zu sagen.

Lassen Sie uns Google Analytics-Ereignisse in unser Karussell integrieren, das wir mit Slick.js erstellt haben. Dieses jQuery-Plugin bietet eine Handvoll benutzerdefinierter jQuery-Ereignisse. Dies ist genau das, was wir benötigen, um Google Analytics Event Tracking auszuführen. In der Slick-Dokumentation erfahren Sie, wie Sie das Karussell bauen.

Unser Karussell ist für die Demo einfach gemacht.

Unser Karussell besteht aus fünf Folien. Ähnlich wie bei unserem ersten Beispiel haben wir auch eine eindeutige ID für jede der Folien hinzugefügt (z. Slide-1, Slide-2, Folie-3, etc.), die wir in der eventLabel Parameter. Das Ziel hier ist es herauszufinden:

1. ob Benutzer das Karussell nach der ersten Folie betrachten 
2. und um die Anzahl der Ansichten für jede Folie zu erfassen. 

Dazu können wir die Slick.js-Ereignisse verwenden streichen und Nach der veränderung.

Streichen

Das streichen Das Ereignis wird, wie der Name schon sagt, ausgelöst, wenn der Benutzer mit der Wischgeste durch das Karussell navigiert. In diesem Fall setzen wir die eventAction Parameter zu streichen auch.

$ ('. carousel'). on ('swipe', Funktion (event, slick, direction) ga ('send', 'event', eventCategory: 'carousel', eventAction: 'swipe', eventLabel: $ ( this) .find ('.slick-active') .attr ('id') // Folie-1, Folie-2, Folie-3 usw.););

afterChanges

Das afterChanges ist das Ereignis, das ausgelöst wird, wenn die Folie geändert wird; mit anderen Worten, wenn der Benutzer die nächste oder vorherige Folie im Karussell betrachtet. In diesem Fall setzen wir die eventAction zu Aussicht für „neue Folienansicht“.

$ ('. carousel'). on ('afterChange', Funktion (Ereignis, Slick, Richtung) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'view', eventLabel: $ ( this) .find ('.slick-active') .attr ('id') // Folie-1, Folie-2, Folie-3 usw.););

Sobald Google Analytics die Daten erfasst hat, werden wir in Kürze erfahren, wie viele Benutzer mit unserem Karussell interagieren, wie viele Ansichten jede Folie erhält und wie viele Benutzer bei Verwendung des Karussells eine Wischgeste verwenden.

Wie wir oben sehen können, erhält unser Karussell insgesamt 19 Ansichten, von denen 14 durch die Wischgeste ausgeführt werden.

Was kommt als nächstes?

Wir haben gerade zwei Beispiele für die Integration von Google Analytics-Ereignisspuren in unsere Webseite zum Sammeln von Benutzerinteraktionsdaten gesehen. Diese Zahlen geben uns eine solide Referenz, um zu beurteilen, ob das neue Design besser ist als das alte Design, was uns letztendlich dabei hilft, die UX für unsere Website zu verbessern.

Wir empfehlen Ihnen, die Dokumente zu lesen, um die Verwendung der Google Analytics-API zur Ereignisverfolgung weiter auszudehnen.

Weitere Ressourcen

• API zur Verfolgung von Google Analytics-Ereignissen
• Entmystifizierung von Google Analytics in Tuts+
• Eine Untersuchung der Nutzung von Karussells auf mobilen E-Commerce-Websites