Scrolling-Tracker mit Google Analytics

Gerade bei Blogs ist der Anteil der Single Page Visits besonders hoch. Die Nutzer lesen den gesuchten Artikel und verschwinden wieder. Ob der Nutzer den Artikel aber tatsächlich gelesen oder enttäuscht wieder verschwunden "gebounced" ist, bleibt bei herkömmlichen Tracking-Methoden im Dunkeln. Allerdings gibt es mit dem Event-Tracking von Google Analytics und ein wenig Javascript eine Möglichkeit zu prüfen, ob der Nutzer die Seite heruntergescrollt und auch das Ende des Artikels gelesen hat...

Die größte Herausforderung bei der Programmierung eines Scrolling-Trackers ist das Abfangen des Scrolling-Events, dass es bei Javascript so nicht gibt. Ob ein Nutzer gescrollt hat, lässt sich im Prinzip nur über ein kontinuierliches Abfragen der vertikalen Scroll-Position realisieren.

Position abfragen

Diese Position ist im Internet Explorer unter document.body.scrollTop und in den restlichen Browsern unter window.pageYOffset hinterlegt. Damit die Abfrage auch überall funktioniert, bedarf es daher einer Browserweiche:

1. // Aktuelle Scrolling-Position
2. function getPos(){
3. if (navigator.appName == "Microsoft Internet Explorer"){
4. return document.body.scrollTop;
5. }else{
6. return window.pageYOffset;
7. }
8. }

Die Funktion getPos() prüft in einem ersten Schritt, ob ein Internet Explorer vorliegt [3]. Falls dem so ist, gibt sie den Positionswert nach IE-Schreibweise zurück [4], ansonsten im else-Block in allgemeiner Schreibweise [6].

Scrolling erkennen

Da die getPos()-Funktion nur die Scroll-Position ermittelt, benötigen wir zusätzlich eine Funktion, die periodisch aufgerufen wird, die Position auswertet und bei einer Abweichung den Tracker auslöst.

1. var tracker // Intervall-Variable
3. // -- Scroll-Tracker
4. function scrollTrack(){
5. if(getPos()!=0){
6. // Google Analytics Event-Tracking
7. pageTracker._trackEvent(′scrolling′,document.URL,′scroll′,1);
9. // Intervall löschen
10. window.clearInterval(tracker);
11. }
12. }

Zunächst wird eine Variable tracker[1] gesetzt , die später den Interval-Aufruf aufnimmt, der periodisch die Überwachungsfunktion aufrufen soll. Obwohl das Intervall noch nicht gestartet wurde, ist die Variable wichtig, da sie von der Prüf-Funktion scrollTrack()[4] verwendet wird, die direkt als nächstes kommt.

Diese Funktion scrollTrack() fragt bei jedem Aufruf die aktuelle Scroll-Position ab und prüft, ob sie sich immer noch auf dem Ausgangswert befindet[5], der ohne den Einsatz von Sprungmarken bei 0 liegen sollte. Weicht die Position ab, wird der Tracker ausgelöst[7] und im nächsten Schritt das Prüf-Intervall beendet[10], welches in der bereits bekannten Variable tracker gespeichert ist.

Der Tracking-Aufruf[7] selbst besteht aus vier Werten, die frei vergeben werden können:

1. Event-Typ (String)
2. Seitenname /-URL (String)
3. Genaues Event (String)
4. Event-Wert (Integer)

Die ersten drei Werte helfen dabei, die Ergebnisse für eine Vielzahl von Seiten übersichtlich zu gestalten und die Events auch für andere Zwecke zu verwenden.

Der nummerische Event-Wert ist ein Hilfsmittel, mit dem sich über einen Mittelwert das Verhältnis von Scrollern zu Nicht-Scrollern bequem ablesen lässt. Voraussetzung ist hierfür, dass beim Laden der Seite schon ein Event mit dem Wert 0 gesetzt wird.

1. // Start-Kennung
2. pageTracker._trackEvent(′scrolling′,document.URL,′start′,0);

Wer nebenbei als Basis die Eindeutigen Ereignisse verwendet, ermittelt seinen Wert auf Visit-Basis, ohne Reloads. Die korrekte Formel wäre eh: scroll-Event / start-Event x 100

Wer das Start-Event verwendet, sollte jedoch gewarnt sein, denn dann werden Bounces von Google Analytics nicht mehr erfasst. Man kann das Start-Event natürlich auch weglassen, nur wird die Analyse der Scrollings dann natürlich schwieriger.

Nachdem nun alle wichtigen Funktionen vorhanden sind, muss der Tracker nur noch gestartet werden. Hierfür wird die Interval-Funktion von Javascript verwendet, die in der tracker-Variable gespeichert und am besten auf einen Wert von ca. 0,5s eingestellt wird und ganz am Ende des Codes stehen muss.

1. // Timer
2. tracker = window.setInterval(′scrollTrack()′,500);

---

Kompletter Code

Und hier das Ganze noch einmal im Überblick. Wer das Script verwenden will, muss im Prinzip nur den Code hier am Ende seiner Webseiten, aber auf jeden Fall nach dem Google Analytics-Pixel einbauen und warten, bis die ersten Daten da sind. Runterladen lässt er sich hier - download: scrolltracker.js - und wer den Code in Aktion sehen will, muss einfach nur einen Blick in den Quelltext dieser Seite werfen.

1. // ScrollTracker by Thomas Dorloff (www.mysteryfx.de)
3. // Basis-Variablen
4. var tracker; // Intervall
6. // Aktuelle Scrolling-Position
7. function getPos(){
8. pos = 0;
9. if (navigator.appName == "Microsoft Internet Explorer"){
10. pos = document.body.scrollTop;
11. }else{
12. pos = window.pageYOffset;
13. }
14. return pos;
15. }
17. // Start-Kennung
18. pageTracker._trackEvent(′scrolling′,document.URL,′start′,0);
20. // -- Scroll-Tracker
21. function scrollTrack(){
22. if(getPos()!=0){
23. // Google Analytics Event-Tracking
24. pageTracker._trackEvent(′scrolling′,document.URL,′scroll′,1);
26. // Intervall löschen
27. window.clearInterval(tracker);
28. }
29. }
31. // Timer
32. tracker = window.setInterval(′scrollTrack()′,500);