Automatisch mehr Daten in Google Analytics erfassen – Autotrack.js vorgestellt

Automatisch mehr Daten in Google Analytics

Im offiziellen Google Analytics Blog wurde ein Plugin vorgestellt. Die auf Github gehostete und dokumentierte Bibliothek Autotrack.js erweitert Analytics.js als Plugin. Heute schauen wir kurz unter die Haube was das Plugin kann und für wen dieses Plugin gedacht ist. In kurzer Zeit große Datenmengen zu erfassen kann die Grundlage sein für mehr Daten aber auch für mehr Datenmüll.

Was ist Autotrack.js

Neben dem Standard-Trackingcode, welcher einfache Seitenaufrufe mit allen dazu gehörigen Parametern (Seiten-Titel, URL, usw.) erfasst, unterstützt Analytics auch Erweiterungen als Plugins. Mithilfe von Autotrack.js werden neben Seitenaufrufen auch automatisch sämtliche Interaktionen erfasst, die keinen Seitenaufruf bedingen. Dazu gehören Klicks auf Links (z.B. ausgehende Links), Absenden von Formularen (z.B. Newsletteranmeldung) und interaktive Medien (z.B. ein Video oder auch Elemente, die den Inhalt der Seite verändern aber kein kompletter Seitenaufruf sind).

Google Analytics unterstützt in seiner aktuellen Version (Analytics.js) native Plugins. Diese können direkt im Tracking-Code eingebunden werden. Damit werden schon innerhalb des Analytics Codes die Funktionen so aneinander gereiht, dass alles in der richtigen Reihenfolge gestartet wird. Ein Plugin wird über die „require“ Anweisung eingebunden.

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

Dadurch wird sichergestellt, dass Analytics auch die Methoden des Plugins berücksichtigt. Mit dieser Konfiguration ist ersichtlich, dass die Erweiterung Autotrack schnell installiert ist.

Unterm Strich bedeutet Autotrack.js mehr Daten im Google Analytics Konto. Mit dem Vorteil mehr Daten zu besitzen und dem Nachteil mehr Daten zu verwalten. Denn gerade die Struktur der Daten entscheidet über die Interpretation. Häufen sich im Konto die Events, deren Ursprung und Name nicht bekannt sind, so wird man am Ende nicht schlauer.

Mehr Details zur Autotrack Dokumentation findet sich übrigens auch bei Appspot (bekannt für Query Explorer).

Wer sollte Autotrack einsetzen

Generell ist Autotrack eine gute Erweiterung für jeden, der Google Analytics ohne jegliche Anpassung in seiner Seite verwendet. Sollten bereits Ereignisse (Events), Transaktionen (E-Commerce und enhanced E-Commerce Tracking) oder benutzerdefinierte Dimensionen oder Kennzahlen (custom Metrics) installiert sein, so bedarf es einer genaueren Prüfung.

Autotrack sammelt jegliche Klicks auf externe Links, Formulare sowie Interaktionen mit der Seite. Da eine angepasste Implementierung von Google Analtics ebenfalls solche detaillierten Daten sammelt kann Autotrack dazu führen, dass Informationen doppelt gesammelt werden. In diesem Fall werden auch sämtliche Requests doppelt verschickt, was sich negativ auf die Performance der Seite auswirkt. Deshalb bedarf es einer genauen Analyse, ob Autotrack auch wirklich einen Mehrwert schafft.

Für einen Testzeitraum bietet es sich jedoch durchaus an, Autotrack und eine bestehende Implementierung gleichzeitig zu aktivieren. So kann man für einen bestimmten Zeitraum testen, ob Autotrack zu gleichen Ergebnissen führt wie das bereits installierte Tracking. Eventuell kann Autotrack dann sogar das implementierte Tracking ersetzen, da es automatisch auch bei neuen Elementen (neue Buttons, Formulare, Links) funktioniert. Eine Analyse der bestehenden Umgebung ist also in jedem Fall sinnvoll und notwendig.

Detaillierte Features von Autotrack und Installation

Zur Installation von Autotrack sind zwei Anweisungen notwendig.

Im Trackingcode von Google Analytics muss die „require“-Anweisung enthalten sein.

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

Zusätzlich muss das Autotrack.js auch geladen werden. Entweder standalone als externe JS-Library oder innerhalb einer eigenen JS-Library.

<script async src='path/to/autotrack.js'></script>

Das Autotrack.js enthält insgesamt 7 Features, die auch alle einzeln aktiviert werden können. Um eines der Features zu aktivieren geht man wie folgt vor (jedes Feature ist ein eigenes Plugin). Die einzelnen Funktionen der Features findet ihr wie folgt.

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

eventTracker

Mit dem Event Tracker kann man eine direkte Brücke vom HTML direkt zu Analytics schlagen. Über die (anpassbaren) HTML Eigenschaften können direkt Events definiert werden.

<button data-event-category="video" data-event-action="play">Play</button>

Eine Automatisierung findet hier nicht direkt statt, da eine explizite Anweisung weiterhin notwendig ist. Jedoch kann dieses Feature die Gestaltung im CMS und Template deutlich vereinfachen, z.B. wenn kein JavaScript im Editor erlaub ist.

mediaQueryTracker

Mit dem MediaQueryTracker können verschiedene Attribute zur Darstellung im Browser des Nutzers erfasst werden. Damit ist nicht nur der Modus (Landscape vs Portrait) sondern auch die Auflösung und DPI gemeint. Änderungen in diesen Modi werden dann ebenfalls als Ereignis erfasst, z.B. wenn der Nutzer von Portrait in Landscape wechselt.

Funktional wird dieses Feature aber erst, wenn im Google Analytics Konto weitere Einstellungen vorgenommen werden. Die Informationen werden nicht nur als Ereignisse aufgezeichnet sondern auch mit benutzerdefinierten Dimensionen angereichert. Je nachdem welche der drei Informationen man haben möchte legt man eine Dimension im Konto an. Dazu könnt ihr wie folgt vorgehen.

Google Analytics Benutzerdefinierte Dimension definieren

Definiert wie im Screenshot drei benutzerdefinierte Dimensionen. Im Google Analytics Konto geht das unter „Verwalten“ und dann im Reiter der Property unter „Benutzerdefinierte Definitionen“. Achtet darauf, dass alle drei Dimensionen den Scope „Hit“ haben.

Der Index der jeweiligen Dimension (wie bei euch hinterlegt, nicht exakt die Nummer im Screenshot) muss dann im mediaQueryTracker hinterlegt werden. Konfiguriert wird das über die Definitionsanweisung.

outboundFormTracker

Ausgehende Formularklicks als Event erfassen. Dieses Feature prüft, ob beim Absenden eines Formulars die Zieldomain (wohin die Formularwerte geschickt werden) von der aktuellen Domain abweicht. Sollte das der Fall sein, so wird ein Event mit der Kategorie „Outbound Form“ und Aktion „submit“ verschickt. Das Label des Events entspricht dabei dem Wert der hinterlegten Form-Action.

Übrigens werden auch Formulare, die auf eine Subdomain verweisen, als Extern erkannt.

outboundLinkTracker

Ähnlich wie der outboundFormTracker funktioniert das outboundLinkTracker Feature. Bei Klicks auf einen Link, der auf eine andere Domain verweist als die eigene, wird ein Event mit der Kategorie „Outbound Link“ und der Aktion „click“ erfasst. Das Label enthält zusätzlich den Wert des href-Attributs des Links (also die Ziel-URL).

Auch hier werden Subdomains als externe Links erfasst, was sich ebenfalls im Code anpassen lässt.

sessionDurationTracker

Als Sitzungsdauer wird in Google Analytics (und allen anderen Webanalyse-Tools auch) die Zeitspanne definiert in der sich der Nutzer auf der Seite befunden hat, vom ersten Seitenaufruf bis zum letzten. Jedoch fehlt dabei der Zeitpunkt, wann die Seite tatsächlich geschlossen wurde. Denn der Nutzer kann mehrere Minuten damit verbringen einen Text zu lesen und die Seite dann schließen. Diese Dauer würde dann nicht erfasst werden.

Mit dem sessionDurationTracker-Feature wird diese Messung genauer. Vor allem bei Seitenaufrufen, die nur aus einem einzigen Seitenaufruf bestehen, wird in der Regel nur eine Sitzungsdauer von 0:00 Min erfasst. Beim Schließen einer Seite wird (wenn der Browser es unterstützt) jedoch das navigator.sendBeacon Event ausgelöst. Auf dieses Signal wartet das sessionDurationTracker-Feature. Dann wird nämlich ebenfalls ein Event zu Google Analytics abgeschickt, wodurch sich die Zeitspanne errechnen lässt, wie lange der Nutzer tatsächlich auf der Seite war. Diese Zeit wird dann automatisch auf die Sitzungsdauer in Google Analytics aufgerechnet, da Events immer in die Berechnung mit einfließen.

Die Kategorie des Events lautet dabei „Window“ und die Aktion „unload“.

socialTracker

Dieses Feature sammelt Daten über Klicks auf sämtliche Share-Buttons, welche die Elemente „data-social-network“, „data-social-action“ und „data-social-target“ definiert haben. Auch hier müssen also erst Werte im HTML präpariert werden, ähnlich wie beim eventTracker-Feature. In der Regel bieten die Social Networks zwar fertige Codes an um einen Button zu integrieren, jedoch sind dabei genau diese Werte selten hinterlegt.

Für Twitter und Facebook wird jedoch das Tracking immer aktiviert, wenn man den Code des Buttons unverändert in seiner Seite integriert. So wie er von Facebook bzw. Twitter zur Verfügung gestellt wird.

urlChangeTracker

Dieses Feature ist gerade für Singlepage-Applications ein echter Mehrwert. Über die History API wird nachvollzogen, wenn sich die URL der Seite zwar verändert hat, aber kein echter Seitenaufruf passiert ist. Häufig werden heutzutage Seiteninhalte verändert, was jedoch kein komplettes Neuladen der Seite nach sich zieht. Mit dem urlChangeTracker wird jedes mal ein neuer Seitenaufruf erfasst, wenn sich die URL geändert hat.

Ändert sich nur der Wert der URL nach dem #-Symbol (seiteninterne Verweise) so wird kein Pageview erfasst. Da Google Analytics keine Sprungmarkennavigationen als Seitenaufruf im Standard definiert. Sowohl in GA als auch im Code ließe sich das aber weiter anpassen wenn nötig.

Auch bei diesem Feature sollte beachtet werden, dass die Singlepage-Anwendung nicht bereits selbst Pageviews definiert hat. Denn sonst könnte sich schnell die Datenmenge verdoppeln, womit keinem geholfen ist.

Autotrack und Google Tagmanager

Obwohl der Google Tagmanager in den meisten Fällen alles leichter macht, trifft das bei Plugins für Google Analytics nicht zu. Derzeit werden keine Plugins in der Eingabemaske für Universal Analytics unterstützt. Damit entfällt der leichteste Weg Autotrack.js einzubinden. Macht es aber nicht unmöglich.

Um Autotrack über den GTM einzubinden müssen ein paar Umwege genommen werden. Drehpunkt ist dabei der sogenannte Trackername im Analytics Trackingcode. GTM vergibt einen speziellen Namen für das Objekt um Pageviews zu erfassen. Da dieser nicht eindeutig ist, sondern zufällig generiert wird, müssen wir dies umgehen.

Prinzipiell geht es darum sowohl beim Einbinden von Autotrack als auch bei allen anderen Interaktionen mit Analytics den identischen Trackernamen zu verwenden. Als erstes legt man einen statischen Namen als Variable an.

Google Tag Manager Trackername Variable

In unserem Beispiel definieren wir den Namen „wngmnGATracker“, er kann aber beliebig lauten und sollte wenn möglich eher speziell und einzigartig sein und nicht allgemein. Diese Variable muss nun in allen Universal Analytics Tags als Trackername definiert werden. Auch bei allen bereits angelegten Universal Analytics Tags.

Google Tag Manager Trackername Universal Analytics

Als Tracker-Name wird in jedem Universal Analytics Tag diese Variable hinterlegt.

Zum Schluss wird als benutzerdefiniertes HTML Tag folgender Trackingcode angelegt.

Google Tag Manager Custom Javascript

Den Code findet ihr zum Kopieren auch als Text:

<script>
(function(){
function async(u, c) {
var d = document, t = 'script',
o = d.createElement(t),
s = d.getElementsByTagName(t)[0];
o.src = '//' + u;
if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
s.parentNode.insertBefore(o, s);
}
async('wngmn.de/autotrack.js', function() {
ga({{AnalyticsTrackerName}}+'.require', 'autotrack');
});
})();
</script>

Mit diesem Umweg kann man Plugins und damit auch Autotrack nutzen. Eine kleine Brücke die den GTM noch mächtiger macht. Vorsicht aber beim Umsetzen, der Trackername ist sehr sensibel und sollte wirklich in allen Tags dann konsequent verwendet werden.

Fazit

Autotrack.js ist eine tolle Erweiterungen die man bedenkenlos für jedes neue kleinere Projekt verwenden sollte. Für bestehende Implementierungen und strategisch auszubauende Analytics Anforderungen sollte Autotrack jedoch nur von fachkundigen Installiert werden. Denn es bedarf genauerer Anpassung und Analyse ob die Funktionen von Autotrack auch einen Mehrwert in den Daten haben.

Soweit die kurze Einführung in Autotrack.js. Über Anregungen und Feedback freuen wir uns in den Kommentaren.


Kommentare

Björn S. am 1. August 2016 um 11:12:55

Hallo Michael, vielen Dank für die Erklärung und die Anleitung. Ich selbst arbeite mit dem GTM.
Ich habe deine Anleitung Step by Step umgesetzt. Leider ohne Erfolg.
Hast du das selbst mal mit dem GTM getestet?

    Michael Sinner am 4. August 2016 um 10:59:18

    Hallo Björn,
    vielen Dank für deinen Kommentar und ich freue mich, dass Du dir die Zeit genommen hast den Guide zu testen. In der Tat funktioniert die Anleitung im GTM bei mir wie beschrieben, dies habe ich noch einmal verifiziert.

    Wenn Du die Lösung wie beschrieben durchführst und dann deine Seite mit dem GTM Preview aufrust, kannst Du dann im Netzwerkprotokoll den Aufruf zu autotrack.js sehen? Ist die Datei (in unserem Fall unter wngmn.de/autotrack.js) bei dir auch verfügbar?

Björn S. am 4. August 2016 um 20:46:26

Hallo Michael,

ich habe zum Testen ein GA Tracking in den Quelltext eingebunden (also ohne GTM). Damit funktioniert es ohne Probleme.

Die Einbindung über den GTM funktioniert nicht. Ja, ich sehe das in der GTM Preview ide autotrack.js aufgerufen wird. :-(

    Michael Sinner am 5. August 2016 um 09:11:07

    Hi Björn,
    dann wird es tatsächlich schwer den Fehler einzugrenzen. Hast Du im Code zum autotrack.js Aufruf und im GTM Tag jeweils die Variable {{AnalyticsTrackerName}} verwendet? Sie muss in beiden Fällen angegeben werden, damit beide Codes den identischen TrackerName haben.
    Ansonsten würde versuchen den Fehler in einem neuen GTM Account zu reproduzieren und hier in den Kommentaren noch einmal Feedback geben. Eventuell habe ich noch eine Kleinigkeit übersehen, auf die wir gerade nicht kommen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.