Cookiebot CMP

1Rôle et objectif

Ce que cette configuration vous apporte :

• La conformité RGPD et ePrivacy pour les visiteurs de l'UE
• Le Consent Mode v2, avec « Denied » comme état par défaut
• Un contrôle fin par catégorie (mesure d'audience, marketing, préférences)
• Un consentement synchronisé vers toutes les destinations (GTM, Shopify Privacy API)
• Aucun tracking marketing sans consentement explicite

2Architecture du consentement

Flux complet du consentement

Addingwell injecte GTM
      ↓
GTM charge Cookiebot (Consent Initialization)
      ↓
Cookiebot affiche la bannière
      ↓
Le visiteur accepte / refuse
      ↓
Mise à jour du Consent Mode v2 (ad_storage, analytics_storage...)
      ↓
Les balises GTM se déclenchent selon le consentement
      ↓
Passerelle → Shopify Privacy API (web pixels et pixels personnalisés)

Chaîne d'intégration

1. 1Addingwell injecte GTM sur toutes les pages de la boutique
2. 2GTM charge la balise Cookiebot CMP sur le déclencheur Consent Initialization (initialisation du consentement), avant tout tracking
3. 3Cookiebot affiche la bannière, recueille le consentement et active le Consent Mode v2
4. 4GTM autorise ou bloque les balises (GA4, Meta, Google Ads, etc.) selon le consentement

Principes fondamentaux

• Cookiebot est la seule CMP : jamais de seconde bannière
• Le consentement est refusé par défaut (« Denied ») pour toutes les catégories
• Les balises GTM attendent la mise à jour du consentement avant de se déclencher
• La passerelle transmet le consentement à Shopify pour les pixels
• La bannière native de Shopify doit être désactivée
• Cookiebot est chargé par GTM (Addingwell) : aucun script dans le thème
• Inutile d'installer l'app Shopify Cookiebot ou d'activer l'intégration Shopify dans le tableau de bord Cookiebot

3Configuration du tableau de bord

Créer le compte Cookiebot

1. 1Créer un compte sur cookiebot.com
2. 2Ajouter le domaine de la boutique
3. 3Récupérer le Domain Group ID (CBID) dans Cookiebot > Settings > Domain Group
4. 4Noter le CBID : il servira dans la balise GTM

Tableau de bord (cookiebot.com)

Bannière (Cookiebot > Banner)

La bannière de consentement s'affiche sur toutes les pages lors de la première visite. GTM la charge via la balise Cookiebot CMP : aucun script dans le thème.

Privacy Trigger

Le Privacy Trigger est le petit bouton flottant qui permet au visiteur de modifier son consentement. Désactivez-le (OFF) : la gestion du consentement reste accessible depuis la page /pages/politique-de-cookies et le lien du pied de page.

Déclaration

4Passerelle de consentement (Shopify Privacy API)

Pourquoi une passerelle ?

Cookiebot gère le consentement pour GTM. Mais les web pixels et les pixels personnalisés de Shopify passent par la Shopify Customer Privacy API. La passerelle aligne les deux.

Fonctionnement

Mise à jour du consentement Cookiebot
      ↓
Événement CookiebotOnConsentReady
      ↓
La passerelle lit Cookiebot.consent.marketing
      ↓
Shopify.customerPrivacy.setTrackingConsent({
marketing: true/false
})
      ↓
Web pixels Shopify déclenchés / bloqués

Étape 1 : créer le snippet

Créez un snippet cookie-consent_boostecom.liquid et collez-y le code suivant :

<script>
/**
 * Cookiebot → Shopify Customer Privacy Sync (EU/US, Prod)
 *
 * - Charge l'API Shopify "consent-tracking-api"
 * - Deny-by-default tant que Cookiebot n'a pas fourni le consentement
 * - Sync Cookiebot → Shopify sur chaque événement (ready/accept/decline)
 * - Retry loop pour gérer le chargement asynchrone
 */
(function () {
  "use strict";

  var CONSENT_PROFILE = "EU"; // "EU" or "US"

  var CFG = {
    defaultConsent: {
      analytics: false,
      marketing: false,
      preferences: false,
      sale_of_data: false
    },
    retry: { intervalMs: 1000, maxTries: 60 }
  };

  function hasCookiebot() {
    return !!(window.Cookiebot && Cookiebot.consent);
  }

  function safeSetShopifyConsent(consentObj) {
    try {
      if (!window.Shopify || !Shopify.customerPrivacy) return false;
      Shopify.customerPrivacy.setTrackingConsent(consentObj);
      return true;
    } catch (e) { return false; }
  }

  function mapCookiebotToShopify() {
    var C = Cookiebot.consent;
    return {
      analytics: !!C.statistics,
      marketing: !!C.marketing,
      preferences: !!C.preferences,
      sale_of_data: false
    };
  }

  function initShopifyConsentApi() {
    try {
      if (!window.Shopify || typeof Shopify.loadFeatures !== "function") return;
      Shopify.loadFeatures(
        [{ name: "consent-tracking-api", version: "0.1" }],
        function () { safeSetShopifyConsent(CFG.defaultConsent); }
      );
    } catch (e) {}
  }

  function syncFromCookiebot() {
    try {
      if (!hasCookiebot()) return false;
      if (!window.Shopify || !Shopify.customerPrivacy) return false;
      return safeSetShopifyConsent(mapCookiebotToShopify());
    } catch (e) { return false; }
  }

  function attachCookiebotListeners() {
    try {
      window.addEventListener("CookiebotOnConsentReady", syncFromCookiebot);
      window.addEventListener("CookiebotOnAccept", syncFromCookiebot);
      window.addEventListener("CookiebotOnDecline", syncFromCookiebot);
    } catch (e) {}
  }

  function startRetryLoop() {
    var tries = 0;
    var t = setInterval(function () {
      tries += 1;
      var ok = syncFromCookiebot();
      if (ok || tries >= CFG.retry.maxTries) clearInterval(t);
    }, CFG.retry.intervalMs);
  }

  initShopifyConsentApi();
  attachCookiebotListeners();
  startRetryLoop();

  void CONSENT_PROFILE;
})();
</script>

Étape 2 : l'inclure dans theme.liquid

Dans theme.liquid, ajoutez ceci après {{ content_for_header }} :

{% render 'cookie-consent_boostecom' %}

Détails techniques

• Utilise Shopify.loadFeatures([{ name: "consent-tracking-api", version: "0.1" }])
• Écoute CookiebotOnConsentReady, CookiebotOnAccept et CookiebotOnDecline
• Fait correspondre Cookiebot.consent.statistics → analytics et Cookiebot.consent.marketing → marketing
• sale_of_data toujours à false (aucune vente de données)
• Nouvelle tentative toutes les 1 000 ms, 60 fois au maximum, pour absorber le chargement asynchrone
• Refus par défaut tant que Cookiebot n'a pas transmis l'état du consentement

5Page de déclaration des cookies

Le RGPD impose une page « Politique de cookies » dédiée, qui liste les cookies utilisés. Cette page est distincte de la politique de confidentialité : ce sont deux obligations légales différentes (le traitement des données personnelles d'un côté, le dépôt de traceurs de l'autre).

Étape 1 : créer la page dans Shopify

• Contenu > Pages > Ajouter une page
• Titre : Politique de cookies
• URL (handle) : /pages/politique-de-cookies

Étape 2 : coller le contenu (texte et script)

Dans l'éditeur Shopify, passez en mode HTML (</>) et collez le contenu ci-dessous. Le texte suit les recommandations de la CNIL, et le script Cookiebot placé en bas affiche automatiquement la liste des cookies :

<p>La présente politique de cookies explique comment notre site utilise des cookies et autres traceurs lorsque vous le consultez.</p>

<h2>1. Qu'est-ce qu'un cookie ?</h2>
<p>Un cookie est un petit fichier texte déposé et lu lors de la consultation d'un site internet, quel que soit le type de terminal utilisé (ordinateur, smartphone, tablette). Les cookies permettent notamment d'assurer le bon fonctionnement du site, d'améliorer votre expérience utilisateur, de mesurer l'audience et, avec votre consentement, de vous proposer des contenus et publicités personnalisés.</p>

<h2>2. Quels types de cookies utilisons-nous ?</h2>

<h3>Cookies strictement nécessaires</h3>
<p>Ces cookies sont indispensables au bon fonctionnement du site et ne peuvent pas être désactivés. Ils permettent par exemple de mémoriser le contenu de votre panier ou d'assurer la sécurité du site.</p>

<h3>Cookies de mesure d'audience</h3>
<p>Ces cookies nous permettent d'analyser la fréquentation et l'utilisation du site afin d'en améliorer les performances.</p>

<h3>Cookies marketing</h3>
<p>Ces cookies peuvent être utilisés pour vous proposer des publicités adaptées à vos centres d'intérêt sur notre site ou sur des sites tiers.</p>

<h3>Cookies de personnalisation</h3>
<p>Ces cookies permettent d'améliorer et de personnaliser les fonctionnalités du site.</p>

<h2>3. Base légale</h2>
<p>Les cookies strictement nécessaires sont déposés sur la base de notre intérêt légitime à assurer le bon fonctionnement du site. Les autres cookies (mesure d'audience, marketing, personnalisation) sont déposés uniquement après obtention de votre consentement.</p>

<h2>4. Gestion de vos préférences</h2>
<p>Lors de votre première visite sur notre site, un bandeau vous informe de l'utilisation de cookies et vous permet d'accepter, de refuser ou de paramétrer leur utilisation.</p>

<p>Vous pouvez modifier ou retirer votre consentement à tout moment en cliquant sur le lien prévu à cet effet ou en reconfigurant vos préférences via notre outil de gestion des cookies.</p>

<h2>5. Durée de conservation</h2>
<p>Les cookies sont conservés pour une durée maximale de 13 mois conformément aux recommandations de la CNIL.</p>

<h2>6. Cookies déposés sur le site</h2>
<p>La liste détaillée et mise à jour des cookies utilisés sur notre site figure ci-dessous :</p>

<!-- Cookiebot Declaration -->
<script id="CookieDeclaration"
  src="https://consent.cookiebot.com/VOTRE-CBID/cd.js"
  type="text/javascript"
  async></script>

Étape 3 : ajouter le lien dans le pied de page

La page doit être accessible depuis le pied de page (avec les autres pages légales) et depuis le lien de la bannière Cookiebot. Sans lien visible, la boutique n'est pas conforme aux exigences de la CNIL.

6Catégories de consentement

Catégories de consentement Google

Correspondance Cookiebot → Consent Mode

Consentement par destination

7Régions Shopify

Shopify propose sa propre bannière de cookies (Paramètres > Confidentialité des clients). Elle doit être désactivée, puisque le consentement est géré par Cookiebot via GTM.

Configuration des régions

L'option EEA + UK de Cookiebot (Add Geo Regions) limite l'affichage de la bannière aux visiteurs européens et britanniques. Les visiteurs situés hors de ces zones ne voient aucune bannière (consentement implicite).

Comment les désactiver

1. 1Admin Shopify → Paramètres → Confidentialité des clients
2. 2Section « Bannière concernant les cookies » : décocher toutes les régions et désactiver « Utiliser les paramètres automatisés »
3. 3Section « Page d'opposition au partage de données » : décocher toutes les régions et désactiver « Utiliser les paramètres automatisés »
4. 4Enregistrer

Autres réglages Shopify

• Politique de confidentialité : elle peut rester « Automatisée ». C'est un contenu juridique, pas du tracking, et elle n'interfère pas avec Cookiebot.
• Hébergement des données : vérifier que « Union européenne » est sélectionné (cohérent avec la CDS Region .eu de Cookiebot).

Ce que la désactivation change

8Consent Mode v2

Le Consent Mode v2 (refusé par défaut) se configure dans la balise Cookiebot CMP - Declaration de GTM. Le CBID se saisit directement dans le champ Cookiebot ID de la balise, et non dans une variable séparée. Cette balise fait déjà partie du conteneur BoostEcom importé.

Configuration de la balise Cookiebot CMP

Réglages du Consent Mode

État par défaut du consentement (tout à « Denied »)

Consentement exigé par chaque balise

Chaque balise du conteneur déclare les types de consentement dont elle a besoin. GTM la bloque automatiquement tant que le visiteur n'a pas donné son accord :

9Configuration dans GTM

Balise Cookiebot CMP

• Modèle officiel Cookiebot, issu de la galerie de modèles de la communauté GTM (Community Template Gallery)
• Déclencheur : Consent Initialization - All Pages
• Cookiebot Banner ID (CBID) renseigné dans le champ Cookiebot ID de la balise
• Mode : blocage automatique (auto-blocking) activé

Ordre de chargement

1. Consent Initialization (priorité maximale)
 └── Cookiebot CMP → Denied par défaut

2. Consent Update (le visiteur accepte / refuse)
 └── Cookiebot envoie consent_update

3. Balises marketing (attendent ad_storage = Granted)
 └── Meta, Google Ads, etc.

4. Balises de mesure d'audience (attendent analytics_storage = Granted)
 └── Tracking GA4 complet

Déclenchement

Le déclencheur Consent Initialization - All Pages s'exécute avant tous les autres déclencheurs GTM : les valeurs « Denied » par défaut sont donc en place avant le moindre tracking.

10Vérification

Vérifier le Consent Mode v2

1. 1Ouvrir la console du navigateur
2. 2Taper dataLayer et repérer consent_default
3. 3Vérifier que tous les signaux sont à « denied » par défaut
4. 4Accepter les cookies dans la bannière Cookiebot
5. 5Vérifier que consent_update contient des signaux à « granted »

Vérifier la passerelle Shopify

1. 1Ouvrir la console du navigateur
2. 2Taper Shopify.customerPrivacy.getTrackingConsent()
3. 3Avant tout choix : marketing doit valoir « no_interaction »
4. 4Après acceptation : marketing doit valoir « yes »
5. 5Après refus : marketing doit valoir « no »

Vérifier les balises GTM

• Utiliser le mode Preview de GTM (aperçu)
• Avant consentement : seules les balises Cookiebot et GA4 Config se déclenchent
• Après consentement marketing : Meta et Google Ads se déclenchent
• Après consentement aux statistiques : le tracking GA4 complet se déclenche

Test avant consentement (navigation privée)

1. 1Ouvrir le site en navigation privée
2. 2Cliquer sur « Tout refuser » dans la bannière Cookiebot
3. 3Preview GTM : vérifier que seules les balises Necessary se déclenchent
4. 4Onglet Network : aucune requête vers GA4, Meta ou Google Ads

Test après consentement

1. 1Ouvrir le site en navigation privée
2. 2Cliquer sur « Tout accepter » dans la bannière
3. 3Preview GTM : les balises de mesure d'audience et marketing doivent se déclencher
4. 4DebugView de GA4 : les événements apparaissent en temps réel

Phase 2 : fondations GTM et consentement

• Conteneur GTM Web chargé par Addingwell (et non par un snippet direct)
• Balise Cookiebot CMP active dans GTM, avec « Denied » par défaut
• Cookiebot CMP se déclenche sur Consent Initialization (avant les autres balises)
• Option « Tout refuser » disponible dans la bannière
• Passerelle Cookiebot → Shopify Privacy API installée (cookie-consent_boostecom.liquid) : obligatoire
• Pixel personnalisé DataLayer Monitor actif dans Événements clients (?awdebug=1 pour le débogage)
• Régions Shopify : bannière native désactivée, bannière personnalisée limitée à EEE + Royaume-Uni

11Dépannage

12Checklist du consentement

À vérifier après chaque mise en production :