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)
    );
}