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, 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 :

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 sur des descriptions de produits longues vs courtes
• Vous avez des sections d’upsell tout en bas de la page et vous voulez savoir si quelqu’un les voit
• Vous menez des campagnes vers 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 de la profondeur de scroll est intégré nativement comme type de déclencheur.

É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 sur : Toutes les pages (ou filtrez sur des chemins de page spécifiques)
• Cliquez sur Enregistrer et nommez le déclencheur (par ex., “Profondeur de scroll - Toutes les pages”)

Étape 5 - Créez une balise d’événement GA4 pour qu’elle se déclenche 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éclencheurs : sélectionnez votre nouveau déclencheur de profondeur de défilement

Étape 6 - Soumettez 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 lié : Ajouter Google Tag Manager à Shopify.

Remarque : Les mesures améliorées (Enhanced Measurement) de GA4 incluent déjà un suivi de scroll de base (se déclenche à 90 % par défaut). L’approche avec GTM vous donne plus de points 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 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