Pixel de conversion sur Shopify

Shopify ne prend plus en charge l'insertion d'une balise <script> brute dans le checkout — le suivi tiers passe désormais par les Custom Pixels, un environnement sandboxé construit sur l'API Customer Events de Shopify. Ce guide montre comment connecter le pixel de conversion Styrar à un custom pixel.

Le sandbox ne donne pas d'accès direct au DOM, donc au lieu d'intégrer la balise script de Styrar, vous appelez directement le point de terminaison de suivi avec fetch chaque fois qu'un événement client Shopify se déclenche.

Configuration

1. Dans votre admin Shopify, allez dans Paramètres → Customer events → Add custom pixel.

2. Nommez-le (par exemple « Styrar conversions ») et ajoutez un code comme celui-ci :

   JavaScript

   analytics.subscribe('checkout_completed', (event) => {
     const url = new URL(window.location.href);
     const clickToken = url.searchParams.get('styrar_ck') ||
       (typeof localStorage !== 'undefined' && localStorage.getItem('styrar_ck'));
     if (!clickToken) return;
   
     fetch('https://api.styrar.com/v1/pixel/track', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         clickToken,
         eventName: 'purchase',
         value: event.data.checkout.totalPrice.amount,
         eventData: { currency: event.data.checkout.totalPrice.currencyCode },
       }),
       keepalive: true,
     });
   });
   

   Abonnez-vous à l'événement qui correspond à la conversion qui vous intéresse — checkout_completed, payment_info_submitted, product_added_to_cart, et d'autres sont tous disponibles.

3. Autorisez l'accès réseau. Shopify bloque par défaut les requêtes sortantes depuis les custom pixels. Dans les paramètres du même pixel, ajoutez api.styrar.com sous Permissions → Connect to third-party servers, sinon la requête ci-dessus échouera silencieusement.

4. Mettez le pixel sur Active.

Une remarque sur le jeton de clic

Le sandbox du pixel Shopify ne peut pas lire localStorage comme une page normale, donc styrar_ck doit encore être présent dans l'URL (ou transmis comme attribut de panier) au moment où votre événement se déclenche. Si votre flux de checkout supprime le paramètre de requête avant checkout_completed, capturez le jeton plus tôt — sur page_viewed — et stockez-le comme attribut de panier pour pouvoir le relire plus tard.

Cela utilise toujours exactement le même point de terminaison public et non authentifié POST /v1/pixel/track que toute autre plateforme — il n'y a pas d'application spécifique à Shopify à installer côté Styrar.

Liens utiles

• Pixel de conversion — référence complète