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 Ihrer Produktseite nie über den ersten sichtbaren Bereich (Above-the-Fold) hinaus scrollen, leistet dieser Bereich die gesamte Arbeit. Wenn nur 10 % Ihren Review-Bereich sehen, könnte eine Verschiebung nach oben die Conversion verbessern. Die Scrolltiefe liefert Ihnen Daten, um Layout-Entscheidungen mit Zuversicht 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.

• 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 gesehen werden
• Sie Landing-Page-Kampagnen schalten und das User Engagement verstehen müssen

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

Wenn in Ihrem Store der GTM installiert ist, ist das Scroll-Tracking als nativer Trigger-Typ integriert.

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

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

Schritt 3 – Wählen Sie Scrolltiefe

Schritt 4 – Konfigurieren Sie den Trigger:

• Vertikale Scrolltiefen: Häkchen setzen, 25,50,75,100 eingeben (Prozentwerte)
• Aktivieren auf: 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 (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 Scrolltiefen-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.

Passend dazu: Google Tag Manager zu Shopify hinzufügen.

Hinweis: Die „Optimierten Analysen“ von GA4 enthalten bereits ein Basis-Scroll-Tracking (wird standardmäßig bei 90 % Scrollen ausgelöst). Der GTM-Ansatz liefert Ihnen mehr Datenpunkte (25 %, 50 %, 75 %) und funktioniert auch auf Seiten, die von den optimierten Analysen 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

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

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