Shopify Web Pixels API : le nouveau tracking

Entre 2023 et 2026, Shopify a retiré checkout.liquid et les additional scripts pour déplacer le tracking vers les customer events (Shopify). L’époque où l’on glissait du code GA4 ou Meta Pixel dans theme.liquid ou checkout.liquid est terminée. La plateforme pousse désormais la Web Pixels API, un cadre de tracking plus propre, plus fiable et compatible avec le consentement.

Pourquoi les montages classiques ne suffisent plus

Pendant des années, un site e-commerce pouvait déposer un conteneur GTM ou des scripts dans son thème Shopify, brancher checkout.liquid, et tout « marchait ». Aujourd’hui :

Shopify a verrouillé de plus en plus l’accès au tunnel de commande, ce qui rend de nombreux scripts personnalisés inefficaces ;
les navigateurs durcissent leurs restrictions sur les cookies et scripts tiers ;
plusieurs applications installées sur la boutique déposent chacune leur pixel, d’où doublons, problèmes de performance et bruit dans les données.

Résultat : des trous dans le suivi des conversions, des données peu fiables et des campagnes publicitaires moins performantes.

Qu’est-ce que la Web Pixels API ?

C’est un bac à sable JavaScript exposé par Shopify pour s’abonner aux « customer events » de façon standardisée et sécurisée (Shopify). Vous pouvez vous brancher sur des événements comme page_viewed, product_viewed, product_added_to_cart, checkout_started et checkout_completed (événements standards). Les événements sont publiés par Shopify, et votre pixel (pixel d’application ou pixel personnalisé) s’y abonne (Shopify).

analytics.subscribe('checkout_completed', event => {
  const checkout = event.data.checkout;
  fetch('https://my-server.example.com/collect', {
    keepalive: true,
    method: 'POST',
    body: JSON.stringify({
      event: 'purchase',
      order_id: checkout.order?.id,
      value: checkout.totalPrice.amount,
      currency: checkout.totalPrice.currencyCode,
    }),
  });
});

Ce pixel côté navigateur peut ensuite envoyer l’événement à votre serveur, qui le traite ou le route vers GA4, Meta, TikTok, etc.

Pourquoi c’est important pour le tracking et les ads

Tracking unifié boutique et checkout. Tous les événements passent par le système géré par Shopify : plus de fragmentation entre la vitrine et le tunnel de commande.
Consentement intégré. La Web Pixels API respecte les réglages de confidentialité client de Shopify. Dans les régions qui exigent un consentement, un pixel ne s’exécute qu’une fois que le visiteur a accordé les permissions définies dans les réglages de confidentialité de ce pixel (Shopify).
Prêt pour le server-side et la donnée first-party. Les événements collectés peuvent être transmis côté serveur (GTM Server-Side, Stape, proxy sur mesure), pour une meilleure résilience face aux restrictions des navigateurs.

Mise en œuvre pas à pas

Étape 1 : créer le pixel dans l’admin Shopify

Aller dans Shopify Admin → Settings → Customer Events (Pixels Manager).
Ajouter un nouveau pixel (lui donner un nom, coller le script).
L’activer sur la boutique.

Étape 2 : s’abonner aux événements utiles

Choisissez les événements clés : product_viewed, product_added_to_cart, checkout_started, checkout_completed. Exemple :

analytics.subscribe('product_added_to_cart', event => {
  console.log('Item added to cart:', event.data.cartLine.merchandise.id);
});

Étape 3 : tester

Utilisez le Pixel Helper de Shopify (Settings → Customer events) pour vérifier que les événements se déclenchent comme prévu (Shopify Help Center).

Étape 4 : router les données

Transmettez les payloads capturés à des endpoints server-side, puis mappez-les vers GA4, Meta, TikTok ou votre propre outil d’analytics.

Pièges fréquents et bonnes pratiques

Problème	Cause racine	Solution
Événements qui ne partent pas dans le checkout	Injection de scripts dans le checkout bloquée	Utiliser `checkout_started` / `checkout_completed` via la Web Pixels API
Événements en double	Une app pixel et un conteneur GTM suivent la même action	Consolider sur une seule pile de tracking, désactiver les scripts redondants
Tentative de scraping du DOM dans le pixel	Le bac à sable (Lax/Strict) bloque l’accès au DOM	Utiliser le contexte fourni par l’API (`init.data`, `event.data`) (Shopify)

La pile recommandée

Web Pixels API pour la capture côté navigateur et la logique de consentement ;
conteneur server-side (GTM SS, Stape, sur mesure) pour un routage plus fiable ;
dataLayer unifié pour rester cohérent entre les plateformes ;
gouvernance de la vie privée : votre pile doit respecter le RGPD/CCPA et les parcours de consentement.

Exemple de mapping d’événements

Événement Shopify	Événement analytics	Paramètres clés
`page_viewed`	`page_view`	`page_location`, `page_title`
`product_viewed`	`view_item`	`item_id`, `item_name`, `price`
`product_added_to_cart`	`add_to_cart`	`item_id`, `quantity`, `price`
`checkout_started`	`begin_checkout`	`value`, `currency`, `items[]`
`checkout_completed`	`purchase`	`transaction_id`, `value`, `currency`, `items[]`

Conclusion

La Web Pixels API n’est pas un gadget : c’est la nouvelle fondation d’un tracking Shopify fiable. Elle demande plus de structure qu’avant, mais apporte des données plus cohérentes, un consentement géré par la plateforme (la conformité reste de votre responsabilité) et moins de trous entre la vitrine et le checkout. Les marchands qui migrent tôt évitent les manques laissés par la fin de checkout.liquid et des additional scripts.

« Moins de scripts, plus de structure. » Si vous gérez des boutiques Shopify, ou accompagnez des clients qui le font, c’est le moment d’auditer votre pile de tracking.

Sources

Pour aller plus loin, lisez la version complète de l’article (en anglais) : Shopify Web Pixels API: The New Era of E-commerce Tracking.

Besoin d’aide sur ce sujet ? Consultant GA4 et audit analytics.

Shopify Web Pixels API : la nouvelle ère du tracking e-commerce