Guide gratuit

Google / Microsoft Mode de consentement (consent mode) & événements clients sur Shopify (100% RGPD)

Ce guide technique s’adresse aux utilisateurs de Shopify localisés en Europe et soumis au RGPD. Il explique en détail comment intégrer Google Consent Mode v2 & le nouveau Microsoft Consent Mode de manière conforme au RGPD, en exploitant les Shopify Customer Events (événements clients) et la Web Pixels API.

10 min de lecture
5 chapitres
Aucun email demandé

Depuis la mise à jour du Consent Mode par Google & Microsoft, une nouvelle exigence s’est imposée : s’assurer que les balises Google/Microsoft (Analytics, Ads…) respectent les choix de consentement des visiteurs, sans compromettre la qualité de la donnée. Dans un environnement comme Shopify, cela nécessite une configuration fine, en particulier parce que :

Les scripts tiers ne peuvent plus s’exécuter sans consentement explicite en Europe
Le checkout Shopify est isolé du storefront, ce qui pose des défis de synchronisation du consentement
La mise en place de Custom Pixels est devenue le standard recommandé, mais reste peu documentée et les scripts sont sandboxés.

L’objectif de ce guide est de vous fournir un cadre pratique, technique et opérationnel pour :

Configurer correctement le Google Consent Mode v2 avancé & Microsoft Consent Mode dans votre boutique Shopify
Sélectionner la méthode la plus adaptée selon le bandeau cookie utilisé : Pandectes, Cookiebot, CookieYes, etc.
Garantir la conformité RGPD tout en maintenant la qualité des données marketing (Analytics, Ads…)

Le contenu repose sur des tests réels, des retours de mise en production et des scripts personnalisés.

Prêt à professionnaliser votre gestion du consentement sur Shopify ? Suivez le guide étape par étape 👇

Google / Microsoft Consent Mode permet d’adapter dynamiquement le comportement de vos balises (Analytics, Ads, etc.) en fonction des choix de consentement des visiteurs. Deux commandes sont utilisées :

consent default : appliquée automatiquement à l’arrivée sur le site, avant que l’utilisateur n’interagisse avec le bandeau
consent update : déclenchée dès que le visiteur accepte ou refuse certaines catégories de cookies

Ces commandes transmettent les statuts de consentement pour chaque type de stockage : ad_storage, analytics_storage, functionality_storage, etc. Les balises GTM peuvent alors conditionner leur exécution en conséquence.

Shopify & les Customer Events (événements clients)

Shopify permet désormais de créer des Custom Pixels qui s’exécutent sur les pages du storefront et capturent les interactions via des Customer Events. Ces événements remplacent les anciens scripts de suivi injectés directement dans le thème ou le checkout.

Exemple d’événements standards disponibles :

cart_viewed
checkout_completed
checkout_shipping_info_submitted
checkout_started
collection_viewed
page_viewed
payment_info_submitted
product_added_to_cart
product_removed_from_cart
product_viewed
search_submitted

Il est aussi possible d’émettre des événements personnalisés comme custom_click pour des besoins spécifiques de suivi.

🔐 Synchroniser le consentement utilisateur dans Shopify

Shopify expose une API appelée Shopify.customerPrivacy qui permet de vérifier dynamiquement si un utilisateur peut être suivi ou non, selon les choix qu’il a exprimés dans le bandeau cookie.

📋 Structure de l’objet de consentement

{
  "analyticsProcessingAllowed": boolean,
  "marketingAllowed": boolean,
  "preferencesProcessingAllowed": boolean,
  "saleOfDataAllowed": boolean
}

✅ Fonctions utiles disponibles en JavaScript

window.Shopify.customerPrivacy.userCanBeTracked() – retourne true si l’utilisateur a donné son accord à la fois pour l’analytics et le marketing
window.Shopify.customerPrivacy.userDataCanBeSold() – retourne true si l’utilisateur n’a pas explicitement refusé la vente de ses données
window.Shopify.customerPrivacy.saleOfDataRegion() – retourne la région juridique détectée pour le visiteur (ex: ca, us, eu)

Ces méthodes sont précieuses pour déterminer la logique de déclenchement des balises dans vos pixels personnalisés, notamment lors de la première visite ou sur les pages checkout où certains bandeaux ne se chargent pas.

Un Custom Pixel bien conçu exploitera ces API pour ne pousser des événements dans la dataLayer qu’après avoir validé la disponibilité du consentement. Cette vérification garantit que vos tags GTM respecteront les choix de l’utilisateur.

🧰 Préparation : prérequis techniques

Avant de plonger dans la configuration de Google / Microsoft Consent Mode et des Custom Pixels, il est essentiel de préparer proprement votre environnement Shopify et GTM. Cette étape permet d’éviter les conflits, les doublons de tracking, ou un comportement inattendu des balises.

✅ Ce que vous devez avoir ou vérifier

Un compte Google Tag Manager avec un container Web actif
Un accès à Shopify Admin et à l’éditeur de thème (code)
Un système de bandeau cookie compatible (voir section suivante pour les options)
Des connaissances de base sur les Snippets Shopify, et le javascript ou un développeur pour vous assister

🧹 Nettoyer les anciennes configurations

De nombreux stores Shopify ont encore des traces de tracking obsolètes. Ces éléments doivent être supprimés avant d’activer une gestion propre du consentement :

Désactiver l’app Google & YouTube si elle est active et utilisée uniquement pour les conversions, sinon dans les paramètres désactivez le suivi des conversions uniquement
Supprimer les anciens scripts GA ou gtag.js injectés via le code Scripts supplémentaires de la page de statut de commande de Shopify dans /settings/checkout

Supprimer tout ancien système dans le thème qui déclencherait des appels GA ou Ads sans consentement : TripleWhale (désactivation du Sonaar), Voluum (désactivation des intégrations) …

Contrairement à ce que prétendent certains fournisseurs, très peu de CMP tiers gèrent automatiquement Google Consent Mode V2 ou le Microsoft Consent Mode correctement dans Shopify.
Et encore moins en tenant compte des Customer Events. Voici comment tout relier proprement.

Conditions : votre CMP doit mettre à disposition un cookie permettant de lire l’état du consentement par catégorie ET une API synchrone permettant d’avoir une réponse directement sur l’état de consentement par catégorie. Ce guide a été testé avec Cookiebot principalement.

CMP déjà pris en charge dans mon script ci-dessous

CMP	Cookie détecté	Consentement détecté via	Événements écoutés
Cookiebot	`CookieConsent`	Regex (`marketing:true`, `preferences:true`, etc.)	`load`, `CookiebotOnAccept`
CookieYes	`cookieyes-consent`	Regex (`advertisement:yes`, `performance:yes`, etc.)	`load`, `cookieyes_consent_update`
OneTrust	`OptanonConsent`	Regex sur `groups=C000X:1`	`load`, `OneTrustGroupsUpdated`
CookieScript	`CookieScriptConsent`	Regex sur `categories=["targeting", ...]`	`load`, `CookieScriptCategory-strict`
CookieFirst	`cookiefirst-consent`	Regex (`"performance":true`, `"advertising":true`, etc.)	`load`, `cf_consent`
🛑 Axeptio	(n/a)	❌ Requiert API asynchrone via `window._axcb.push()`	non pris en charge dans ce script

🛑 Axeptio n’est pas inclus ici car il nécessite une API asynchrone (_axcb).

Étape 1 : Insérer le script du CMP dans le thème

Accédez à Boutique en ligne > Themes > Modifier le code du thème actuellement publié

Puis ouvrez theme.liquid. Recherchez la ligne :

<head>

Et juste en dessous, insérez :

{% render 'cookie-consent' %}

Ensuite, créez le snippet cookie-consent.liquid dans le dossier snippets contenant le script de votre CMP, par exemple :

▶️ Exemple avec Cookiebot :

<script
  id="Cookiebot"
  src="https://consent.cookiebot.com/uc.js"
  data-cbid="VOTRE-CBID-ICI"
  type="text/javascript"
  defer>
</script>

Étape 2 : synchroniser le consentement CMP → Shopify

Dans le même snippet cookie-consent.liquid, ajoutez ce code à la suite du script principal de votre CMP :

<script>
  let lastSyncedConsent = null;

  function syncConsentToShopify(consent) {
    window.Shopify.loadFeatures([{ name: "consent-tracking-api", version: "0.1" }], function (error) {
      if (error) return console.error("❌ Erreur chargement API Shopify");

      const payload = {
        analytics: consent?.statistics || false,
        marketing: consent?.marketing || false,
        preferences: consent?.preferences || false,
        sale_of_data: consent?.sale_of_data || consent?.marketing || false,
      };

      window.Shopify.customerPrivacy.setTrackingConsent(payload, () => {
        console.log("🟢 Consent Shopify synchronisé :", payload);
      });
    });
  }

  function publishConsentEvent(eventPayload) {
    if (Shopify?.analytics?.publish) {
      Shopify.analytics.publish("cookie_consent", eventPayload);
      console.log("🔔 Event 'cookie_consent' publié via Shopify.analytics :", eventPayload);
    } else {
      console.warn("⚠️ Shopify.analytics.publish indisponible.");
    }
  }

  function parseConsentByCMP() {
    const cookieString = decodeURIComponent(document.cookie);
    const match = (pattern) => new RegExp(pattern, "i").test(cookieString);

    const consent = {
      marketing:
        match("marketing[:=]true") ||
        match("advertising[:=]true") ||
        match("C0004:1") || match("C0005:1") ||
        match("targeting") ||
        match("advertisement:yes"),

      statistics:
        match("statistics[:=]true") ||
        match("performance[:=]true") ||
        match("analytics[:=]true") ||
        match("C0002:1") ||
        match("performance") ||
        match("analytics:yes"),

      preferences:
        match("preferences[:=]true") ||
        match("functional[:=]true") ||
        match("C0003:1") ||
        match("functionality") ||
        match("functional:yes"),

      sale_of_data:
        match("marketing[:=]true") ||
        match("advertising[:=]true") ||
        match("advertisement:yes") ||
        match("C0004:1") || match("C0005:1")
    };

    // CMP auto-détecté
    if (match("CookieConsent")) window.__detectedCMP = "Cookiebot";
    else if (match("cookieyes-consent")) window.__detectedCMP = "CookieYes";
    else if (match("OptanonConsent")) window.__detectedCMP = "OneTrust";
    else if (match("CookieScriptConsent")) window.__detectedCMP = "CookieScript";
    else if (match("cookiefirst-consent")) window.__detectedCMP = "CookieFirst";
    else window.__detectedCMP = "Aucun";

    return consent;
  }

  function syncConsentFromCookies() {
    const consent = parseConsentByCMP();
    if (!consent) return;

    const same = JSON.stringify(consent) === JSON.stringify(lastSyncedConsent);
    if (same) {
      console.log("⏩ Consent inchangé, aucune action nécessaire.");
      return;
    }

    lastSyncedConsent = consent;

    console.log("📡 CMP détecté :", window.__detectedCMP);
    console.log("📦 Consent extrait via scan cookie :", consent);

    syncConsentToShopify(consent);
    publishConsentEvent(consent);
  }

  // ▶️ Chargement de base
  window.addEventListener("load", syncConsentFromCookies);

  // ▶️ Événements spécifiques aux CMP
  window.addEventListener("CookiebotOnAccept", syncConsentFromCookies);               // Cookiebot
  document.addEventListener("cookieyes_consent_update", syncConsentFromCookies);      // CookieYes
  window.addEventListener("OneTrustGroupsUpdated", syncConsentFromCookies);           // OneTrust
  window.addEventListener("cf_consent", syncConsentFromCookies);                      // CookieFirst
  window.addEventListener("CookieScriptCategory-strict", syncConsentFromCookies);     // CookieScript
</script>

Ce code permet de transférer les choix de votre CMP vers l’API Shopify.customerPrivacy, pour que Shopify et donc a posteriori le customer event (événement client) qui gère GTM et le Consent Mode, sache comment adapter celui-ci.

🎯 Pour adapter le script de synchronisation du consentement à un autre CMP, il suffit de suivre trois étapes simples : d’abord, brancher le bon événement déclencheur (chaque CMP a le sien : CookiebotOnAccept, cookieyes_consent_update, etc.) ; ensuite, lire les choix de consentement soit via une API JS exposée (comme window.Cookiebot.consent), soit en scannant les cookies avec une regex (solution la plus robuste) ; enfin, mapper les catégories du CMP vers le format attendu par Shopify (analytics, marketing, preferences, sale_of_data). Attention : Axeptio ne fonctionne pas avec des événements standards, il est asynchrone, nécessite _axcb.push() et un accès manuel aux choices. Bref : évitez Axeptio si possible, il est plus lourd à intégrer que les autres.

Étape 3 : créer un Custom Pixel qui pousse le consentement vers Google/Microsoft

Allez dans Paramètres > Evenements Clients (Customer Events)
Cliquez sur Ajouter un pixel personnalisé

Collez ce code :


  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  let customerPrivacyStatus = init.customerPrivacy;
  let lastConsentHash = null;

  const initializeGtmTag = (w, d, s, l, i) => {
    w[l] = w[l] || [];
    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
    const f = d.getElementsByTagName(s)[0];
    const j = d.createElement(s);
    const dl = l !== 'dataLayer' ? '&l=' + l : '';
    j.async = true;
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
  };

  // 🔁 Charge GTM
  initializeGtmTag(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX');

  const getConsentObject = (privacy) => ({
    ad_storage: privacy?.marketingAllowed ? 'granted' : 'denied',
    analytics_storage: privacy?.analyticsProcessingAllowed ? 'granted' : 'denied',
    ad_user_data: privacy?.saleOfDataAllowed ? 'granted' : 'denied',
    ad_personalization: privacy?.preferencesProcessingAllowed ? 'granted' : 'denied',
  });

  const getUetConsentObject = (privacy) => ({
    ad_storage: privacy?.marketingAllowed ? 'granted' : 'denied',
  });

  const logConsentStatus = (title, consentObj) => {
    console.log(`%c${title}`, 'background: black; color: white; font-weight: bold; padding: 2px;');
    Object.entries(consentObj).forEach(([key, value]) => {
      const color = value === 'granted' ? 'green' : 'red';
      console.log(`%c${key}: %c${value}`, 'font-weight:bold;', `color: ${color}`);
    });
  };

  // ❌ Valeurs par défaut (obligatoire)
  gtag('consent', 'default', {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    wait_for_update: 500
  });

  window.uetq = window.uetq || [];
  window.uetq.push('consent', 'default', { ad_storage: 'denied' });

  // ✅ Consentement : update ssi changé
  function syncConsentToPixels(privacy) {
    const gtagConsent = getConsentObject(privacy);
    const uetConsent = getUetConsentObject(privacy);
    const currentHash = JSON.stringify(gtagConsent) + JSON.stringify(uetConsent);

    if (currentHash === lastConsentHash) {
      console.log("⏩ Consent mode Google/Microsoft inchangé, aucun push.");
      return;
    }

    lastConsentHash = currentHash;

    gtag('consent', 'update', gtagConsent);
    window.uetq.push('consent', 'update', uetConsent);
    logConsentStatus('🔍 Consent mode Google/Microsoft mis à jour :', gtagConsent);
    dataLayer.push({ event: "consent_mode_updated" });
  }

  // 🔄 Consent initial
  syncConsentToPixels(customerPrivacyStatus);

  // 🔁 Écoute des changements
  api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
    customerPrivacyStatus = event.customerPrivacy;
    syncConsentToPixels(customerPrivacyStatus);
  });

// Étape : pousser les Customer Events (exemple)
// analytics.subscribe("page_viewed", (event) => {
//   console.log("Page vue :", event);
// });

Ce pixel lit l’état réel du consentement Shopify (via la Customer Privacy API) et l’envoie à gtag() pour informer Google (Analytics, Ads…) & Microsoft.

Connexion du Pixel

Après avoir collé le code, cliquez sur “Enregistrer”, puis “Connecter” pour activer le pixel.

⚠️ Attention : pas d’intégration de votre CMP dans GTM

Sur Shopify, le script du CMP ne peut pas être injecté par GTM car GTM est contenu dans un sandbox (Custom Pixel). Il faut séparer les logiques :

Shopify gère le front-end et le consentement via votre CMP intégré dans votre thème (fichiers .liquid)
Le Custom Pixel (customer event) transmet ce consentement au dataLayer
Le Custom Pixel adapte le consent mode
GTM déclenche ou non les balises en fonction du consentement (consent mode ou pas)

Méthode recommandée : Pandectes + Elevar (sans code)

Si vous recherchez une solution fiable, RGPD-compatible et sans code pour gérer le consentement (Google consent mode v2) et le tracking sur Shopify, l’association Pandectes (CMP) et Elevar (Tag Management Suite) est à privilégier.

Pourquoi cette combinaison est idéale

✅ Le Google/Microsoft Consent Mode est automatiquement géré via GTM
✅ Consentement utilisateur synchronisé sans codage grâce à l’intégration native
✅ Tracking server-side et client-side possible via Elevar
✅ Compatible Shopify Checkout (limites contournées via Elevar)

Étapes d’intégration

Installez l’application Pandectes GDPR Compliance depuis l’App Store Shopify.

Dans le tableau de bord Pandectes, cliquez sur “Customize”, puis allez dans l’onglet Behavior.
Sous Banner type / Consent Mode, sélectionnez le mode suivant : Accepter / Refuser (RGPD friendly)
Enregistrez les modifications. Ce paramétrage bloque tous les cookies non nécessaires tant que l’utilisateur n’a pas donné son consentement.
Laissez l’option Google Consent Mode de Pandectes désactivée :
(Settings > Integrations > Google Consent Mode = OFF)
Cette option est gérée côté GTM grâce au container Elevar.

Importer le template de conteneur Elevar avec Pandectes dans GTM

Installez l’application Elevar. Connectez-vous ensuite à votre espace Elevar
Allez dans “Pre-Built Tags”, recherchez Pandectes

Téléchargez le container Pandectes
Dans GTM, cliquez sur “Admin > Importer le conteneur”
Choisissez le fichier téléchargé, puis :
- Sélectionnez “Fusionner”
- Et “Ecraser les conflits”
Publiez le container en cliquant sur “Publier”

Ce que fait l’intégration automatiquement

Initialise GTM avec un consent default strict
Envoie un consent update dès que l’utilisateur interagit avec la bannière
Fait correspondre chaque type de consentement avec les bonnes variables GTM (analytics, ads…)

Et les scripts Shopify hors GTM ?

Si vous utilisez des apps Shopify comme Klaviyo ou des scripts injectés dans le thème, ceux-ci ne sont pas automatiquement bloqués par GTM. Pandectes propose une solution pour cela :

Utiliser la fonction “Script blocking” de Pandectes
Ajouter des regex d’URL pour bloquer les appels aux domaines de tracking tiers
Ou demander au support Pandectes de le faire pour vous

Conclusion : cette méthode est clé en main pour les e-commerçants Shopify. Elle ne requiert aucune personnalisation du code et fonctionne même avec les configurations complexes (checkout, server-side, etc.).

À retenir : L’association Pandectes + Elevar permet une gestion complète du consentement sans écrire une ligne de JavaScript. C’est la méthode recommandée pour tout store Shopify souhaitant une solution conforme et évolutive.

🧪 Test et debug

Chrome DevTools > Network > Rechercher collect?v=2
Inspecter la console pour les logs 🟢 Consent Mode mis à jour
Vérifier que les événements ne partent pas sans consentement

Principes techniques : Google / Microsoft Consent Mode et Shopify

Google / Microsoft Consent Mode : fonctionnement général