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:

Scrolltracking Google Analytics Auswertung

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

Shigoki am 2. Juli 2014 um 15:56:07

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?

    Justus Blümer am 2. Juli 2014 um 17:38:52

    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

    Michael Sinner am 11. August 2014 um 15:03:45

    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.

Thomas Lerch am 25. November 2015 um 20:01:01

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

    Justus Blümer am 26. November 2015 um 11:34:15

    Moin Thomas,
    bist du sicher, dass du den richtigen Code übernommen hast? Das JS in deinem Screenshot sieht nicht nach dem Code aus diesem Blogpost hier aus und bezieht sich auf jQuery, was aber wie du schreibst nicht installiert ist. Außerdem brauchst du ein Tag, das auf GTM-Events mit dem Namen „GAEvent“ reagiert und die Datenschichtvariablen eventCategory, eventAction, eventLabel und eventValue entgegennimmt.

Maik am 18. Juli 2016 um 10:15:57

Hallo Justus,

ich hätte in diesem Bezug eine Frage zur Bounce Rate. Wenn ich das Scroll Tracking wie von dir beschrieben umsetze, habe ich mein benutzerdefiniertes html Tag, welches (neben dem Pageview) sofort auf der eingebundenen Seite gefeuert wird und im Anschluss den Scrolling Event (falls der Nutzer entsprechend agiert). Meine Frage: Wirkt sich das benutzerdefinierte html Tag auf die Bounce Rate aus? Schließlich wird dieses direkt auf der Seite abgefeuert (ohne das der Nutzer eine Aktion durchführen musste) und wäre nach dem Pageview damit ein zweites Ereignis. Demnach würde kein Nutzer mehr als „Bouncer“ gezählt werden, der eine Seite mit integriertem Scroll Tracking besucht. Allerdings hat er u.U. ja noch gar keine Aktion ausgeführt, außer auf der Seite zu landen. Ich möchte natürlich nicht, dass die Bounce Rate auf diese Weise verfälscht wird und nur der Scroll Event an sich Auswirkungen auf die Bounce Rate hat, nicht aber das prinzipiell gefeuerte html Tag. Ich würde mich über deine Einschätzung bzw. Lösung freuen.

    Justus Blümer am 18. Juli 2016 um 16:33:47

    Hallo Maik,

    das Auslösen des Benutzerdefinierten HTML Tags allein hat keinerlei Auswirkungen auf die Bounce Rate in GA – an dieser Stelle werden auch noch keine Daten an GA übertragen.
    Dazu brauchst du noch einen weiteren Tag, der die Informationen aus dem dataLayer.push(…) Befehl entgegen nimmt: http://www.simoahava.com/analytics/auto-event-tracking-gtm-2-0/

    In der Konfiguration dieses Event-Tags kannst du selbst bestimmen, ob sich die Events auf die Bounce Rate auswirken sollen oder nicht. Wenn sie sich nicht auswirken sollen, d.h. die Bounce Rate nicht „künstlich“ verkürzen sollen, musst du das Event als „Non-Interaction Hit“ markieren. Wie das geht steht unter https://support.google.com/analytics/answer/6164470?hl=de bei Schritt 2:
    > „Wenn Sie möchten, dass ein Klick auf eine Schaltfläche oder einen Link zu keinem neuen Seitenaufruf führt, der Einfluss auf die Absprungrate hat, muss „Wahr“ ausgewählt werden.“

      Maik am 19. Juli 2016 um 14:05:26

      Hallo Justus,

      perfekt – das hat mir sehr geholfen. Vielen Dank und beste Grüße.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.