Shopify Web Pixels : le problème, c'est l'orchestration

On entend souvent que les Web Pixels de Shopify conviennent pour l’analytics, mais qu’ils sont aveugles pour la publicité, parce qu’ils « ne peuvent pas lire les cookies ni les click IDs ». La documentation de Shopify dit le contraire. Un pixel peut lire les cookies first-party et l’URL de la page. Ce qu’il ne peut pas faire : s’exécuter avant le consentement, toucher au DOM, ou porter seul un click ID de la page d’atterrissage jusqu’à la commande. La vraie limite n’est pas l’accès. C’est l’orchestration.

Ce qu’un Web Pixel peut et ne peut pas faire

Besoin	Dans un Web Pixel ?	Comment (doc Shopify)
Lire `_fbp`, `_fbc` et d’autres cookies first-party	Oui	`browser.cookie.get(name)`, méthode asynchrone exécutée dans la top frame
Lire `gclid`, `fbclid`, paramètres UTM	Oui	`event.context.document.location.search` (ou `href`)
Connaître la commande, sa valeur et sa devise	Oui	`checkout_completed` : `data.checkout.order.id`, `totalPrice`, `currencyCode`
E-mail et téléphone de l’acheteur	Oui, avec les scopes	`data.checkout.email` / `phone` (`read_customer_email`, `read_customer_phone` pour les pixels d’app)
Lire ou modifier le DOM	Non	Le pixel tourne dans une sandbox
S’exécuter sans consentement (EEE, Royaume-Uni)	Non	« Web pixels run only when website visitors have provided the permissions required in the pixel configuration »

Sources : Web Pixels API : browser, init (contexte, customer privacy), checkout_completed, permissions des custom pixels.

Alors, où le tracking publicitaire casse-t-il ?

À trois endroits, et aucun n’est « le pixel ne voit pas les identifiants » :

Le consentement. Les nouveaux custom pixels exigent par défaut les permissions Marketing et Analytics. Pas de consentement, pas de pixel, pas de click ID. C’est le comportement voulu, pas un bug.
Le temps. Le click ID se trouve dans l’URL de la page d’atterrissage. L’achat arrive plus tard, parfois plusieurs pages plus loin. Si personne ne stocke l’identifiant, il a disparu quand checkout_completed se déclenche.
La destination. Un pixel s’exécute dans le navigateur du visiteur. Tout ce qu’il contient est public : il ne doit donc jamais détenir un token de Conversions API ni un identifiant Google Ads. Le pixel collecte, un serveur envoie.

Étape 1 : capturer les click IDs à l’atterrissage

Dans un custom pixel (Paramètres > Événements client), lisez l’URL et les cookies Meta sur page_viewed, puis gardez-les pour le reste de la visite :

analytics.subscribe("page_viewed", async (event) => {
  const params = new URLSearchParams(event.context.document.location.search);
  const gclid = params.get("gclid");
  const fbclid = params.get("fbclid");
  if (gclid || fbclid) {
    // keep the click IDs until the order (use localStorage if buyers often switch tabs)
    await browser.sessionStorage.setItem("click_ids", JSON.stringify({ gclid, fbclid }));
  }
});

Le commentaire du code rappelle un détail utile : si vos acheteurs changent souvent d’onglet, préférez localStorage à sessionStorage.

Étape 2 : envoyer la commande et les identifiants à votre serveur

analytics.subscribe("checkout_completed", async (event) => {
  const checkout = event.data.checkout;
  const ids = JSON.parse((await browser.sessionStorage.getItem("click_ids")) || "{}");

  fetch("https://your-endpoint.example.com/conversions", {
    method: "POST",
    keepalive: true,
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      event_id: event.id,              // Shopify customer event ID
      order_id: checkout.order?.id,    // null on every event except checkout_completed
      value: checkout.totalPrice?.amount,
      currency: checkout.currencyCode,
      email: checkout.email,           // raw here, hashed on the server
      fbp: await browser.cookie.get("_fbp"),
      fbc: await browser.cookie.get("_fbc"),
      gclid: ids.gclid || null,
      fbclid: ids.fbclid || null
    })
  });
});

L’e-mail part en clair vers votre endpoint et c’est le serveur qui le hashe. Le order_id vaut null sur tous les événements sauf checkout_completed.

Étape 3 : laisser le serveur parler aux plateformes publicitaires

Meta Conversions API. Envoyez fbp et fbc tels quels (« Do not hash »). Si _fbc manque mais que vous avez fbclid, Meta documente le format fb.${subdomain_index}.${creation_time}.${fbclid}. Hashez l’e-mail (nettoyé, en minuscules, SHA-256) avant de l’envoyer dans em. Utilisez le même event_id que le pixel navigateur pour que Meta puisse dédupliquer. Meta : paramètres d’information client
Google Ads. Importez la conversion avec le gclid et l’identifiant de commande via l’API Google Ads. API Google Ads : conversions

Là où un App Embed reste utile

Un app embed block est l’extension de thème que les apps utilisent pour « analytics, or tracking pixels », sans interface visible. Il sert quand un SDK d’éditeur (fbq, gtag) doit tourner sur les pages de la boutique. Mais Shopify est explicite : « Theme app extension app blocks and app embed blocks can’t be rendered on checkout pages. » Il ne peut donc pas remplacer le pixel pour l’achat, et il n’est pas nécessaire juste pour lire des cookies ou des click IDs. Shopify : configuration des extensions de thème

Une architecture propre pour le tracking publicitaire sur Shopify

Web Pixel : écoute les événements Shopify, capture les click IDs et les cookies Meta après consentement, transmet à votre endpoint l’ID d’événement Shopify, l’ID de commande, les identifiants et la valeur.
Votre serveur (GTM server-side ou développement maison) : hashe les données personnelles, détient les tokens, appelle la Conversions API de Meta et l’API Google Ads.
App Embed (facultatif) : exécute les SDK d’éditeurs sur les pages de la boutique quand on en a besoin.

La sandbox de Shopify n’a pas supprimé les identifiants. Elle a supprimé les raccourcis. Il faut maintenant les capturer, les conserver et les transmettre volontairement.

Sources

Pour aller plus loin, lisez la version complète de l’article (en anglais) : Shopify Web Pixels and Ad Tracking: Access Isn’t the Problem, Orchestration Is.

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

Shopify Web Pixels et tracking publicitaire : le problème n’est pas l’accès, c’est l’orchestration