Comment suivre les événements de scroll sur Shopify (2026)

Points clés

• Le suivi du scroll déclenche des événements analytiques quand les visiteurs atteignent 25 %, 50 %, 75 % et 100 % de la longueur d’une page.
• La méthode la plus simple consiste à utiliser le déclencheur Profondeur de défilement (Scroll Depth) intégré à Google Tag Manager.
• Pour les boutiques sans GTM, du JavaScript personnalisé dans theme.liquid permet d’obtenir le même résultat.
• Les données de scroll sont particulièrement utiles sur les pages produits longues, les landing pages et les articles de blog.

Pour suivre les événements de scroll dans Shopify, ajoutez un déclencheur Profondeur de défilement Google Tag Manager à 25, 50, 75 et 100 % et envoyez-le à GA4 en tant qu’événement scroll, ou collez un court script dans theme.liquid si vous n’utilisez pas GTM. Sur les pages produits Shopify longues, avec des descriptions, des avis, des FAQ et des upsells — savoir jusqu’où les acheteurs font défiler la page avant d’acheter (ou de partir) constitue des données exploitables.

Pourquoi le suivi du scroll est important sur Shopify

Si 80 % des visiteurs de votre page produit ne scrollent jamais sous la ligne de flottaison, votre contenu au-dessus de la ligne de flottaison fait tout le travail. Si seulement 10 % voient votre section d’avis, la remonter pourrait améliorer la conversion. La profondeur de scroll vous donne des données pour prendre des décisions de mise en page en toute confiance.

C’est particulièrement utile quand :

• Vous faites de l’A/B testing sur des descriptions de produits longues vs courtes
• Vous avez des sections d’upsell très bas sur la page et voulez savoir si quelqu’un les voit
• Vous lancez des campagnes de landing pages et avez besoin de comprendre l’engagement

Pour les achats qui se cachent derrière ces visites, consultez Comment suivre les conversions sur Shopify.

Méthode 1 — Le déclencheur Scroll Depth de Google Tag Manager (la plus simple)

Si GTM est installé sur votre boutique, le suivi de la profondeur de scroll y est intégré en tant que type de déclencheur natif.

Étape 1 - Ouvrez Google Tag Manager → votre conteneur Shopify

Étape 2 - Allez dans Déclencheurs → Nouveau → cliquez sur Configuration du déclencheur

Étape 3 - Sélectionnez Profondeur de défilement

Étape 4 - Configurez le déclencheur :

• Profondeurs de défilement vertical : cochez la case, entrez 25,50,75,100 (pourcentages)
• Activer pour : Toutes les pages (ou filtrez pour des chemins de page spécifiques)
• Cliquez sur Enregistrer et nommez le déclencheur (ex : “Profondeur de scroll - Toutes les pages”)

Étape 5 - Créez une balise Événement GA4 qui se déclenchera avec ce déclencheur :

• Balises → Nouvelle → Google Analytics : Événement GA4
• Nom de l’événement : scroll (cela correspond à la nomenclature des mesures améliorées de GA4)
• Paramètres d’événement : ajoutez percent_scrolled → valeur : {{Scroll Depth Threshold}}
• Déclenchement : sélectionnez votre nouveau déclencheur Profondeur de défilement

Étape 6 - Envoyez et publiez votre conteneur GTM

Vous verrez maintenant des événements de scroll dans GA4 sous Événements → scroll, avec le paramètre percent_scrolled indiquant 25, 50, 75 ou 100.

Note : Les Mesures améliorées de GA4 incluent déjà un suivi basique du scroll (qui se déclenche par défaut à 90 % de défilement). L’approche de GTM vous donne plus de points de données (25 %, 50 %, 75 %) et fonctionne sur les pages exclues des Mesures améliorées. Désactivez l’option de scroll des Mesures améliorées pour éviter de créer un événement à 90 % en double sous le même nom scroll.

Si GTM n’est pas encore installé, consultez Comment ajouter Google Tag Manager à Shopify.

Méthode 2 — JavaScript personnalisé dans theme.liquid

Pour les boutiques sans GTM, ajoutez le suivi du scroll directement dans theme.liquid.

Étape 1 - Dupliquez votre thème. Boutique en ligne → Thèmes → menu aux trois points → Dupliquer.

Étape 2 - Ouvrez theme.liquid dans l’éditeur de code. Ajoutez ceci juste avant la balise fermante </body> :

<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
                    // Envoyer à GA4 (nécessite gtag.js)
                    if (typeof gtag !== 'undefined') {
                        gtag('event', 'scroll', {
                            percent_scrolled: threshold,
                        })
                    }
                    // Ou envoyer au dataLayer pour GTM
                    if (typeof dataLayer !== 'undefined') {
                        dataLayer.push({
                            event: 'scroll_depth',
                            scroll_percent: threshold,
                        })
                    }
                }
            })
        })
    })()
</script>

Étape 3 - Enregistrez et testez. Ouvrez votre boutique en gardant la DebugView de GA4 ouverte (Administration → DebugView), faites défiler la page vers le bas, et confirmez qu’un événement scroll arrive à chaque palier.

Comme pour la méthode GTM, désactivez l’option de scroll des Mesures améliorées pour éviter d’avoir un événement à 90 % en double. La vérification typeof gtag signifie également que rien n’est envoyé si GA4 passe par l’application Google & YouTube de Shopify, car cette application charge GA4 dans un pixel web sandboxé où gtag n’est pas disponible pour les scripts du thème. Dans ce cas, utilisez la méthode du dataLayer avec GTM ou transférez l’événement depuis un pixel personnalisé.

Pour en savoir plus sur l’ajout de scripts à un thème, consultez Comment ajouter du JavaScript personnalisé sur Shopify.

Comment avoir du texte défilant sur Shopify ?

Si vous cherchez plutôt à avoir du texte défilant (comme une bannière marquee ou un bandeau défilant) au lieu de suivre les événements de scroll, c’est une toute autre fonctionnalité. Dans l’Éditeur de thème, cherchez une section “Barre d’annonces” (Announcement bar) ou “Marquee” — certains thèmes incluent des sections de texte défilant. Si votre thème n’en possède pas, Fudge, l’opérateur IA pour les boutiques Shopify, peut le créer sous forme de section dans votre thème, en tant que brouillon que vous validez : “Ajoute une barre d’annonces déroulante de type marquee montrant nos offres promotionnelles.”

Analyser les données de scroll dans GA4

Une fois le suivi de scroll configuré, trouvez les données dans GA4 :

• Rapports → Engagement → Événements — cherchez l’événement scroll
• Cliquez sur l’événement pour voir la répartition par paramètre percent_scrolled
• Comparez les pages — utilisez Explorer → Format libre (Free Form) pour comparer la profondeur de scroll entre les variantes de votre page produit

Questions utiles auxquelles répondre avec ces données :

• Quel pourcentage de visiteurs atteint le bouton “Ajouter au panier” sur les pages produits ?
• Les utilisateurs mobiles scrollent-ils aussi loin que sur ordinateur ?
• Une description produit plus courte améliore-t-elle l’achèvement du scroll (c.-à-d. plus de gens voient le bouton d’achat) ?

Le suivi du scroll sur certains types de pages

Vous ne voudrez peut-être pas des données de scroll pour chaque page — les pages de paiement et de compte ne sont pas utiles pour l’optimisation du contenu. Filtrez votre suivi pour vous concentrer sur :

• Les pages produits (/products/)
• Les pages de collection (/collections/)
• Les pages de destination (/pages/)
• Les articles de blog (/blogs/)

Dans GTM, ajoutez un filtre de chemin de page à votre déclencheur de profondeur de défilement (Scroll Depth). Dans l’approche JS personnalisé, ajoutez une vérification du chemin au début du script.

FAQ