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

Points clés à retenir

• Le suivi du défilement (scroll tracking) déclenche des événements analytiques lorsque 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 de profondeur de défilement (Scroll Depth) intégré à Google Tag Manager.
• Pour les boutiques sans GTM, l’ajout de JavaScript personnalisé dans theme.liquid donne le même résultat.
• Les données de scroll sont particulièrement utiles sur les longues pages produits, les landing pages et les articles de blog.

Le suivi de la profondeur de défilement vous indique si les visiteurs lisent réellement votre contenu ou s’ils quittent la page (bounce) après avoir vu le premier écran. Sur les longues pages produits Shopify — avec leurs descriptions, leurs avis, leur FAQ et leurs ventes incitatives (upsells) — savoir jusqu’où les acheteurs descendent avant d’acheter (ou de partir) constitue une donnée exploitable.

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, c’est votre contenu “above the fold” qui 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 d’agencement en toute confiance.

C’est particulièrement utile quand :

Pour mesurer les résultats, voir créer une landing page sur shopify.

Pour mesurer les résultats, voir suivre les conversions sur shopify.

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

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

Si GTM est installé sur votre boutique, le suivi du scroll est intégré comme un type de déclencheur natif.

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

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

Étape 3 - Sélectionnez Profondeur de défilement (Scroll Depth)

Étape 4 - Configurez le déclencheur :

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

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

• Balises → Nouvelle → Google Analytics : Événement GA4
• Nom de l’événement : scroll (ceci correspond au nom de la mesure améliorée de GA4)
• Paramètres de l’événement : ajoutez percent_scrolled → valeur : {{Scroll Depth Threshold}}
• Déclenchement : sélectionnez votre nouveau déclencheur Scroll Depth

Étape 6 - Envoyez et publiez votre conteneur GTM

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

Article connexe : Ajouter Google Tag Manager à Shopify.

Note : Les mesures améliorées (Enhanced Measurement) de GA4 incluent déjà le suivi du scroll par défaut (à 90 %). L’approche de GTM vous donne plus de données (25 %, 50 %, 75 %) et fonctionne sur les pages exclues des mesures améliorées.

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

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

Pour mesurer les résultats, voir ajouter du javascript personnalisé sur shopify.

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

Étape 2 - Ouvrez theme.liquid dans l’éditeur de code. Ajoutez ceci juste avant la balise de fermeture </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;
        // Envoi vers GA4 (nécessite gtag.js)
        if (typeof gtag !== 'undefined') {
          gtag('event', 'scroll', {
            'percent_scrolled': threshold
          });
        }
        // Ou envoi vers le dataLayer pour GTM
        if (typeof dataLayer !== 'undefined') {
          dataLayer.push({
            'event': 'scroll_depth',
            'scroll_percent': threshold
          });
        }
      }
    });
  });
})();
</script>

Étape 3 - Enregistrez et testez. Ouvrez votre boutique, puis les Chrome DevTools (F12) → onglet Console. Scrollez vers le bas et vous devriez voir les événements se déclencher.

Comment avoir du texte défilant sur Shopify ?

Si vous cherchez à ajouter du texte défilant (comme un bandeau marquee) plutôt qu’à suivre des événements de scroll, il s’agit d’une autre fonctionnalité. Dans l’éditeur de thème, cherchez une section “Barre d’annonces” ou “Marquee” — certains thèmes proposent des blocs de texte défilant natifs. Si votre thème n’en propose pas, Fudge peut le créer pour vous : “Ajoute une barre d’annonce défilante (marquee) affichant nos promos.”

Analyser les données de scroll dans GA4

Une fois le scroll tracking configuré, retrouvez les données dans GA4 :

• Rapports → Engagement → Événements — cherchez l’événement scroll
• Cliquez sur l’événement pour voir le détail par paramètre percent_scrolled
• Comparez vos pages — utilisez Explorer → Format libre pour comparer la profondeur de scroll entre les différentes variantes de vos pages produits

Exemples de questions auxquelles ces données peuvent répondre :

• Quel pourcentage de visiteurs atteint le bouton “Ajouter au panier” sur mes pages produits ?
• Les utilisateurs sur mobile scrollent-ils aussi bas que ceux sur ordinateur ?
• Une description plus courte de mon produit augmente-t-elle la fin de lecture du scroll (donc plus de personnes 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