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.

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.
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%) |
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% |
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.
Ehrlich gesagt, das ist einer der praktischsten/nützlichsten Artikel, die ich gesehen habe. Die tiefgehenden Details zur *richtigen* Verwendung von Dimensionen, Ereignissen, benutzerdefinierten Benutzer-IDs usw. sind wahnsinnig nützlich und ein Muss für fast jeden Website-Entwickler.
Ich habe kürzlich Ereignisse für ein E-Commerce-Website-Projekt gelernt und verwendet. Jetzt werde ich viele andere Segmente verwenden, um die Effektivität unserer Online-Werbekampagnen zu berechnen.
Danke für das Teilen.
Ich beschäftige mich seit etwa einem Jahr mit Google Analytics, und dies ist der beste Artikel, den ich dazu für Entwickler gelesen habe.
Ich musste mich durch eine Menge Unsinn kämpfen, um die Kerninformationen über Ereignisse zu finden, und dieser Artikel bringt es sofort auf den Punkt. Und ich hätte nie gedacht, dass Dimensionen und Benutzer-ID-Tracking so einfach sind. Von Autotrack hatte ich noch nie gehört, was ausgezeichnet aussieht! Wenn ich es gekannt hätte, hätte ich wahrscheinlich meinen eigenen Handler und Tracker für ausgehende Linkklicks implementiert.
Ich habe eine Frage: Lohnt es sich, Google Tag Manager zu verwenden, wenn man in der Lage ist, diesen Code von Code-Snippets selbst zu schreiben?
Google Tag Manager kann hilfreich sein, wenn Sie Personen ohne Codezugriff erlauben möchten, benutzerdefinierte „Dinge“ von Google Analytics hinzuzufügen. Wenn die Bearbeitung von Code für Sie ausreicht, dann gibt es meiner Meinung nach keinen Grund, GTM-Unterstützung hinzuzufügen.
Ich denke auch, dass es vielleicht helfen kann, wenn Sie viele Dinge beim Analytics-Tracking im Griff haben, um sie mit GTM zu verwalten. Persönlich ziehe ich es jedoch vor, diese Dinge direkt in JavaScript oder im Backend-Code zu belassen.
Hallo Flimm, viele Leute lieben Google Tag Manager, und es gibt viele gute Gründe, es zu verwenden. Persönlich implementiere ich die Umsetzung gerne selbst. Im Code haben Sie unbegrenzte Flexibilität; in GTM sind Sie auf das beschränkt, was es für Sie tun kann.
Das gesagt, es hängt völlig von Ihrer Situation und Ihrem Team ab. Wenn jemand in Ihrem Team, der Zugriff auf die Analytics-Implementierung benötigt, kein Entwickler ist, könnte die Verwendung von GTM auf lange Sicht einfacher sein. Es kann auch sinnvoll sein, wenn Sie nicht-Analytics-Tags zu Ihrer Seite hinzufügen möchten und die Konfiguration an einem Ort behalten möchten.
Hallo Philip,
Toller Artikel und erstaunliches Video!
Wir führen viele Google Analytics-Implementierungen durch und bevorzugen Google Tag Manager. Nach unserer Erfahrung sind Entwickler nicht die einzigen, die Zugang zur GA-Implementierung benötigen, da Analysen im Allgemeinen von Marketingteams genutzt werden.
Außerdem ist es in vielen Organisationen problematisch, die Nachverfolgung zu ändern/hinzuzufügen, wenn sie von Entwicklern verwaltet wird, und kann in einem großen Unternehmen leicht bis zu 6 Monate dauern (nicht wegen der Entwickler, sondern wegen der damit verbundenen Bürokratie). Wenn Sie also etwas für eine Kampagne, die nächste Woche startet, verfolgen möchten (was bisher nicht verfolgt wurde), haben Sie Pech gehabt.
Nach unserer Erfahrung kann GTM alles tun, was Sie brauchen (da Sie jeden JavaScript-Code von GTM ausführen können) und erleichtert die Verwaltung (für jeden, nicht nur für Entwickler). Können Sie bitte die Einschränkungen von GTM näher erläutern, auf die Sie gestoßen sind? Ich wäre Ihnen sehr dankbar, Ihre Perspektive darauf zu erfahren.
Max, ich stimme fast allem zu, was Sie gesagt haben, und es klingt für mich so, als wäre GTM in Ihrer Situation die richtige Wahl.
Um Ihre Frage nach Dingen zu beantworten, die GTM nicht kann: Es gibt viele Beispiele, aber auch hier ist die Bedeutung dieser Dinge für Sie sehr spezifisch für Ihr Setup und Ihre Bedürfnisse. Außerdem bedeutet die Tatsache, dass GTM beliebigen JavaScript-Code ausführen kann, nicht unbedingt, dass es alles tun kann, was Sie in Ihrem eigenen Anwendungscode tun können. Es kommt alles auf den Geltungsbereich an, und der Code, den GTM ausführt, wird im globalen Geltungsbereich ausgeführt. Wenn der Code, den Sie aufrufen müssen, in einer closure gekapselt ist und nie als globale Variable gesetzt wird (wie es die meisten Leute empfehlen, Code zu strukturieren), dann kann GTM ihn nicht aufrufen.
Als spezifisches Beispiel: Der Query Explorer (ein im Artikel erwähntes Tool) sendet Treffer für erfolgreiche und erfolglose Abfragen, verfolgt auch, wann Benutzereinstellungen aus- und eingeschaltet werden, und aktualisiert den Zustand des Trackers, sodass zukünftige Treffer diese Daten enthalten. Da die App in React geschrieben ist und diese Logik innerhalb der React-Komponenten/Stores gekapselt ist, kann GTM diese Ereignisse nicht kennen, es sei denn, wir bemühen uns, sie global zu machen.
Als weiteres Beispiel: Auf meiner persönlichen Website habe ich die Verfolgung der Benutzerzeit implementiert, um meine Website auf Leistung zu testen. Ich wollte wissen, wie lange es im Durchschnitt dauert, bis meine Besucher meine externen JavaScript- und CSS-Dateien sowie meine Web-Schriftarten laden. Dazu musste ich JavaScript-Code zu meinen Vorlagendateien hinzufügen, da er ausgeführt werden muss, während der Browser das initiale HTML parst. Dies ist auch etwas, auf das GTM keinen Zugriff hat.
Technisch gesehen könnten beide Beispiele durch das Schreiben in die `dataLayer` erreicht werden, und GTM könnte dann darauf zugreifen. Aber an diesem Punkt sind wir wieder beim Modifizieren unseres Anwendungscodes und nicht bei der Verwendung der GTM-Oberfläche.
Wie auch immer, wie gesagt, diese Beispiele sind vielleicht etwas, das Sie interessiert oder auch nicht. Und ich versuche sicherlich nicht zu sagen, dass Sie GTM nicht verwenden sollten. Ich sage nur, dass es Szenarien gibt (z. B. wenn ich meine eigene Website erstelle und pflege), in denen GTM keine klaren Vorteile gegenüber allein analytics.js bietet und in einigen Fällen meine Optionen einschränkt.
Hallo Philip,
Ich schätze es, dass Sie sich bei mir melden! Ich schätze Ihre Beispiele, und ich bin wirklich froh zu sehen, dass sich hier eine Reihe von Entwicklern um Analysen kümmern und mehr darüber lernen wollen.
Ich verstehe, dass es für Sie flexibler wäre, analytics.js direkt anstelle von GTM auf Ihrer eigenen Website zu verwenden. Glauben Sie nach der Arbeit mit CodePen, dass sie von der Verwendung von GTM profitieren könnten? Zum Beispiel konnten Sie und Chris im Video an einem Punkt nicht entschlüsseln, wo eine benutzerdefinierte Dimension gesetzt wurde. In GTM wäre eine solche Konfiguration viel offensichtlicher, selbst für Entwickler, die GA-Code verstehen.
Könnten Sie auch eine weitere Sache für mich klären? Um Daten an GA zu senden, müssten Sie die Funktion `ga()` in Ihre Anwendung einfügen. Jede Änderung oder Ergänzung des Analytics-Trackings würde dann erfordern, dass Sie den Anwendungscode ändern. Wenn Sie stattdessen diese Informationen in die dataLayer pushen und das Analytics-Tracking über GTM konfigurieren würden, könnten Sie das Tracking ändern (z. B. die Ereigniskategorie umbenennen, eine neue Eigenschafts-ID hinzufügen, den Dimensionsindex ändern), ohne den Anwendungscode erneut anfassen zu müssen. Es scheint vorteilhaft zu sein, die Analytics/Datenschicht von der Codebasis der Website zu trennen. Sind Ihnen Gründe bekannt, die Analytics-Konfiguration in der Anwendung eingebettet zu halten?
Fantastischer Artikel. Google Analytics ist unglaublich leistungsfähig und es scheint, dass 99% der Website-Besitzer nicht wissen, wie nah sie daran sind.
Ich habe an Analysen für E-Commerce-Websites gearbeitet, und es ist erstaunlich, wie eine Erkenntnis Hunderttausende von Dollar wert sein kann.
Nun, nun, was ist mit Datenschutz? Vielleicht liegt es daran, dass ich aus Deutschland komme, aber für mich als Besucher fühlt es sich seltsam an, Google meine Vorlieben wissen zu lassen. Berücksichtigt Google Analytics DNT-Header (Do Not Track)? Andernfalls blockiere ich die Ausführung von Google Analytics über ein Browser-Add-on.
Was ist mit der Empfehlung von Piwik für Analysen? Piwik berücksichtigt DNT.
Ich mag keine Analysen, bei denen ich als Besucher zu einer anderen Seite gehen muss, damit diese ein Cookie auf meinem Computer platziert und verspricht, dass sie mich nicht verfolgt, solange das Cookie vorhanden ist.
Andererseits verstehe ich Ihren Wunsch nach Analysen (den ich auch empfinde).
Google Analytics bietet Ihnen viele Möglichkeiten zur Abmeldung, einschließlich einer Browsererweiterung, die das Google Analytics-Team entwickelt und pflegt. Wenn diese installiert und aktiv ist, können Sie sich von jeder Website abmelden, die Google Analytics-Tracking verwendet. Es verstößt auch gegen die Nutzungsbedingungen für einzelne Entwickler, die Abmeldepräferenz eines Nutzers zu umgehen.
Ich denke, es ist auch erwähnenswert, dass Google Analytics Benutzer anonym verfolgt. Das bedeutet, es kann feststellen, dass eine Person mit der Client-ID `XXXXX` etwas auf der Website getan hat, aber es weiß nicht, *wer* diese Person ist. Sie können dies selbst sehen, indem Sie die gespeicherten Cookies untersuchen. Selbst wenn Sie in einem anderen Tab bei Gmail angemeldet sind, kann Google Analytics nicht wissen, dass *Sie* auf dieser Website sind.
Philip… obwohl es anonym ist, können Sie garantieren, dass es nur für den Endbenutzer (oder denjenigen, der die Analysedaten betrachtet) anonym ist. Es ist sehr unwahrscheinlich, dass Google Ihre Daten anonym hält, sie sind viel zu wertvoll. Deshalb beeinträchtigt es seine Websites (wie YouTube), wenn Sie sich nicht anmelden… was sie schwer zu benutzen macht (zumindest mobil).
Wenn nichts anderes, gibt es Möglichkeiten, wie ein Unternehmen wie Google die Daten leicht auf Sie zurückverfolgen könnte. Das ist keine Verschwörungstheorie, sondern Realität.
Gary, die Daten sind auch für Google anonym.
Und Sie müssen nicht nur mein Wort dafür nehmen. Sie können die Netzwerkanfragen einsehen und sehen, was an GA gesendet wird. Sie können auch nachlesen, wie First-Party-Cookies funktionieren und wie die plattformübergreifende Sicherheit/Datenschutz in Browsern implementiert ist.
Oh, und bezüglich
Ich denke, das wird teilweise von der Benutzeroberfläche gesteuert.
Zum Beispiel sehe ich mir gerade http://codepen.io/jakealbaugh/pen/GodLOb („Editoransicht“) an und habe das Herz ziemlich schnell entdeckt. Die Kommentarfunktion hat mich jedoch mehrmals die Seite durchsuchen lassen – bis ich sie ganz unten gefunden habe. Aus irgendeinem Grund empfinde ich beides als Einheit und sollte nahe beieinander platziert werden. Könnten Sie eine Sprechblase als Symbol für Kommentare hinzufügen?
Für mich fühlen sich die Kommentare dort natürlich an, da ich mich im Modus der Interaktion mit diesem Pen befinde und einige Ideen/Vorschläge habe.
(Übrigens, das Scrollen nach unten hat mich nach einem Schließen-Link suchen lassen, da das Kommentar-Modal 2/3 meines Bildschirms eingenommen hat – das X ist oben rechts, aber nicht fixiert …).
Wie navigiere ich auf der anderen Seite zur Detailansicht eines Pens? (Ich musste tatsächlich nach dem Link auf der Seite suchen – wenn ich mir das Profil eines Benutzers ansehe, sind die Kommentare mit einer Detailansicht eines Pens verknüpft). Das Teaser-Bild ist mit der Editoransicht verknüpft. Ich stoße häufiger auf Letzteres.
Betreff Ansicht ändern: Ich bin verwirrt, warum sich das Fenster nicht automatisch schließt, sobald ich ausgewählt habe, wo ich die Paneele haben möchte.
Ich bin bereit, Issues auf GitHub zu eröffnen, wenn Sie es bevorzugen. Geben Sie mir einfach die URL :-)
Toller Beitrag, sehr informativ.
Eine Beschwerde jedoch – so gut GA und von Google gehostete Schriftarten etc. sind, hinter der Großen Firewall bedeutet dies, dass Websites, die sich hinter der Großen Firewall befinden, tendenziell häufig Zeitüberschreitungen haben, wenn sie auf GA oder googleapis warten. Infolgedessen haben alle Websites, die ich entwerfe, selbst gehostete Schriftarten, und ich verwende Piwik als GA-Ersatz – wieder lokal bereitgestellt. Ich muss prüfen, ob Piwik diese Funktionalität hat.
Was ist Ihre Meinung dazu, ist der chinesische Markt kein Ziel? Sie würden es wahrscheinlich nicht einmal wissen, wenn sie in China wären, da das VPN ihnen eine andere IP-Adresse zeigen würde. Aber so nützlich wie von Dritten gehostete Assets für den größten Teil der Welt sind, sind sie hier eine tägliche Frustration! (Ich schätze, Sie könnten die GA- und googleapis-URLs immer als 127.0.0.1 in Ihrer Hosts-Datei festlegen.)
Sehr informativ und nützlich. Die tiefgehenden Details zur richtigen Verwendung von Dimensionen, Ereignissen, benutzerdefinierten Benutzer-IDs usw. sind wahnsinnig nützlich und ein Muss für fast jeden Website-Entwickler.
Google Analytics bietet Ihnen viele Möglichkeiten zur Abmeldung, einschließlich einer Browsererweiterung, die das Google Analytics-Team entwickelt und pflegt. Wenn diese installiert und aktiv ist, können Sie sich von jeder Website abmelden, die Google Analytics-Tracking verwendet. Es verstößt auch gegen die Nutzungsbedingungen für einzelne Entwickler, die Abmeldepräferenz eines Nutzers zu umgehen.
Definitiv eine nette praktische Anleitung für Google Analytics, Chris. Obwohl ich die meisten dieser GA-Funktionen, insbesondere das Ereignis-Tracking, bereits verwendet habe, helfen gute Erklärungen wie hier, die zugrunde liegenden Konzepte besser zu verstehen. Danke für den Beitrag!
Das ist ein sehr nützlicher Artikel. Vielen Dank dafür!
Verdammt, das war gut, so vollständig, danke.
Mit Ihren Daten könnten Sie eine Frage beantworten, die ich schon lange habe….
Kommen Leute, die den Editor auf der rechten Seite mögen, aus Ländern, die von rechts nach links schreiben/lesen?
Die Idee des Editors auf der rechten Seite ist für mich so falsch, dass ich es kaum glauben kann, dass jemand anderes ihn mag. Ich habe im Laufe der Jahre ein paar Leute gefragt und noch nie jemanden getroffen, der ihn auf der rechten Seite mochte, aber Ihre Statistiken sagen 25%. Also frage ich mich wieder, ist es eine RTL-Sache?
Hallo PAEz, das ist eine interessante Frage.
Ich habe eine schnelle Suche durchgeführt und es scheint keine großen Unterschiede in der Verteilung der Wahl zwischen den Top 10 Ländern (d. h. sie bevorzugten alle links ~50% und rechts ~25%) zu geben.
Dann habe ich nach der Sprachdimension gefiltert und einige angesehen, von denen ich glaube, dass sie RTL sind (ich bin kein Experte, also könnte ich falsch liegen), und immer noch keinen starken Unterschied gefunden.
Die einzige Sprache, die ich finden konnte, die rechts stark bevorzugte, war `ar` (Arabisch), die eine Rechts- und Oben-Präferenz von etwa 38% und links nur 23% hatte.
Vielen Dank dafür.
Es war Arabisch, das den Gedanken auslöste.
Ich würde gerne manchmal in die Köpfe der Leute schauen, nur um es zu wissen! Warum?
Hebräisch und Urdu wären andere Sprachen, die RTL geschrieben werden. Ich stelle mir vor, dass es ziemlich viele hebräische Entwickler gibt, da viel Technikpersonal aus Israel kommt, daher wäre es gut, das zu überprüfen.
Japanischsprachige stoßen normalerweise auf RTL, wenn sie vertikal geschrieben werden… obwohl einige Papierformate wie Zeitschriften und Manga LTR gelesen werden, aber paginierte RTL (verwirrend, oder?)
@Philip Walton – Anstatt die Seiten-URL für den Seitenaufruf-Treffer zu ändern, z. B. die Ersetzung von `"<profiled-username>"`, hätten Sie Content Groups weiter unten in der Pipeline verwenden können?
Toller Artikel und Video! Ich habe enorm viel gelernt.
Lokesh, das könnten Sie wahrscheinlich. Ich habe eigentlich nicht viel Erfahrung mit Content Groups, aber meines Verständnisses nach sind sie im Wesentlichen eine benutzerdefinierte Dimension, die GA für Sie automatisch erfassen kann. Ich glaube nicht, dass sie Ihnen etwas Zusätzliches bieten, vielleicht nur eine einfachere Implementierung.
Ein Nachteil von Content Groups ist jedoch, dass Sie für Nicht-Premium-Kunden nur 5 erstellen können.
Hallo zusammen,
Vielen Dank, dass Sie den Artikel erstellt haben, er ist schön!
Das ist lustig, weil wir eine Web-Analyseplattform entwickelt haben, die diese Art von Fällen nativ handhabt.
Wir hashen auch den Wert dessen, was Sie senden, weil wir denken, dass Ihre Daten nur Sie etwas angehen sollten.
Nochmals vielen Dank, dass Sie den Artikel erstellt haben, Sie scheinen die Art von Person zu sein, die gerne mit ihren Daten spielt :)
Schauen Sie sich das an unter: https://www.leanalytics.io/?source=css-tricks
Wir suchen derzeit nach Leuten, die das Produkt testen, also zögern Sie nicht, sich anzumelden.
Mit freundlichen Grüßen,
Edouard
Ziemlich coole interaktive Demo für Autotrack.js
http://trevorfox.com/autotrack-demo/