Die Anreicherung der Daten in Google Analytics durch Scroll-Tracking in Form von Events ist keine neue Aufgabe. Der Grund, warum es hier dennoch einen weiteren Beitrag und eine zugehörige Lösung gibt, ist der Ansatz, der dahinter steckt: Das Script beschränkt sich auf wenige Zeilen Code und ist unabhängig von Bibliotheken wie jQuery & Co. Die Basis stammt ironischerweise von einem älteren jQuery-basierten Lösungsansatz aus dem alten Google Analytics Produktforum stammt.

Für so wenig Einsatz bekommt man auch keine Extras: Es wird z. B. kein Timer verwendet, der die Intervalle zwischen Scrollvorgängen misst und den Events hinzufügt bzw. Timings an anderer Stelle hunterlegt. Der simple Grund dafür ist, dass in der Praxis oft ohnehin nur die durchschnittliche Scrolltiefe betrachtet wird und so zu Insights führt, die Änderungen auf der Website oder der gemessenen Landingpage bringen.

Warum Scroll-Tracking?

Das Auslösen von Events in der Webanalyse beim Scrollen durch den Benutzer dient i. d. R. vor allem dazu, die Absprungrate und Verweildauer zu "korrigieren" und zu prüfen, ob die weiter unten angeordneten Inhalte die Aufmerksamkeit bekommen, die man sich dafür erhofft. Den Pageviews der Standardimplementierung werden so weitere Messpunkte hinzugefügt, die die Messung der o. a. Metriken verbessern.

Scroll-Tracking-Script

Einsicht / Download des Scripts ist bei GitHub möglich. Da das Script sowohl für den Tag Manager als auch den direkten Einsatz vorgesehen ist, kann der Purist sogar zur Reduktion die Definition von useDataLayer und die zugehörige Bedingung weiter unten entfallen lassen und nur die benötigte Anweisung an Stelle der Bedingung erhalten. Viel ist dann wirklich nicht mehr übrig 😉

Das Script auf der eigenen Website einsetzen

Vor dem Einsatz ist zu bestimmen, welche Seiten Scroll-Tracking wirklich benötigen. Zwar ist die "Kapazitätsgrenze" bei Google Analytics abhängig von Sessions und nicht Hits, aber trotzdem ist das unsinnige Beschießen der Property mit Daten unsinnig, wenn diese potentiell ungenutzt bleiben.

Präzision bestimmen

In der Zeile var trackScrollStep = 20; wird definiert, in welcher Schrittweite der prozentuale Fortschritt beim Scrollen auf einer Seite gemeldet werden soll. Die Zahl "20" bedeutet, dass Events in 20% Schritten ausgelöst werden. Möglich ist theoretisch alles zwischen 1 und 50, wobei allerdings nur eine Schrittweite sinnvoll ist, die eine glatte Messung von 100% ermöglicht. Mehr Messpunkte bekommt man also mit 5, 10 oder 12.5. Mit 25 (oder 50) werden es weniger.

Verwendung im Google Tag Manager

Die indirekte Implementierung von Google Analytics Tracking und anderer Codesüber den Google Tag Manager zahlt sich auch in diesem Fall aus.

Script als Tag ausspielen

Das Script kann direkt als Benutzerdefiniertes HTML-Tag eingebunden und die Scroll-Events ausgelöst werden, ohne dass die Website "angefasst" werden muss. Ob man das Script auf allen oder nur ausgewählten Seiten benötigt, wird über Regeln bzw. Auswahl des passenden Triggers direkt beim Tag bestimmt (hier: "Alle Seiten / All Pages").

Wenn das Script im Tag Manager genutzt wird, sollte useDataLayer = true; gesetzt werden, damit ein Trigger für die Events genutzt werden kann. Halbherzig wäre es, an dieser Stelle false anzugeben und einfach die Events über die Zeile mit der ga('send'...)-Anweisung zu verschicken. Funktionieren würde es natürlich trotzdem 😉

Trigger anlegen

Der saubere Weg führt über einen Trigger, der dann wiederum ein weiteres Tag für die Events steuert. Dazu wird ein "benutzerdefiniertes Ereignis" erzeugt, dass beim Ereignis updScrollPercentage ausgelöst wird.

Datenschichtvariable für Scrolltiefe

Damit die Events die Tiefe des Scrollvorgangs zurückliefern können, wird eine Datenschichtvariable benötigt, die das Script in den dataLayer schreibt. Als Name der Variable wird scrollPercentage angegeben und ein beliebiger Name für die Variable definiert, über die gleich die Events auf den Wert zugreifen können (in diesem Beispiel "scrollEventDepthLabel").

Event-Tag

Fast fertig - zurück zu den Tags. Hier wird ein Tag vom Typ "Google Analytics -> Universal Analytics" benötigt. Tracking-Id eintragen oder (bei sauberer Implementierung ;)) aus einer Variable auslesen und dann als Erfassungstyp "Ereignis" auswählen. Bei der Gestaltung der Parameter wird nun auf die Datenschichtvariable zurückgegriffen und (als Label oder Wert) im Event verwendet. Kategorie und Aktion können beliebig benannt bzw. mit weiteren Variablen wie dem Pfad oder Titel der Seite belegt werden.

Die Anonymisierung der IP-Adresse nicht vergessen und unten als Auslöser den gerade erzeugten Trigger für Scrollvorgänge auswählen. Das wars!

Direkte Implementierung

Wer den Tag Manager nicht nutzt, kann das Script auf dem eigenen Server ablegen und über einen Script-Verweis im Template seines CMS laden. Dazu reicht ein Verweis im Fuß der Seiten; es muss nicht im head der Seiten sein.

Zur Konfiguration im Script die Schrittweite wählen, useDataLayer = false; setzen und ggf. die Vorgaben für Eventkategorie und -aktion in der Zeile ga('send', 'event', 'Interaction', 'ScrollPercentage', trackBottomScroll); anpassen.

Kontrolle in Google Analytics

Nach der Einbindung der direkten Variante im Livebetrieb oder dem Veröffentlichen der getesteten neuen Version im Tag Manager sind die Events im Echtzeit-Report unter "Ereignisse" direkt zu sehen.

Jetzt müssen nur noch Daten gesammelt und unter Verhalten - Ereignisse ausgewertet werden. Viel Spaß und Erfolg bei der Optimierung!