Bannière cookie conforme RGPD : le guide technique 2026

La bannière de cookies est devenue un élément incontournable de tout site web. Mais entre les exigences de la CNIL, les contraintes techniques et les pratiques trompeuses (dark patterns), il est difficile de s'y retrouver. Ce guide technique vous explique comment implémenter une bannière véritablement conforme au RGPD et aux recommandations de la CNIL.

Pourquoi une bannière est-elle nécessaire ?

La directive ePrivacy (2002, modifiée en 2009) et le RGPD imposent d'obtenir le consentement des utilisateurs avant de déposer des cookies non essentiels sur leur terminal. La CNIL, autorité française compétente, a publié des lignes directrices et une recommandation en septembre 2020 qui précisent les modalités pratiques de ce recueil.

Cookies nécessitant un consentement :

• Cookies analytiques (Google Analytics, Matomo en mode non exempté)
• Cookies publicitaires (Google Ads, Facebook Pixel, Criteo)
• Cookies de réseaux sociaux (boutons de partage, embeds)
• Cookies de personnalisation (A/B testing, recommandations)

Cookies exempts de consentement :

• Cookies de session (authentification, panier e-commerce)
• Cookies de préférence utilisateur (langue, thème)
• Cookies de mesure d'audience exemptés (sous conditions strictes)
• Cookies de load balancing et sécurité

Les exigences de la CNIL (lignes directrices 2020)

La CNIL a défini des règles précises pour les bannières de cookies. Voici ce qui est conforme et ce qui ne l'est pas :

Ce qui est exigé

1. Information claire sur les finalités : l'utilisateur doit comprendre à quoi servent les cookies avant de consentir
2. Refuser doit être aussi simple qu'accepter : un bouton "Refuser tout" doit être présent au même niveau que "Accepter tout"
3. Pas de pré-cochage : aucune case ne doit être pré-cochée
4. Choix granulaire : l'utilisateur doit pouvoir accepter certaines catégories et en refuser d'autres
5. Continuer sans accepter : la navigation doit rester possible sans consentement (pas de cookie wall)
6. Retrait facile : l'utilisateur doit pouvoir modifier son choix à tout moment
7. Preuve du consentement : vous devez pouvoir démontrer que le consentement a été donné
8. Renouvellement : redemander le consentement tous les 13 mois maximum

Ce qui n'est PAS conforme

• Bannière avec uniquement un bouton "Accepter" (pas de moyen de refuser)
• Le bouton "Refuser" caché dans un second niveau de navigation
• Le bouton "Accepter" en couleur vive et "Refuser" en gris discret (dark pattern)
• "En continuant votre navigation, vous acceptez les cookies" (scroll = consentement est invalide)
• Cookie wall : bloquer l'accès au contenu sans acceptation
• Déposer des cookies avant même l'affichage de la bannière
• Cases pré-cochées pour les cookies analytiques ou publicitaires

Architecture technique d'une bannière conforme

Le principe fondamental : blocage avant consentement

Le point technique le plus critique est le suivant : aucun script de tracking ne doit s'exécuter avant que l'utilisateur ait donné son consentement explicite. Cela implique une architecture spécifique.

Méthode 1 : Modification du type de script

<!-- Script bloqué par défaut -->
<script type="text/plain" data-category="analytics" data-src="https://www.googletagmanager.com/gtag/js?id=GA_ID">
</script>

<!-- Après consentement, le gestionnaire change le type en text/javascript -->

Le gestionnaire de consentement change dynamiquement le type en text/javascript et recharge le script uniquement si la catégorie correspondante a été acceptée.

Méthode 2 : Chargement conditionnel via JavaScript

// Vérifier le consentement avant de charger un script
function loadScript(src, category) {
  const consent = getConsentStatus();
  if (consent[category]) {
    const script = document.createElement('script');
    script.src = src;
    document.head.appendChild(script);
  }
}

Méthode 3 : Google Consent Mode v2

Pour les sites utilisant Google Tag Manager, le Consent Mode v2 permet de gérer le consentement de manière intégrée :

// Configuration par défaut (avant consentement)
gtag('consent', 'default', {
  'analytics_storage': 'denied',
  'ad_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied'
});

// Après consentement explicite
gtag('consent', 'update', {
  'analytics_storage': 'granted',
  'ad_storage': 'granted'
});

Stockage du consentement

Le choix de l'utilisateur doit être stocké pour ne pas redemander à chaque page. Les options courantes :

• Cookie first-party : solution la plus courante, cookie avec durée de 13 mois
• LocalStorage : alternative possible mais moins standard
• Côté serveur : pour les cas où une preuve robuste est nécessaire

Le cookie de consentement lui-même est exempt de consentement (cookie strictement nécessaire au fonctionnement du service).

Validité du consentement : 13 mois

La CNIL impose un renouvellement du consentement tous les 13 mois maximum. Concrètement :

• Stocker la date du dernier consentement
• Après 13 mois, réafficher la bannière
• Ne pas prolonger automatiquement à chaque visite

Catégories de cookies

Votre bannière doit présenter les cookies par catégories. Voici la classification standard :

| Catégorie | Description | Consentement requis | |---|---|---| | Strictement nécessaires | Session, sécurité, préférences essentielles | Non | | Analytiques | Mesure d'audience, statistiques de navigation | Oui | | Marketing / Publicité | Publicité ciblée, retargeting, conversion tracking | Oui | | Réseaux sociaux | Boutons de partage, embeds, login social | Oui | | Personnalisation | A/B testing, recommandations, contenu adapté | Oui |

Pour chaque catégorie, fournissez :

• Une description compréhensible de la finalité
• La liste des cookies concernés (nom, durée, fournisseur)
• Un toggle permettant d'accepter ou refuser cette catégorie spécifiquement

Options d'implémentation

Solution SaaS (recommandée pour la plupart des sites)

Les avantages d'une solution gérée :

• Mise à jour automatique lors des évolutions réglementaires
• Scan automatique des cookies de votre site
• Preuve de consentement stockée et exportable
• Support de la législation de multiples pays
• Configuration sans développement

Solution personnalisée (custom)

Pour les sites ayant des besoins spécifiques ou souhaitant éviter une dépendance externe :

• Contrôle total sur le design et le comportement
• Pas de requête vers un service tiers (ironie d'utiliser un service tiers pour gérer le consentement aux services tiers)
• Performance optimale (pas de script externe supplémentaire)
• Nécessite une maintenance et une veille réglementaire en interne

Plugins CMS

Pour WordPress, Drupal, Joomla et autres CMS :

• Solutions rapides à déployer
• Qualité très variable selon les plugins
• Attention aux plugins gratuits qui ne respectent pas les recommandations CNIL
• Vérifier que le blocage effectif des scripts est bien implémenté (pas juste une bannière cosmétique)

Checklist de conformité technique

Avant de considérer votre bannière comme conforme, vérifiez chaque point :

Interface utilisateur :

• [ ] Bouton "Accepter tout" et "Refuser tout" au même niveau visuel
• [ ] Choix granulaire par catégorie accessible
• [ ] Lien vers la politique cookies détaillée
• [ ] Widget de réouverture de la bannière accessible en permanence
• [ ] Design non trompeur (pas de dark pattern)

Technique :

• [ ] Aucun cookie non essentiel déposé avant consentement (vérifier dans DevTools)
• [ ] Aucune requête vers des services tiers avant consentement (vérifier dans l'onglet Network)
• [ ] Scripts correctement bloqués et débloqués selon le choix
• [ ] Consentement stocké avec date et durée de 13 mois maximum
• [ ] Bannière réaffichée après expiration du consentement
• [ ] Le refus est respecté (scripts non chargés après un refus)

Juridique :

• [ ] Preuve du consentement conservée et exportable
• [ ] Politique cookies à jour avec la liste exhaustive des cookies
• [ ] Registre des traitements mis à jour

Tests :

• [ ] Tester en navigation privée (pas de consentement pré-existant)
• [ ] Tester le parcours "Refuser tout" — vérifier qu'aucun cookie non essentiel n'existe
• [ ] Tester le parcours "Accepter puis retirer" — vérifier que les cookies sont supprimés
• [ ] Tester après 13 mois (modifier la date du cookie pour simuler)
• [ ] Tester sur mobile (bannière lisible et utilisable)