Lernen, Google Analytics effektiver bei CodePen zu nutzen

❥ Sponsor

So nutzen die meisten Leute Google Analytics: Sie kopieren den Standard-Tracking-Snippet in Ihre Vorlagen. Schauen Sie sich die Pageview-Daten an, die eingehen. Das ist in Ordnung, aber für viele Websites sind das nicht die nützlichsten Analysen. Google Analytics kann fast alles verfolgen. Es ist sehr flexibel und sehr leistungsfähig. Philip Walton und ich haben diesen Artikel gemeinsam verfasst, um Ihnen zu zeigen, wie Sie benutzerdefinierte GA-Funktionen nutzen können, um Daten zu sammeln, von denen Sie vielleicht nicht wussten, dass Sie sie sammeln können, und wie Sie diese Daten auf nützliche Weise betrachten können.

Der Anfang

Es ist ziemlich offensichtlich, dass Sie für jede Webanwendung *irgendeine* Art von Analysen benötigen. Auf der grundlegendsten Ebene müssen Sie wissen, wie viele Leute die App nutzen und ob diese Zahl steigt oder sinkt.

Die Wahl bei CodePen fiel auf Google Analytics, da die meisten Teammitglieder es bereits zuvor verwendet hatten. Es war kostenlos und einfach zu installieren. Das Team machte das, was die meisten Leute tun, wenn sie Google Analytics installieren: Wir haben den Standard-Tracking-Snippet kopiert und eingefügt und *das war's*. Nichts Besonderes.

Die Daten begannen einzugehen, und nach ein paar Tagen hatte man eine allgemeine Vorstellung davon, welche Seiten die Leute auf CodePen besuchten.

Das Problem ist, dass CodePen keine seitenaufrufbasierte Seite ist, wie es zum Beispiel eine Publikation ist. Welche Seiten die Leute besuchen, erzählt nicht die Geschichte, wie Benutzer mit CodePen interagieren. Viel interessanter ist es zu wissen, was die Leute auf diesen Seiten tun, damit Optimierungen vorgenommen werden können, um ihre Erfahrung zu verbessern.

Leider wusste niemand im Team wirklich, wie man Google Analytics nutzt, um die benötigte Vielfalt an Informationen zu erhalten, daher wurde lange Zeit nichts unternommen.

Kurz gesagt: Chris trifft Philip auf der CSSDevConf im letzten Herbst. Philip sagt, dass viele Entwickler in der gleichen Situation sind – sie nutzen das kostenlose, leistungsstarke Werkzeug, das ihnen zur Verfügung steht, nicht. Ein Teil von Philips Aufgabe ist es, Entwicklern Wissen zu vermitteln. In einem epischen Wirbelwind aus Erfolgen haben sie sich zusammengetan, um intelligentere Dinge mit Analysen bei CodePen zu tun und diese mit allen zu teilen.

Was CodePen von Analysen erwartet hat

Analysedaten sind bedeutungslos, wenn Sie nicht herausgefunden haben, welche Probleme Sie lösen oder welche Fragen Sie beantworten möchten. CodePen erstellte eine Liste von Fragen, die sie für nützlich hielten und die echte Fragen beantworten, die sie zur Nutzung der App haben.

Hier sind ein paar schnelle Fragen

  • Wie viele Benutzer sind angemeldet (im Gegensatz zur Nutzung der Website abgemeldet/anonym)? Gibt es eine Möglichkeit, nur die Interaktionen von angemeldeten Benutzern zu melden?
  • Wie viele angemeldete Benutzer haben PRO-Konten? Wie unterscheiden sich die Interaktionen von PRO-Benutzern von denen von Nicht-PRO-Benutzern?
  • Wie viele *Gesamt*-Benutzer waren *kürzlich* aktiv? Was ist das MAU, wie man sagt (Monthly Active Users)?
  • Wenn Benutzer das Layout des Editors ändern, welches bevorzugen sie: oben, links oder rechts?
  • Wenn Benutzer einen Pen „herzen“, in welcher Ansicht befinden sie sich? Was ist, wenn sie einen Kommentar hinterlassen? Diese Aktionen können von mehreren Orten aus durchgeführt werden.
  • Wenn Benutzer auf Links zu anderen Websites klicken, wohin gehen sie?

Verstehen, wie Google Analytics funktioniert

Es gibt ein paar Schlüsselkonzepte, die das Verständnis aller anderen Aspekte von Google Analytics erheblich erleichtern.

Alles beginnt damit, *zu wissen, wie man Daten* an Google Analytics sendet. Und später, wie man diese Daten auf sinnvolle Weise zurückbekommt.

Daten an Google Analytics senden

Sie können praktisch alles senden, was Sie möchten!

Das Normale (das der Standard-Tracking-Snippet sendet) ist der pageview. Sie senden im Grunde nur eine HTTP-Anfrage mit einigen Schlüssel/Wert-Daten, die in der URL oder im POST-Body kodiert sind. Die Schlüssel sind Dinge wie der Seitentitel, z. B. „Explore Pens on CodePen“.

Mit dem Standard-Tracking-Snippet sehen Sie diese beiden Zeilen am Ende

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Die erste Zeile erstellt ein Tracker-Objekt, das im Grunde nur ein JavaScript-Objekt ist, das die oben erwähnten Schlüssel/Wert-Daten speichert. Die zweite Zeile sendet diese Schlüssel/Wert-Daten über eine HTTP-Anfrage an das Google Analytics-Konto (technisch die „Property“), das durch die Nummer „UA-XXXXX-Y“ angegeben ist, die in der vorherigen Zeile verwendet wird.

Google Analytics empfängt diese HTTP-Anfragen (bekannt als „Hits“) und verarbeitet sie. Basierend auf den Daten in jedem Hit sowie der Zeit und Reihenfolge des Empfangs der Hits kann Google Analytics die Daten in eine Hierarchie von Benutzern, Sitzungen und Interaktionen einordnen.

In CodePen-Begriffen

  • Ein Benutzer ist jeder, der die CodePen-Website besucht.
  • Eine Interaktion ist etwas, das sie auf der Website tun (z. B. ihre Profilseite besuchen oder auf den „Herz“-Button eines Pens klicken).
  • Eine Sitzung ist eine Gruppe von Interaktionen desselben Benutzers, die innerhalb eines bestimmten Zeitraums stattfinden. Wenn sich ein Benutzer bei CodePen anmeldet, einen Pen erstellt und dann geht, wäre das eine Sitzung. Wenn er später am Tag zurückkommt, wäre das eine andere Sitzung.

Ein Benutzer kann viele Sitzungen haben, und eine Sitzung kann viele Interaktionen haben.

Daten berichten

Sobald Google Analytics Ihre Daten in Benutzer, Sitzungen und Interaktionen eingeteilt hat, können Sie diese Daten abfragen und einen Bericht erhalten.

Google Analytics verfügt über viele integrierte Berichte. Sie sind nicht auf diese Berichte beschränkt.

Tatsächlich ist der beste Weg, um Ihre Effektivität mit Google Analytics zu verbessern, wahrscheinlich das Erlernen der Erstellung eigener Berichte (genannt „Benutzerdefinierte Berichte“), damit Sie beliebige Daten abfragen können. Wenn Sie Google Analytics anwendungsspezifische Daten senden, werden Sie nicht in der Lage sein, all Ihre Fragen nur mit den integrierten Berichten zu beantworten.

Jeder Bericht (ob integriert oder benutzerdefiniert) in Google Analytics ist das Ergebnis einer Abfrage nach einer Reihe von Dimensionen und Metriken. Da die Erstellung eines benutzerdefinierten Berichts die Angabe der Dimensionen und Metriken erfordert, ist es wichtig zu verstehen, was diese sind.

Metriken sind eine quantitative Messung von Daten, wie z. B. die Gesamtzahl der besuchten Seiten (Seitenaufrufe) oder die durchschnittliche Verweildauer auf der Website (Durchschn. Sitzungsdauer). Metriken sind immer numerisch. Sie sind normalerweise Zählungen, aber sie können auch Durchschnittswerte oder Verhältnisse sein.

Dimensionen sind Querschnitte Ihrer Metriken, sie unterteilen Ihre Daten weiter. Zum Beispiel möchten Sie möglicherweise die Gesamtzahl der Seitenaufrufe nach der Seiten-URL unterteilen, um zu sehen, welche Seiten beliebt sind, oder Sie möchten die durchschnittliche Verweildauer nach den verschiedenen Browsern unterteilen, die die Benutzer verwenden, um zu sehen, ob es Korrelationen gibt. In diesen Fällen sind Seite und Browser die Dimensionen.

Die Daten werden als Tabelle zurückgegeben. Die Dimensionswerte befinden sich normalerweise in den Spalten links, und ihre entsprechenden Metrikwerte in den Spalten rechts. Sie können optional Filter anwenden, um Zeilen bedingt aus den Ergebnissen auszuschließen.

Ein Beispiel für einen benutzerdefinierten Bericht

Die folgende Tabelle ist ein Beispiel für einen benutzerdefinierten Bericht, der Daten der letzten sieben Tage zeigt und alle diese Konzepte veranschaulicht. Der Bericht fragt die Metriken Sitzungen und Durchschn. Sitzungsdauer sowie die Dimensionen Browser und Betriebssystem ab. Anschließend filtert er die Ergebnisse, um nur Zeilen einzuschließen, bei denen der Wert des Betriebssystems „Windows“ ist.

Browser Betriebssystem Sitzungen Durchschn. Sitzungsdauer
Chrome Windows 598,713 00:03:54
Firefox Windows 127,904 00:02:49
Internet Explorer Windows 23,864 00:02:39
Opera Windows 11,436 00:03:04
Edge Windows 10,208 00:03:00

Wie Sie sehen können, ist Chrome der beliebteste Browser für Windows-Benutzer, und Chrome-Benutzer verbringen mehr Zeit auf CodePen als Benutzer anderer Browser.

Antworten auf CodePen-spezifische Fragen erhalten

Die ersten beiden Fragen unserer Liste befassen sich mit der Unterscheidung zwischen Benutzern: angemeldete Benutzer vs. anonyme Benutzer und PRO-Benutzer vs. Nicht-PRO-Benutzer.

Da Google Analytics nichts über PRO-Konten oder das Anmeldesystem von CodePen weiß, kann es diese Informationen standardmäßig nicht verfolgen. Wir können ihm diese Informationen jedoch geben!

Benutzerdefinierte Daten verfolgen

Wenn Google Analytics kein integriertes Feld für die Verfolgung der gewünschten Informationen hat, können Sie Ihr eigenes Feld erstellen. Diese werden als „Benutzerdefinierte Dimensionen und Metriken“ bezeichnet.

Wir haben bereits erwähnt, dass Dimensionen eine Möglichkeit sind, Metriken in relevante Kategorien zu unterteilen. Der angemeldete Status eines Benutzers sowie die Frage, ob er ein PRO-Konto hat oder nicht, ist letztendlich nur eine Unterkategorie der Metrik Benutzer, sodass wir benutzerdefinierte Dimensionen erstellt haben, um beides zu verfolgen.

Benutzerdefinierte Dimensionen müssen in Ihren Google Analytics-Kontoeinstellungen erstellt werden, und sobald sie erstellt sind, können Sie ihnen Werte in den Hits zuweisen, die Sie an Google Analytics senden.

Der einfachste Weg, benutzerdefinierte Dimensionsdaten mit Ihren Hits zu senden, ist die Festlegung ihrer Werte im Tracker-Objekt. Da alle Hits, die von einem Tracker gesendet werden, alle Schlüssel/Wert-Daten enthalten, die er derzeit speichert, stellt die Festlegung benutzerdefinierter Dimensionen im Tracker sicher, dass diese Werte mit allen zukünftigen Hits gesendet werden.

Hier ist die Änderung, die wir an unserem Tracking-Code vorgenommen haben, um die benutzerdefinierten Dimensionen „Logged In“ und „PRO“ festzulegen

ga('create', 'UA-XXXXX-Y', 'auto');

ga('set', {
  dimension1: __isUserLoggedIn__,
  dimension2: __isUserPro__
});

ga('send', 'pageview');

Die Variablen __isUserPro__ und __isUserLoggedIn__ sind boolesche Werte, die von Rails an die View-Vorlagen übergeben werden (und letztendlich in JavaScript-Variablen umgewandelt werden). Die Schlüssel dimension1 und dimension2 entsprechen dem Index der benutzerdefinierten Dimension, der in unseren Google Analytics-Kontoeinstellungen angezeigt wird.

Chris: Das ist für uns ein großer Schritt. Stellen Sie sich vor, Sie könnten für jeden Bericht, den Sie jemals in Google Analytics gesehen haben, sagen: „Zeigen Sie mir jetzt dieselben Daten, aber nur für PRO-Benutzer.“

Jetzt, da wir diese beiden benutzerdefinierten Dimensionen mit allen unseren Hits senden, können wir in jedem unserer Berichte nach „PRO“- oder „Logged In“-Status abfragen.

Beispiel eines benutzerdefinierten Berichts mit benutzerdefinierten Dimensionen

Hier ist ein Bericht, der die Metriken „Durchschn. Sitzungsdauer“ und „Seiten/Sitzung“ aufgeschlüsselt nach den benutzerdefinierten Dimensionen „PRO“ und „Logged In“ anzeigt.

PRO Angemeldet Durchschn. Sitzungsdauer Seiten / Sitzung
Ja Ja 00:09:08 6.51
Nein Ja 00:07:50 6.12
Nein Nein 00:02:43 2.53

Nun, da wir diese Daten zur Verfügung haben, können wir sehen, dass PRO- und angemeldete Benutzer deutlich mehr Zeit mit CodePen verbringen als anonyme Benutzer.

Hier ist ein Beispiel für dieselbe Art von Daten, nur mit der Betrachtung von Absprungraten über mehrere Dimensionen hinweg

Benutzer über Browser und Geräte hinweg genauer verfolgen

Standardmäßig identifiziert Google Analytics Benutzer, indem es einen zufälligen ID-Wert in den Cookies Ihres Browsers speichert. Dies funktioniert, um wiederkehrende Benutzer im selben Browser zu identifizieren, aber es funktioniert nicht gut, wenn ein Benutzer CodePen in verschiedenen Browsern oder Geräten besucht. Da Personen, die CodePen nutzen, dies oft für Cross-Browser- oder Cross-Device-Tests tun, kommt dies häufig vor.

Wenn Ihre Website über eine eigene Methode zur Identifizierung von Benutzern verfügt (z. B. ein Anmeldesystem), können Sie diese als Benutzer-ID zusätzlich zur Client-ID senden, die in den Cookies gespeichert ist. Google Analytics kann dann besser feststellen, ob zwei Benutzer tatsächlich dieselbe Person sind, und sie nicht doppelt zählen.

Um die Benutzer-ID-Funktion mit Google Analytics zu nutzen, müssen Sie nur die Einstellung aktivieren in Ihrem Konto und dann den Wert im Tracker-Objekt festlegen

ga('create', 'UA-XXXXX-Y', 'auto');

ga('set', {
  userId: __userID__,
  dimension1: __isUserLoggedIn__,
  dimension2: __isUserPro__
});

ga('send', 'pageview');

Benutzeraktivität messen

Die dritte Frage in unserer ursprünglichen Liste war, herauszufinden, wie viele unserer Gesamtnutzer kürzlich aktiv waren. Google Analytics verfügt über einen Bericht Aktive Benutzer, der Ihnen Metriken für aktive Benutzer für die letzten 1, 7, 14 und 30 Tage liefert.

Zum Beispiel ist die Metrik „30-Tage-Aktive Benutzer“ eine Zählung der Gesamtzahl der eindeutigen Benutzer, die mindestens einmal in den letzten 30 Tagen mit Ihrer Website interagiert haben. Bei CodePen können wir in unserer Datenbank nachsehen, wie viele Gesamtanmeldungen jemals erstellt wurden, aber eine viel bessere Metrik, um ein Gefühl für unsere „echte“ Benutzerbasis zu bekommen, ist zu wissen, wie viele von ihnen kürzlich aktiv waren.

Wie die obige Grafik zeigt, hatten am 19. Februar 2,6 Millionen verschiedene Personen CodePen mindestens einmal im vorherigen 30-Tage-Zeitraum genutzt. Am 1. Januar lag diese Zahl nur bei 1,9 Millionen. Ein Teil dieses Unterschieds ist wahrscheinlich auf geringere Feiertagsverkehr zurückzuführen, aber im Allgemeinen ist klar, dass die Anzahl der aktiven CodePen-Benutzer steigt.

Benutzerinteraktionen mit Ereignissen verfolgen

Der Standard-Tracking-Snippet erfasst Seitenaufrufe, aber er verfolgt nichts, was der Benutzer während seines Aufenthalts auf der Seite tut. Um relevantere Daten zu erfassen, mussten wir relevantere Interaktions-Hits senden. Dies haben wir mit Ereignissen getan.

Die anfängliche Liste der Fragen, die wir beantworten wollten, machte es sehr einfach zu entscheiden, welche Ereignisse wir verfolgen sollten. Hier sind die beiden, auf die wir uns in diesem Abschnitt konzentrieren werden

  • Wenn Benutzer das Layout des Editors ändern, welches bevorzugen sie: oben, links oder rechts?
  • Wenn Benutzer Pens „herzen“ oder „kommentieren“, in welcher Ansicht befinden sie sich?

Beginnen wir mit der ersten Frage: Der CodePen-Editor besteht aus drei Fenstern (HTML, CSS und JavaScript), die sich oben, links oder rechts vom Fenster befinden können. Diese Platzierung kann durch Klicken auf die Schaltfläche „Ansicht ändern“ oben rechts auf Ihrem Bildschirm und anschließendes Auswählen einer der Optionen unter „Editor-Layout“ geändert werden.

Da wir JavaScript-Code haben, der ausgeführt wird, wenn jemand eine dieser Optionen auswählt, können wir ein Ereignis an Google Analytics senden und die gewählte Editor-Layout-Einstellung einfügen.

Hier ist der grundlegende Kern, wie wir das in unserem Code gemacht haben

function handleEditorLayoutChange(placement) {

  // Do the change...

  // Then report it:
  ga('send', 'event', {
    eventCategory: 'Editor Layout',
    eventAction: 'change',
    eventLabel: placement
  });

}

Jetzt, wo wir diese Ereignisse sammeln, können wir einen Bericht für die Metrik Gesamtereignisse und die Dimension Ereignislabel ausführen. Wir müssen die Ergebnisse auch filtern, um nur Ereignisse einzuschließen, bei denen die Dimension Ereigniskategorie auf „Editor Layout“ und die Dimension Ereignisaktion auf „change“ gesetzt sind. Hier sind die Ergebnisse für die letzten 30 Tage

Ereignislabel Gesamtereignisse
Links 73,186 (50.4%)
Rechts 37,204 (25.6%)
Oben 34,794 (24.0%)

Wie Sie sehen können, ändern die Leute am häufigsten das Editor-Layout, um die Codefelder links anzuzeigen.

Um die zweite Frage zu beantworten, aus welcher Ansicht Benutzer Pens „kommentieren“ oder „herzen“, haben wir Logik hinzugefügt, um ein Ereignis zu senden, wann immer ein Benutzer einen Kommentar postet oder einen Pen herzt.

Die „Ansicht“, in der sich ein Benutzer befindet, kann durch Inspektion der URL ermittelt werden. Zum Beispiel entspricht eine URL, die dem Muster /<profil-benutzername>/pen/<pen-id> entspricht, der „Editoransicht“, und eine URL, die dem Muster /<profil-benutzername>/details/<pen-id> entspricht, ist die „Detailansicht“.

Um herauszufinden, aus welcher Ansicht Benutzer typischerweise Kommentare hinterlassen, haben wir die Metrik Gesamtereignisse und die Dimension Seite (der URL-Pfad) abgefragt. Dann haben wir die Ergebnisse gefiltert, so dass die Ereigniskategorie „Comments“ und die Ereignisaktion „posted“ war. Schließlich mussten wir einen regulären Ausdruck verwenden, um Ergebnisse für alle URLs zu erhalten, die dem Muster „Pen View“ entsprechen, und in einer zweiten Abfrage verwendeten wir einen anderen regulären Ausdruck, um alle URLs zu erhalten, die dem Muster „Details View“ entsprechen.

Basierend auf den CodePen-Daten der letzten 30 Tage können wir sehen, dass Benutzer Kommentare aus der Pen-Ansicht etwa dreimal so oft hinzufügen wie aus der Detail-Ansicht.

Seite Gesamtereignisse
/<profil-benutzername>/pen/<pen-id> 2940 (73.5%)
/<profil-benutzername>/details/<pen-id> 1058 (26.5%)
Chris: Das war für mich zumindest überraschend. Ich dachte, die Detailansicht wäre der bevorzugte Ort für Kommentare. Andererseits ist der Hauptgrund, warum wir den „Pop-up“-Kommentarbereich im Editor erstellt haben, um das Kommentieren von dort aus zu fördern. Also, ein Erfolg!

Tiefere Analyse der Daten mithilfe von Segmenten

Wir haben gezeigt, wie Sie Dimensionen und Filter verwenden können, um Ihre Metriken in Kategorien zu unterteilen. Das ist leistungsstark, aber in beiden Fällen operieren Ihre Abfragen immer noch auf Ihrem *gesamten* Datensatz.

Eine weitere Möglichkeit, Ihre Daten zu analysieren, ist die Verwendung von Segmenten.

Im Gegensatz zu Berichtsfiltern, die einzelne Zeilen aus einer Ergebnisliste ausschließen, *nachdem* die Abfrage ausgeführt wurde, filtern Segmente Sitzungen oder Benutzer *vor* der Ausführung der Abfrage heraus. Zum Beispiel gibt es in Google Analytics einige integrierte Segmente wie „Organischer Traffic“ und „Hat gekauft“. Genau wie bei integrierten Berichten sind die nützlichsten Segmente jedoch diejenigen, die spezifisch für die Daten Ihrer App sind.

Zum Beispiel könnten wir bei CodePen ein Segment erstellen, um Folgendes einzuschließen (oder auszuschließen)

  • Benutzer, die CodePen zum ersten Mal besuchen
  • Benutzer, die mindestens einen Pen „herzlich“ haben
  • PRO-Benutzer, die Professor-Modus verwenden
  • Sitzungen, in denen der Benutzer keinen neuen Pen erstellt hat
  • Sitzungen, in denen der Benutzer einen Pen auf einem Tablet bearbeitet hat

Denken Sie daran, dass Google Analytics ein Datenmodell von Benutzern, Sitzungen und Interaktionen verwendet. Mit der Segmentierung können Sie ganze Sitzungen oder Benutzer (und damit alle zugehörigen Interaktionen) aus den Daten entfernen, auf die eine Abfrage angewendet wird. Was dies wirklich leistungsfähig macht, ist, dass Sie ein Segment auf beliebige integrierte Berichte oder beliebige Ihrer benutzerdefinierten Berichte anwenden können.

Um ein spezifisches Beispiel für einen Bericht zu geben, der nur auf einem Datensegment ausgeführt wird, betrachten Sie die folgende Frage: *Welches sind die am häufigsten besuchten Seiten von PRO-Benutzern, wenn sie keine neuen Pens erstellen?*

Hier ist ein Screenshot, wie Sie ein solches benutzerdefiniertes Segment in Google Analytics erstellen könnten

Und hier sind die Ergebnisse (Seiten von Pens eines bestimmten Benutzers werden herausgefiltert).

Seite Seitenaufrufe
/ 71565
/login 7789
/pens/ 6998
/picks/2/ 2145
/posts/ 2069
/patterns/ 1129

Um eine weitere, etwas komplexere Segmentierungsfrage zu stellen: Herzen PRO-Benutzer prozentual mehr Pens als Nicht-PRO-Benutzer?

Um diese Frage zu beantworten, müssen wir vier Segmente erstellen und vier Abfragen ausführen. Für jedes der Segmente in der folgenden Tabelle haben wir die Abfrage für die Metrik Sitzungen für die letzten 30 Tage ausgeführt (beachten Sie, dass diese Abfragen keine Dimension hatten)

Segment Sitzungen
Sitzungen von PRO-Benutzern 71337
Sitzungen von PRO-Benutzern mit der „Herz“-Ereignisaktion 4945
Sitzungen von angemeldeten Nicht-PRO-Benutzern 832597
Sitzungen von angemeldeten Nicht-PRO-Benutzern mit der „Herz“-Ereignisaktion 36610

Dann machen wir ein wenig Mathematik und erhalten die Prozentsätze

% der PRO-Benutzersitzungen mit einer „Herz“-Ereignisaktion 6.93%
% der Nicht-PRO-Benutzersitzungen mit einer „Herz“-Ereignisaktion 4.39%

Wie Sie sehen können, ist es fast 60 % wahrscheinlicher, dass ein PRO-Benutzer während einer Sitzung einen Pen herzt als ein Nicht-PRO-Benutzer.

Verwendung eines Plugins zur Verfolgung gängiger Benutzerinteraktionen

Die letzte Frage, die wir hatten, betraf, welche Links unsere Benutzer angeklickt haben, die sie zu anderen Websites führten. Der Hauptgrund, warum wir diese Daten wollten, war, zu sehen, auf welche Links die Leute auf unserem Stellenportal klickten.

Wenn Sie jemals Google Analytics auf einer Website installiert haben, werden Sie wahrscheinlich bemerkt haben, dass es Klicks auf Links zu anderen Seiten Ihrer Website verfolgt, aber keine Klicks auf externe Websites. Der Grund dafür ist, dass Google Analytics First-Party-Cookies verwendet, um neue und wiederkehrende Benutzer zu identifizieren, und First-Party-Cookies können nur innerhalb derselben Domain geteilt werden.

Wenn Sie verfolgen möchten, auf welche externen Links Benutzer klicken, müssen Sie diese Klicks mit Ereignissen verfolgen.

Anstatt die externe Linkverfolgung selbst zu implementieren, haben wir das autotrack-Plugin verwendet, um dies für uns zu tun. Autotrack enthält eine Reihe von Plugins zur Verfolgung gängiger Benutzerinteraktionen. Es kann bei vielen Dingen helfen, aber das Wichtigste, was wir wollten, war das outboundLinkTracker-Plugin.

Um autotrack zu installieren, haben wir die Datei `autotrack.js` zu unserem Haupt-JavaScript-Bundle hinzugefügt und die folgende Zeile zu unserem Tracking-Code hinzugefügt. Alles zusammen

ga('create', 'UA-XXXXX-Y', 'auto');

ga('require', 'outboundLinkTracker');

ga('set', {
  userId: __userId__,
  dimension1: __isUserLoggedIn__,
  dimension2: __isUserPro__
});
});

ga('send', 'pageview');

Sobald wir die externe Linkverfolgung eingerichtet hatten, konnten wir einen benutzerdefinierten Bericht für die Metrik Gesamtereignisse und die Dimension Ereignislabel erstellen, der auf den Dimensionen Ereigniskategorie gleich „Outbound Link“ und Ereignisaktion gleich „click“ gefiltert wurde.

Hier waren die Top-Fünf-Klicks auf ausgehende Links. Aus Datenschutzgründen haben wir die URLs der Stellenanzeigen anonymisiert.

Link-URL % der gesamten Klicks auf ausgehende Links
http://blog.codepen.io/ 24.29%
<stellenanzeigen-link> 11.38%
http://blog.codepen.io/store/ 9.44%
<stellenanzeigen-link> 7.13%
<stellenanzeigen-link> 5.98%
Chris: Es ist schön zu sehen, dass so viele ausgehende Klicks auf Jobs gehen, da dies ein wichtiger Wachstumsbereich für uns ist. Drei der fünf meistgeklickten ausgehenden Links führten zu Stellenanzeigen. Wir werden vielleicht in Erwägung ziehen, diese Klicks noch spezifischer zu verfolgen, damit wir diese Daten den Unternehmen, die Stellen ausschreiben, zur Verfügung stellen können.

Schlussfolgerungen

Ehrlich gesagt, war der überraschendste und erfrischendste Teil der Verbesserung des Google Analytics-Spiels bei CodePen, wie wenig Code geändert werden musste. Es war hauptsächlich

  • Fügen Sie einige benutzerdefinierte Dimensionen hinzu und aktualisieren Sie die Tracker, um sie zu senden
  • Streuen Sie etwas Ereignis-Tracking an wichtigen Stellen ein
  • Erstellen Sie benutzerdefinierte Berichte, um die Daten anzuzeigen

Wir haben die benutzerdefinierten Dimensionen für PRO- und angemeldete Benutzer hinzugefügt, das autotrack-Plugin und dann ein paar Zeilen Ereignis-Tracking-Code, und wir haben die Arten von Berichten, die wir ausführen können, drastisch erhöht.

Als wir lernten, benutzerdefinierte Berichte und benutzerdefinierte Segmente zu erstellen, hatten wir plötzlich das Gefühl, die Kontrolle zu haben und die Fragen zu stellen. Zuvor klickten wir meist nur in den integrierten Berichten herum und hofften, dass eine Erkenntnis hervorstechen würde, was meistens nicht der Fall war.

Wenn Sie die Analyse Ihrer Website verbessern möchten, hoffe ich, dass dieser Artikel Ihr Interesse geweckt und Ihnen einen Einblick in die Möglichkeiten gegeben hat.

Wenn Sie mehr erfahren möchten, finden Sie hier einige Anlaufstellen.

  • Analytics Academy Kurse: Diese Kurse sind eine Reihe kurzer Videolektionen, die viele Kernkonzepte von Google Analytics erklären. Kurs 1 und Kurs 2 bieten einen guten Überblick über die Funktionsweise der Plattform und sollten Ihnen helfen, spezifische Fragen für Ihre Situation besser zu beantworten.
  • Die Entwicklerdokumentation von analytics.js: Die Anleitungen im Abschnitt „Grundlagen“ in der Seitenleiste geben einen hervorragenden Überblick darüber, wie die analytics.js-Bibliothek funktioniert und was damit möglich ist. Sehen Sie sich auch die Feldreferenz für eine umfassende Liste der Felder und Optionen an, die für Tracker-Objekte gesetzt werden können.
  • Referenz für Dimensionen und Metriken: Wenn Sie benutzerdefinierte Berichte erstellen (oder API-Anfragen stellen), müssen Sie Google Analytics mitteilen, welche Dimensionen und Metriken verwendet werden sollen. Dies ist schwierig, wenn Sie die Optionen nicht kennen. Dieses Tool ermöglicht es Ihnen, alle Auswahlmöglichkeiten zu durchsuchen.
  • Query Explorer: Wenn Sie das Ausführen Ihrer benutzerdefinierten Berichte automatisieren möchten, müssen Sie API-Anfragen stellen. Der Query Explorer ist ein Tool, das Ihnen beim Erstellen von API-Anfragen hilft. Und tatsächlich können Sie für schnelle, einmalige benutzerdefinierte Berichte diese oft schneller im Query Explorer erledigen als in Google Analytics.

Wenn Sie Hilfe benötigen, bietet die Hilfeseite auf Google Analytics Developers Links, die Sie in die richtige Richtung weisen.

Mehr im Video!

Hier plaudern wir über all das und zeigen noch viel mehr über CodePen und Google Analytics.