Suivi côté serveur sur Shopify : fonctionnement et configuration

Le suivi côté serveur sur Shopify signifie que chaque achat parvient à Meta, TikTok et aux autres plateformes publicitaires à partir des données de commande de votre boutique, envoyées par un serveur, et pas seulement depuis un pixel dans le navigateur de l’acheteur. Shopify signale chaque commande payée à l’application de suivi par webhook, et l’application l’envoie à la conversions API de chaque plateforme, associée au clic publicitaire qui a amené l’acheteur.

Ce guide couvre les éléments Shopify de ce flux : l’app embed du thème et le proxy d’application, les pixels dans le checkout, le webhook orders/paid, l’association des commandes, la déduplication, le consentement et la configuration dans ROASaurus. Pour comprendre le principe général, lisez d’abord ce qu’est le suivi côté serveur.

Comment fonctionne le suivi côté serveur sur Shopify

Le clic et l’achat ont lieu à des moments différents et à des endroits différents. Le clic n’est visible que dans le navigateur, sur la page d’arrivée. La commande payée n’est certaine que du côté de Shopify, quand le paiement est capturé. Le suivi côté serveur enregistre le premier, attend le second et les relie.

Les éléments Shopify : app embed, proxy d’application, pixels et webhooks

Une boutique Shopify offre quatre endroits où une application de suivi peut travailler. Chacun a un rôle différent, et une configuration complète les utilise tous les quatre.

L’app embed du thème et le proxy d’application

Une app embed de thème est un bloc qu’une application ajoute à votre thème. Vous l’activez dans l’éditeur de thème : il n’y a donc aucun code à coller. L’embed ROASaurus charge un script sur chaque page. Sur la page d’arrivée, il lit les identifiants de clic comme fbclid, ttclid et gclid ainsi que les paramètres UTM, et les enregistre avec un identifiant de visiteur first-party.

Le script envoie ses événements via le proxy d’application de Shopify. Un proxy d’application transmet les requêtes d’un chemin de votre propre domaine, comme yourstore.com/apps/roasaurus, vers le serveur de l’application. Pour le navigateur, c’est une requête vers votre propre site, ce qui peut aider face aux bloqueurs de publicités qui bloquent les domaines de suivi connus. Shopify supprime l’en-tête Cookie des requêtes du proxy d’application et l’en-tête Set-Cookie des réponses : l’identifiant de visiteur voyage donc dans l’événement lui-même, et non dans un cookie.

Événements client et pixels dans le checkout

Dans le checkout de Shopify, les scripts de suivi s’exécutent comme des pixels dans une sandbox, et non dans la page elle-même. Vous les gérez sous Settings › Customer events. Il en existe deux types. Les pixels d’application viennent avec une application et s’exécutent dans une sandbox stricte. Les pixels personnalisés sont ajoutés par le marchand et s’exécutent dans une sandbox moins stricte, qui peut charger des scripts tiers comme le pixel Meta.

ROASaurus utilise les deux. Son pixel d’application est activé quand vous installez l’application. Il signale à ROASaurus le début du checkout, l’étape des coordonnées et le checkout terminé. Le pixel personnalisé facultatif ajoute au checkout les pixels navigateur de Meta, TikTok, Snapchat, Pinterest et Reddit, et il envoie les conversions Google Ads.

Webhooks de commande

Un webhook est un message que Shopify envoie à une application quand quelque chose se passe dans la boutique. ROASaurus s’abonne notamment à orders/paid et orders/create. La commande dans le webhook contient l’identifiant de commande, la valeur, les lignes de commande, les informations client, les jetons de panier et de checkout, les attributs du panier, ainsi que l’adresse IP et le navigateur depuis lesquels la commande a été passée. Elle vient des serveurs de Shopify : un bloqueur de publicités ou un onglet fermé ne peut donc pas l’arrêter.

Comment les commandes sont associées aux clics publicitaires

Le webhook indique à ROASaurus qu’une commande a été payée. Pour envoyer une conversion utile, ROASaurus doit aussi savoir quel visiteur a passé la commande, car la fiche du visiteur contient les identifiants de clic. Il essaie ces liens dans l’ordre, du plus direct au moins direct :

Les attributs du panier expliquent pourquoi le rapprochement est direct sur Shopify. Ce sont des paires clé-valeur stockées sur le panier, que Shopify copie sur la commande. Une valeur écrite sur la page produit est toujours là quand le webhook arrive, même si l’acheteur a fermé la page de remerciement trop tôt.

Une exception : les boutons de paiement accéléré comme Buy it now sautent le panier. ROASaurus conseille de les désactiver, afin que l’ajout au panier soit toujours suivi. Les commandes passées par ces boutons peuvent tout de même être rapprochées grâce au jeton de checkout.

Une commande, de bout en bout

Voici ce qui se passe pour une seule commande issue d’une publicité Meta, avec le pixel personnalisé installé :

Quand l’achat est envoyé : orders/paid ou orders/create

Le webhook qui déclenche l’achat dépend de la façon dont vos clients paient. Vous le choisissez avec le type de checkout dans Store settings.

ROASaurus retient chaque achat un court instant après l’arrivée du webhook. Pendant ce temps, l’événement de checkout terminé venant du navigateur arrive généralement lui aussi. Son URL de page, son adresse IP et son user agent sont alors ajoutés à l’événement serveur, à côté des identifiants de clic de la fiche du visiteur. Les commandes que Shopify marque comme commandes de test sont enregistrées mais ne sont pas envoyées aux plateformes publicitaires.

Comment fonctionne la déduplication avec les pixels navigateur

Quand les pixels navigateur fonctionnent en parallèle des événements serveur, la plateforme reçoit chaque achat deux fois et ne doit en garder qu’un. Elle le fait grâce à l’identifiant d’événement. ROASaurus donne aux deux copies d’un achat le même identifiant, construit à partir de l’identifiant de commande Shopify : order-6123456789012 pour la commande dont l’identifiant est 6123456789012. C’est le long nombre dans l’URL d’administration de la commande, et non le nom de la commande comme #1042. Le pixel de checkout l’utilise pour le Purchase navigateur, et le serveur l’utilise pour l’événement de la conversions API. Meta, par exemple, conserve une copie quand le nom et l’identifiant de l’événement correspondent et que les deux arrivent dans les 48 heures.

L’identifiant d’événement ne fonctionne qu’entre des événements qui le portent. Si une autre application envoie le même pixel, ses événements ont leurs propres identifiants, et la plateforme compte à nouveau la commande. Sur Shopify, les causes habituelles sont le canal Facebook & Instagram connecté au même pixel, l’application TikTok et du code de pixel collé dans theme.liquid. Notre guide sur les événements d’achat en double montre comment les repérer, et Prévenir le double comptage liste les solutions.

Le consentement via la Customer Privacy API de Shopify

La Customer Privacy API de Shopify enregistre le choix de cookies de chaque visiteur. Votre bandeau de cookies la renseigne, que vous utilisiez le bandeau de Shopify ou une application de consentement connectée à l’API. Les scripts et les pixels peuvent alors lui demander si le marketing est autorisé pour ce visiteur.

Avec Respect visitor consent activé, ce qui est le réglage par défaut dans Store settings, le script de la boutique et les pixels de checkout de ROASaurus interrogent l’API avant de suivre quoi que ce soit.

Les e-mails, les numéros de téléphone, les noms et les adresses sont hachés avec SHA-256 avant d’être envoyés à une plateforme publicitaire. Trois autres points comptent :

• Votre bandeau décide. ROASaurus suit ce que signale l’API. Si l’API n’est pas disponible sur la page, ROASaurus considère le visiteur comme consentant : vérifiez donc que votre bandeau y est connecté.
• La page d’arrivée reste sur la commande. Shopify enregistre l’adresse de la page d’arrivée avec chaque commande, et elle peut contenir des balises de campagne et des identifiants de clic. ROASaurus l’utilise dans ses propres rapports d’attribution, y compris pour les visiteurs qui ont refusé, et ne l’envoie pas aux plateformes publicitaires.
• L’envoi de la commande est une décision juridique. Savoir si la commande payée d’un visiteur qui a refusé peut être envoyée relève d’une question juridique propre à votre boutique.

Notre guide Consent Mode v2 et RGPD explique les règles dans les grandes lignes, et Consentement et confidentialité donne les détails.

Comment configurer le suivi côté serveur sur Shopify dans ROASaurus

Suivez les étapes de configuration dans cet ordre :

1. Installez l’application

   Allez dans Add a store, choisissez Shopify, saisissez votre domaine .myshopify.com et cliquez sur Install app. Approuvez l’application dans Shopify. ROASaurus enregistre les webhooks de commande et active son pixel d’application.

2. Activez l’app embed du thème

   Sur la page Tracking & platforms, cliquez sur Open theme editor, activez l’app embed ROASaurus et enregistrez.

3. Ajoutez le pixel de checkout

   Dans Shopify admin, allez dans Settings › Customer events et ajoutez un pixel personnalisé nommé ROASaurus. Réglez sa permission sur Not required, car le script ROASaurus vérifie lui-même le choix marketing du visiteur. Collez l’extrait de Tracking & platforms. Vous avez besoin de ce pixel pour les pixels navigateur dans le checkout et pour Google Ads.

4. Connectez vos plateformes publicitaires

   Sur Tracking & platforms, cliquez sur Add pixel pour chaque plateforme, ou sur Connect with Facebook pour Meta. Gardez activée l’option qui charge aussi le pixel navigateur si vous voulez des événements navigateur dédupliqués.

5. Vérifiez les réglages de la boutique

   Dans Store settings, choisissez votre type de checkout et gardez Respect visitor consent activé si vous vendez là où le consentement est exigé.

6. Supprimez les autres émetteurs

   Dans le canal Facebook & Instagram, retirez ce pixel des réglages de partage de données. Baisser le niveau de partage de données ne suffit pas, car tous les niveaux, y compris Standard, envoient le pixel Meta depuis le navigateur. Si l’application TikTok envoie le même pixel, arrêtez-la là aussi, et supprimez le code de pixel de votre thème.

L’extrait du pixel personnalisé ressemble à ceci. Copiez-le depuis Tracking & platforms, où votre clé de boutique est déjà renseignée. Le guide de configuration Shopify reprend les mêmes étapes.

self.tl = this; document.head.appendChild(document.createElement('script')).src = 'https://app.roasaurus.com/c.js?k=YOUR_STORE_KEY';

Comment vérifier que cela fonctionne

Testez avec une vraie commande avant de vous fier aux chiffres :

1. Ouvrez votre boutique avec ?roasaurus=connected à la fin de l’URL. Un message confirme que le script est actif.
2. Pour Meta, collez le code d’Events Manager › Test events dans le champ Test event code du pixel.
3. Passez une vraie commande à bas prix et remboursez-la ensuite. Les commandes de test Shopify ne sont pas envoyées.
4. Dans l’Event log, l’envoi serveur de la commande apparaît comme sent pour chaque plateforme, avec la réponse de la plateforme.
5. Dans la vue de test de la plateforme, vérifiez que le Purchase navigateur et le Purchase serveur partagent l’identifiant d’événement order- suivi de l’identifiant de commande Shopify.
6. Retirez ensuite le code d’événement de test.

Ce que le suivi côté serveur sur Shopify ne corrige pas

• Le consentement refusé. Les commandes des visiteurs qui ont refusé les cookies marketing sont envoyées, mais sans identifiant de clic : les plateformes publicitaires les associent donc moins bien.
• Les limites de cookies de Safari. Un acheteur qui revient après plus de 7 jours peut passer pour un nouveau visiteur. Un sous-domaine de suivi first-party garde la collecte sur votre domaine, mais Safari peut quand même limiter ces cookies à 7 jours.
• Les différences d’attribution. Chaque plateforme publicitaire attribue encore les ventes selon ses propres fenêtres et modèles. Pour comparer les canaux avec un seul jeu de règles, utilisez votre propre attribution.
• D’autres applications sur le même pixel. Les identifiants d’événement ne fusionnent que les événements qui les partagent.

Ce qu’il corrige en revanche, c’est l’achat qui a bien eu lieu mais n’a jamais atteint la plateforme publicitaire parce que l’événement navigateur a été perdu. Pour ce que ROASaurus envoie à chaque plateforme, consultez le suivi côté serveur et l’intégration Shopify.

Sources

1. Shopify: Customer Privacy API
2. Shopify: Authenticate app proxies
3. Shopify Help Center: Manage your custom pixels
4. Shopify Help Center: Facebook data sharing
5. Meta: Handling Duplicate Pixel and Conversions API Events

Dans ROASaurus

• Aide : configurer ROASaurus sur Shopify
• Intégration Shopify
• Le suivi côté serveur dans ROASaurus
• Aide : consentement et confidentialité

À lire aussi