Comment vérifier que Pandectes fonctionne avec la Customer Privacy API de Shopify

Vue d'ensemble

Pandectes GDPR Compliance est intégré à la Customer Privacy API de Shopify. Lorsqu'un visiteur choisit Accept, Reject ou une sélection personnalisée dans la fenêtre des préférences, la bannière transmet ce choix à Shopify via l'API officielle. Shopify l'applique ensuite aux éléments qu'il contrôle : les web pixels, les customer events, les audiences et le checkout.

Cet article vous montre comment confirmer que le signal arrive bien dans votre propre boutique. Il liste aussi les vérifications qui ressemblent à des échecs mais n'en sont pas.

Pour savoir comment l'intégration se comporte, consultez Comment l'application fonctionne avec la Customer Privacy API de Shopify. La référence de Shopify est la Customer Privacy API.

Comment cela fonctionne

Le rôle de l'application dans cette intégration est de transmettre la décision du visiteur à Shopify, correctement et immédiatement. Tout ce qui suit relève de Shopify : charger ou retenir les web pixels sur la boutique et dans le checkout, contrôler les canaux de vente comme Google & YouTube ou Meta, et appliquer le consentement aux customer events, aux audiences et au checkout.

Ce sont des systèmes détenus par Shopify, qui lisent le consentement depuis l'API de Shopify. Dès que les vérifications ci-dessous montrent que le signal arrive, l'application a fait ce qu'elle devait faire.

setTrackingConsent() est la méthode documentée permettant à une application d'indiquer à Shopify ce qu'un visiteur a décidé. Pandectes l'appelle. Cet appel est l'interface entre l'application et Shopify.

Points clés

• Utilisez currentVisitorConsent() pour vérifier la décision brute du visiteur ('', 'yes' ou 'no').
• Les méthodes Allowed() combinent les paramètres du commerçant, la localisation et le consentement. Un simple true ou false ne prouve pas que le visiteur a décidé quoi que ce soit.
• shouldShowBanner() est une vérification de région. Il peut rester à true après Accept.
• Ne lisez pas les cookies Shopify, le dataLayer ni les requêtes réseau pour juger cette intégration.
• La première vérification n'installe rien. L'extrait de thème et le pixel de test sont temporaires. Supprimez-les quand vous avez terminé.

Avant de commencer

Trois points à respecter, sinon les résultats seront trompeurs :

1. Utilisez un profil de navigateur vierge. Ouvrez une nouvelle fenêtre de navigation privée, ou effacez les cookies et le stockage local de votre domaine. Si vous avez déjà donné votre consentement, la bannière ne vous le redemandera pas et vous ne verrez que l'état « après ».
2. Testez en tant que visiteur d'une région où le consentement est requis (par exemple l'UE/EEE/Royaume-Uni si votre bannière est configurée ainsi). Dans les régions où Shopify n'est pas configuré pour exiger le consentement, tout est autorisé par défaut et le test ne prouve rien.
3. Vérifiez que l'app embed Pandectes est activé dans votre thème. L'intégration Shopify Customer Privacy est toujours active et n'a aucun paramètre à activer.

Ouvrez la Developer Console du navigateur :

• Chrome / Edge : appuyez sur F12, puis ouvrez l'onglet Console
• Firefox : appuyez sur F12, puis ouvrez l'onglet Console
• Safari : activez le menu Develop dans Settings → Advanced, puis Option + Command + C

Ce que Pandectes envoie à Shopify

L'API de Shopify utilise quatre finalités. Pandectes y associe ses catégories de cookies :

Les cookies strictement nécessaires n'ont pas d'équivalent. Ils sont toujours autorisés et ne font pas partie de cette écriture de consentement.

Option 1 : vérification rapide dans la console

Vous n'avez rien à installer. Une seule commande, exécutée trois fois, suffit.

Étape 1. Ouvrez votre boutique dans une nouvelle fenêtre de navigation privée. La bannière apparaît. Ne cliquez sur rien.

Étape 2. Ouvrez la Console, collez ceci et appuyez sur Entrée :

window.Shopify.customerPrivacy.currentVisitorConsent();

Vous devriez obtenir quatre chaînes vides. C'est la façon dont Shopify indique que le visiteur n'a pas encore décidé :

{marketing: '', analytics: '', preferences: '', sale_of_data: ''}

Étape 3. Cliquez sur Accept all dans la bannière, puis exécutez à nouveau la même commande :

{marketing: 'yes', analytics: 'yes', preferences: 'yes', sale_of_data: ''}

Étape 4. Rechargez la page et exécutez-la une dernière fois. Les valeurs doivent toujours être présentes.

Vide avant la décision, renseigné juste après, toujours renseigné au chargement de la page suivante : c'est la vérification. Si vous cliquez plutôt sur Reject all, vous obtenez 'no' à la place de 'yes'. C'est tout aussi correct : le visiteur a été interrogé et a refusé.

Seuls preferences, analytics et marketing doivent changer. sale_of_data peut rester vide. C'est normal. Consultez la remarque dans la section Ce qu'il ne faut pas utiliser pour vérifier.

window.Shopify.loadFeatures([{name: 'consent-tracking-api', version: '0.1'}], () => {});

Pourquoi currentVisitorConsent et non marketingAllowed

Les commerçants vérifient souvent uniquement ceci :

window.Shopify.customerPrivacy.preferencesProcessingAllowed();  // true / false

Cette méthode est utile, mais elle ne peut répondre que par true ou false. La documentation de Shopify explique que ces méthodes combinent les paramètres du commerçant, la localisation de l'utilisateur et son consentement.

Ainsi, false peut signifier que le visiteur a refusé, ou qu'il se trouve dans une région où le consentement est requis et n'a pas encore répondu. true peut signifier que le visiteur a accepté, ou que cette région n'exige pas de consentement. Le booléen seul ne permet pas de savoir si le visiteur a décidé quoi que ce soit.

currentVisitorConsent() renvoie les préférences sélectionnées par l'utilisateur, sans y mêler la localisation ni la configuration du commerçant :

window.Shopify.customerPrivacy.currentVisitorConsent();
// → {marketing: 'yes', analytics: 'no', preferences: 'yes', sale_of_data: ''}

Vide avant que le visiteur décide, renseigné ensuite. Cette transition prouve que Pandectes a écrit la décision dans Shopify.

Option 2 : test à l'écran dans le thème

Cet extrait automatise la vérification rapide dans la console. Il affiche l'état du consentement dans la console au chargement de la page, puis à nouveau lorsque le visiteur décide. Il se contente de lire et d'enregistrer des journaux. Il ne modifie rien.

Où coller l'extrait de thème

1. Shopify admin → Online Store → Themes
2. Sur votre thème actif, cliquez sur … → Edit code (plus sûr : Duplicate d'abord le thème et testez sur la copie)
3. Ouvrez layout/theme.liquid
4. Collez l'extrait juste avant la balise de fermeture </body>
5. Save

{% comment %} PANDECTES CONSENT CHECK: temporary, remove after testing {% endcomment %}
<script>
(function () {
  var pandectesTag = '[Pandectes theme check]';

  function pandectesSnapshot(label) {
    var cp = window.Shopify && window.Shopify.customerPrivacy;
    if (!cp) {
      console.warn(pandectesTag, label, 'API not available');
      return;
    }

    var consent = cp.currentVisitorConsent();

    console.log('%c' + pandectesTag + ' ' + label, 'font-weight:bold;color:#0a7');
    console.table({
      'currentVisitorConsent().preferences' : consent.preferences,
      'currentVisitorConsent().analytics'   : consent.analytics,
      'currentVisitorConsent().marketing'   : consent.marketing,
      'currentVisitorConsent().sale_of_data': consent.sale_of_data,
      'preferencesProcessingAllowed()'      : cp.preferencesProcessingAllowed(),
      'analyticsProcessingAllowed()'        : cp.analyticsProcessingAllowed(),
      'marketingAllowed()'                  : cp.marketingAllowed(),
      'saleOfDataAllowed()'                 : cp.saleOfDataAllowed()
    });
  }

  document.addEventListener('visitorConsentCollected', function (event) {
    console.log(pandectesTag, 'visitorConsentCollected →', event.detail);
    pandectesSnapshot('AFTER the visitor decided');
  });

  (function pandectesWaitForShopify(tries) {
    tries = tries || 0;
    if (window.Shopify && window.Shopify.loadFeatures) {
      window.Shopify.loadFeatures(
        [{ name: 'consent-tracking-api', version: '0.1' }],
        function (error) {
          if (error) {
            console.error(pandectesTag, 'could not load the Customer Privacy API', error);
            return;
          }
          pandectesSnapshot('ON PAGE LOAD');
        }
      );
      return;
    }
    if (tries > 100) {
      console.error(pandectesTag, 'window.Shopify.loadFeatures never became available');
      return;
    }
    setTimeout(function () { pandectesWaitForShopify(tries + 1); }, 100);
  })();
})();
</script>

Comment exécuter le test du thème

Ouvrez votre boutique dans une nouvelle fenêtre de navigation privée, ouvrez la Console et suivez ces trois étapes.

Étape 1 : avant de toucher à la bannière

La bannière est à l'écran. Vous n'avez rien cliqué. Cherchez le tableau ON PAGE LOAD.

Les chaînes vides sont l'élément important. Shopify indique que ce visiteur n'a pas encore décidé.

Étape 2 : cliquez sur un bouton de la bannière

Cliquez sur Accept all. Deux éléments doivent apparaître immédiatement dans la console :

1. Une ligne visitorConsentCollected → {marketingAllowed: true, saleOfDataAllowed: …, analyticsAllowed: true, preferencesAllowed: true}
2. Un second tableau, AFTER the visitor decided :

Si vous cliquez plutôt sur Reject all, les valeurs deviennent "no" et les méthodes Allowed() restent à false. "no" n'est pas la même chose que "" : le visiteur a été interrogé et a refusé.

Étape 3 : rechargez la page

Rechargez et regardez le nouveau tableau ON PAGE LOAD. Les valeurs de l'étape 2 doivent toujours être présentes. Cela prouve que Shopify a stocké la décision et la renvoie sur les pages suivantes.

Si les étapes 1, 2 et 3 se comportent comme indiqué ci-dessus, l'intégration écrit bien le consentement dans Shopify.

Option 3 : test avec un pixel Shopify

L'extrait de thème prouve que Shopify a enregistré la décision. Ce second extrait prouve que la décision parvient aux web pixels de Shopify (Google & YouTube, Meta, Klaviyo et tout pixel personnalisé).

Les pixels s'exécutent dans un sandbox, séparé de votre thème. Shopify leur transmet directement l'état du consentement. L'extrait crée un petit pixel de test qui indique ce qu'il a reçu.

Où coller l'extrait du pixel

1. Shopify admin → Settings → Customer events
2. Cliquez sur Add custom pixel, nommez-le Pandectes consent check
3. Sous Customer privacy, réglez Permission sur Not required, afin que ce pixel de test s'exécute toujours et puisse aussi indiquer l'état « avant »
4. Collez le code, cliquez sur Save, puis sur Connect

// Pandectes consent check. TEMPORARY test pixel. Disconnect and delete when finished.
const pandectesTag = '[Pandectes pixel check]';

function pandectesLog(label, cp) {
  console.log(pandectesTag + ' ' + label, {
    preferencesProcessingAllowed: cp.preferencesProcessingAllowed,
    analyticsProcessingAllowed:   cp.analyticsProcessingAllowed,
    marketingAllowed:             cp.marketingAllowed,
    saleOfDataAllowed:            cp.saleOfDataAllowed
  });
}

let pandectesConsentState = init.customerPrivacy;
pandectesLog('state when the pixel started', pandectesConsentState);

api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
  pandectesConsentState = event.customerPrivacy;
  pandectesLog('state after the visitor decided', pandectesConsentState);
});

analytics.subscribe('page_viewed', (event) => {
  pandectesLog('state at page_viewed', pandectesConsentState);
});

Ce que vous devriez voir dans le test du pixel

À nouveau dans une fenêtre de navigation privée neuve, avec la console ouverte :

saleOfDataAllowed ne fait pas partie de cette vérification. En dehors des régions avec un opt-out de vente de données, il peut être à true dès le départ. C'est attendu.

Si ces trois valeurs passent de false à true quand vous cliquez sur Accept, Shopify transmet bien l'état du consentement aux pixels.

Une fois le signal arrivé, le reste relève de Shopify

Les web pixels de Shopify s'exécutent dans des iframes sandbox cross-origin que Shopify contrôle. Aucune application de consentement ne peut les démarrer, les arrêter ou modifier ce qu'ils envoient. Le signal de consentement est le seul levier disponible.

La vérification se divise en deux :

1. Le signal arrive-t-il ? C'est ce à quoi répondent les vérifications ci-dessus. C'est la partie dont Pandectes est responsable.
2. Shopify agit-il sur le signal ? C'est une question qui relève de Shopify, dont la réponse se trouve dans les paramètres de Shopify et, si nécessaire, auprès du support de Shopify.

Si currentVisitorConsent() passe de vide à 'yes' ou 'no' quand le visiteur clique, l'application a fait son travail. Si un pixel ou un canal se comporte ensuite de manière inattendue, regardez du côté de Shopify :

• Settings → Customer events : chaque pixel a son propre paramètre Customer privacy → Permission. Un pixel réglé sur Not required s'exécutera quel que soit le consentement, car c'est ce que la boutique a demandé à Shopify.
• La configuration propre à chaque canal de vente. Le canal Google & YouTube, par exemple, construit son propre signal de consentement Google à partir de l'API de Shopify. Cette traduction est du code Shopify.
• Le support de Shopify, pour tout ce qui subsiste une fois que l'API contient la bonne valeur.

Voyez cela comme un interrupteur : Pandectes est l'interrupteur, Shopify est le câblage et les lampes. Une fois que vous avez vérifié que l'interrupteur bascule, une lampe qui reste allumée est une question de câblage.

Boutiques headless et personnalisées

La même API, les mêmes méthodes et la même signification de '', 'yes' et 'no' s'appliquent sur une boutique headless. La vérification rapide dans la console fonctionne telle quelle. Ce qui change, c'est la façon d'exécuter les deux extraits, ainsi qu'un paramètre supplémentaire.

Vous n'avez pas de theme.liquid

Les pages de votre boutique sont votre propre code, il n'y a donc nulle part où coller l'extrait de thème tel quel. Deux options :

Option A : le coller dans la console du navigateur (rien à déployer).
Copiez tout ce qui se trouve entre <script> et </script> dans l'extrait de thème, ouvrez votre boutique dans une fenêtre de navigation privée vierge avec la bannière affichée, collez-le dans la Console et appuyez sur Entrée. Vous obtenez immédiatement le tableau ON PAGE LOAD, puis le tableau AFTER the visitor decided quand vous cliquez sur la bannière.

Option B : l'ajouter à votre propre layout racine.
Ajoutez le même bloc <script> à ce qui s'affiche sur chaque page : le layout racine dans Hydrogen ou Next.js, index.html dans une application Vite/React, etc. Supprimez-le une fois les tests terminés.

L'extrait 2 s'exécute sur le checkout, pas sur votre boutique

Les web pixels de Shopify ne s'exécutent pas sur les pages que vous hébergez vous-même. Ils s'exécutent sur les surfaces que Shopify détient : le checkout et la page de statut de commande / de remerciement. Pour voir la sortie de l'extrait du pixel, ajoutez un produit au panier et passez au checkout avec la console ouverte. La décision de consentement prise sur votre boutique devrait déjà être en place au démarrage du pixel.

Un paramètre supplémentaire : vos deux domaines

Sur une boutique headless, Shopify a besoin des domaines de la boutique et du checkout avant de pouvoir enregistrer le consentement. La documentation de Shopify exige ces valeurs pour les boutiques personnalisées :

• headlessStorefront
• storefrontRootDomain
• checkoutRootDomain
• storefrontAccessToken

Pandectes les envoie avec chaque écriture de consentement, à partir de la configuration de votre application. S'ils sont manquants ou incorrects dans l'admin Pandectes, l'écriture vers Shopify ne peut pas aboutir, et currentVisitorConsent() continuera de renvoyer des chaînes vides. Si votre test headless échoue, vérifiez-les en premier.

Les domaines doivent aussi former une paire cohérente : le domaine de la boutique et celui du checkout doivent appartenir à la même boutique, afin que la décision prise sur la boutique soit celle que voit le checkout.

Ce qu'il ne faut pas utiliser pour vérifier

Ces vérifications mesurent soit autre chose, soit ne font pas partie de l'API documentée.

Ne vous attendez pas à ce que shouldShowBanner passe à false après le consentement

De nombreux commerçants s'attendent à ce que shouldShowBanner() soit à true avant le consentement et à false ensuite, et signalent un bug quand il reste à true.

Ce n'est pas une méthode de consentement. Shopify la documente comme indiquant si le client actuel se trouve dans une région configurée pour afficher une bannière de cookies. Un visiteur allemand est toujours en Allemagne après Accept, donc la réponse est toujours true. Un shouldShowBanner() qui reste à true après le consentement est attendu.

Il en va de même pour saleOfDataRegion(), qui indique si le client actuel se trouve dans une région configurée pour les opt-outs de vente de données. C'est aussi une vérification de région.

Ne vous fiez pas à getTrackingConsent, getRegulation ou isRegulationEnforced

Elles ne figurent pas dans la documentation de la Customer Privacy API de Shopify. Ce sont des valeurs internes que Shopify peut modifier ou supprimer. En particulier, getTrackingConsent() qui renvoie "yes" avant le consentement ne prouve pas que quoi que ce soit a été accordé.

N'utilisez pas userCanBeTracked ni userDataCanBeSold

Elles existent, mais Shopify les classe dans la documentation héritée (legacy) et déconseille de commencer de nouvelles intégrations avec elles. Utilisez plutôt currentVisitorConsent() et les quatre méthodes Allowed().

Ne cherchez pas de cookie _tracking_consent dans document.cookie

La documentation de Shopify indique de ne pas lire ni modifier directement les cookies Shopify. Shopify ne garantit pas que son cookie de consentement soit lisible depuis JavaScript, qu'il porte un nom particulier ou qu'il existe dans une version donnée. Ne pas le trouver ne prouve rien.

Ne jugez pas l'application selon qu'un pixel ou une requête réseau se déclenche encore

Une requête qui quitte le navigateur est un résultat côté Shopify. Si le signal de consentement est correct et qu'un pixel Shopify se déclenche malgré tout, Shopify a reçu la bonne information et a choisi d'exécuter le pixel, généralement parce que la Permission de ce pixel est Not required dans Settings → Customer events, ou parce que le canal de vente est configuré pour s'exécuter sans consentement. Corrigez-le à cet endroit.

Ne comparez pas les entrées de window.dataLayer

Le dataLayer relève du Google Consent Mode, un système distinct de la Customer Privacy API de Shopify. Pandectes écrit dans les deux, et le canal Google & YouTube de Shopify écrit aussi ses propres entrées. Plusieurs entrées consent y sont normales et ne permettent pas de vérifier l'API Shopify.

Ne vous attendez pas à un appel setTrackingConsent à chaque chargement de page

Pandectes n'écrit dans Shopify que lorsque l'état change. Si Shopify détient déjà la même décision, l'application ne la renvoie pas. Lors d'un rechargement après le consentement, vous devriez voir les valeurs stockées mais aucune nouvelle écriture.

Ne vous inquiétez pas si sale_of_data reste vide

sale_of_data est pertinent là où un opt-out de vente de données s'applique (principalement certains États américains). Si le visiteur ne se trouve pas dans une telle région, ou si Do not sell my data n'est pas activé dans Pandectes, ce champ est omis de ce que Pandectes envoie. Un sale_of_data vide pour un visiteur de l'UE est attendu.

Référence rapide : les méthodes documentées

Si le test échoue réellement

Déterminez d'abord quelle moitié a échoué.

Si le signal est correct, c'est-à-dire que currentVisitorConsent() passe de vide à 'yes' ou 'no' quand vous cliquez, alors l'application écrit bien le consentement. Tout le reste relève de Shopify. Vérifiez la Permission de chaque pixel dans Settings → Customer events, puis la configuration des canaux de vente, puis le support de Shopify.

Si le signal est absent, c'est-à-dire que currentVisitorConsent() renvoie toujours des chaînes vides après avoir cliqué sur un bouton de la bannière, vérifiez dans cet ordre :

1. L'app embed Pandectes est activé dans le thème que vous testez (Online Store → Themes → Customize → App embeds).
2. Vous testez le thème actif, et non l'aperçu d'un autre thème.
3. Aucune autre application de consentement n'est installée. Deux applications de consentement qui écrivent dans la même API entreront en conflit. Une seule doit être active.
4. Vous n'êtes pas dans une session d'aperçu admin, qui peut se comporter différemment d'une vraie visite.
5. Boutiques headless uniquement : le domaine de la boutique, le domaine du checkout et le storefront access token sont correctement renseignés dans l'admin Pandectes.

Le problème persiste ? Contactez [email protected] en indiquant :

• le domaine de votre boutique (et, pour une boutique headless, les domaines de la boutique et du checkout)
• le pays depuis lequel vous avez testé
• la sortie de la console de la vérification rapide ou de l'extrait de thème, aux trois moments (avant le clic / après le clic / après le rechargement)

Nettoyage une fois terminé

Ne sautez pas cette étape. La vérification rapide dans la console n'installe rien. Les deux extraits sont temporaires.

1. Extrait de thème : ouvrez layout/theme.liquid, supprimez le bloc qui commence par {% comment %} PANDECTES CONSENT CHECK, puis Save. Si vous avez testé sur un thème dupliqué, vous pouvez supprimer cette copie du thème.
2. Extrait du pixel : allez dans Settings → Customer events, ouvrez Pandectes consent check, Disconnect puis Delete.
3. Boutiques headless : si vous avez ajouté le script à votre propre layout, supprimez-le et redéployez. Si vous avez utilisé la console du navigateur, il suffit de fermer l'onglet.

Pourquoi c'est important :

• L'extrait de thème affiche des détails de consentement dans la console de chaque visiteur, sur chaque page, tant que vous ne le supprimez pas.
• Le pixel de test est configuré avec Permission: Not required, il s'exécute donc avant le consentement par conception. C'est correct pour un court test et inadapté à une boutique en production.
• Les deux ajoutent du travail à chaque chargement de page sans aucun bénéfice une fois la vérification terminée.

Les supprimer ne modifie pas l'intégration. L'application continue de transmettre le consentement à Shopify comme avant.

Résumé

Vérifiez cette intégration avec currentVisitorConsent(). Des chaînes vides avant un choix, 'yes' ou 'no' immédiatement après, et les mêmes valeurs après rechargement signifient que Pandectes a écrit la décision dans Shopify. Le chargement des pixels, les canaux de vente et le comportement du checkout au-delà de ce point relèvent de la responsabilité de Shopify. Supprimez tous les extraits temporaires de thème ou de pixel quand vous avez terminé.

Mis à jour le : 02/10/2026