Bannière Cookie Consent

Concrètement, c’est quoi un cookie ?

Un cookie est une petite donnée enregistrée dans votre navigateur par un site web. Il sert souvent à améliorer le fonctionnement du site ou à retenir vos préférences — par exemple pour rester connecté entre deux visites. Mais il peut aussi être utilisé pour suivre votre activité sur différents sites. D’autres technologies similaires existent (localStorage, sessionStorage, IndexedDB, etc.) et sont traitées de la même façon par la loi lorsqu’elles servent à vous reconnaître ou vous suivre.
Notre bannière permet à l’internaute d’accepter, de refuser ou de gérer ses préférences selon la finalité.

Les cookies sont souvent accompagnés d’empreintes numériques (« fingerprints »), une technique qui permet d’identifier un appareil sans déposer de fichier. Elle repose sur la combinaison de nombreux éléments techniques uniques, tels que :

• la résolution d’écran ;
• la version du navigateur et du système d’exploitation ;
• les polices installées ;
• la langue et le fuseau horaire ;
• la liste des extensions ou plug-ins actifs ;
• les caractéristiques matérielles (processeur, carte graphique, nombre de cœurs, etc.) ;
• la configuration réseau (adresse IP, protocole, WebRTC, etc.) ;
• ou encore la façon dont votre appareil rend une image ou une police (canvas fingerprint).

En croisant ces informations, un site peut créer une empreinte quasi unique permettant de reconnaître un utilisateur, même sans cookies.

Des outils utiles… mais parfois intrusifs

Ces services sont souvent installés pour des objectifs légitimes : aider les développeurs à mesurer les performances, sécuriser les connexions, proposer des fonctionnalités comme « rester connecté » ou personnaliser l’affichage. Cependant, comme ces outils sont déployés massivement sur de nombreux sites et reposent souvent sur des services tiers (analytics, publicités, gestionnaires de session), ils peuvent contribuer à vous reconnaître et à suivre vos déplacements sur le web — y compris via des techniques alternatives (localStorage, empreintes numériques, etc.) — même si vous refusez certains cookies.

Ce que la CNIL impose (et que la bannière permet d’appliquer)

• Transparence : description claire des finalités (statistiques, marketing…)
• Choix utilisateur : accepter, refuser, ou n’autoriser que certaines catégories
• Preuve & révocabilité : choix enregistré et modifiable à tout moment

Cadre légal & recommandations CNIL

• 🇪🇺 RGPD – Art. 4(11), 6(1)(a) & 7 :
  • Consentement libre, spécifique, éclairé et univoque
  • Conditions : démontrable, réversible, aussi simple à retirer qu'à donner
  • Base légale « consentement » pour les traceurs non exemptés
  • Conservation des éléments nécessaires pour pouvoir démontrer le consentement lorsque celui-ci constitue la base du traitement, conformément à la charge de la preuve prévue par l'article 7.1 du RGPD
  Source : Règlement (UE) 2016/679 — RGPD
• Directive ePrivacy – Art. 5(3) : Toute lecture/écriture dans le terminal (cookies, localStorage…) nécessite un consentement préalable, sauf si strictement nécessaire au service demandé OU si l'outil de mesure d'audience respecte les critères d'exemption CNIL.
  Source : Directive 2002/58/CE — ePrivacy
• 🇫🇷 CNIL – Recommandations depuis 2020 :
  • Refus aussi simple que l'acceptation
  • Informations claires, finalité par finalité
  • Conservation de la preuve du consentement
  • La durée de vie des traceurs peut être limitée à 13 mois selon les recommandations de la CNIL ; la durée de conservation de la preuve du consentement est distincte et doit être définie par le responsable du traitement selon son contexte et ses obligations.
  • Aucun cookie déposé avant consentement (sauf cookies strictement nécessaires ou analytics exemptés)
  Source : CNIL — Cookies et traceurs
• 🇫🇷 CNIL – Exemption pour la mesure d'audience :
  • Certains outils d'analytics peuvent fonctionner sans consentement s'ils respectent des critères stricts :
  • ✅ Finalité limitée à la mesure d'audience uniquement
  • ✅ Pas de suivi cross-site
  • ✅ Données pseudonymisées (IP tronquée, etc.)
  • ✅ Données statistiques anonymes uniquement
  • ✅ Information transparente dans la politique de confidentialité
  Source : CNIL — Exemption mesure d'audience

Cookie Consent - Fonctionnalités intégrées v2.5.1

Une bannière de consentement aux cookies légère et conforme au RGPD.

• Recueil du consentement avant le chargement des services tiers qui le nécessitent
• Consent Logger optionnel et payant pour conserver une piste d’audit des choix
• Blocage des services tiers configurés tant que la catégorie correspondante n’est pas autorisée
• Google Consent Mode v2 natif — mapping des 4 catégories, nécessaires incluses, vers 7 signaux GCM depuis la version 2.5.0
• 16 services préconfigurés : Google Analytics 4, Google Tag Manager, Matomo, Mixpanel, Amplitude, Plausible, Hotjar, Microsoft Clarity, Google AdSense, Facebook Pixel, TikTok Pixel, LinkedIn Insight Tag, Intercom, Crisp, HubSpot et Segment
• Choix enregistrés dans le localStorage du navigateur : la bannière elle-même ne dépose aucun cookie
• Affichage des services et des catégories de consentement associés
• 13 langues : ar, de, en, es, fr, it, nl, pl, pt, ro, ru, sv et zh
• CSS inclus dans le bundle et injecté par JavaScript, avec thèmes personnalisables
• Bundle distribué : 109,2 Ko brut et 34,0 Ko gzip, CSS inclus, avec la dépendance runtime @synapxlab/tracking-npm

Implémentation technique

Le générateur de code vous fournit la procédure d’intégration pour les principaux frameworks (HTML, NodeJs, React, Vue, etc.).

Les extensions WordPress et PrestaShop sont disponibles en version 1.0.1. Elles sont distribuées directement par SynapxLab et ne sont pas encore publiées sur les places de marché officielles de ces CMS.

Exemple : Configuration complète

Le script injecte la bannière au chargement. Les catégories sont cachées par défaut et s'affichent uniquement quand l'utilisateur clique sur « Personnaliser mes choix ». Les choix sont stockés dans localStorage sous la clé politecookiebanner.

Les services tiers (GA4, Meta Pixel, etc.) ne se chargent qu'après consentement explicite de l'utilisateur. Chaque service configuré est automatiquement listé dans la description de sa catégorie (Statistiques/Marketing/Fonctionnelles).

window.CookieConsent.init({
    // Journalisation des consentements (optionnel, requiert un abonnement)
    logger: {
      apiKey: 'YOUR-SK-LIVE-KEY',         // ⚠️ placeholder — ne pas hardcoder en prod
    },

    // Google Consent Mode v2 — activé par défaut, exposé ici pour info
    google_consent_mode: {
      enabled: true,
      wait_for_update: 500,
      ads_data_redaction: true
    },

    // Services Statistiques / Analytics
    statistics: {
      google_analytics_key: 'G-XXXXXXXXX',
      google_tag_manager_key: 'GTM-XXXXXXX',
      amplitude_key: 'YOUR-AMPLITUDE-KEY',
      hotjar_site_id: 'YOUR-HOTJAR-ID',
    },

    // Services Marketing / Publicité
    marketing: {
      google_adsense_key: 'ca-pub-XXXXXXX',
      facebook_pixel: { key: 'YOUR-PIXEL-ID', track: 'PageView' },
      tiktok_pixel_id: 'YOUR-TIKTOK-ID',
      linkedin_partner_id: 'YOUR-LINKEDIN-ID'
    },

    // Services Fonctionnels (chat, CRM…)
    functional: {
      intercom_app_id: 'YOUR-INTERCOM-ID',
      crisp_website_id: 'YOUR-CRISP-UUID'
    }
  });

Bloquer les scripts tiers directement dans le HTML

Si vous préférez inclure vos scripts analytics/marketing directement dans votre HTML plutôt que via l'API JavaScript, vous pouvez les bloquer automatiquement en utilisant les attributs type="text/plain" et data-cookie-category. Les scripts sont vraiment bloqués jusqu'au consentement de l'utilisateur (conforme RGPD).

Le système scanne automatiquement tous les <script> et <iframe> au chargement de la page et observe aussi les scripts ajoutés dynamiquement (SPA, GTM). Lorsque l'utilisateur accepte une catégorie, les scripts correspondants sont restaurés et exécutés.

Version requise : la restauration des éléments neutralisés à la main avec type="text/plain" nécessite la version 2.6.0 ou supérieure. Sur les versions antérieures, ces éléments restaient inertes même après consentement.

// Syntaxe générale 
  <script type="text/plain" data-cookie-category="CATEGORIE" src="URL_DU_SCRIPT"> </script>

• exemptés - Aucun blocage nécessaire : Outils de mesure d'audience conformes aux critères CNIL (Matomo exempté, Plausible, etc.). Ces traceurs ne nécessitent pas de consentement mais requièrent :
  • ✅ Information dans la politique de confidentialité
  • ✅ Mécanisme d'opposition accessible (opt-out)
  • ✅ Configuration stricte selon critères CNIL (finalité limitée, pas de cross-site, IP tronquée, etc.)
  • Guide CNIL sur l'exemption
• statistics - Scripts nécessitant consentement (Google Analytics, Hotjar, etc.)
• marketing - Scripts publicitaires (Facebook Pixel, Google Ads, TikTok, etc.)
• functional - Scripts fonctionnels (Intercom, Crisp, HubSpot, Segment, etc.). L’ancien identifiant cookies reste accepté pour compatibilité, mais il est déprécié.

Points importants

• Les scripts avec type="text/plain" ne sont pas exécutés par le navigateur
• Le cookie consent les détecte automatiquement et les restaure après consentement
• Compatible avec les scripts ajoutés dynamiquement (SPA, injections GTM)

Google Consent Mode v2 v2.5.1

Google Consent Mode v2 est un protocole qui permet à Google Analytics, Google Ads et autres services Google de respecter les choix de consentement de vos visiteurs en temps réel, sans bloquer complètement leur fonctionnement.

🎯 Pourquoi c'est important ?

Avant Consent Mode, vous aviez deux options :

• ❌ Bloquer complètement les scripts Google → perte totale de données si l'utilisateur refuse
• ❌ Charger sans consentement → non-conformité RGPD

Avec Consent Mode v2, Google reçoit un signal de consentement avant de charger ses scripts. Selon le choix de l'utilisateur :

• ✅ Consentement accordé → collecte normale des données
• ✅ Consentement refusé → collecte limitée, anonymisée (modélisation sans cookies)

🔧 Comment ça fonctionne techniquement ?

Cookie Consent envoie des signaux de consentement via la fonction gtag() avant le chargement des scripts Google. Voici les 4 états de consentement gérés :

⚙️ Configuration avancée (optionnel)

GCM est activé par défaut dès qu'une clé Google Analytics ou GTM est fournie. Si vous souhaitez personnaliser ou désactiver le comportement :

window.CookieConsent.init({
      google_consent_mode: {
        enabled: true,
        wait_for_update: 500,        // ms avant timeout
        ads_data_redaction: true,    // masque les data pub si refus
        url_passthrough: false,      // passage de paramètres entre domaines
        region: []                   // ex. ['FR', 'US-CA'] — codes ISO 3166-2 ; vide = tous les visiteurs
      },
      statistics: {
        google_analytics_key: 'G-XXXXXXXXX'
      }
    });

    // Pour désactiver complètement GCM :
    window.CookieConsent.init({
      google_consent_mode: { enabled: false }
    });

📡 Événement googleConsentUpdated

document.addEventListener('googleConsentUpdated', (event) => {
      console.log(event.detail.consent);     // 7 signaux GCM
      console.log(event.detail.preferences); // choix utilisateur (4 catégories)
    });

🚫 Ce que Consent Mode ne fait pas

✅ Résumé : Ce que ça fait VS ce que ça ne fait pas

📚 Pour aller plus loin

• Documentation officielle Google Consent Mode
• Blocage automatique des scripts tiers
• Consent Mode v2 dans GA4

API JavaScript

// Ouvrir la bannière (showPrefs=true ⇒ onglet Préférences directement visible)
    window.CookieConsent.open(true);

    // Effacer les préférences et rouvrir en mode Préférences
    window.CookieConsent.reset();

    // Récupérer les préférences actuelles
    const prefs = window.CookieConsent.getPreferences();
    // Retourne : { statistics: false, marketing: true, functional: true,
    //             consent_id: '…', consent_timestamp: 1730390400000 }
    // ou null si aucun choix n'a encore été enregistré.

    // Vérifier si une catégorie est acceptée
    const hasStats = window.CookieConsent.hasConsent('statistics');

    // Désactiver le logging
    window.CookieConsent.disableLogging();

    // Récupérer la configuration actuelle
    const config = window.CookieConsent.getConfig();

    // — Google Consent Mode v2 (depuis v2.5.0) —
    // Récupérer l'état actuel des 7 signaux GCM
    const gcm = window.CookieConsent.getGoogleConsent();

    // Forcer une mise à jour des signaux GCM
  window.CookieConsent.updateGoogleConsent();

Clé de stockage : localStorage['politecookiebanner'].

Outils de test rapide

const resetBtn = document.getElementById('btn-reset-consent');
      const openBtn  = document.getElementById('btn-open-consent');

      resetBtn?.addEventListener('click', () => {
        if (window.CookieConsent?.reset) {
          window.CookieConsent.reset(); // ouvre la bannière en mode préférences   
        } else {
          try { localStorage.removeItem('politecookiebanner'); } catch {}
          alert('Consentement effacé. Rechargez la page avec F5 pour voir la bannière.');
        }
      });

      openBtn?.addEventListener('click', () => {
        if (window.CookieConsent?.open) {
          window.CookieConsent.open(true); // ouvre directement avec préférences visibles    
        } else {
          const link = document.querySelector('#openpolitecookie a');
          if (link) { 
            link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true })); 
          }
        }
      });

Événements personnalisés

// Écouter les changements de consentement 
      document.addEventListener('cookieConsentChanged', (event) => {
        console.log('Nouvelles préférences:', event.detail.preferences);
        console.log('ID du consentement:', event.detail.consent_id);
        console.log('Loggé sur serveur:', event.detail.logged);

        // Exemple : charger des scripts conditionnels
        if (event.detail.preferences.statistics) {
          // Charger vos scripts analytics personnalisés
        }
      });

      // Écouter les mises à jour Google Consent Mode v2 (depuis v2.5.0)
      document.addEventListener('googleConsentUpdated', (event) => {
        console.log('Signaux GCM:', event.detail.consent);       // 7 signaux Google
        console.log('Préférences:', event.detail.preferences);   // choix utilisateur
      });

Personnalisation CSS

La bannière utilise des variables CSS (custom properties). C'est le moyen le plus simple d'adapter les couleurs et contrastes à votre charte sans toucher au JS et sans recompiler le SCSS.

Variables disponibles

:root {
        --cc-bg: #fff;
        --cc-border: #e5e7eb;
        --cc-accent: #9b6b5a;   /* couleur d'accent (bouton Accepter, switch ON) */
        --cc-text: #111827;
        --cc-muted: #6b7280;
        --cc-line: #e5e7eb;
        --cc-surface: #f3f4f6;
      }

Internationalisation

13 langues prises en charge avec détection automatique de la langue du navigateur : ar, de, en, es, fr, it, nl, pl, pt, ro, ru, sv, zh. La langue de repli est le français.

Le module de traduction est exposé sur l’API publique via window.CookieConsent.i18n (depuis la version 2.6.0). Il n’est pas importable en sous-chemin : le paquet npm ne publie que le bundle dist/cookie.js.

        const t = window.CookieConsent.i18n;

        t.setLocale('en');  // Force English  
        // traduction complète en thaï 
        t.add('th', {
          title: "จัดการความยินยอมคุกกี้",
          message: "เพื่อมอบประสบการณ์ที่ดีที่สุดให้กับคุณ เว็บไซต์นี้ใช้คุกกี้เพื่อวิเคราะห์การใช้งานและปรับปรุงบริการของเรา",
          closeAria: "ปิดแบนเนอร์คุกกี้",
          alwaysActive: "เปิดใช้งานเสมอ",
          functionalTitle: "คุกกี้ที่จำเป็นอย่างเคร่งครัด",
          functionalDesc: "คุกกี้เหล่านี้จำเป็นต่อการทำงานของเว็บไซต์และไม่สามารถปิดได้ในระบบของเรา โดยทั่วไปจะถูกตั้งค่าเพื่อตอบสนองต่อการกระทำของคุณ เช่น การตั้งค่าความเป็นส่วนตัว การเข้าสู่ระบบ หรือการกรอกแบบฟอร์ม คุกกี้เหล่านี้ช่วยรักษาความปลอดภัยของการเข้าชมและจัดการเซสชันของคุณ โดยไม่รวบรวมข้อมูลที่สามารถระบุตัวตนของคุณได้โดยตรง",
          cookiesTitle: "คุกกี้สำหรับฟังก์ชันการทำงาน",
          cookiesDesc: "คุกกี้เหล่านี้ช่วยปรับปรุงและปรับแต่งฟังก์ชันของเว็บไซต์ อาจถูกเปิดใช้งานโดยทีมงานของเราหรือบุคคลที่สามที่ให้บริการบนเว็บไซต์ของเรา หากคุณไม่ยอมรับคุกกี้เหล่านี้ บางบริการอาจทำงานได้ไม่ถูกต้อง",
          statsTitle: "คุกกี้สำหรับการวัดผู้เข้าชม (สถิติ)",
          statsDesc: "คุกกี้เหล่านี้ช่วยให้เราวัดจำนวนผู้เข้าชมเว็บไซต์ สร้างสถิติการใช้งาน และวิเคราะห์เส้นทางการเข้าชม เพื่อปรับปรุงประสิทธิภาพและคุณภาพของบริการ ข้อมูลที่รวบรวมจะถูกรวมและไม่สามารถระบุตัวบุคคลได้ การปฏิเสธคุกกี้เหล่านี้จะไม่กระทบต่อการใช้งานเว็บไซต์ของคุณ",
          statsServices: "บริการ: {services}",
          marketingTitle: "คุกกี้สำหรับโฆษณาและการปรับแต่งเนื้อหา",
          marketingDesc: "คุกกี้เหล่านี้ช่วยปรับแต่งโฆษณาให้ตรงกับความสนใจของคุณตามพฤติกรรมการใช้งานบนเว็บไซต์ อาจใช้เพื่อวัดประสิทธิภาพของแคมเปญโฆษณา แสดงเนื้อหาที่เกี่ยวข้อง และจำกัดจำนวนครั้งที่คุณเห็นโฆษณา การปฏิเสธคุกกี้เหล่านี้จะไม่ป้องกันการใช้งานเว็บไซต์ แต่โฆษณาที่แสดงอาจไม่ตรงกับความสนใจของคุณ",
          marketingServices: "บริการ: {services}",
          loggingTitle: "📋 หลักฐานการยินยอมคุกกี้",
          loggingNotice: "ตามข้อกำหนดทางกฎหมาย (มาตรา 7.1 ของ GDPR) และคำแนะนำของ CNIL เราจะเก็บบันทึกการตั้งค่าความยินยอมของคุณ (คุกกี้ฟังก์ชัน สถิติ โฆษณา) รวมถึงเวอร์ชันของแบนเนอร์และรหัสเหตุการณ์ (UUID) เพื่อจำกัดการประมวลผลข้อมูลส่วนบุคคล ที่อยู่ IP และข้อมูลเบราว์เซอร์ของคุณจะถูกแปลงเป็นลายนิ้วมือแบบ นามแฝง ด้วยกระบวนการแฮชที่ไม่สามารถย้อนกลับได้ บันทึกเหล่านี้จะถูกเก็บไว้นานสูงสุด 13 เดือน เพื่อใช้เป็นหลักฐานเท่านั้น คุณสามารถเปลี่ยนการตั้งค่าได้ทุกเมื่อโดยคลิกลิงก์ “จัดการคุกกี้ของฉัน” ที่ด้านล่างของหน้า",
          acceptAll: "ยอมรับทั้งหมด",
          denyAll: "ปฏิเสธทั้งหมด",
          viewPrefs: "ตั้งค่าความยินยอมของฉัน",
          savePrefs: "บันทึกการตั้งค่า",
          delPrefs: "ลบการตั้งค่า"
        });
      t.setLocale('th');

Accessibilité

• Dialog ARIA : role="dialog", aria-live="polite", aria-modal="true"
• Bouton de fermeture avec aria-label
• Navigation clavier (tab) et focus visibles
• Catégories pliables/dépliables avec aria-expanded
• Support de la touche Échap pour fermer
• Contrastes conçus pour viser le niveau WCAG AA — aucun audit d’accessibilité indépendant n’a été réalisé à ce jour

Compatibilité navigateurs

Chrome, Firefox, Safari, Edge (versions récentes). iOS/Android WebView modernes.
Pas de dépendance à jQuery.
Compatible ES6+ (transpilation possible pour anciens navigateurs).

🔐 Politique de confidentialité

Sécurité & Conformité

• ✅ HTTPS uniquement (TLS 1.3)
• ✅ Serveurs hébergés en France (OVH Roubaix)
• ✅ Données chiffrées en transit et au repos
• ✅ Rate limiting côté serveur
• ✅ Pas d'exécution de code distant

Ce que nous NE collectons PAS

Données enregistrées par Consent Logger

Base légale (RGPD)

La base légale du traitement des consentements est déterminée par l’exploitant du site, en sa qualité de responsable du traitement, au regard des finalités qu’il poursuit :

• 📊 Mesurer le taux d'acceptation/refus des cookies
• ⚖️ Prouver la conformité RGPD (preuve de consentement)
• 🛡️ Défendre ses droits en cas de contrôle CNIL
• 📈 Optimiser la bannière pour améliorer l'expérience utilisateur

Qui a accès aux données ?

Durée de conservation

Vos droits (RGPD)

Pour exercer vos droits : contact@synapxlab.com (délai : 30 jours max, souvent sous 72h)

🇫🇷 Hébergement 100% français

Contact & Réclamations

Réclamation CNIL

Limites & responsabilité

@synapxlab/cookie-consent gère la collecte, l’enregistrement et la preuve du consentement aux traceurs (cookies, localStorage, etc.), via un système de journalisation (“logger”) facultatif.

L’exploitant du site qui intègre ce module demeure responsable du traitement des données collectées, y compris des logs de consentement.

Ce composant ne constitue pas un avis juridique et ne remplace pas une solution de conformité RGPD complète (registre des traitements, DPIA, DPA, gestion des droits, etc.). Validez toujours votre paramétrage avec votre DPO ou votre conseil juridique.

Note sur les analytics exemptés : Cookie Consent gère le consentement pour les traceurs qui en ont besoin. Pour les outils de mesure d'audience exemptés selon les critères CNIL, référez-vous à la documentation CNIL pour leur déploiement conforme.