Ce qu’il faut retenir
- Le suivi du scroll (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 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 surtout utiles sur les pages produits longues, les landing pages et les articles de blog.
Le suivi de la profondeur de scroll vous indique si les visiteurs lisent réellement votre contenu ou s’ils quittent la page après avoir vu le premier écran. Sur les longues pages de produits Shopify — avec des descriptions, des avis, des FAQ et de l’upsell — savoir jusqu’où les acheteurs scrollent avant d’acheter (ou de partir) est une donnée très 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
Quel est un bon taux de scroll pour une page produit Shopify ?
Cela varie selon la catégorie et la longueur de la page. À titre de repère : 60 à 80 % atteignent 25 %, 30 à 50 % atteignent 50 %, 15 à 30 % atteignent 75 %, et 5 à 15 % atteignent 100 %. La baisse est plus rapide sur mobile que sur ordinateur. L’information exploitable : où se produit votre point de décrochage, et quel contenu se trouve en dessous de ce point ?
Dois-je suivre la profondeur de scroll sur toutes les pages Shopify ?
Non — les pages de paiement, le panier et les pages de compte ne tirent pas profit des données de scroll. Filtrez pour ne garder que les pages où la profondeur de scroll est utile à la prise de décision : les longues pages produits, les pages de destination, les articles de blog, les pages FAQ. Sur la page d’accueil, la profondeur de scroll vous indique si les visiteurs s’engagent réellement au-delà de la section hero.
Le suivi du scroll va-t-il ralentir ma page Shopify ?
De façon négligeable. Un écouteur de scroll (scroll listener) avec throttling ajoute environ 1 Ko de JavaScript et nécessite très peu de CPU. L’implémentation basique (qui se déclenche à chaque événement de scroll sans limitation) peut causer de légers ralentissements sur les pages longues avec du contenu complexe — utilisez une approche avec debounce ou basée sur des seuils (l’exemple ci-dessus ne se déclenche qu’une seule fois par seuil).
Puis-je suivre la profondeur de scroll dans GA4 sans GTM ?
Oui — les mesures améliorées (Enhanced Measurement) de GA4 incluent automatiquement un événement de base pour un scroll à 90 % (Administration → Flux de données → Mesures améliorées). Pour des seuils plus précis (25 %, 50 %, 75 %), vous avez besoin de GTM ou de JavaScript personnalisé. Les mesures améliorées sont l’option no-code, mais elles sont limitées à 90 %.
Pourquoi mes événements de scroll ne se déclenchent-ils pas tous ?
Trois causes fréquentes : (1) la page est plus courte que la fenêtre (viewport - les visiteurs ne peuvent pas faire défiler la page), (2) le contenu en lazy-loading modifie la hauteur de la page après le calcul du scroll, ou (3) le déclencheur de scroll de GTM se déclenche une fois par session et par seuil de par sa conception — il ne se redéclenchera pas en cas de rechargement de la même page. Vérifiez d’abord la longueur de la page et le lazy-loading.
