Leseverhalten von Nutzern mit dem Google Tag Manager tracken

Die genaue Messung des Nutzerverhaltens auf Webseiten ist essenziell, um Inhalte effektiv zu optimieren. Insbesondere das Leseverhalten gibt Aufschluss darüber, ob Inhalte tatsächlich konsumiert werden. Doch wie erfasst man „echtes Lesen“ im Web zuverlässig? Google Tag Manager (GTM) bietet dafür mächtige Tools.

1 Problematik
2 Ist-Zustand & gängige Praxis
3 Umfassende Lösung zur präzisen Erfassung des Leseverhaltens
4 Konkrete Umsetzung der verbesserten Tracking-Methode im Google Tag Manager
5 Anleitung zur Skript-Installation im Google Tag Manager
6 Fazit

Problematik

Klassische Methoden wie das reine Erfassen der Scrolltiefe sind weit verbreitet, doch bringen sie einige Probleme mit sich:

Nutzer scrollen unterschiedlich schnell oder pausieren zwischendurch lange.
Kurze Seiten verzerren die Messung, da viele Inhalte initial sichtbar sind.
Scrolltiefe alleine sagt nichts darüber aus, ob ein Nutzer tatsächlich gelesen oder Inhalte nur überflogen hat.

Ist-Zustand & gängige Praxis

Die gängige Praxis besteht oft darin, in Google Analytics 4 (GA4) einfache Scroll-Ereignisse bei festgelegten Prozentsätzen (25%, 50%, 75%, 100%) zu messen. Gerade bei kurzen Webseiten ist diese Methode jedoch problematisch, da die Events für 25% oder 50% oft sofort feuern, obwohl der Nutzer kaum oder gar nicht scrollt – die Inhalte passen schlichtweg vollständig in den initial sichtbaren Bereich. Alternativen wie Timer-Events oder Element Visibility Trigger verbessern zwar die Genauigkeit, doch fehlt meist eine ganzheitliche Lösung, die echte Nutzerinteraktionen („langsames Lesen“) sinnvoll abbildet.

Umfassende Lösung zur präzisen Erfassung des Leseverhaltens

Der hier vorgestellte Ansatz löst die typischen Probleme der Scroll-Messung insbesondere bei kurzen Webseiten, indem er mehrere Messmethoden intelligent kombiniert. Während bei der klassischen Scrolltiefen-Messung Ereignisse oft sinnlos feuern, sobald eine Seite vollständig im Viewport erscheint, berücksichtigt diese verbesserte Methode explizit, ob Inhalte initial sichtbar sind oder aktiv gescrollt werden müssen. Sie bietet eine realistische und umfassende Erfassung des Nutzerverhaltens durch folgende Maßnahmen:

Erfassung wichtiger Scrollpunkte, unter Berücksichtigung initial sichtbarer Inhalte.
Zusätzliche Messung von langsamem Scrollen („slow_scroll“).
Einsatz eines Element Visibility Triggers, um zuverlässig das Ende eines Artikels zu erfassen.
Flexible Variablen zur Individualisierung auf unterschiedliche Seitenlängen und Nutzerverhalten.

Konkrete Umsetzung der verbesserten Tracking-Methode im Google Tag Manager

Das verbesserte Tracking erfolgt mittels eines einzigen, umfangreichen Skripts für den GTM. Dieses Skript berücksichtigt unterschiedliche Aspekte des Leseverhaltens und kombiniert sie zu einer ganzheitlichen Tracking-Lösung:

Article Start: Das Event „article_start“ erfasst den Moment, wenn Nutzer erstmals signifikant scrollen, z.B. nach 100 Pixeln. Dies unterscheidet echte Leser von Besuchern, die lediglich kurz auf der Seite landen und sofort wieder abspringen.
Scroll Depth: Ereignisse („scroll_depth“) werden bei definierten Meilensteinen (25%, 50%, 75%, 100%) ausgelöst, jedoch nur dann, wenn diese Scrollpositionen nicht bereits initial sichtbar waren. Dadurch wird verhindert, dass unnötige Events auf kurzen Webseiten entstehen, bei denen der Nutzer gar nicht aktiv scrollen muss.
Slow Scroll: Das Event „slow_scroll“ wird ausgelöst, wenn Nutzer innerhalb einer individuell definierbaren Pixel-Grenze (z.B. weniger als 250 Pixel Scrollbewegung) mindestens 5 Sekunden verweilen. Diese Messung deutet auf ein intensives Leseverhalten hin und differenziert klar zwischen aktivem Lesen und schnellem Überfliegen.
Article End: Mittels Element Visibility Trigger wird das Event „article_end“ zuverlässig beim tatsächlichen Erreichen des Artikelendes ausgelöst. Dies liefert eine präzise Aussage darüber, ob Nutzer wirklich den gesamten Inhalt konsumiert haben.

Zudem erlaubt das Skript eine flexible Anpassung über Variablen, um es individuell auf jede Webseite zuzuschneiden:

Schwellenwert für den Startpunkt des Artikels (articleStartThreshold)
Pixel-Grenze für langsames Scrollen (slowScrollDistanceThreshold)
Zeitgrenze für langsames Scrollen (slowScrollTimeThreshold)
CSS-Selektor für das Artikelende (articleEndSelector)

Copy to Clipboard

function sendEvent(eventName, params) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: eventName,
      eventParams: params || {}
    });
  }

window.addEventListener('scroll', function() {
    var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var currentTimestamp = new Date().getTime();

var distance = Math.abs(currentScrollTop - lastScrollTop);
    var timeElapsed = currentTimestamp - lastTimestamp;

var scrollPercent = ((currentScrollTop + viewportHeight) / initialHeight) * 100;

if (!sentEvents.articleStart && currentScrollTop >= config.articleStartThreshold) {
      sendEvent('article_start');
      sentEvents.articleStart = true;
    }

[25, 50, 75, 100].forEach(function(threshold) {
      var thresholdPosition = initialHeight * (threshold / 100);
      if (!sentEvents[threshold] && thresholdPosition > viewportHeight && scrollPercent >= threshold) {
        sendEvent('scroll_depth', { percent_scrolled: threshold });
        sentEvents[threshold] = true;
      }
    });

if (distance < config.slowScrollDistanceThreshold) {
      if (!slowScrollStart) {
        slowScrollStart = currentTimestamp;
      } else if (!sentEvents.slowScroll && (currentTimestamp - slowScrollStart) >= config.slowScrollTimeThreshold) {
        sendEvent('slow_scroll');
        sentEvents.slowScroll = true;
      }
    } else {
      slowScrollStart = null;
    }

lastScrollTop = currentScrollTop;
    lastTimestamp = currentTimestamp;
  });

var articleEndElement = document.querySelector(config.articleEndSelector);
  if (articleEndElement) {
    observer.observe(articleEndElement);
  }
})({
  articleStartThreshold: 100,           // Scroll-Pixel für article_start
  slowScrollDistanceThreshold: 250,     // Max. Scroll-Pixel für langsames Scrollen
  slowScrollTimeThreshold: 5000,        // Zeit in ms für langsames Scrollen
  articleEndSelector: '.sabox-authors'  // Selector für das Ende-Element
});
</script>

Anleitung zur Skript-Installation im Google Tag Manager

Neuen Tag erstellen: Im GTM einen neuen Tag („Custom HTML“) anlegen.
Skript einfügen: Das bereitgestellte Skript in den HTML-Bereich des Tags einfügen.
Trigger zuweisen: Als Trigger „Alle Seiten“ auswählen, um das Tracking auf allen relevanten Seiten zu aktivieren.
Container veröffentlichen: Änderungen speichern und den Container veröffentlichen, um das Tracking live zu stellen.

Dieses Skript sendet Events automatisch in den Data Layer, sodass sie einfach und direkt in Google Analytics 4 verarbeitet und analysiert werden können.

Fazit

Die vorgestellte Tracking-Methode bietet eine erhebliche Verbesserung gegenüber der herkömmlichen Erfassung des Leseverhaltens durch reine Scrolltiefe-Messungen. Sie löst die typischen Herausforderungen, wie beispielsweise die fehlerhafte Erfassung auf kurzen Webseiten, indem sie verschiedene Aspekte intelligent kombiniert. Die Einbeziehung von langsamem Scrollen, initial sichtbarer Inhalte sowie der präzisen Erkennung des Artikelendes liefert eine umfassende und realitätsnahe Betrachtung des Nutzerverhaltens.

Durch die flexiblen Anpassungsmöglichkeiten über konfigurierbare Variablen ist die Methode optimal auf individuelle Webseitenbedürfnisse abgestimmt. Dies ermöglicht Marketern und Content-Managern nicht nur genauere Einblicke in das Nutzerverhalten, sondern auch bessere datenbasierte Entscheidungen zur Optimierung ihrer Inhalte. Insgesamt entsteht ein klareres und zuverlässigeres Bild davon, welche Inhalte wirklich konsumiert und wie intensiv diese genutzt werden, was die Basis für zielgerichtete Verbesserungen und effektiveres Online-Marketing darstellt.