Erweiterung von Google Analytics auf CSS-Tricks mit benutzerdefinierten Dimensionen

Die Idee zu diesem Artikel entstand, als Chris dies in Thank You (2018 Edition) schrieb:

Ich wünschte fast, unsere URLs hätten Jahre, denn ich habe immer noch keine Möglichkeit, Analysedaten so zu filtern, dass mir nur Daten von Inhalten angezeigt werden, die in diesem Jahr veröffentlicht wurden. Ich kann die beliebtesten Inhalte des Jahres sehen, aber das unabhängig davon, wann sie veröffentlicht wurden, und das wird dominiert von den großen Anleitungen, die wir seit Jahren haben und ständig aktualisieren.

Ich bin seit langem Leser von CSS-Tricks, hatte aber noch nichts beizutragen. Bis jetzt. Da ich tagsüber ein Google Analytics Spezialist bin, war dies endlich etwas, zu dem ich zu CSS-Tricks beitragen konnte. Lassen Sie uns Google Analytics auf CSS-Tricks erweitern!

Benutzerdefinierte Dimensionen in Google Analytics eingeben

Google Analytics liefert Ihnen viele interessante Einblicke darüber, was Besucher auf einer Website tun, indem Sie einfach den grundlegenden Google Analytics-Snippet zu jeder Seite hinzufügen.

Aber Google Analytics ist ein Tool für alle.

Um es für eine *spezifische* Website wie CSS-Tricks wirklich aussagekräftig zu machen, können wir zusätzliche Metainformationen zu unseren Google Analytics-Daten hinzufügen.

Das **Jahr**, in dem ein Artikel veröffentlicht wurde, ist ein Beispiel für solche Metadaten, die Google Analytics nicht standardmäßig hat, aber es ist etwas, das leicht hinzugefügt werden kann, um die Daten viel nützlicher zu machen. Hier kommen benutzerdefinierte Dimensionen ins Spiel.

Erstellen Sie die benutzerdefinierte Dimension in Google Analytics

Das erste, was zu tun ist, ist die Erstellung einer neuen benutzerdefinierten Dimension. Klicken Sie in der Google Analytics-Oberfläche auf das Zahnradsymbol, klicken Sie auf benutzerdefinierte Definitionen und dann auf benutzerdefinierte Dimensionen.

Dies zeigt eine Liste aller vorhandenen benutzerdefinierten Dimensionen. Klicken Sie auf den roten Button, um eine neue benutzerdefinierte Dimension zu erstellen.

Geben wir der benutzerdefinierten Dimension einen beschreibenden Namen. In diesem Fall scheint "Jahr" sehr passend zu sein, da dies das ist, was wir messen wollen.

Der Geltungsbereich ist wichtig, da er definiert, wie die Metadaten auf die vorhandenen Daten angewendet werden sollen. In diesem Fall ist das Veröffentlichungsjahr des Artikels mit jedem Artikel verbunden, den der Benutzer aufruft. Daher müssen wir ihn auf den "Hit"-Bereich setzen.

Ein weiteres Beispiel wären Metadaten für die gesamte Sitzung, z. B. ob der Benutzer angemeldet ist, die in einer benutzerdefinierten Dimension mit Sitzungs-Geltungsbereich gespeichert würden.

In Ordnung, lassen Sie uns unsere Dimension speichern.

Wenn die benutzerdefinierte Dimension erstellt ist, liefert Google Analytics Beispiele, wie sie mit JavaScript implementiert werden kann. Wir dürfen bis zu 20 benutzerdefinierte Dimensionen haben und jede benutzerdefinierte Dimension wird durch einen Index identifiziert. In diesem Fall ist "Jahr" die erste benutzerdefinierte Dimension, daher wurde sie in Index 1 erstellt (siehe dimension1 im untenstehenden JavaScript-Code).

Wenn wir andere benutzerdefinierte Dimensionen definiert hätten, dann würden diese in einem anderen Index leben. Es gibt keine Möglichkeit, den Index einer benutzerdefinierten Dimension zu ändern, also nehmen Sie den verwendeten Index zur Kenntnis. Eine Liste aller Indizes finden Sie immer in der Übersicht.

Das ist es, jetzt ist es Zeit zu programmieren!

Nun müssen wir das Veröffentlichungsjahr des Artikels im Code extrahieren und es der Nutzlast hinzufügen, damit es mit dem Seitenaufrufs-Hit an Google Analytics gesendet wird.

Das ist der Code, den wir ausführen müssen, gemäß dem Snippet, das uns bei der Erstellung der benutzerdefinierten Dimension zur Verfügung gestellt wurde.

var dimensionValue = 'SOME_DIMENSION_VALUE';
ga('set', 'dimension1', dimensionValue);

Hier ist der knifflige Teil. Die Funktion ga() wird erstellt, wenn der Google Analytics-Snippet geladen wird. Um die Leistungseinbußen zu minimieren, wird sie am Ende der Seite auf CSS-Tricks platziert. So sieht der grundlegende Google Analytics-Snippet aus:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//#/analytics.js','ga');
ga('create', 'UA-12345-1', 'auto');
ga('send', 'pageview');
</script>

Wir müssen den Wert der benutzerdefinierten Dimension *nachdem* der Snippet geparst wurde und *bevor* der Seitenaufrufs-Hit an Google Analytics gesendet wird, festlegen. Daher müssen wir ihn hier festlegen.

// ...
ga('create', 'UA-12345-1', 'auto');
ga('set', 'dimension1', dimensionValue); // Set the custom dimension value
ga('send', 'pageview');

Dieser Code wird normalerweise außerhalb einer WordPress-Schleife platziert, aber dort hätten wir Zugriff auf Metadaten wie das Veröffentlichungsjahr des Artikels. Aus diesem Grund müssen wir das Veröffentlichungsjahr in einer JavaScript-Variable innerhalb der Schleife speichern und dann diese Variable am Ende der Seite im Google Analytics-Snippet referenzieren.

Speichern Sie das Veröffentlichungsjahr des Artikels innerhalb der Schleife

In WordPress beginnt eine Standard-Schleife hier.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

... und endet hier.

<?php endwhile; else : ?>
	<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Irgendwo zwischen diesen Zeilen extrahieren wir das Jahr und speichern es in einer JavaScript-Variable.

<script>
	var articleYear = "<?php the_time('Y') ?>";
</script>

Verweisen Sie auf das Veröffentlichungsjahr des Artikels im Google Analytics-Snippet

Der Google Analytics-Snippet wird auf allen Seiten der Website platziert, aber das Jahr ist nicht für alle Seiten sinnvoll (z. B. die Homepage). Als gute JavaScript-Entwickler, die wir sind, überprüfen wir, ob die Variable definiert wurde, um Fehler zu vermeiden.

ga('create', 'UA-68528-29', 'auto');
if (typeof articleYear !== "undefined") {
		ga('set', 'dimension1', articleYear);
}
ga('send', 'pageview');

Das ist alles! Der Google Analytics Seitenaufrufs-Hit wird nun das Veröffentlichungsjahr für alle Seiten enthalten, auf denen es definiert ist.

Benutzerdefinierte Dimensionen gelten nicht für historische Daten

Eine Sache, die man über benutzerdefinierte Dimensionen – oder jede andere Modifikation Ihrer Google Analytics-Daten – wissen sollte, ist, dass sie nur für neue Daten gelten, die von der Website gesammelt werden. Die in diesem Artikel beschriebenen benutzerdefinierten Dimensionen wurden im Januar 2019 implementiert, und das bedeutet, dass wenn wir Daten von 2018 betrachten, diese keine Daten für die benutzerdefinierten Dimensionen haben werden.

Dies ist wichtig, um im Hinterkopf zu behalten, wenn wir uns im Rest dieses Artikels die Daten ansehen. Die benutzerdefinierten Dimensionen werden allen Beiträgen auf CSS-Tricks hinzugefügt, die bis ins Jahr 2007 zurückreichen, aber wir betrachten nur Seitenaufrufe, die im Jahr 2019 stattgefunden haben – nach der Implementierung der benutzerdefinierten Dimensionen. Wenn wir uns zum Beispiel Artikel aus dem Jahr 2011 ansehen, betrachten wir keine Seitenaufrufe aus dem Jahr 2011 – wir betrachten Seitenaufrufe von Beiträgen *aus* dem Jahr 2011 *im* Jahr 2019. Dies ist wichtig, um im Hinterkopf zu behalten, wenn wir beginnen, uns Beiträge aus früheren Jahren anzusehen.

Alles bereit? Okay, schauen wir uns die neuen Daten an!

Daten in Google Analytics anzeigen

Der einfachste Weg, die neuen Daten zu sehen, ist, zu Verhalten → Websiteinhalt → Alle Seiten zu gehen, was die am häufigsten aufgerufenen Seiten anzeigt.

Wählen Sie im Dropdown-Menü über der Tabelle "Jahr" als sekundäre Dimension.

Das ergibt eine Tabelle wie die untenstehende, die das Jahr für alle Artikel anzeigt. Beachten Sie, wie die Homepage, die zweithäufigste Seite, aus der Tabelle entfernt wird, da ihr kein Jahr zugeordnet ist.

Wir beginnen, ein besseres Verständnis der Website zu bekommen. Die meistbesuchte Seite (bei weitem) ist die vollständige Anleitung zu Flexbox, die 2013 veröffentlicht wurde. Sprechen Sie von ewig haltbaren Inhalten!

Sekundär ist gut, primär ist besser

Okay, die obige Tabelle fügt also *einiges* an Verständnis für die meistbesuchten Seiten hinzu, aber drehen wir die Dimensionen um, damit **Jahr** die *primäre* Dimension ist. Es gibt keinen Standardbericht, um benutzerdefinierte Dimensionen als primäre Dimension anzuzeigen, daher müssen wir einen benutzerdefinierten Bericht erstellen.

Geben Sie dem benutzerdefinierten Bericht einen guten Namen. Das Finden der Metriken (blau) und Dimensionen (grün) ist am einfachsten durch Suchen.

So sollte der endgültige benutzerdefinierte Bericht aussehen, mit einigen nützlichen Metriken und Dimensionen. Beachten Sie, wie wir **Seite** unter **Jahr** bei den Dimensionen ausgewählt haben. Das wird in einer Sekunde nützlich.

Sobald wir auf Speichern klicken, sehen wir die aggregierten Zahlen für alle Artikeljahre. 2013 liegt immer noch an der Spitze, aber wir sehen nun, dass auch 2011 einige großartige Inhalte hatte, die nicht in den Top-10-Listen waren, die wir zuvor betrachtet hatten. Das deutet darauf hin, dass kein einzelner Artikel aus dem Jahr 2011 herausragte, aber insgesamt hatte 2011 einige großartige Artikel, die auch 2019 noch viele Aufrufe erhalten.

Der Prozentsatz neben der Anzahl der Seitenaufrufe ist der Prozentsatz der gesamten Seitenaufrufe. Beachten Sie, wie 2018 "nur" 8,11% aller Seitenaufrufe ausmacht und 2019 6,24%. Das ist nicht überraschend, zeigt aber, dass CSS-Tricks teilweise ein riesiger Erfolg ist, weil eine große Menge an **starkem Referenzmaterial** über die Jahre hinweg veröffentlicht wurde, auf das die Nutzer immer wieder zurückgreifen.

Schauen wir uns 2011 genauer an.

Erinnern Sie sich, wie wir den benutzerdefinierten Bericht mit **Seite** unter **Jahr** bei den Dimensionen eingerichtet haben? Das bedeutet, dass wir nun auf 2011 klicken und in dieses Jahr hineinbohren können.

Es scheint, dass viele Almanach-Seiten im Jahr 2011 veröffentlicht wurden, die in der Summe viele Seitenaufrufe haben. Beachten Sie die untere rechte Ecke, wo "1-10 von 375" steht. Das bedeutet, dass **375 Artikel** aus dem Jahr 2011 im Jahr 2019 auf der Website aufgerufen wurden. Das ist beeindruckend!

Zurück zur Frage: Großartige Inhalte aus 2018

Bevor ich es vergesse: Beantworten wir die ursprüngliche Frage von Chris.

Lassen Sie uns die Analysedaten auf Inhalte eingrenzen, die in diesem Jahr (2018) veröffentlicht wurden. Hier sind die Top 10 Beiträge.

Das zweiköpfige Biest verstehen

In Danke (Ausgabe 2018) schrieb Chris auch:

In den letzten Jahren habe ich versucht, CSS-Tricks als dieses zweiköpfige Biest zu betrachten. Ein Kopf bedeutet, dass wir versuchen, langlebige Referenzinhalte zu produzieren. Wir wollen eine Seite sein, die Sie besuchen oder auf die Sie stoßen, um Antworten auf Frontend-Fragen zu finden. Der andere Kopf bedeutet, dass wir wie eine Zeitschrift gelesen werden können. Abonnieren Sie, schauen Sie einmal pro Woche vorbei, schnappen Sie sich den RSS-Feed… was auch immer Sie mögen, wir hoffen, dass CSS-Tricks als Hobbyzeitschrift oder Branchenblatt interessant zu lesen ist.

Lassen Sie uns das mit einer weiteren benutzerdefinierten Dimension untersuchen: **Post-Typ**. CSS-Tricks verwendet neben den integrierten Post-Typen wie Beiträge oder Seiten auch eine Reihe von benutzerdefinierten Post-Typen wie Videos, Almanach-Einträge und Snippets.

Lassen Sie uns das auch extrahieren, wie wir es mit dem Veröffentlichungsjahr gemacht haben.

<script>
	var articleYear = "<?php the_time('Y') ?>";
	var articleType = "<?php get_post_type($post->ID) ?>";
</script>

Wir werden es in den benutzerdefinierten Dimensions-Index 2 speichern, der genau wie das Jahr mit "Hit" als Geltungsbereich versehen ist. Jetzt können wir einen neuen benutzerdefinierten Bericht wie diesen erstellen.

Jetzt wissen wir, dass Blog-Beiträge für 55% der Seitenaufrufe verantwortlich sind, während Snippets und Almanach (die langlebigen Referenzinhalte) für 44% verantwortlich sind.

Nun können Blog-Beiträge auch Referenzinhalte sein, daher ist es sicher zu sagen, dass mindestens die Hälfte des Traffics auf CSS-Tricks aufgrund der Referenzinhalte stammt.

Von einer Ein-Mann-Show zu einem 333-Autoren-Content-Team

Als CSS-Tricks 2007 begann, war es nur Chris. Zum Zeitpunkt des Schreibens haben 333 Autoren mitgewirkt.

Sehen wir uns an, wie diese Autoren zu den Seitenaufrufen auf CSS-Tricks beigetragen haben, mit – Sie haben es wahrscheinlich erraten – einer weiteren benutzerdefinierten Dimension!

<script>
	var articleYear = "<?php the_time('Y') ?>";
	var articleAuthor = "<?php get_the_author_meta('ID') ?>";
	var articleType = "<?php get_post_type($post->ID) ?>";
</script>

Hier sind die Autoren-IDs für die Top 10 der meistbesuchten Autoren im Jahr 2019.

Lassen Sie uns das noch weiter aufschlüsseln, indem wir das Jahr als sekundäre Dimension verwenden und unten rechts 500 Zeilen auswählen, so dass wir alle 465 Zeilen erhalten.

Wir können die Daten dann nach Excel exportieren und eine Pivot-Tabelle der Daten erstellen, die Autoren pro Jahr zählt.

Sie mögen Diagramme? Wir können eines mit schönen v17-Farben erstellen, das die Anzahl der Autoren pro Jahr zeigt.

Es ist erstaunlich, das stetige Wachstum der Autoren, die pro Jahr zu CSS-Tricks beitragen, zu sehen. Und da 2019 bereits 33 verschiedene Autoren hat, sieht es so aus, als ob 2019 einen neuen Rekord aufstellen könnte.

Aber generieren diese neuen Autoren auch Seitenaufrufe?

Wir wissen, dass die Autoren-ID von Chris 2 ist. Lassen Sie uns eine neue Pivot-Tabelle erstellen, in der wir Chris mit allen anderen Autoren vergleichen.

… und dann das über die Zeit darstellen.

Es sieht definitiv so aus, als ob CSS-Tricks zu einer Multi-Autoren-Website wird. Während Chris immer noch der #1 Autor ist, ist es gut zu sehen, dass der stetige Strom neuer hochwertiger Inhalte nicht allein von ihm abhängt, was ein guter Trend für CSS-Tricks ist und es ermöglicht, in Zukunft viel mehr Themen abzudecken.

Aber was ist 2011 passiert, könnten Sie fragen? Lassen Sie es uns ansehen. In einem benutzerdefinierten Bericht können Sie fünf Ebenen von Dimensionen haben. Vorerst bleiben wir bei vier.

Jetzt können wir auf das Jahr 2011 klicken und die Liste der Autoren erhalten.

Hallo Autor #25! Das ist übrigens Sara Cope. Was für großartige Inhalte hast du 2011 geschrieben?

Sieht aus wie viele der Almanach-Seiten, die wir zuvor gesehen haben. Klicken Sie darauf!

In der Tat, viele Almanach-Seiten! Genauer gesagt 107. Viele großartige Inhalte, die auch 2019 noch viele Seitenaufrufe erhalten.

Ein Wort zu PII-Daten

Sie haben vielleicht bemerkt, dass wir die ID des Autors anstelle des tatsächlichen Namens verwenden. Dafür gibt es einen guten Grund.

Vollständige Namen werden von Google als PII (Personally Identifiable Information) betrachtet und es verstößt gegen die Nutzungsbedingungen von Google Analytics, solche PII-Daten in Google Analytics zu verfolgen.

Das bedeutet, dass wir, obwohl es praktisch wäre, die Namen direkt in den Google Analytics-Berichten zugänglich zu haben, die vollständigen Namen nicht an Google Analytics senden dürfen. Wir müssen stattdessen die ID als anonymen Bezeichner verfolgen.

Die ID ist für Google (oder jede andere dritte Partei) bedeutungslos und sie werden sie nicht mit einer bestimmten Person in Verbindung bringen können. Nur wir können das tun. Und das ist der richtige Weg, um Tracking-Dienste von Drittanbietern wie Google Analytics zu nutzen.

Zusammenfassung

Google Analytics ist ein leistungsstarkes Werkzeug, um zu verstehen, was Benutzer auf Ihrer Website tun, und mit ein wenig Arbeit können Metadaten, die spezifisch für Ihre Website sind, sie noch leistungsfähiger machen. Wie in diesem Artikel gezeigt, kann das Hinzufügen einiger einfacher Metadaten, die bereits in WordPress zugänglich sind, eine Welt von Möglichkeiten eröffnen, um den Inhalt und die Besucher einer Website zu analysieren und eine völlig neue *Dimension* des Wissens hinzuzufügen, wie wir es hier auf CSS-Tricks getan haben.

---

Wenn Sie an einer weiteren ähnlichen Reise interessiert sind, die benutzerdefinierte Dimensionen beinhaltet und Google Analytics-Daten viel nützlicher macht, schauen Sie sich Chris Coyier und Philip Walton in Learning to Use Google Analytics More Effectively at CodePen an.