À retenir
- La méthode recommandée pour le suivi des paiements (checkout) et des achats est Paramètres → Événements clients (le gestionnaire de pixels de Shopify).
- Pour les scripts spécifiques aux applications, utilisez les App Embeds dans l’éditeur de thème plutôt que d’ajouter manuellement le code à theme.liquid.
- L’accès des scripts tiers à la page de paiement est limité sur les forfaits Basic et Shopify — Shopify Plus offre des possibilités plus poussées.
- L’ajout de scripts directement dans theme.liquid est la méthode la plus puissante mais la moins sûre — dupliquez toujours votre thème au préalable.
Les scripts de suivi alimentent vos publicités, vos analyses et votre reciblage (remarketing). Leur installation correcte dans Shopify est plus subtile que de simplement coller un snippet dans un header. Shopify propose plusieurs méthodes, chacune adaptée à des cas d’usage différents.
Comment ajouter un code de suivi sur Shopify ?
Il existe trois méthodes principales :
- Événements clients (gestionnaire de pixels) — pour le suivi des achats et des événements de paiement (checkout)
- App Embeds (intégrations d’application) — pour les scripts liés à une application spécifique
- theme.liquid — pour les scripts globaux sur l’ensemble du site (à l’exception du checkout sur les forfaits de base)
Pour mesurer les résultats, consultez comment modifier checkout.liquid sur Shopify Plus.
Méthode 1 — Événements clients (recommandé pour le suivi des conversions)
Le système d’Événements clients (Customer Events) de Shopify (anciennement Shopify Pixels) est l’endroit approprié pour le suivi des achats et des événements de checkout. Il fonctionne sur l’ensemble du processus de paiement — y compris la page de statut de commande — pour tous les forfaits Shopify.
Article lié : Ajouter des événements personnalisés dans Shopify.
Étape 1 - Allez dans Paramètres → Événements clients
Étape 2 - Cliquez sur Ajouter un pixel personnalisé (pour un code spécifique) ou parcourez la liste des intégrations prédéfinies (Google, Meta, TikTok, Klaviyo, etc.)
Étape 3 - Pour une intégration prédéfinie : cliquez sur l’intégration, connectez votre compte et activez-la. Shopify s’occupe du reste.
Étape 4 - Pour un pixel personnalisé : collez votre code de suivi dans l’éditeur JavaScript. Votre code s’exécute dans un environnement sandbox (bac à sable) et accède aux événements standards de Shopify (page_viewed, product_viewed, checkout_completed, etc.).
Pourquoi est-ce l’approche recommandée : Les événements clients s’exécutent dans une sandbox respectueuse de la vie privée, prennent en compte les choix de consentement des clients et offrent un accès complet aux événements de checkout que les scripts présents dans theme.liquid ne peuvent pas atteindre sur les forfaits standards.
Méthode 2 — App Embeds dans l’éditeur de thème
Lorsque vous installez une application Shopify qui inclut un snippet JavaScript (comme un widget d’avis, un live chat ou un programme de fidélité), la bonne manière de l’activer est de passer par les App Embeds :
Étape 1 - Allez dans Boutique en ligne → Thèmes → Personnaliser
Étape 2 - Cliquez sur l’icône de pièce de puzzle dans la barre latérale gauche (App Embeds / Intégrations de l’application)
Étape 3 - Activez (toggle) l’application que vous souhaitez utiliser
Cette méthode maintient les scripts de vos applications bien organisés, facilite leur activation ou désactivation sans avoir à toucher au code, et évite de laisser des balises de script résiduelles si plus tard vous désinstallez l’application.
Méthode 3 — theme.liquid (pour les scripts globaux)
Pour les scripts qui doivent s’exécuter sur chaque page de votre boutique (à l’exclusion du checkout sur les forfaits de base), vous pouvez les ajouter directement dans theme.liquid.
Étape 1 - Boutique en ligne → Thèmes → Actions → Modifier le code
Étape 2 - Ouvrez theme.liquid
Étape 3 - Ajoutez les scripts dans la section <head> (pour ceux qui doivent se charger tôt) ou juste avant la balise de fermeture </body> (pour les scripts secondaires)
Dupliquez toujours votre thème en premier. Une erreur de syntaxe dans theme.liquid bloque tout l’affichage de votre boutique.
Utilisez defer ou async sur vos balises de script dès que possible pour éviter de bloquer le rendu de la page :
<script src="https://example.com/script.js" defer></script>Comment ajouter un script sur la page de paiement (checkout) dans Shopify ?
L’accès aux scripts de la page de paiement dépend de votre forfait Shopify :
Forfaits Basic, Shopify et Advanced : Il est impossible d’ajouter des scripts directement sur les pages de paiement via theme.liquid. Utilisez plutôt les Événements clients — ils ont un accès naturel à tous les événements du checkout.
Shopify Plus : Vous avez accès à checkout.liquid pour la page de paiement. Profitez également des Shopify Functions et de Checkout Extensibility pour plus de personnalisation avancée.
Tous les forfaits : La page de statut de commande (page de remerciement) peut accueillir des scripts supplémentaires via Paramètres → Passage en caisse (Checkout) → Page de statut de commande (faites défiler jusqu’en bas des paramètres de paiement pour trouver le champ “Scripts supplémentaires”).
Les erreurs courantes liées aux scripts de suivi
Installer un pixel en double. Si vous utilisez l’intégration Meta native de Shopify ET que vous collez manuellement le code du Pixel Meta dans theme.liquid, les événements d’achat se déclencheront deux fois. Choisissez une seule méthode.
L’absence de gestion du consentement. Si vous opérez en Europe ou en Californie, une bannière de consentement est obligatoire et vos scripts de suivi ne doivent se déclencher que pour les utilisateurs y ayant consenti. Le système des Événements clients gère cela correctement dès lors qu’il est bien configuré.
Les scripts qui bloquent le chargement de la page. Les scripts bloquant le rendu (render-blocking) placés dans <head> retardent l’affichage de l’ensemble de la page. Ajoutez systématiquement l’attribut async ou defer à tous les scripts non critiques.
Pour mesurer les performances, consultez les moyens de corriger les scripts render-blocking dans Shopify.
Utiliser Google Tag Manager comme source unique de vérité
Plutôt que d’ajouter plusieurs scripts de suivi directement sur Shopify, de nombreuses boutiques utilisent Google Tag Manager (GTM) comme conteneur. Vous ajoutez le snippet GTM une seule fois à theme.liquid, puis vous gérez tous les autres scripts de suivi dans GTM.
Avantages : aucune modification de code nécessaire lors de l’ajout ou de la modification du suivi, ajout et suppression de scripts plus simples pour les non-développeurs, outils de débogage intégrés.
Consultez notre guide complet : Comment ajouter Google Tag Manager à Shopify.
FAQ
Dois-je utiliser les Customer Events ou theme.liquid pour le suivi ?
Les Customer Events pour tout suivi nécessitant la couverture du checkout (événements d’achat, conversions, pixels publicitaires). theme.liquid pour les scripts qui n’ont besoin de s’exécuter que sur les pages de la vitrine et ne nécessitent pas d’accès au checkout. La plupart des boutiques finissent par utiliser les deux : les Customer Events pour le suivi des conversions, theme.liquid (ou GTM) pour l’analyse de la vitrine et les heatmaps.
Pourquoi Shopify limite-t-il l’accès aux scripts sur le checkout ?
Pour des raisons de sécurité et de cohérence. Autoriser des scripts tiers arbitraires sur la page de paiement crée un risque d’altération du flux de paiement et des problèmes de conformité PCI. La sandbox des Customer Events vous permet d’exécuter du JavaScript dans un environnement sécurisé avec le même accès effectif à des fins de suivi, mais sans accès direct au DOM.
Puis-je ajouter des scripts de suivi via des applications Shopify au lieu de theme.liquid ?
Oui. De nombreuses plateformes publicitaires et outils d’analyse proposent des applications Shopify officielles qui gèrent l’injection de scripts via les App Embeds, ce qui est la méthode la plus propre. Les intégrations préconçues de Customer Events s’en chargent également. Pour le suivi personnalisé qui n’a pas d’application officielle (événements dataLayer sur mesure, gestionnaires de clics spécifiques, déclenchements de conversions personnalisés), décrivez ce que vous souhaitez à Fudge et l’outil ajoutera le suivi directement à votre thème plutôt que de devoir faire une énième modification dans theme.liquid.
L’ajout de scripts de suivi va-t-il nuire à mon score Lighthouse sur Shopify ?
C’est possible. Chaque balise ajoute du JavaScript qui prend du temps à parser et à exécuter. Utilisez defer ou async sur chaque appel de script externe, et privilégiez la sandbox des Customer Events (qui s’exécute séparément du rendu de la page principale). Les audits avec WebPageTest ou Lighthouse montreront quels scripts spécifiques ralentissent le site.
Comment vérifier quels scripts de suivi se déclenchent réellement sur ma boutique ?
Ouvrez la page dans les Chrome DevTools → onglet Network (Réseau) → filtrez par votre domaine de suivi (par exemple, google-analytics, facebook). Vous verrez chaque requête que la page effectue vers ces services. Pour les Customer Events en particulier, le flux d’événements en direct dans Settings → Événements clients montre quels pixels se déclenchent en temps réel.
Pour mesurer les résultats, découvrez comment suivre les conversions sur Shopify.