Scroll tracking script for Google Tag Manager / Google Analytics (no jQuery)

gms.scrolltracker.js

<script type="text/javascript">
/* gms.scrolltracking.js | v0.2
   www.gandke.de
   Copyright (c) 2015 Markus Baersch (@mbaersch)
   Licensed under MIT license.
*/
var trackBottomScroll = 0;
var trackScrollStep = 20 ;
var useDataLayer = true ;  
window.onscroll = function () {
var docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight,
                         document.body.offsetHeight, document.documentElement.offsetHeight,
                         document.body.clientHeight, document.documentElement.clientHeight);
if (trackBottomScroll < 100 && ((document.documentElement.scrollTop||document.body.scrollTop) >= 
   (docHeight - window.innerHeight) / 100 * (trackBottomScroll+trackScrollStep)))
try {
  trackBottomScroll += trackScrollStep;
  if (useDataLayer)
    dataLayer.push({'scrollPercentage': trackBottomScroll, 'event': 'updScrollPercentage'});
  else
    ga('send', 'event', 'Interaction', 'ScrollPercentage', trackBottomScroll.toString());
    
} catch(e) {} 
} ;
</script> 

gms.scrolltracker.js

JavaScript zum Scroll-Tracking in Google Analytics / Google Tag Manager ohne jQuery

Einsatz im Google Tag Manager
Der primäre Einsatzzweck des Scripts ist die Verwendung als Tag im Google Tag Manager, der auf beliebigen einzelnen oder allen Seiten ausgespielt werden kann. Ohne weitere Anpassungen wird auf diesen Seiten alle 20% der Gesamthöhe der Seite ein Event updScrollPercentage per dataLayer ausgelöst und die aktuelle Scrollposition in die Variable scrollPercentage geschrieben.

Darauf kann über einen Trigger reagiert und ein Event mit beliebigen Angaben für Kategorie, Aktion etc. ausgelöst werden.

Direkter Einsatz in Google Analytics ohne Tag Manager
Wenn kein Tag Manager im Einsatz ist, kann useDataLayer = false; eingestellt werden. In diesem Fall wird direkt ein (Universal) Analytics Event ausgelöst; die Angaben zur Kategorie etc. können dann direkt in der Zeile

ga('send', 'event', 'Interaction', 'ScrollPercentage', trackBottomScroll);

eingestellt und ggf. ergänzt werden, so dass z. B. die URL der aktuellen Seite als Label genutzt und der Prozentsatz als Aktion eingesetzt wird.

Einstellungen

• Über useDataLayer wird wie gerade beschrieben eingestellt, ob der dataLayer für den Tag Manager befüllt oder die Scrolltiefe direkt an Analytics gesendet werden soll.
• Unter trackScrollStep kann angegeben werden, in welche Schritten der Scroll-Fortschritt gemeldet werden soll. 20 bedeutet hier, dass Events in 20% Schritten gefeuert werden, also bei Erreichen von 20, 40, 60, 80 und 100%. Genauer wird die Messung also bei 5 oder 10, dafür werden aber deutlich mehr Events abgefeuert und können je nach Rahmenbedingung die Daten in Analytics übermäßig aufblasen. Sind auch 20%-Schritte zu klein, kann also bei Bedarf auch 25 oder 50 eingesetzt werden. Will man auf unterschiedlichen Siten unterschiedliche Messgenauigkeit haben, kann der Tag daher auch sinnvoll mehrfach, aber mit verschiedenen Einstellungen, im Tag Manager verwendet und per passender Regel für nutzende Seiten gesteuert werden.

Erläuterungen
Das Script stellt trotz des geringen Umfangs immer noch einen Kompromiss zwischen Umfang und Stabilität dar. So ist die verschwenderische Bestimmung der Seitenhöhe i. d. R. unnötig und man kann einfach mit document.body.clientHeight arbeiten, wenn die nutzenden Seiten alle einen doctype besitzen. Auch die Wahl zwischen dataLayer und direkter Meldung an Analytics wird im realen Einsatz freilich nicht benötigt, so dass noch Kürzungen möglich und sinnvoll sind.

Grundsätzlich ist das vorrangige Ziel, eine für die meisten / gängigen Browser auf Desktop- und Mobilgeräten funktionierende Lösung für die Aufgabe des Scroll-Trackings zu bieten, die unabhängig von jQuery oder anderen Bibliotheken funktioniert, um einer Site, die ohne solche Frameworks auskommt, nicht zwingend den ganzen damit einhergehenden Overhead aufzubürden.

Feedback ist jederzeit willkommen. Happy Tag Managing! ;)