Eine Landingpage mit viel Inhalt ist super und schafft Mehrwert für den Nutzer. Doch liest der Nutzer die 
Seite komplett durch? Und wie tief scrollt er die Ebenen runter? Diese Fragen habe ich mir letztens gestellt. Wenn du dich das auch fragst, bist du von der Antwort nicht mehr weit entfernt: Eine Kombination aus dem Google Tag Manager (Version 2) und Google Analytics bietet dir die Möglichkeit an die Daten zu gelangen, die deine Fragen beantworten. Und zwar ohne dass es nötig ist, den Quellcode zu überarbeiten.
Alles was du benötigst, ist bereits ein wenig Erfahrung mit dem Tag Manager und die Verwendung von jQuery.
Hinweis: Für diese Variante ist jQuery vonnöten. Wenn du die Installation etwas tricky findest, kannst du für WordPress-Seiten das Plugin WP jQuery Plus installieren, welches den Rest für dich erledigt.
Des Weiteren benötigst du ein Script, das Events in Google Analytics abfeuert. Rob Flatherty hat dafür ein sogenanntes Scroll Depth Plugin erstellt, welches ihr unter folgendem Link auf GitHub rauskopieren und in den Tag Manager einbauen könnt (jquery.scrolldepth.js).
Schritt 1: Benutzerdefiniertes HTML-Tag erstellen
Alle hier gezeigten Schritte sind in der Version 2 des Google Tag Managers anzulegen.
Wenn du das Script bereits kopiert hast, erstellt du im Google Tag Manager ein benutzerdefiniertes HTML-Tag. Ich habe das Tag mal „Scroll Tracking HTML“ genannt, bei den Benennungen bleibst du natürlich frei. Du sollst hier ja den Überblick über alles behalten 😉
Da es sich um ein HTML-Tag handelt, müssen wir dies in ein Script einbauen. An der Stelle #HIER DAS SCRIPT EINFÜGEN, fügst du das von GitHub kopierte Script ein.
Anschließend kannst du dich entscheiden, ob du das Tag bei allen oder nur bei ausgewählten Seiten abfeuern möchtest. Ratsam ist es, da hier JavaScript im Hintergrund läuft, dies nur bei den Seiten zu machen, die viel Content enthalten und somit sinnvoll sind. Du kannst natürlich einen URL-Pfad angeben, wenn beispielsweise viel Content unter einem Verzeichnis liegt.
Ist dies erledigt, speicherst du das Tag, gehst in den Vorschaumodus und öffnest in einem separaten Tab deine ausgewählte Landingpage. Dir sollte nun ein neues Event angezeigt werden, das ScrollDistance lautet.
Scrolle ein wenig auf der Seite runter, um zu sehen ob weitere Events gefeuert werden. Ist dies der Fall, wird in den Events ausgegeben wie tief gescrollt wurde (0 %, 25 %, 50 %, 75 % oder 100 %), aber auch, wie lange der Nutzer benötigt hat, um an die Stelle von beispielsweise 75 % zu gelangen. Die Seite wird in Millisekunden (ScrollTiming) ausgegeben. Aber um diese Informationen nun aus den Data Layern vom Google Tag Manager in Analytics zu bekommen, müssen wir Variablen erstellen, was wir im nächsten Schritt tun.
Schritt 2: Benutzerdefinierte Variablen für Makros erstellen
Erster Schritt erledigt, erstellen wir nun benutzerdefinierte Variablen für die 3 Makros der ScrollDistance (eventCategory, eventAction, eventLabel). Aus den vorgegebenen Typen wählen wir die „Datenschichtvariable“ aus und erstellen nun die 3 Variablen, wie es den folgenden Screenshots zu entnehmen ist:
Jedes Mal, wenn also ein User die Website scrollt, feuert das Script ein Event an den DataLayer.
Das ganze sollte jetzt anschließend im Vorschaumodus überprüft werden und wie im folgenden Screenshot aussehen:
Zur Erklärung: Die Variablen, die wir soeben erstellt haben, sprechen also die Makros an, die im Data Layer angesprochen werden. Diese sind nun verbunden und abschließend kann ein Google Analytics Tag erstellt werden, das auf diesen Tags basiert.
Schritt 3 (Final Step): Erstellen eines Google Analytics Tags
Unter Tags erstellen wir jetzt ein neues Google Analytics Tag und benennen es beispielsweise GA Event Scroll – ScrollDistance und wählen die Version von Analytics, die benutzt wird. Im Idealfall sollte natürlich Universal Analytics ausgewählt werden. Für denjenigen, der noch nicht auf Universal Analytics umgestellt hat, wird’s aber so langsam Zeit ;-). Eine prima Anleitung zur Umstellung auf Universal Analytics hat Eoghan in seinem Blogartikel gegeben.
Zurück zum Final Step: Ist der Tag-Typ ausgewählt, wird die Tracking-ID benötigt, die wir aus Google Analytics rauskopieren. Diese findet ihr im Konto unter Verwalten ->Property->Tracking-Informationen->Tracking-Code.
Den Erfassungstypen stellt ihr auf Ereignis um, da wir ja ein Event feuern möchten.
Anschließend müssen die Tracking-Parameter für Ereignisse mit den Variablen, die wir in Schritt 2 definiert haben, befüllt werden. Man könnte natürlich auch einen Wert hinterlegen, aber diesen lasse ich an dieser Stelle erstmal frei.
Als nächstes muss ein Trigger ausgewählt werden. Mit Klick auf „Mehr“ erstellen wir einen neuen Trigger und wählen ein „Benutzerdefiniertes Ereignis“ aus. Hier möchten wir natürlich das Event „ScrollDistance“ ansprechen und fügen es dementsprechend ein.
Das jetzt erstellte Google Analytics Event wird nun abgefeuert, wenn das Event ScrollDistance im Data Layer ausgelöst wird.
Um den Blogartikel nicht zu sprengen, habe ich lediglich die Variable für die ScrollDistance erstellt. Für das ScollTiming kann eine separate Variable erstellt werden, die sich aber ähnlich gestaltet.
Zum Testen gehen wir anschließend in den Vorschaumodus. Dort sehen wir nun, dass unser EventListener und ebenfalls das „GA Event Scroll – ScrollDistance“ abgefeuert wurden. Jetzt müssen wir die aktuelle Containerversion nur noch veröffentlichen.
Umstellungen der Scripte auf individuelle Daten
Wie man mit der Zeit merken wird, erhält man ganz schön viele Daten in den Ereignissen, von denen man nicht weiß, was man damit anfangen soll. Daher ist es ratsam das Script ein wenig zu editieren und zum Beispiel nur auf die prozentuale Scroll-Tiefe und den Zeitpunkt zwischen Laden der Seite und Scrollen zu begrenzen.
Ändert die Variable in Zeile 12 auf Folgendes, wenn ihr nur die oben genannten Daten von Google ausgegeben haben wollt.
Daten in Analytics anschauen
Möchte man nun die Daten in Analytics einsehen, kann man unter Verhalten -> Ereignisse -> Wichtigste Ereignisse als Ereigniskategorie “Scroll Depth“ und dann „Percentage” auswählen, um die Daten einzusehen.
Fazit
Das Implementieren des Scroll Tracking mit dem Google Tag Manager ist super einfach. Mit den Daten kann man Artikel auf einer Seite auswerten und hat eine recht gute Übersicht, ob der Inhalt der Seite vom User wahrgenommen wird und wie tief er durch die Seite scrollt. Somit lassen sich Schwachstellen des Contents überblicken und verbessern.
