Scrolltracking mit dem Google Tag Manager ohne jQuery
Im Blog von stockwerk5 (Update 17.06.2016: Der Artikel ist bei stockwerk5 leider nicht mehr online) hat Sebastian Ulbert eine Schritt für Schritt-Anleitung veröffentlicht wie man Scroll-Tracking für Google Analytics mit dem Google Tag Manager integriert.
Kurzexkurs: Der betriebswirtschaftliche Mehrwert von Scrolltracking
Scrolltracking beantwortet einem zentrale Fragestellungen: Wie weit werden meine Artikel gelesen? Werden Conversion Elemente oder Call to actions gesehen? Wie viele Nutzer verlassen an einem bestimmten Punkt die Seite? Welche Linkmodule entfalten Wirkung, weil die meisten Nutzer Sie auch sehen?
Eine Menge spannender Fragen, die einem ermöglichen Entscheidungen mit etwas mehr Datengrundlage zu treffen: Brauche ich längere Artikel, oder stimmt die Länge? Verschwende ich zu viel Zeit auf das Niederschreiben von Worten, die niemand zu Gesicht bekommt? Sollte ich eine neue Call to Action–Strategie versuchen?
Wir sind selbst große Freunde des Tag Managers und haben schon einige Umsetzungen damit gemacht und auch mit Scrolltracking Erfahrungen gesammelt, die wir hier ergänzend zu Sebastians Artikel kurz zeigen wollen:
Tracking ohne jQuery
Zahlreiche Websites haben jQuery ohnehin eingebunden sodass der Griff zu einer fertigen Funktionsbibliothek naheliegt, aber insbesondere bei Projekten mit besonders fähigen bis perfektionistischen Frontendentwicklern fällt uns auf, dass gerne bewusst auf jQuery verzichtet wird, um unnötigen Overhead zu vermeiden.
Die Funktionen werden mit nativem JavaScript von allen modernen Browsern unterstützt, je nach Zielgruppe (vorher die Browserstatistiken in Analytics einmal ansehen) sollte technische Unterstützung also kein Problem darstellen.
Der Trackingeventflut Einhalt gebieten
Je nachdem welche Auswertung man am Ende durchführen möchte kann auch eine Unterteilung in fixe 25% Schritte wie in Sebastians Artikel sinnvoll sein. Für uns erwies sich ein exakter Wert häufiger als sinnvoll und haben eine dementsprechende Lösung gebaut, die uns folgende Werte liefert:
- exitPercentage: An welcher Scrollposition (in Prozent) hat der User die Seite verlassen?
- exitPixels: An welcher Scrollposition (in Pixeln) hat der User die Seite verlassen?
- maxPercentage: Wie weit hinunter (in Prozent) hat der User gescrolled?
- maxPixels: Wie weit hinunter (in Pixeln) hat der User gescrolled?
Mit der Information über Pixel und Prozentwerte hat man zusätzliche Sicherheit: Bei der Nutzung auf Mobilgeräten beispielsweise ergeben sich völlig andere Werte als auf dem Desktop. Die Daten sollten deshalb immer nur in Verbindung mit den standardmäßig vorhandenen Segmenten für die unterschiedliche Devices ausgewertet werden.
Um eine zentrale Frage einfacher beantworten zu können gibt es außerdem die zusätzliche elementbasierte Antwort auf die Frage: Hat der User mein Call-to-Action Element gesehen?
Statt die Informationen während des Scrollens abzuschicken (was ältere und schwächere Mobilgeräte manchmal überfordert) schicken wir die Daten gerne am Ende, also kurz bevor der User das Fenster schließt oder weiterklickt. So haben wir auch die Möglichkeit noch zu erheben wo der User sich gerade befand als er sich entschlossen hat die Seite zu verlassen. Befinden sich eventuell störende Elemente auf der Seite, die den User zum Verlassen bewegen?
Auswertung
In Analytics sieht die Auswertung dann folgendermaßen, die nach Belieben auf einzelne Seiten oder Seitenbereiche bezogen werden kann:
Der Quellcode
var exitPercentage = 0;
var exitPixels = 0;
var maxPercentage = 0;
var maxPixels = 0;
window.addEventListener('beforeunload', function() {
// Maximum values
dataLayer.push({
'event':'GAEvent',
'eventCategory': 'scroll', // dataLayer Variable Macro 'eventCategory' erstellen
'eventAction': 'max-depth', // dataLayer Variable Macro 'eventAction' erstellen
'eventLabel': 'pixels', // dataLayer Variable Macro 'eventLabel' erstellen
'eventValue': maxPixels // dataLayer Variable Macro 'eventValue' erstellen
});
dataLayer.push({
'event':'GAEvent',
'eventCategory': 'scroll',
'eventAction': 'max-depth',
'eventLabel': 'percentage',
'eventValue': maxPercentage
});
// Exit values
dataLayer.push({
'event':'GAEvent',
'eventCategory': 'scroll',
'eventAction': 'exit-depth',
'eventLabel': 'pixels',
'eventValue': exitPixels
});
dataLayer.push({
'event':'GAEvent',
'eventCategory': 'scroll',
'eventAction': 'exit-depth',
'eventLabel': 'percentage',
'eventValue': exitPercentage
});
});
// Wenn gescrollt wird
window.addEventListener('scroll', function() {
exitPixels = document.body.scrollTop+document.documentElement.clientHeight;
// ( Scrollposition oberer Fensterrand + Browserfesterhöhe ) / Gesamthöhe des Dokuments
exitPercentage = Math.round((document.body.scrollTop+document.documentElement.clientHeight) / document.documentElement.scrollHeight * 100);
// Maximalwerte aktualisieren, falls neue Spitzenwerte erreicht wurden
if (exitPercentage > maxPercentage) { maxPercentage = exitPercentage; }
if (exitPixels > maxPixels) { maxPixels = exitPixels; }
// Alle Elemente mit Klasse 'cta' einzeln anschauen
var ctas = document.querySelectorAll('.cta:not(.seen)');
ctas.forEach(function(cta){
if (isInViewport(cta)) {
// Den Elementen die Klasse 'seen' ankleben, wenn sie irgendwann mal im Viewport waren
cta.classList.add('seen');
// Event abschicken, wenn Element erstmals im Viewport war (= gesehen wurde)
dataLayer.push({
'event':'GAEvent',
'eventCategory': 'scroll',
'eventAction': 'seen',
'eventLabel': 'cta-amazon',
'eventValue': cta.id
});
}
});
});
// Ist ein Element im Viewport?
var isInViewport = function(element) {
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
Kommentare
Vielen Dank für diesen Artikel, sehr interessant. Dies führt mich zu der Frage, wie Google selbst mein scrollen auf der Seite bewertet? Angenommen ich bin 45 min auf einer Landingpage, meine Session wurde aber nach 30 min durch Google Analytics beendet – zählt mein Scrollen dann direkt als neue Session, als Wiedereinstieg?
Hallo Marco,
sehr interessante Frage! Wir werden das mal die nächsten Tage testen und schauen was passiert.
Für die „freie Wildbahn“ ist das eher ein außergewöhnlicher Fall: Wenn man merkt, dass die Landingpage in Sachen Content (z.B. durch ein sehr langes Video) solche Sitzungslängen hergibt, würde man in der Property unter Tracking Informationen > Sitzungseinstellungen wohl die maximale Sitzungslänge höherstellen, um solche Probleme zu vermeiden.
Gruß
Justus
Die Sessions werden neu gestartet, wenn 30 Minuten nach dem letzten Ping (irgendeine Art von Info vom Nutzer: PI, Event, Transaktion, etc.) vergangen sind. Damit startet in ihrem Beispiel nach 45 Min. ein neuer Visit mit dem Scroll-Event.
Hey Justus,
ich möchte Scroll-Tracking auf einer Seite integrieren, die kein jQuery unterstützt. Ich hab den Code oben in einem Custom-HTML-Tag im Google Tag Manager angelegt. Das Tag löst auch aus. Jedoch werden in Google Analytics unter Ereignisse keine Scrollergebnisse angezeigt.
Werden die in einem anderen Bereich in Google Analytics angezeigt?
So habe ich das Tag konfiguriert: http://i.imgur.com/HEdLiO8.png
viele Grüße
Thomas