So tracken Sie Scroll-Events in Shopify (2026)

Das Wichtigste in Kürze

• Scroll-Tracking feuert Analytics-Events, wenn Besucher 25 %, 50 %, 75 % und 100 % der Seitenlänge erreichen.
• Die einfachste Methode ist die Verwendung des integrierten Scrolltiefe-Triggers im Google Tag Manager.
• Für Shops ohne GTM erzielt benutzerdefiniertes JavaScript in der theme.liquid das gleiche Ergebnis.
• Scroll-Daten sind auf langen Produktseiten, Landingpages und in Blogbeiträgen am nützlichsten.

Das Tracking der Scrolltiefe verrät dir, ob deine Besucher deine Inhalte tatsächlich lesen oder abspringen, nachdem sie den ersten Bildschirmbereich gesehen haben. Auf langen Shopify-Produktseiten – mit Beschreibungen, Bewertungen, FAQs und Upsells – liefert dir das Wissen darüber, wie weit Käufer scrollen, bevor sie kaufen (oder die Seite verlassen), handlungsrelevante Daten.

Warum Scroll-Tracking für Shopify wichtig ist

Wenn 80 % der Besucher deiner Produktseite nie in den nicht sichtbaren Bereich scrollen, macht dein Above-the-Fold-Content die ganze Arbeit. Wenn nur 10 % deine Reviews sehen, könnte es die Conversion verbessern, wenn du sie weiter nach oben verschiebst. Die Scrolltiefe liefert dir Daten, um Layout-Entscheidungen mit gutem Gewissen zu treffen.

Das ist besonders nützlich, wenn:

Um Ergebnisse zu messen, siehe Landing Page in Shopify erstellen.

Um Ergebnisse zu messen, siehe Conversions in Shopify tracken.

• Du A/B-Testing für lange vs. kurze Produktbeschreibungen machst
• Du Upsell-Sektionen weit unten auf der Seite hast und wissen willst, ob sie überhaupt jemand sieht
• Du Landing-Page-Kampagnen laufen hast und das Engagement verstehen musst

Methode 1 — Google Tag Manager Scrolltiefe-Trigger (am einfachsten)

Wenn auf deinem Store GTM installiert ist, ist Scroll Depth Tracking als nativer Trigger-Typ integriert.

Schritt 1 - Öffne den Google Tag Manager → deinen Shopify-Container

Schritt 2 - Gehe zu Trigger → Neu → klicke auf Triggerkonfiguration

Schritt 3 - Wähle Scrolltiefe (Scroll Depth)

Schritt 4 - Konfiguriere den Trigger:

• Vertikale Scrolltiefen: Häkchen setzen, 25,50,75,100 (Prozentsätze) eingeben
• Aktivieren für: Alle Seiten (oder auf bestimmte Seitenpfade filtern)
• Klicke auf Speichern und benenne den Trigger (z. B. “Scroll Depth - All Pages”)

Schritt 5 - Erstelle einen GA4-Event-Tag, der bei diesem Trigger feuert:

• Tags → Neu → Google Analytics: GA4-Ereignis
• Ereignisname (Event Name): scroll (das entspricht der Benennung der optimierten Analyse in GA4)
• Ereignisparameter: Füge percent_scrolled hinzu → Wert: {{Scroll Depth Threshold}}
• Auslösende Trigger: Wähle deinen neuen Scroll-Depth-Trigger

Schritt 6 - Sende ab und veröffentliche deinen GTM-Container

Du siehst jetzt Scroll-Events in GA4 unter Ereignisse → scroll, wobei der Parameter percent_scrolled 25, 50, 75 oder 100 anzeigt.

Verwandt: Google Tag Manager zu Shopify hinzufügen.

Hinweis: Die optimierte Analyse (Enhanced Measurement) von GA4 enthält bereits ein einfaches Scroll-Tracking (feuert standardmäßig bei 90 % Scrolltiefe). Der GTM-Ansatz liefert dir mehr Datenpunkte (25 %, 50 %, 75 %) und funktioniert auf Seiten, die von der optimierten Analyse ausgeschlossen sind.

Methode 2 — Benutzerdefiniertes JavaScript in der theme.liquid

Für Stores ohne GTM können Sie das Scroll-Tracking direkt in die theme.liquid einfügen.

Um Ergebnisse zu messen, siehe Benutzerdefiniertes JavaScript in Shopify hinzufügen.

Schritt 1 – Duplizieren Sie Ihr Theme. Onlineshop → Themes → Drei-Punkte-Menü → Duplizieren.

Schritt 2 – Öffnen Sie theme.liquid im Code-Editor. Fügen Sie dies vor dem schließenden </body>-Tag ein:

<script>
(function() {
  var thresholds = [25, 50, 75, 100];
  var fired = {};

  function getScrollPercent() {
    var h = document.documentElement;
    var b = document.body;
    var st = 'scrollTop';
    var sh = 'scrollHeight';
    return Math.round(
      (h[st] || b[st]) /
      ((h[sh] || b[sh]) - h.clientHeight) * 100
    );
  }

  window.addEventListener('scroll', function() {
    var percent = getScrollPercent();
    thresholds.forEach(function(threshold) {
      if (percent >= threshold && !fired[threshold]) {
        fired[threshold] = true;
        // Send to GA4 (requires gtag.js)
        if (typeof gtag !== 'undefined') {
          gtag('event', 'scroll', {
            'percent_scrolled': threshold
          });
        }
        // Or send to dataLayer for GTM
        if (typeof dataLayer !== 'undefined') {
          dataLayer.push({
            'event': 'scroll_depth',
            'scroll_percent': threshold
          });
        }
      }
    });
  });
})();
</script>

Schritt 3 – Speichern und testen. Öffnen Sie Ihren Store, öffnen Sie die Chrome DevTools (F12) → Console. Scrollen Sie nach unten, und Sie sollten sehen, wie die Events ausgelöst werden.

Wie man Scrolling Text in Shopify erstellt?

Wenn Sie nach Lauftext (wie einem Marquee oder Ticker-Banner) suchen und nicht nach dem Tracking von Scroll-Events, ist das eine andere Funktion. Suchen Sie im Theme-Editor nach einem Bereich „Ankündigungsleiste“ oder „Marquee“ – einige Themes enthalten Sektionen für Lauftext. Wenn Ihr Theme keinen hat, kann Fudge ihn erstellen: „Add a scrolling marquee announcement bar showing our sale offers.“

Scroll-Daten in GA4 auswerten

Nachdem das Scroll-Tracking eingerichtet ist, findest du die Daten in GA4:

• Berichte → Engagement → Ereignisse — suche nach dem scroll-Event
• Klicke auf das Event, um die Aufschlüsselung nach dem Parameter percent_scrolled zu sehen
• Seiten vergleichen — nutze Explorative Datenanalyse → Freies Format, um die Scrolltiefe zwischen den Varianten deiner Produktseite zu vergleichen

Nützliche Fragen, die sich mit diesen Daten beantworten lassen:

• Wie viel Prozent der Besucher erreichen den “In den Warenkorb”-Button auf den Produktseiten?
• Scrollen Mobile-Nutzer genauso weit wie Desktop-Nutzer?
• Verbessert eine kürzere Produktbeschreibung die Scroll Completion (d. h. sehen mehr Leute den Kaufen-Button)?

Scroll-Tracking auf bestimmten Seitentypen

Du möchtest wahrscheinlich nicht für jede Seite Scroll-Daten erfassen – der Checkout und die Account-Seiten sind für die Content-Optimierung eher nutzlos. Filtere dein Tracking, um dich auf Folgendes zu konzentrieren:

• Produktseiten (/products/)
• Kategorieseiten (/collections/)
• Landingpages (/pages/)
• Blog-Posts (/blogs/)

Füge in GTM einen Seitenpfad-Filter zu deinem Scrolltiefe-Trigger hinzu. Beim Custom-JS-Ansatz fügst du ganz am Anfang des Skripts einen Pfad-Check ein.

FAQ