Introduction

CookiePilot est une plateforme de gestion du consentement (CMP), conforme au RGPD, a l'article 82 de la loi Informatique et Libertes (transposant la directive ePrivacy) et a Google Consent Mode v2. En France, le respect de ces regles est controle par la CNIL.

A qui ca s'adresse

Proprietaires de sites : deploiement sans aucune ligne de code.
Developpeurs : API, evenements, integrations GTM.
Agences : marque blanche, gestion multi-domaines.

Demarrage rapide

Etape 1 : Inscription

Creez un compte sur app.cookiepilot.io/register.
Ajoutez votre domaine dans le tableau de bord et copiez la cle API (format cp_live_...).

Etape 2 : Installer le code

Une installation directe, ce sont deux scripts dans le <head>, dans cet ordre.

Etape 2a : Consentement par defaut (stub inline). Collez-le en premier, avant tout autre script (cookiepilot.js, GA, GTM, balises publicitaires et de suivi) :

<script>"use strict";(function(){window.dataLayer=window.dataLayer||[];var d={ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied",functionality_storage:"denied",personalization_storage:"denied",security_storage:"granted",wait_for_update:500},h=false;try{for(var i=0;i<window.dataLayer.length;i++){var x=window.dataLayer[i];if(x&&x[0]==="consent"&&x[1]==="default"){h=true;break}}}catch(err){}if(!h&&window.dataLayer.length)window.dataLayer.unshift(["consent","default",d]);window.gtag=function(){window.dataLayer.push(arguments)};if(!h)window.gtag("consent","default",d);var a=document.cookie.match(/(^|)cookiepilot_consent=([^;]+)/);if(a){try{var e=JSON.parse(decodeURIComponent(a[2]));window.gtag("consent","update",{analytics_storage:e.analytics?"granted":"denied",ad_storage:e.marketing?"granted":"denied",ad_user_data:e.marketing?"granted":"denied",ad_personalization:e.marketing?"granted":"denied",functionality_storage:e.preferences?"granted":"denied",personalization_storage:e.preferences?"granted":"denied",security_storage:"granted"})}catch(err){}}})();</script>

Ce snippet inline met immediatement chaque categorie sur denied (avec wait_for_update: 500), si bien que l'etat par defaut de Google Consent Mode v2 est pret avant tout autre chargement. Pour un visiteur qui revient, il lit le consentement enregistre directement dans le cookie et declenche un consent update.

Etape 2b : Script du bandeau. Ajoutez-le juste apres le stub inline :

<!-- CookiePilot -->
<script async src="https://cdn.cookiepilot.io/cookiepilot.js" data-cpkey="TWOJ_KLUCZ"></script>

Etape 3 : Configurer le bandeau

Dans le tableau de bord : Domaine → Configuration → Apparence :

position du bandeau (haut, bas, modale),
couleurs et textes,
un bouton flottant « Parametres des cookies » pour les visiteurs qui reviennent.

Integration Google Tag Manager

Via GTM, vous installez CookiePilot avec une seule balise HTML personnalisee qui fixe l'etat de consentement par defaut et charge le bandeau au tout premier stade de GTM. Vous n'avez besoin ni d'un fichier stub distinct ni d'une seconde balise.

Dans GTM, creez une balise HTML personnalisee (Balises → Nouveau → HTML personnalise) et collez :

<script>"use strict";
(function() {
window.dataLayer=window.dataLayer||[];var d={ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied",functionality_storage:"denied",personalization_storage:"denied",security_storage:"granted",wait_for_update:500},h=false;try{for(var i=0;i<window.dataLayer.length;i++){var x=window.dataLayer[i];if(x&&x[0]==="consent"&&x[1]==="default"){h=true;break}}}catch(err){}if(!h&&window.dataLayer.length)window.dataLayer.unshift(["consent","default",d]);window.gtag=function(){window.dataLayer.push(arguments)};if(!h)window.gtag("consent","default",d);var a=document.cookie.match(/(^|)cookiepilot_consent=([^;]+)/);if(a){try{var e=JSON.parse(decodeURIComponent(a[2]));window.gtag("consent","update",{analytics_storage:e.analytics?"granted":"denied",ad_storage:e.marketing?"granted":"denied",ad_user_data:e.marketing?"granted":"denied",ad_personalization:e.marketing?"granted":"denied",functionality_storage:e.preferences?"granted":"denied",personalization_storage:e.preferences?"granted":"denied",security_storage:"granted"})}catch(err){}}
var s = document.createElement('script');
s.src = 'https://cdn.cookiepilot.io/cookiepilot.js?cpkey=' + encodeURIComponent('TWOJ_KLUCZ');
document.head.appendChild(s);
})();
</script>

Declencheur : Consent Initialization - All Pages. La balise doit se declencher une fois par page. Les balises Google (GA4, Google Ads), Facebook Pixel et les autres balises marketing n'utilisent PAS le declencheur Consent Initialization ; elles se declenchent plus tard (Consent Checks ou un declencheur dependant du consentement). Enregistrez la balise et publiez le conteneur GTM.

Ordre et declencheurs

Ordre	Balise	Declencheur
1	CookiePilot - Consent Init + Banner	Consent Initialization - All Pages
2	GA4, Google Ads, UET	All Pages (Consent Mode gere lui-meme le consentement)
3	Facebook Pixel, TikTok, LinkedIn, etc.	Custom Event `cookiepilot_consent_update` + condition de consentement (voir ci-dessous)

Balises hors Google (Facebook Pixel, TikTok, LinkedIn)

Google Consent Mode ne couvre que les balises Google. Pour tout autre script, le widget pousse un evenement dans le dataLayer a chaque changement de consentement :

dataLayer.push({
  event: 'cookiepilot_consent_update',
  cookiepilot_consent: {
    necessary: true,
    analytics: true,
    marketing: true,
    preferences: false
  }
});

L'evenement se declenche aussi a chaque visite d'un utilisateur qui revient (quand le widget lit le cookie de consentement), si bien que le declencheur GTM fonctionne a chaque visite, pas seulement lors de la premiere decision.

Schema commun (a faire une seule fois)

Vous configurez ces trois elements une seule fois, puis vous les reutilisez pour toutes les balises hors Google.

Declencheur (Declencheurs → Nouveau → Custom Event) : nom de l'evenement cookiepilot_consent_update. Aucune condition, pas de « Once per page » (la balise doit pouvoir se declencher a nouveau apres un changement de decision).
Data Layer Variable pour chaque categorie que vous utilisez :
- Nom cookiepilot_consent.marketing → variable p. ex. dlv.cp_marketing
- Nom cookiepilot_consent.analytics → variable p. ex. dlv.cp_analytics
- Nom cookiepilot_consent.preferences → variable p. ex. dlv.cp_preferences
Trigger Group ou une condition sur le declencheur : dlv.cp_marketing equals true (pour les balises marketing) ou le champ concerne.

Dans chacun des exemples ci-dessous, le Trigger est le meme Custom Event auquel on a ajoute une condition sur la bonne variable.

Facebook Pixel

Balise dans GTM : Tags → New → Custom HTML.

<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

Declencheur : cookiepilot_consent_update + condition dlv.cp_marketing equals true.
Options de declenchement de la balise : Once per page.

En option, pour une conformite complete avec Facebook Limited Data Use, ajoutez une seconde balise qui appelle fbq('consent','revoke') avec le declencheur dlv.cp_marketing equals false.

TikTok Pixel

Balise dans GTM : Tags → New → Custom HTML.

<script>
!function (w, d, t) {
  w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js",o=n&&n.partner;ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};
  ttq.load('YOUR_TIKTOK_PIXEL_ID');
  ttq.grantConsent();
  ttq.page();
}(window, document, 'ttq');
</script>

Declencheur : cookiepilot_consent_update + condition dlv.cp_marketing equals true.
Options de declenchement de la balise : Once per page.

ttq.grantConsent() est la nouvelle API de TikTok (introduite en 2024). Sans elle, TikTok recoit des donnees hachees sans consentement, ce qui viole les conditions d'utilisation.

LinkedIn Insight Tag

<script type="text/javascript">
_linkedin_partner_id = "YOUR_LINKEDIN_PARTNER_ID";
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
window._linkedin_data_partner_ids.push(_linkedin_partner_id);
</script>
<script type="text/javascript">
(function(l) {
if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
window.lintrk.q=[]}
var s = document.getElementsByTagName("script")[0];
var b = document.createElement("script");
b.type = "text/javascript";b.async = true;
b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
s.parentNode.insertBefore(b, s);})(window.lintrk);
</script>

Declencheur : cookiepilot_consent_update + condition dlv.cp_marketing equals true.
Options de declenchement de la balise : Once per page.

Hotjar

<script>
(function(h,o,t,j,a,r){
  h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
  h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
  a=o.getElementsByTagName('head')[0];
  r=o.createElement('script');r.async=1;
  r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
  a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-',".js?sv=");
</script>

Declencheur : cookiepilot_consent_update + condition dlv.cp_analytics equals true.
Options de declenchement de la balise : Once per page.

Hotjar releve d'analytics, pas de marketing (il mesure des comportements, pas de la publicite). Verifiez votre propre politique cookies : certaines entreprises classent Hotjar differemment.

Microsoft Clarity

<script type="text/javascript">
(function(c,l,a,r,i,t,y){
  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "YOUR_CLARITY_PROJECT_ID");
</script>

Declencheur : cookiepilot_consent_update + condition dlv.cp_analytics equals true.
Options de declenchement de la balise : Once per page.

Pinterest Tag

<script>
!function(e){if(!window.pintrk){window.pintrk = function () {
window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(t,r)}}("https://s.pinimg.com/ct/core.js");
pintrk('load', 'YOUR_PINTEREST_TAG_ID');
pintrk('page');
</script>

Declencheur : cookiepilot_consent_update + condition dlv.cp_marketing equals true.
Options de declenchement de la balise : Once per page.

Microsoft Ads (UET)

UET prend en charge Google Consent Mode depuis fin 2023 : vous n'avez pas besoin d'un declencheur Custom Event. Ajoutez la balise de facon standard (All Pages, Once per page) et UET lit lui-meme ad_storage depuis GCM, que le widget positionne.

Correspondance des categories (recapitulatif)

Balise	Categorie	Champ dans `cookiepilot_consent`
Facebook Pixel	marketing	`marketing`
TikTok Pixel	marketing	`marketing`
LinkedIn Insight	marketing	`marketing`
Pinterest	marketing	`marketing`
Hotjar	analytics	`analytics`
Microsoft Clarity	analytics	`analytics`
Mixpanel, Amplitude	analytics	`analytics`
Intercom, Drift, Crisp	preferences	`preferences`
GA4, Google Ads, UET	(GCM, sans declencheur)	gere par `gtag('consent','update')`

Reference API

CookiePilot expose l'objet window.CookiePilot :

Methode	Description
`CookiePilot.getConsent()`	L'etat de consentement actuel, ou `null` si aucune decision n'a ete prise.
`CookiePilot.acceptAll()`	Consentement a toutes les categories.
`CookiePilot.rejectAll()`	Refuse tout sauf `necessary`.
`CookiePilot.updateConsent(partial)`	Met a jour les categories choisies, p. ex. `{ analytics: true }`.
`CookiePilot.showSettings()`	Ouvre la modale de preferences.
`CookiePilot.hideSettings()`	Ferme la modale de preferences.
`CookiePilot.showMyConsent()` / `hideMyConsent()`	Affiche/masque le bouton flottant.

Exemple

const consent = CookiePilot.getConsent();
// { necessary: true, analytics: true, marketing: false, preferences: false }

CookiePilot.updateConsent({ analytics: true });

document.getElementById('cookie-settings').addEventListener('click', () => {
  CookiePilot.showSettings();
});

Lien « Gerer les cookies » dans le pied de page

<a href="#" onclick="CookiePilot.showSettings(); return false;">Gerer les cookies</a>

Evenements JavaScript

Le widget emet un evenement natif cookiepilot:consent sur window. L'ecouteur doit etre enregistre avant le chargement du widget si vous voulez capter l'evenement pour un visiteur qui revient (l'emission se declenche immediatement des le demarrage du widget) :

<script>
  window.addEventListener('cookiepilot:consent', (e) => {
    if (e.detail.marketing) {
      fbq('init', 'YOUR_PIXEL_ID');
    }
  });
</script>
<script src="https://cdn.cookiepilot.io/cookiepilot.js" data-cpkey="TWOJ_KLUCZ"></script>

e.detail contient la meme charge utile que getConsent(). Pour les integrations basees sur GTM, utilisez plutot l'evenement dataLayer decrit plus haut, car le dataLayer est un tableau persistant et GTM traite aussi les evenements passes.

Categories de consentement

Categorie	Description	Par defaut
`necessary`	Requis pour le fonctionnement du site	Toujours actif
`analytics`	Statistiques et analytique	Consentement requis
`marketing`	Publicite et remarketing	Consentement requis
`preferences`	Personnalisation, langue	Consentement requis

Categorie CookiePilot	Champs Consent Mode
`analytics`	`analytics_storage`
`marketing`	`ad_storage`, `ad_user_data`, `ad_personalization`
`preferences`	`functionality_storage`, `personalization_storage`
(toujours)	`security_storage: granted`

La version 2 a ajoute ad_user_data et ad_personalization (requis depuis mars 2024 dans l'UE/EEE pour la publicite Google).

Parametre	Description
`ad_storage`	Cookies publicitaires
`analytics_storage`	Cookies analytiques
`ad_user_data`	Envoi de donnees utilisateur a Google
`ad_personalization`	Personnalisation des publicites
`functionality_storage`	Cookies fonctionnels
`personalization_storage`	Cookies de personnalisation
`security_storage`	Toujours `granted`

Comment ca marche :

Le stub met chaque champ sur denied de facon synchrone, avec wait_for_update: 500.
Apres la decision de l'utilisateur, le widget declenche gtag('consent', 'update', {...}) en s'appuyant sur la correspondance ci-dessus.
Pour un visiteur qui revient, l'etape 2 se declenche immediatement des le demarrage du widget, sur la base du cookie.

Configuration de l'apparence

Dans le tableau de bord : Domaine → Configuration :

Apparence : position, couleurs, mise en page (BAR / BOX / MODAL).
Textes : titre, description, libelles des boutons, descriptions des categories. 13 langues (EN, PL, DE, FR, ES, IT, NL, PT, SV, CS, RO, EL, HU).
Bouton de consentement : un bouton flottant « Parametres des cookies » affiche apres la premiere decision (en bas a gauche/droite).
CSS personnalise : un champ pour vos propres styles. Le widget s'affiche dans le Shadow DOM, si bien que les selecteurs CSS du document principal ne fonctionneront pas. Utilisez uniquement ce champ.

Accessibilite (WCAG 2.1 AA)

✅ Navigation au clavier (Tab, Shift+Tab, Enter, Escape).
✅ Etiquettes ARIA, role="dialog", aria-modal.
✅ Piege de focus dans la modale.
✅ Prise en charge des lecteurs d'ecran (live regions au changement d'etat).
✅ Design responsive.

Integrations

WordPress

Nous avons une extension officielle : CookiePilot sur WordPress.org.

Admin WordPress → Extensions → Ajouter → recherchez « CookiePilot ».
Installez et activez.
Reglages → CookiePilot → collez la cle API du tableau de bord.

L'extension insere elle-meme le stub et la balise dans le <head> (dans le bon ordre, avant les autres scripts) et fournit un shortcode [cookiepilot_settings] pour un lien « Gerer les cookies » dans le pied de page.

Si vous preferez ne pas utiliser l'extension, servez-vous de « Insert Headers and Footers » et collez le snippet de l'etape 2 du Demarrage rapide dans la section Header.

Shopify

Boutique → Themes → Modifier le code.
Dans theme.liquid, collez le snippet avant </head>.

Next.js

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://cdn.cookiepilot.io/cookiepilot.js"
          data-cpkey="TWOJ_KLUCZ"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

strategy="beforeInteractive" garantit que le script du bandeau s'execute tot. N'oubliez pas que le stub inline de l'etape 2a (consentement par defaut) s'ajoute separement, dans le <head> avant ce script, par exemple via next/script avec dangerouslySetInnerHTML ou directement dans app/layout.tsx.

FAQ

Le script ralentit-il le site ?

Le bundle pese environ 12 KB gzippe et se charge de maniere asynchrone. Aucun impact sur les Core Web Vitals.

Combien de temps le consentement est-il conserve ?

Le cookie de decision de l'utilisateur : 365 jours par defaut (configurable dans le tableau de bord). Les evenements analytiques : 2 ans (TTL ClickHouse).

L'evenement `cookiepilot_consent_update` se declenche-t-il pour les visiteurs qui reviennent ?

Oui. Le widget lit le cookie au demarrage et pousse l'evenement dans le dataLayer. Le declencheur Custom Event dans GTM se declenche a chaque visite, pas seulement lors de la premiere decision.

Ou signaler un probleme ?

kontakt@cookiepilot.io ou le chat dans le tableau de bord.

Checklist de tests apres deploiement

Une fois CookiePilot installe, verifiez la configuration avant de lancer des campagnes publicitaires.

1. Test avant que l'utilisateur ne donne son consentement

Ouvrez le site en navigation privee et effacez les cookies du domaine.
Ouvrez DevTools → Network et rechargez la page.
Avant de cliquer sur le consentement, confirmez que :
- aucun cookie analytique/marketing n'est cree, p. ex. _ga, _gcl_*, _fbp, _ttp,
- les balises marketing n'envoient pas de requetes vers Meta/TikTok/LinkedIn avant le consentement marketing,
- le dataLayer porte l'etat par defaut denied pour ad_storage, ad_user_data, ad_personalization et analytics_storage.

2. Test apres acceptation du consentement

Cliquez sur « Tout accepter ».
Dans DevTools, verifiez que l'evenement cookiepilot_consent_update est apparu.
Pour les balises Google, verifiez dans GTM Preview / Tag Assistant que Consent Mode est passe a l'etat granted pour les categories concernees.
Pour GA4, verifiez dans DebugView que les evenements commencent a arriver apres le consentement.
Pour Meta Pixel / TikTok / LinkedIn, verifiez que les balises ne se declenchent qu'apres l'evenement cookiepilot_consent_update et la condition de consentement marketing.

3. Test du refus du consentement

Effacez les cookies et rechargez la page.
Cliquez sur « Tout refuser ».
Confirmez que les cookies et requetes marketing ne sont toujours pas declenches.
Confirmez que les fonctionnalites essentielles du site continuent de marcher.

4. Erreurs frequentes

La balise GA4/Google Ads se declenche sur Consent Initialization au lieu d'un declencheur ulterieur.
Le Meta Pixel ou le TikTok Pixel n'a pas de condition sur cookiepilot_consent.marketing.
Un ancien traceur code en dur est encore present dans le <head> avant CookiePilot.
La documentation ou le modele contient encore une URL de script obsolete ou un ancien attribut d'identifiant au lieu de l'actuel cookiepilot.js avec data-cpkey.

Preuve de consentement, exports et DSAR

CookiePilot enregistre les evenements de consentement pour que vous puissiez reconstituer le contexte de la decision d'un visiteur. Un enregistrement peut inclure l'horodatage de l'evenement, son type, le domaine, l'URL de la page ou de la source, la version du consentement, les categories et la consent string lorsqu'elle est disponible, l'adresse IP anonymisee, le hash du user-agent, le type d'appareil et le navigateur.

Exports

Preuve de consentement d'un visiteur : JSON, CSV ou HTML imprimable.
Journal d'audit du domaine : CSV ou JSON pour une plage de dates choisie.
Les exports sont limites a votre organisation et aux domaines auxquels vous avez acces.

Processus DSAR

Un Owner ou un Admin peut lancer une demande d'acces aux donnees depuis une ligne de consentement ou depuis la page DSAR du panneau. Le panneau retrouve les evenements du visiteur, affiche la plage et vous permet de telecharger les fichiers de preuve. Une demande de suppression exige un motif et est consignee dans le journal d'activite de l'organisation.

Limites

Les exports d'audit de domaine utilisent la plage de dates choisie et peuvent etre tronques pour de tres grands ensembles de resultats. La duree de conservation du journal de consentement suit le plan actif et la politique du compte, si bien que la documentation publique ne promet pas un nombre d'annees fixe.

Documentation CookiePilot