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
  • Journalisation obligatoire (date, choix, version de la politique)
  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
  • Durée de conservation limitée à 13 mois
  • 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

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

• Consentement préalable avant tout script de suivi
• Journalisation des choix Logger (piste d'audit RGPD)
• Blocage automatique des services tiers sans consentement
• Services pré-configurés - (GA, Facebook.. , LinkedIn...)
• Cookies sécurisés (SameSite=None; Secure)
• Transparence : Affichage des services
• Multilingue (14 langues UE+) + 4 thèmes intégrés
• CSS encapsulé – aucun conflit avec vos styles
• Ultra léger (~66Ko) – 100% JavaScript pur, sans dépendances

Implémentation technique

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({
    // Consent logging (optional - requires subscription)
    logger: {
      apiKey: 'your-sk-live-key',
    },
    // Statistics & Analytics services
    statistics: {
      google_analytics_key: 'G-WKEJV2N43X',
      google_tag_manager_key: 'GTM-XXXXXXX',
      amplitude_key: 'abc123',
      hotjar_site_id: '1234567',
    },

    // Marketing & Advertising services
    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'
    },

  });

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.

// 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.)
• cookies - Scripts fonctionnels (Intercom, Crisp, HubSpot, Segment, etc.)

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)

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 : { cookies: true, statistics: false, marketing: true }

    // 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();

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('Loggé sur serveur:', event.detail.logged);

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

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

14 langues supportées avec détection automatique : fr, en, es, de, it, nl, pt

        import t from '@synapxlab/cookie-consent/translat';

        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
• Contraste WCAG AA respecté

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

Ce que nous collectons (exhaustif)

{
  "consent": {
    "statistics": true,
    "marketing": false,
    "cookies": true
  },
  "timestamp": 1730390400000,
  "user_agent": "Mozilla/5.0..." // Uniquement pour détecter les bots
}

Base légale (RGPD)

Le traitement repose sur l'intérêt légitime du propriétaire du site web (Article 6.1.f du RGPD) pour :

• 📊 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.