Praxisguide

Scroll-Tracking sinnvoll einsetzen

Durch die weite Verbreitung von Smartphones sind Internetnutzer bereit mehr zu scrollen als vor einigen Jahren. Scroll-Tracking hilft zu verstehen, wie Besucher tatsächlich auf Websites scrollen und damit welche Elemente sich im sichtbaren Bereich befinden.

Wir zeigen zunächst zwei verschiedene Ansätze, wie Scroll-Tracking implementiert werden kann. Außerdem skizzieren wir konkrete Analysen, die mit den gesammelten Daten durchgeführt werden können.

1. Einleitung

Unter anderem durch den Einfluss von Smartphones sind Internetnutzer bereit mehr zu scrollen als vor einigen Jahren. Scroll-Tracking hilft zu verstehen, wie Besucher tatsächlich auf Websites scrollen und damit welche Elemente sich im sichtbaren Bereich befinden. Falls also einige Seiten Ihrer Website über mehr als nur eine Bildschirmseite reichen, kann Scroll-Tracking für Sie interessant sein.

In den nächsten beiden Kapiteln zeigen wir zunächst zwei verschiedene Ansätze, wie Scroll-Tracking implementiert werden kann:

  • Mithilfe von Heatmap-Tools wie HotJar, ClickTale oder CrazyEgg (siehe 2. Kapitel)
  • Durch eine Implementierung von Ereignis-Tracking im jeweiligen Webanalyse-Tool (siehe 3. Kapitel)

Beide Ansätze haben Vor- und Nachteile. Wir beschreiben, welcher Ansatz, für welche Websites geeignet ist. Hierfür skizzieren wir zuvor jeweils die technische Funktionsweise.

Das vierte Kapitel beschreibt dann konkrete Analysen, die mit den gesammelten Daten durchgeführt werden können. Überprüfen Sie, von welchen Sie profitieren können.

2. Scroll-Tracking mit Heatmaps

Eine Heatmap ist eine besondere Art eines zweidimensionalen Diagramms, in dem verschiedene Mengen durch Farben dargestellt werden. Der Name lässt sich aus der Farbgebung ableiten: Bereiche mit hohen Werten werden weiß (entsprechend „sehr heiß“) dargestellt. Bereiche mit niedrigen Werten in blau. Dazwischen gibt es rote, orangene und gelbe Bereiche (in absteigender Reihenfolge).

Scroll-Heatmaps visualisieren entsprechen, wie weit Besucher auf einer Seite gescrollt haben. Rote Bereiche haben viele Besucher gesehen; blaue dagegen nur wenige. In diesem Beispiel aus ClickTale wurde bei 80 % aller Seitenaufrufe bis zu der markierten Grenze von 844 Pixeln gescrollt.

Scroll-Heatmap aus „ClickTale“. In diesem Fall

Es gibt eine Reihe von Tools, welche diese und andere Heatmaps (unter anderem von Klicks und Mausbewegungen) generieren können. In unserer Marktübersicht finden Sie eine umfangreiche Liste der Anbieter.

Die Tools berücksichtigen dabei die verschiedene Bildschirmauflösung und Größen des Desktop-Browsers. So besteht kein Unterschied, ob ein Besucher mit hoher Auflösung den Inhalt der kompletten Seite sofort sieht oder ob ein Besucher mit geringer Auflösung bis zum Ende der Seite scrollt.

Bildschirme auf Smartphones sind jedoch sehr viel kleiner. Elemente, die sonst nebeneinander platziert sind, sind auf mobilen Seiten (egal ob unter m.website.de oder responsive zu erreichen) untereinander platziert. In den Tools können deshalb verschiedene Scroll-Heatmaps für verschiedene Geräte betrachtet werden.

Hier die Auswahl bei HotJar:

2.1 Technische Funktionsweise

Die Tools erstellen Scroll-Heatmaps in zwei Schritten. Wenn Besucher mit der Website interagieren, werden alle Scroll-Bewegungen „nach unten“ aufgezeichnet. Im zweiten Schritt werden die Heatmaps basierend auf diesen Daten im Backend des Tools generiert und über einen Screenshot der Website gelegt.

2.2 Daten aufzeichnen

Alle relevanten Tools basieren auf JavaScript. In die zu analysierende Website wird ein JavaScript-Code („Tag“) eingebaut, der die Daten zum Besucherverhalten an den Server des Toolbetreibers sendet. Das jeweilige JavaScript-Tag registriert, wenn gescrollt wird.

Dann wird die erreichte Höhe in Pixeln per HTTP-Anfrage an das Tool gesendet. Alle Anfragen einer Session werden mit einer eindeutigen Session-ID verknüpft, um das Verhalten einzelner Besucher getrennt analysieren zu können. Zusätzlich werden weitere Daten (beispielsweise Datum, Zeit und Browser-Typ) gespeichert, die später zur Feinauswertung und Segmentierung genutzt werden können.

Weiterbildung per eLearning.

Werde zum Spezialisten für eCommerce-Optimierung
  • Branchenbekanntes Zertifikat
  • Zeitlich unlimitierter Zugang zu allen Lerninhalten
  • Zu jeder Zeit und an jedem Ort lernen

2.3 Heatmaps generieren

Um die gespeicherten Klicks „über“ die Seite zu legen, wird entweder die tatsächliche Website einschließlich Bildern (1) als Screenshot gespeichert oder aber (2) die URL der Seite an das Tool übermittelt.

Sobald in der Oberfläche des Tools eine Heatmap angefragt wird, generiert das Tool auf Basis der gesammelten „erreichten“ Höhen die Heatmap.

Das generierte Bild wird über den Screenshot der Website gelegt. Zu diesem Zweck wird entweder das schon gespeicherte Screenshot (Variante 1) verwendet oder ein Screenshot von der gespeicherten URL erstellt (Variante 2).

Die zweite Variante hat den großen Nachteil, dass sich Seiten zwischen dem Besuch einerseits und der Generierung der Heatmap andererseits oft verändern. In diesem Fall wird die Heatmap über eine Seite gelegt, welche Besucher so nicht gesehen haben.

2.4 Wann sind Scroll-Heatmap sinnvoll?

Scroll-Heatmaps sind sehr einfach zu implementieren. Nachdem der JavaScript-Code des Tools installiert ist, werden Daten gesammelt und nach kurzer Zeit können schon die Daten betrachtet werden.

Der große Vorteil von Scroll-Heatmaps besteht jedoch darin, dass sie als visuelles Mittel gut funktionieren, um Probleme schnell zu kommunizieren. Ihre Landingpage erstreckt sich über mehrere Bildschirmseiten, der untere Teil wird jedoch gar nicht betrachtet? Kein Vorgesetzter kann in diesem Fall dagegen argumentieren, dass die Landingpage gekürzt werden sollte.

Für manche Seitentypen eines Online-Shops sind sie jedoch nur bedingt geeignet. Vor allem Produktdetailseiten und Kategorieseiten sind hoch dynamisch, das heißt für verschiedene Produkte bzw. Produktkategorien können Elemente an verschiedenen Positionen platziert sein.

Bei euronics.de sind viele Produktdetailseiten unterschiedlich lang. Wenn hier die Scroll-Heatmap über einen der Screenshots gelegt wird, trifft dies für das andere Produkt nicht zu.


Falls die zu analysierenden Seitentypen die gleiche Höhe haben (zum Beispiel, wenn auf jeder Kategorieseite immer 20 Produkte pro Seite angezeigt werden), dann ist dieser Umstand nicht problematisch.

Geeignet ist dieser Ansatz natürlich auch für statische Seiten wie Landingpages oder Startseiten.

3. Scroll-Tracking im Webanalyse-Tool

Statt ein eigenes Tool zu kaufen und zu implementieren, können Sie Scrollverhalten auch im Webanalyse-Tool messen. Hierfür werden Ereignisse an das Webanalyse-Tool gesendet, sobald bestimmte Elemente im Browser des Besuchers angezeigt werden.

Wie bei den Heatmaps können Sie analysieren, wie viel Prozent der Besucher wie viele Prozent der Seite sehen. In diesem Beispiel haben ca. 63 % der Besucher (96.441 / 152.361) bis zur 25 %-Marke der Seite gescrollt:

Zusätzlich zu den Prozentangaben kann auch aufgezeichnet werden, welche Elemente auf dem Bildschirm angezeigt wurden.

„ul#productList“ bezeichnet hier die Produktliste auf der Kategorieseite. Da jeweils drei Produkte pro Zeile angezeigt werden, wird aufgezeichnet, wenn sich das jeweils dritte Produkt („eq(x)“ bezeichnet die Position eines Elements in Quelltext) im sichtbaren Bereich befindet.

Dies ist besonders hilfreich, da nun auch dynamische Seiten (wie die beiden Produktdetailseiten des vorigen Kapitels) verglichen werden können. Ob die Produktempfehlungen weiter unten platziert sind, ist für diese Auswertung nicht relevant. Das Scrollen dorthin wird aufgezeichnet, sobald sie auf dem Bildschirm erscheinen.

Welcher Ansatz ist nun besser? Wenn Online-Shops auf die visuelle Komponente verzichten können, ist das Scroll-Tracking per Webanalyse-Tool das Mittel der Wahl.

Für statische Seiten und Landingpages eignen sich beide Ansätze. Der Weg über das Webanalyse-Tool ist in den meisten Fällen wahrscheinlich günstiger.

3.1 Technische Funktionsweise

Bevor Ereignisse an das Webanalyse-Tool gesendet werden können, muss erkannt werden, wenn ein Besucher scrollt. Hierfür kann die jQuery-Funktion .scroll() zum Einsatz kommen.

Falls Sie Google Analytics einsetzen, empfehlen wir, dieses Plugin einzusetzen: http://scrolldepth.parsnip.io/. Es ist kostenfrei, funktioniert einwandfrei, ist sehr schnell implementiert, kann per Google Tag Manager implementiert werden und hat sich in vielen Kundenprojekten bewährt.

Mit etwas Aufwand kann der Code auch für andere Webanalyse-Tools wie Adobe Analytics modifiziert werden.

ConversionBoosting ANALYZE.

Wandle Deine Besucher in mehr Leads & Sales
  • Konkrete Optimierungsvorschläge für mehr Leads & Sales
  • Innovatives Online-Tool zur Conversion-Optimierung
  • Individuelle Analyse Deiner Website

4. Analysen mit Scroll-Daten

Sie wissen nun, wie viele Besucher wie weit scrollen (egal ob mithilfe von Heatmaps oder Ereignis-Tracking). Welche Erkenntnisse kann man daraus ziehen?

Bevor wir diese Analysen vorstellen, ein sehr wichtiger Hinweis. Wie immer in der Webanalyse gilt: Um repräsentative Daten zu erhalten, muss eine genügend hohe Anzahl an Datenpunkten gesammelt werden. Basierend auf nur 50 Besuchen sollten Sie keine Schlüsse ziehen oder Entscheidungen treffen!

4.1 Elemente im sofort sichtbaren Bereich

Scroll-Heatmaps geben unmittelbar darüber Auskunft, wie viele Besucher bestimmte Elemente sofort sehen können, da sie im sofort sichtbaren Bereich platziert sind.

Diese Information kann aus vielen Webanalyse-Tools auch auf anderem Weg beschafft werden (Google Analytics: Zielgruppe > Technologie > Browser und Betriebssystem > Bildschirmauflösung). Heatmaps machen dies jedoch unmittelbar und mit wenig Aufwand deutlich.

4.2 Verhalten von „Scrollern“ und „Nicht-Scrollern“ vergleichen

Auf einer Seite weiter zu scrollen, ist nicht grundsätzlich gut oder schlecht. Vielleicht finden manche Besucher unmittelbar, was sie suchen und müssen deshalb nicht weiter scrollen. Vielleicht scrollen manche Besucher aber auch nicht, weil sie die Seite schon früher verlassen.

Untersuchen Sie deshalb unbedingt, wie sich die beiden Gruppen „Scroller“ und „Nicht-Scroller“ bezüglich wichtiger Kennzahlen unterscheiden. Die wichtigste Frage hierbei ist: Konvertieren Scroller häufiger? Erstellen Sie hierfür zwei Segmente im Webanalyse-Tool.

4.3 „Lange“ Landingpages

Falls Ihre Landingpage oder Contentseite sehr viel Text enthält, können Scroll-Daten aufdecken, ob diese Texte überhaupt gelesen werden. Ist dem nicht so, sollten die Landingpages komprimiert werden.

Insbesondere wenn A/B-Tests wegen zu geringer Conversions nicht möglich sind, kann so die Frage „Viele oder wenige Informationen darstellen?“ auf diese Weise beantwortet werden.

4.4 Absprungpunkte auf Landingpages identifizieren

Gibt es bestimmte Stellen, an denen besonders viele Besucher nicht mehr weiter scrollen. Bauen Sie hier eine Aufforderung zum Scrollen ein, um Besuchern zu vermitteln, dass es noch weiteren relevanten Content gibt.

Aufforderung zum Scrollen auf ubs.com

Alternativ können Sie an diesen Stellen auch einen weiteren primären Call-to-Action platzieren. Im UBS-Beispiel wäre dies also nicht „Scrollen“, sondern „App herunterladen“.

Ein anderes Beispiel. Einer unserer Kunden hatte am unteren Rand eine fixierte Leiste mit Handlungsaufforderungen platziert. Viele Besucher haben diese Leiste als Ende der Seite interpretiert. Basierend auf dieser Erkenntnis wurde die Leiste transparent dargestellt. Bei Besuchern wurde nicht mehr der Eindruck erweckt, dass die Seite dort zu Ende ist.

4.5 Kategorie- und Suchergebnisseiten

Scroll-Daten können Aufschluss darüber geben, wie viele Produkte Besucher auf Suchergebnis- und Kategorieseiten betrachten. Scrollen Besucher häufig bis nach ganz unten, finden Sie vielleicht nicht, wonach sie gesucht haben.

In diesem Fall können Sie diese Ideen in einem A/B-Tests ausprobieren.

  • Öffnen Sie ein Chat-Fenster mit der Aufforderung „Wie kann ich Ihnen helfen?“, wenn das Ende der Kategorieseite erreicht ist.
  • Stellen Sie statt zum Beispiel aktuell 20 Produkten 50 Produkte pro Kategorieseite dar.
  • Laden Sie neue Produkte per Infinite Scroll nach

4.6 Startseite im Online-Shop

Oft wird sehr viel Geld in das Aktualisieren der Startseite investiert – sowohl von Designern als auch von Content-Managern. Werden bestimmte Elemente, wie Teaser weiter unten aus der Seite, jedoch gar nicht oft gesehen, dann kann man auf diese Aufwende verzichten.

ConversionBoosting