Google Tag Manager Tutorial: Scroll Tracking in 5 Schritten

Scroll Tracking für Google Tag Manager

|

30. January 2017

 | 

Gerade wenn Sie einen Blog oder eine One-Page-Webseite betreiben, ist es interessant zu wissen, welche Inhalte gelesen werden. Scroll Tracking zeigt Ihnen genau das an: Sie sehen, wie weit nach unten die Besucher scrollen und damit, welche Inhalte interessant sind und am meisten gelesen werden.

In diesem Tutorial zeigen wir Ihnen Schritt für Schritt wie Sie Scroll Tracking für Google Analytics mit dem Google Tag Manager implementieren.

Wir zeigen Ihnen, wie Sie den Tracking Code implementieren, die dazugehörenden Google Analytics Events aufsetzen und wie Sie sehen, wer 0%, 25%, 50%, 75% oder 100% Ihrer Seite gelesen hat.

Zudem haben wir einen benutzerdefinierten Google-Analytics-Report aufgesetzt, den Sie für das Scroll Tracking einsetzen können.

Schritt 1: Scroll Code

Erstellen Sie in Ihrem GTM Container einen Custom HTML Tag und fügen Sie dieses Scroll Tracking Skript hinzu. (Von Rob Flaherty, parsnip.io)

Scroll Tracking HTML tag

Schritt 2: Code Trigger

Als nächstes erstellen wir einen Trigger, so dass dieser Code auf jeder gewünschten Seite läuft. Damit der Code aktiv ist, wenn die Seite geladen wird, nutzen wir einen Pageview - DOM Ready Trigger. Wenn Sie das Scroll Tracking auf jeder Seite implementieren möchten, nutzen Sie einen All DOM Ready Events Trigger.

In unserem Beispiel werden wir den Tracking Code nur auf den Blog-Seiten implementieren.

  • Wählen Sie deshalb Some DOM Ready Events aus.
  • Im ersten Dropdown wählen Sie Page Path und im zweiten matches RegEx.
  • In die Text-Box schreiben Sie folgenden regulären Ausdruck: (.*)\/blog\/(.*)
  • In unserem Beispiel möchten wir nur Seiten auswählen, die /blog/ enthalten. Falls Sie andere Seiten auswählen möchten, passen Sie den regulären Ausdruck entsprechend an. 

Scroll Tag Trigger

Schritt 3: Aufsetzen der Variablen

Der Scroll Tracking Tag spielt einen Event auf den Data Layer aus. Dieser Event enthält die Werte für Kategorie, Action und Label des Google Analytics Events, für die Sie Variablen aufsetzen müssen.

  • In der Variablen-Sektion im GTM erstellen Sie eine User-Defined Variable, die Sie "Scroll Event Category" nennen.
  • Wählen Sie dann den Variablentyp Data Layer Variable unter Data Layer Variable Name und geben Sie "eventCategory" in der Textbox ein. 

Scroll Tracking Event Variable

Das müssen Sie noch zweimal wiederholen:

  • Fügen Sie die zweite Variable "Scroll Event Action" hinzu und geben Sie als Data Layer Variable Name "eventAction" ein.
  • Geben Sie die dritte Variable "Scroll Event Label" ein mit dem Data Layer Variable Name "eventLabel".

Schritt 4: Hinzufügen des Scroll Tracking Events

Nun müssen die Scroll-Tracking-Informationen noch in Google Analytics überführt werden, indem Sie einen Scroll Tracking Google Analytics Event hinzufügen.

  • Erstellen Sie einen neuen GTM Tag names "Scroll Tracking Event" und wählen Sie "Universal Analytics" unter Tag Type.
  • Fügen Sie Ihre Universal Analytics ID hinzu und ändern Sie den Track Type auf "Event".
  • Nun setzen Sie die Event Kategorie, Event Action und Event Label aufgrund der Variablen, die wir erstellt haben. Klicken Sie dazu auf den Button rechts neben jeder Textbox und wählen Sie für Category "Scroll Event Category" und die jeweiligen Entsprechungen für die anderen beiden Variablen. 

Scroll Tracking Event Tag

Schritt 5: Fügen Sie den Event Trigger hinzu

Im letzten Schritt setzen wir den Trigger für den Google Analytics Event auf.

  • Unter Triggering fügen Sie einen neuen Trigger des Typs Custom Event auf.
  • Geben Sie als Event name "ScrollDistance" ein.
  • Speichern Sie den Trigger und den Tag.

Scroll Tracking Event Trigger

Gratulation, das Scroll Tracking ist jetzt aufgesetzt. Sobald sie den Container publizieren, sehen Sie, wie weit Ihre Besucher auf Ihrere Seite scrollen. 

Daten-Visualisierung

Wir haben einen benutzerdefinierten Report für Google Analytics erstellt, mit dem Sie sich die Scroll-Daten anschauen können. Fügen Sie dazu diesen Google Analytics Report in der gewünschten Google Analytics View hinzu.

Wenn der Report in der ausgewählten View geladen hat:

  • Klicken Sie auf Edit.
  • Ändern Sie den page filter, so dass er dem regulären Ausdruck entspricht, den Sie in Schritt 2 eingegeben haben.
  • Klicken Sie auf "Save".

Scroll Tacking Custom Report

Im Report sehen Sie alle Seiten, auf denen das Scroll-Tracking aktiviert ist.

Sie können auf die Seiten klicken und sehen dann, wie viele Sessions 0%, 25%, 50%, 75% oder 100% der Seite angesehen haben.

Falls Sie Fragen zum Scroll Tracking haben, senden Sie mir gerne eine E-Mail. Weitere Google Tag Manager Tutorials finden Sie in unserem Blog.

Kommentare
Chris Bailey's picture

Hallo Georg,

dafür müssen Sie ein Zielvorhaben in Analytics einrichten, welches den Scroll Event verwendet. Und wie folgt aussieht:

Sehr schön, vielen Dank. Funktioniert wunderbar. Ich möchte gerne ein Zielvorhaben im Google Analytics anlegen, das auf 75% Scrolling geht. Habe nur eine Seite mit Scroll Tracking angelegt.

Wie würde ich das umsetzen?

Chris Bailey's picture
Hallo Tim und Phillip,
 
es scheint, also ob der Event Trigger für den GA Scroll Event nicht richtig ausgelöst hat. Das wurde in Schritt 5 erklärt. Stellen Sie sicher, dass der Event Name in dem Custom Event "ScrollDistance" heißt. Denn sonst wird der Event nicht in Google Analytics übertragen.
Sollte das Problem nicht gelöst sein, schicken Sie mir bitte eine Email mit der Webseiten URL, Dann schaue ich mir das Problem gerne an
 
Herzliche Grüße
Chris

Hallo Jonathan,

vielen Dank für deine Anleitung.
Bei mir tritt das gleiche Problem wie bei dne anderen Kommentatoren auf. Im Debugger vom GTM werden alle Trigger ausgelöst. Sobald ich allerdings veröffentliche registriert auch der „Google Tag Assistent“ nur bei einem Recording nur die 0 %. Auch in GA taucht nicht mehr auf. An der jQuery-Version kann es nicht liegen. Da sind wir weiter als die 3.

Ich hoffe du kannst uns helfen.
Viele Grüße
Philipp

Eine sehr tolle Anleitung, vielen Dank dafür!

Leider wird das Event nicht an Google Analytics übergeben, ich verstehe aber auch nicht so recht wieso.

Im Datenlayer wird alles korrekt angezeigt, die Variablen richtig befüllt und der Scrollstatus aktualisiert sich.
Dennoch wird das Event in Analytics nicht erkannt, also fast so als würde das Event nicht übergeben.

Hallo Laura und Florian,
 
das könnte dann vorkommen, wenn das jQuery auf der Webseite zu alt ist. Für das Scroll-Tracking Script wird eine jQuery Version von 1.7 oder höher benötigt.
Um rauszufinden, welche jQuery Version verwendet wird, einfach jQuery().jquery in der Google Developer Console oder im Firefox Web Console eingeben.
 
Ich hoffe, ich konnte Ihnen weiterhelfen. Sollten Sie noch weitere Fragen haben, freuen wir uns jederzeit von Ihnen zuhoeren.
Herzliche Grüße,
Jonathan

Hallo Jonathan,

vielen Dank für deine Ausführungen. Sie sind sehr hilfreich. Ich habe die Anleitung eigentlich eins zu eins umgesetzt. Ich habe aber das Problem, dass es nicht einwandfrei funktioniert. Ich bin mir nicht sicher, ob es das gleiche Problem wie bei Laura ist.

Die Tags lösen aus allerdings nur bei 0%. Wenn ich weiter runterscrolle feueren keine weiteren Tags mehr. Woran kann das liegen? Kannst Du mir bitte weiterhelfen.

Merci und mit besten Grüßen
Florian

Hallo Jonathan,

vielen Dank für die Anleitung.
Leider funktioniert es bei mir nicht. Ich habe deine Vorgaben Schritt für Schritt befolgt. Woran kann es liegen, wenn es nicht funktioniert?
Also der erste Tag "Scroll Tracking" funktioniert einwandfrei, das sehe ich auch in der gtm Vorschau. Nur die Überführung in GA im zweiten Schritt klappt nicht.

Kannst du mir weiterhelfen?

Danke und Grüße
Laura

Kommentar hinzufügen