So tracken Sie Scroll-Events in Shopify (2026)

Wichtige Erkenntnisse

• Scroll-Tracking löst Analytics-Events aus, wenn Besucher 25 %, 50 %, 75 % und 100 % einer Seite 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 am nützlichsten auf langen Produktseiten, Landingpages und Blog-Posts.

Das Tracking der Scrolltiefe zeigt Ihnen, ob Besucher Ihre Inhalte tatsächlich lesen oder abspringen, nachdem sie nur den ersten Screen gesehen haben. Auf langen Shopify-Produktseiten – mit Beschreibungen, Bewertungen, FAQs und Upsells – ist das Wissen darüber, wie weit Shopper scrollen, bevor sie kaufen (oder gehen), ein wertvoller Datenpunkt.

Warum Scroll-Tracking für Shopify wichtig ist

Wenn 80 % der Besucher Ihrer Produktseite niemals über den „Fold“ (den sichtbaren Bereich ohne Scrollen) hinausscrollen, leistet Ihr Content Above-the-Fold die gesamte Arbeit. Wenn nur 10 % Ihren Bewertungsbereich sehen, könnte eine Platzierung weiter oben die Conversion verbessern. Die Scrolltiefe liefert Ihnen Daten, um Layout-Entscheidungen mit Vertrauen zu treffen.

Es ist besonders nützlich, wenn:

• Sie A/B-Tests für lange vs. kurze Produktbeschreibungen durchführen
• Sie Upsell-Bereiche weit unten auf der Seite haben und wissen wollen, ob sie überhaupt jemand sieht
• Sie Landingpage-Kampagnen schalten und das Engagement verstehen müssen

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

Wenn in Ihrem Shop der GTM installiert ist, ist das Tracking der Scrolltiefe als nativer Triggertyp bereits eingebaut.

Schritt 1 - Öffnen Sie den Google Tag Manager → Ihren Shopify-Container

Schritt 2 - Gehen Sie zu Trigger → Neu → klicken Sie auf Trigger-Konfiguration

Schritt 3 - Wählen Sie Scrolltiefe aus

Schritt 4 - Konfigurieren Sie den Trigger:

• Vertikale Scrolltiefen: Häkchen setzen, 25,50,75,100 eingeben (Prozentwerte)
• Aktivieren bei: Alle Seiten (oder auf bestimmte Pfade filtern)
• Klicken Sie auf Speichern und benennen Sie den Trigger (z. B. „Scrolltiefe - Alle Seiten“)

Schritt 5 - Erstellen Sie ein GA4-Event-Tag, das bei diesem Trigger ausgelöst wird:

• Tags → Neu → Google Analytics: GA4-Ereignis
• Ereignisname: scroll (dies entspricht der Benennung der optimierten Analysen von GA4)
• Ereignisparameter: percent_scrolled hinzufügen → Wert: {{Scroll Depth Threshold}}
• Auslösende Trigger: Wählen Sie Ihren neuen Scrolltiefe-Trigger aus

Schritt 6 - Senden und veröffentlichen Sie Ihren GTM-Container

Sie sehen nun Scroll-Events in GA4 unter Ereignisse → scroll, wobei der Parameter percent_scrolled 25, 50, 75 oder 100 anzeigt.

Hinweis: Die „Optimierten Analysen“ von GA4 enthalten bereits ein grundlegendes Scroll-Tracking (wird standardmäßig bei 90 % Scrolltiefe ausgelöst). Der GTM-Ansatz liefert Ihnen mehr Datenpunkte (25 %, 50 %, 75 %) und funktioniert auf Seiten, die von den optimierten Analysen ausgeschlossen sind.

Methode 2 — Benutzerdefiniertes JavaScript in der theme.liquid

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

Schritt 1 - Duplizieren Sie Ihr Theme. Online-Shop → 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;
        // An GA4 senden (erfordert gtag.js)
        if (typeof gtag !== 'undefined') {
          gtag('event', 'scroll', {
            'percent_scrolled': threshold
          });
        }
        // Oder an den dataLayer für GTM senden
        if (typeof dataLayer !== 'undefined') {
          dataLayer.push({
            'event': 'scroll_depth',
            'scroll_percent': threshold
          });
        }
      }
    });
  });
})();
</script>

Schritt 3 - Speichern und testen. Öffnen Sie Ihren Shop, ö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

Sobald das Scroll-Tracking eingerichtet ist, finden Sie die Daten in GA4:

• Berichte → Engagement → Ereignisse – suchen Sie nach dem scroll-Ereignis
• Klicken Sie auf das Ereignis, um die Aufschlüsselung nach dem Parameter percent_scrolled zu sehen
• Seiten vergleichen – verwenden Sie Explorative Datenanalyse → Freiform, um die Scrolltiefe zwischen verschiedenen Varianten Ihrer Produktseite zu vergleichen

Nützliche Fragen, die Sie mit diesen Daten beantworten können:

• Welcher Prozentsatz der Besucher erreicht den „In den Warenkorb“-Button auf Produktseiten?
• Scrollen mobile Nutzer genauso weit wie Desktop-Nutzer?
• Verbessert eine kürzere Produktbeschreibung den Scroll-Abschluss (d. h. sehen mehr Leute den Kauf-Button)?

Scroll-Tracking auf bestimmten Seitentypen

Vielleicht möchten Sie keine Scroll-Daten für jede Seite – Checkout- und Kontoseiten sind für die Content-Optimierung nicht nützlich. Filtern Sie Ihr Tracking, um sich auf Folgendes zu konzentrieren:

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

Fügen Sie im GTM einen Seitenpfad-Filter zu Ihrem Scrolltiefe-Trigger hinzu. Bei der benutzerdefinierten JS-Methode fügen Sie am Anfang des Skripts eine Pfadprüfung hinzu.