Comment ajouter un code de suivi des conversions uniquement sur la page de paiement dans Shopify

Le suivi des conversions vous aidera à mieux comprendre la valeur totale de votre site Shopify ainsi que de toutes les campagnes de marketing en ligne que vous menez. Une fois le suivi des conversions en place, vous pourrez mesurer combien de produits vous vendez et quel canal marketing a amené le client sur votre site. En ajoutant le suivi des conversions à la page de paiement de votre boutique, vous pouvez facilement suivre la fréquence à laquelle vos clients atteignent le checkout et finalisent un achat.

Cela aide à comprendre les tendances d’achat de votre boutique Shopify. Pour ajouter un code de suivi des conversions à la page de paiement de votre boutique en respectant les dernières normes Shopify, vous devez comprendre les tâches suivantes.

Google Analytics

Tout d’abord, vous devrez ajouter le code de suivi des conversions Google Analytics de votre boutique via le framework Customer Events de Shopify. Voici un guide pour configurer cela avec Customer Events de Shopify et le système de pixels personnalisés.

Suivi des commandes

Shopify a mis à jour la manière dont les scripts de suivi doivent être implémentés. La section Additional Scripts (désormais obsolète) et checkout.liquid ne sont plus pris en charge. Suivez ces étapes pour configurer le suivi des conversions :

• Allez dans Settings dans votre interface d’administration Shopify
• Cliquez sur Customer Events
• Cliquez sur Custom pixels
• Cliquez sur Add pixel pour créer un nouveau pixel personnalisé ou modifier un pixel existant
• Collez votre code de suivi dans l’éditeur de code du pixel personnalisé
• Cliquez sur Save, puis sur Connect pixel pour l’activer
• Testez à l’aide des outils de développement du navigateur ou de Shopify Pixel Helper

Important: Depuis le 28 août 2025, les scripts checkout.liquid et Additional Scripts ne sont plus modifiables. Tout suivi des conversions doit désormais utiliser le framework Customer Events avec des pixels personnalisés ou des pixels d’app. Si vous n’avez pas encore migré, les méthodes de suivi héritées ne fonctionnent plus.

Ajouter le suivi des conversions

Pour ajouter le suivi des conversions uniquement à la page de remerciement, vous pouvez créer un pixel personnalisé qui s’abonne à l’événement checkout_completed :

analytics.subscribe("checkout_completed", (event) => {
  /* Start Tracking Code */
  gtag('event', 'conversion', {
    'send_to': 'AW-xxxx/xxxx',
    'currency': event.data.checkout.currencyCode,
    'transaction_id': event.data.checkout.order.id,
    'value': event.data.checkout.totalPrice.amount
  });
  /* End Tracking Code */
});

Environnement de suivi en sandbox sécurisée

Shopify exécute désormais toutes les personnalisations du checkout et les pixels dans un environnement sandbox sécurisé. Cela améliore la sécurité, les performances et la confidentialité des clients, mais signifie aussi que votre code doit respecter des standards stricts. Les pixels personnalisés ne peuvent pas accéder directement aux éléments du DOM ni afficher des éléments d’interface utilisateur, mais ils peuvent s’abonner à des événements client standardisés.

Suivi des conversions de base

Imaginons qu’un tiers vous ait demandé d’intégrer un pixel de suivi comme celui-ci :

<img src="https://www.tracking.com/u?amount=<AMOUNT>&amp;order-id=<ORDER_ID>&amp;currency=<CURRENCY>" height="1" width="1" />

Pour l’implémenter dans un pixel personnalisé, vous vous abonneriez à l’événement checkout_completed et accéderiez aux données suivantes :

• Le prix total de la commande via event.data.checkout.totalPrice.amount
• L’ID de commande via event.data.checkout.order.id
• La devise via event.data.checkout.currencyCode

Lorsque le client finalise le checkout, votre pixel personnalisé se déclenchera avec les bonnes données :

analytics.subscribe("checkout_completed", (event) => {
  const img = document.createElement('img');
  img.src = `https://www.tracking.com/pixel.gif?amount=${event.data.checkout.totalPrice.amount}&order-id=${event.data.checkout.order.id}&currency=${event.data.checkout.currencyCode}`;
  img.height = 1;
  img.width = 1;
  document.body.appendChild(img);
});

Lorsque le client finalise le checkout, le code ci-dessus garantit que le pixel se déclenche avec les bonnes données en utilisant des méthodes sécurisées et à jour.

Suivi des upsells post-achat

Si vous utilisez des upsells post-achat avec des applications Checkout Extensibility, vous pouvez suivre les conversions via l’événement checkout_completed (qui se déclenche sur la première page d’offre d’upsell) ainsi que via des événements d’achat supplémentaires pour une analyse plus fine :

analytics.subscribe("checkout_completed", (event) => {
  // Track initial purchase completion
  console.log('Purchase completed', event.data.checkout);
});

Dépannage

• La section Additional Scripts est désormais en lecture seule depuis le 28 août 2025. Tout suivi doit être migré vers Customer Events avec des pixels personnalisés ou des pixels d’app.
• Utilisez l’onglet Network des outils de développement de votre navigateur pour valider que l’événement checkout_completed s’est déclenché et que votre code de suivi s’est exécuté correctement.
• Vous pouvez aussi utiliser Shopify Pixel Helper pour tester vos pixels personnalisés et vérifier que les événements sont correctement suivis.
• Remarque : Google Tag Manager ne peut pas déboguer Customer Events en raison de la nature sandboxée de l’environnement de checkout de Shopify. Évitez de vous appuyer sur le mode aperçu de GTM — inspectez plutôt manuellement les journaux réseau via la console de développement de votre navigateur.
• Si vous migrez depuis d’anciennes méthodes de suivi, veillez à déconnecter les pixels hérités afin d’éviter un suivi des conversions en double.