consentement cookies pour React
Une app Vite ou CRA reçoit le runtime comme première balise dans index.html, puis @cookiecrumbs/react vous donne ConsentGate, CookieDeclaration et ManageCookiesLink pour l’arbre.
la règle
Une single-page app React charge ses statistiques dans main.tsx avant qu’aucune UI n’existe. Un composant bannière ajouté ensuite affiche un choix mais ne peut pas reprendre ce qui a déjà tourné.
La règle est la même partout dans l’UE et au Royaume-Uni : rien au-delà du strictement nécessaire ne peut être stocké sur l’appareil d’un visiteur ni lu depuis celui-ci avant son accord. C’est l’article 5(3) de la directive ePrivacy, et cet accord doit répondre à la définition du consentement du RGPD : libre, spécifique, éclairé et univoque, avec un refus aussi simple que l’acceptation. Le Royaume-Uni conserve la même règle dans PECR, avec d’étroites exemptions pour les statistiques à faible risque depuis le 5 février 2026. La Californie et les autres lois des États américains fonctionnent à l’inverse : pas d’opt-in, mais un lien d’opt-out et la prise en charge du signal Global Privacy Control.
Trois choses en découlent pour un site. Les scripts d’analyse, de publicité et de réseaux sociaux doivent attendre un choix. Ce choix doit être enregistré de façon à pouvoir être montré plus tard, car l’article 7(1) met la charge de la preuve sur vous. Et retirer son consentement doit être aussi simple que le donner, ce qui suppose un contrôle qui rouvre la bannière sur chaque page. Une bannière qui affiche deux boutons et charge quand même Google Analytics échoue au premier test, et c’est précisément ce manquement que les autorités sanctionnent, des décisions de la CNIL contre Google et SHEIN aux contrôles des autorités néerlandaise et belge.
comment ça marche
Une SPA React a un seul fichier HTML, et c’est là que le consentement doit commencer. Le runtime va dans index.html comme premier script du head, avant le bundle Vite ou Webpack. Il installe son intercepteur de façon synchrone, avant même de récupérer votre configuration, si bien que tout ce que le bundle tente d’injecter ensuite est attrapé.
Dans l’arbre, vous avez deux outils. ConsentGate ne rend ses enfants que lorsqu’une catégorie est accordée et affiche sinon votre fallback, ce qui est la bonne façon de monter un widget de chat, une vidéo embarquée ou un fournisseur d’analytics. L’API runtime sur window, enveloppée par @cookiecrumbs/react dans un hook, indique à tout composant l’état courant, le régime, la langue et l’identifiant de consentement, et lui donne open() pour rouvrir la bannière depuis un lien de pied de page.
Les patterns React qui piègent : un fournisseur d’analytics en haut de l’arbre qui tire au montage, un routeur qui envoie des pages vues à chaque navigation, et un useEffect qui injecte un pixel. Chacun passe soit dans un gate, soit vérifie isGranted("analytics") avant de faire quoi que ce soit. Le scan de votre site déployé montre lesquels tirent encore avant le consentement, avec le script responsable.
mise en place
Cinq étapes. La CLI en fait l’essentiel, et chacune est aussi un clic dans le tableau de bord.
Détecte un projet React simple, relie le site, écrit la config et affiche le snippet.
npx cookiecrumbs login
npx cookiecrumbs initAvant votre bundle, avant tout. Le runtime installe son intercepteur de façon synchrone.
<!-- index.html -->
<head>
<script src="https://app.cookiecrumbs.eu/runtime/cc.js"
data-cc-site="pk_live_…"
data-cc-env="production"></script>
…
</head>Une balise type="text/plain" avec une catégorie reste inerte jusqu’à l’accord. Dans l’arbre, ConsentGate ne rend ses enfants que lorsque la catégorie est accordée.
<script type="text/plain" data-cc-category="analytics"
src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
// in the app
import { ConsentGate } from '@cookiecrumbs/react';
<ConsentGate category="marketing">
<MetaPixel />
</ConsentGate>Un lien de pied de page qui rouvre la bannière est la voie de retrait qu’attend l’article 7(3).
import { ManageCookiesLink } from '@cookiecrumbs/react';
<ManageCookiesLink>Manage cookies</ManageCookiesLink>Le scan trouve ce que le bundle charge vraiment. Classez une fois par fournisseur, publiez, c’est fait.
npx cookiecrumbs scan --wait
npx cookiecrumbs push --env productionLes apps React qui utilisent Google Ads ajoutent en général gtag.js dans index.html. Laissez-le là, sous le runtime, et les valeurs par défaut de Consent Mode sont déjà sur « denied » quand il se charge.
Google Consent Mode v2 est la couche de signalisation entre la bannière et les balises Google. Avant qu’une balise ne s’exécute, sept signaux (ad_storage, analytics_storage, ad_user_data, ad_personalization, functionality_storage, personalization_storage, security_storage) sont positionnés sur « denied » pour les visiteurs de l’EEE, du Royaume-Uni et de la Suisse. Dès que quelqu’un choisit, le runtime les met à jour et les balises Google s’adaptent. Depuis le 15 juin 2026, Google utilise ad_storage comme signal déterminant pour les données Ads, donc la valeur par défaut compte plus qu’avant.
CookieCrumbs fixe les valeurs par défaut de façon synchrone, avant tout gestionnaire de balises, les met à jour à chaque décision et fournit un modèle Google Tag Manager pour que les déclencheurs de consentement existent sans écouteurs écrits à la main. En mode avancé, les pings sans cookies de Google maintiennent les conversions modélisées pour les visiteurs qui ont refusé. Ce qu’il ne fait pas : se faire passer pour une CMP certifiée Google. Pour AdSense, Ad Manager ou AdMob dans l’EEE, il vous en faut toujours une avec IAB TCF, et CookieCrumbs ne l’est pas aujourd’hui.
attention
Chacune apparaît dans le premier scan comme un traceur déclenché avant le consentement.
avant de publier
Huit lignes. Le tableau de bord coche les deux dernières à partir de données réelles.
type="text/plain" avec une catégorie, soit l’hôte figure dans la carte de blocage issue du scan.ce que vous obtenez
Deux domaines, 100 sous-pages scannées par mois et par domaine, toutes les réglementations, la CLI, les SDK et le serveur MCP.
Chaque page, dans chaque état de consentement, dans un vrai navigateur. Cookies, pixels, iframes et clés de stockage, avec la page et le script qui les ont posés. Rescanné selon un planning.
La déclaration cookies s’écrit d’elle-même à partir du résultat.
Les balises restent inertes tant que leur catégorie n’est pas accordée. « Tout refuser » est aussi visible que « Tout accepter ». Sept mises en page, 25 langues, Consent Mode v2 et la bonne règle par région.
21 ko, un seul fichier, aucune requête tierce de son propre chef.
Chaque choix est stocké avec un horodatage, la version de la bannière et un hachage des textes affichés, chaîné à l’enregistrement précédent. Les exports sont signés. Hébergé à Francfort.
Article 7(1), dans l’offre gratuite.
vérification gratuite
Le HTML de la page d’accueil, confronté à la base de traceurs. Pas de compte, rien n’est stocké. Le scan complet du tableau de bord fait de même pour chaque page, dans un vrai navigateur.
questions
étape suivante
Ajoutez le site, lancez npx cookiecrumbs init dans votre dépôt React, et le journal de consentement commence à enregistrer dans l’UE.