Scroll-Events in Shopify tracken: So geht's (2026)

Das Wichtigste in Kürze

• Das Scroll-Tracking feuert Analytics-Events (Ereignisse), wenn Besucher 25 %, 50 %, 75 % und 100 % der Seitenlänge erreichen.
• Die einfachste Methode ist der integrierte Scrolltiefe-Trigger (Scroll Depth) des Google Tag Managers.
• Für Shops ohne GTM erzielt benutzerdefiniertes JavaScript in der theme.liquid das gleiche Ergebnis.
• Scroll-Daten sind besonders nützlich auf langen Produktseiten, Landingpages und bei Blogbeiträgen.

Um Scroll-Events in Shopify zu tracken, fügst du im Google Tag Manager einen Trigger für die Scrolltiefe bei 25, 50, 75 und 100 % hinzu und sendest ihn als scroll-Event an GA4. Alternativ kannst du ein kurzes Skript in die theme.liquid einfügen, falls du GTM nicht nutzt. Auf langen Shopify-Produktseiten – mit Beschreibungen, Bewertungen, FAQs und Upsells – ist es sehr aufschlussreich zu wissen, wie weit Käufer scrollen, bevor sie kaufen (oder die Seite verlassen).

Warum Scroll-Tracking für Shopify wichtig ist

Wenn 80 % der Besucher deiner Produktseite nie weiter als den direkt sichtbaren Bereich (Above the Fold) scrollen, macht dieser Content die ganze Arbeit. Wenn nur 10 % deine Bewertungen sehen, könnte es die Conversion-Rate verbessern, wenn du sie weiter nach oben verschiebst. Die Scrolltiefe liefert dir Daten, um Layout-Entscheidungen mit Sicherheit zu treffen.

Das ist besonders nützlich, wenn:

• Du lange vs. kurze Produktbeschreibungen im A/B-Test vergleichst
• Du Upsell-Bereiche weit unten auf der Seite hast und wissen willst, ob sie überhaupt jemand sieht
• Du Landingpage-Kampagnen durchführst und das Engagement verstehen musst

Für die Käufe, die hinter diesen Besuchen stecken, schau dir So trackst du Conversions in Shopify an.

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

Wenn in deinem Shop GTM installiert ist, ist das Scrolltiefen-Tracking als nativer Trigger-Typ bereits 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 Scrolltiefe: Setze das Häkchen und gib 25,50,75,100 ein (Prozentwerte)
• Auslösen bei: Alle Seiten (oder filtere nach bestimmten Seitenpfaden)
• Klicke auf Speichern und benenne den Trigger (z. B. “Scrolltiefe - Alle Seiten”)

Schritt 5 - Erstelle ein GA4-Ereignis-Tag, das bei diesem Trigger feuert:

• Tags → Neu → Google Analytics: GA4-Ereignis
• Ereignisname: scroll (das entspricht der GA4-Benennung für optimierte Analysen)
• Ereignisparameter: füge percent_scrolled hinzu → Wert: {{Scroll Depth Threshold}}
• Trigger: wähle deinen neuen Scrolltiefe-Trigger

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

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

Hinweis: Die optimierten Analysen (Enhanced Measurement) von GA4 beinhalten bereits ein einfaches Scroll-Tracking (feuert standardmäßig bei 90 % Scrolltiefe). Der GTM-Ansatz liefert dir mehr Datenpunkte (25 %, 50 %, 75 %) und funktioniert auch auf Seiten, die von den optimierten Analysen ausgeschlossen sind. Schalte die Scroll-Option der optimierten Analysen aus, um ein doppeltes 90-%-Event unter demselben scroll-Namen zu vermeiden.

Wenn GTM noch nicht installiert ist, schau dir So fügst du den Google Tag Manager zu Shopify hinzu an.

Methode 2 — Custom JavaScript in der theme.liquid

Für Shops ohne GTM kannst du das Scroll-Tracking direkt zur theme.liquid hinzufügen.

Schritt 1 - Dupliziere dein Theme. Onlineshop → Themes → Drei-Punkte-Menü → Duplizieren.

Schritt 2 - Öffne die theme.liquid im Code-Editor. Füge 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. Öffne deinen Shop, während die GA4 DebugView geöffnet ist (Verwaltung → DebugView), scrolle nach unten und bestätige, dass bei jedem Schwellenwert ein scroll-Event ankommt.

Wie bei der GTM-Methode solltest du die Scroll-Option der optimierten Analysen deaktivieren, um ein doppeltes 90-%-Event zu vermeiden. Die typeof gtag-Prüfung bedeutet auch, dass nichts gesendet wird, wenn GA4 über die Google & YouTube-App von Shopify läuft. Diese App lädt GA4 nämlich in einem Sandbox-Webpixel, in dem gtag für Theme-Skripte nicht verfügbar ist. Nutze in diesem Fall den dataLayer-Weg mit GTM oder leite das Event von einem benutzerdefinierten Pixel weiter.

Mehr zum Hinzufügen von Skripten zu einem Theme findest du unter So fügst du benutzerdefiniertes JavaScript in Shopify hinzu.

Wie bekomme ich scrollenden Text in Shopify?

Wenn du nach durchlaufendem Text (wie einem Marquee- oder Ticker-Banner) anstelle von Scroll-Event-Tracking suchst, ist das eine andere Funktion. Suche im Theme-Editor nach einem Abschnitt “Ankündigungsleiste” (Announcement bar) oder “Marquee” – einige Themes enthalten solche laufenden Text-Abschnitte. Wenn dein Theme das nicht hat, kann Fudge, der KI-Operator für Shopify-Shops, es als Abschnitt in deinem Theme erstellen, den du als Entwurf bestätigen kannst: “Füge eine durchlaufende Marquee-Ankündigungsleiste hinzu, die unsere Sale-Angebote zeigt.”

Scroll-Daten in GA4 lesen

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“ (Explore) → „Freiform“ (Free Form), um die Scroll-Tiefe zwischen deinen Produktseiten-Varianten zu vergleichen

Nützliche Fragen, die du mit diesen Daten beantworten kannst:

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

Scroll-Tracking auf bestimmten Seitentypen

Vielleicht möchtest du nicht für jede Seite Scroll-Daten erheben – die Checkout- und Konto-Seiten bringen dir für die Content-Optimierung wenig. Filtere dein Tracking, um dich zu fokussieren auf:

• Produktseiten (/products/)
• Kategorie-Seiten (/collections/)
• Landingpages (/pages/)
• Blogbeiträge (/blogs/)

Füge in GTM deinem Scroll-Depth-Trigger einen Seitenpfad-Filter hinzu. Beim Custom-JS-Ansatz baust du einfach zu Beginn des Scripts eine Pfadprüfung ein.

FAQ