Points clés à retenir
- La méthode recommandée pour le suivi du 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 du code manuellement dans theme.liquid.
- L’accès des scripts tiers à la page de checkout est limité sur les forfaits Basic et Shopify — Shopify Plus offre plus de possibilités.
- L’ajout direct de scripts à theme.liquid est la méthode la plus puissante mais la moins sûre — dupliquez d’abord votre thème.
Les scripts de tracking alimentent vos publicités, vos outils d’analyse et votre reciblage. Leur installation correcte sur Shopify est plus nuancée que de simplement coller un snippet dans un header. Shopify propose plusieurs méthodes, chacune adaptée à des cas d’utilisation 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
Les Événements clients pour tout tracking nécessitant une 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 qui ne nécessitent pas d'accès au checkout. La plupart des boutiques finissent par utiliser les deux : les Événements clients pour le suivi des conversions, et theme.liquid (ou GTM) pour les analyses de la vitrine et les heatmaps.
Pour des raisons de sécurité et de cohérence. Autoriser des scripts tiers arbitraires sur la page de checkout crée des risques de manipulation du flux de paiement et des problèmes de conformité PCI. La sandbox des Événements clients vous permet d'exécuter du JavaScript dans un environnement sécurisé avec le même accès effectif à des fins de tracking - mais sans accès direct au DOM.
Oui — de nombreuses plateformes publicitaires et outils d'analyse ont 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 d'Événements clients le gèrent également. Pour le tracking sur mesure qui n'a pas d'application officielle — événements dataLayer personnalisés, gestionnaires de clics spécifiques, déclenchements de conversions personnalisés — décrivez ce que vous voulez à Fudge et il ajoutera le tracking directement à votre thème sans que vous ayez à modifier theme.liquid.
C'est possible. Chaque tag ajoute du JavaScript qui prend du temps à être analysé et exécuté. Utilisez defer ou async sur chaque appel de script externe, et privilégiez la sandbox des Événements clients (qui s'exécute indépendamment du rendu principal de la page). Un audit avec WebPageTest ou Lighthouse vous montrera quels scripts précis ralentissent la page.
Ouvrez la page dans les DevTools de Chrome → onglet Réseau (Network) → filtrez par votre domaine de tracking (ex. google-analytics, facebook). Vous verrez chaque requête que la page envoie à ces services. Pour les Événements clients spécifiquement, le flux d'événements en direct dans Paramètres → Événements clients vous montre quels pixels se déclenchent en temps réel.
Pour mesurer les résultats, consultez suivre les conversions sur Shopify.