Consentement cookies React : un bandeau qui bloque vraiment les scripts
Bandeau de consentement cookies React
Consentement cookies React : un bandeau qui bloque les scripts | We.Inc
Créez un bandeau de consentement aux cookies en React : enregistrez le choix, chargez l'analytics seulement après Accepter, envoyez les mises à jour Consent Mode. Avec les props du package react-cookie-consent.
Gardez le choix du visiteur dans le state React, enregistrez-le dans un cookie first-party ou dans le stockage du navigateur, et n'affichez les scripts d'analytics ou de publicité que lorsque la catégorie correspondante est acceptée. Un petit hook et un composant de bandeau suffisent. Si vous préférez un package, react-cookie-consent fournit un bandeau prêt à l'emploi avec des props pour les boutons de refus, le nom du cookie et son expiration.
Deux façons d'ajouter le consentement à un site React
Le coder vous-même
Package react-cookie-consent
Catégories (analytics, publicité)
Oui, toutes celles dont vous avez besoin
Une seule valeur accepter ou refuser par défaut
Bouton Refuser
Oui
Désactivé par défaut ; enableDeclineButton l'active
Où le choix est enregistré
Cookie ou stockage, au choix
Un cookie nommé CookieConsent par défaut
Expiration par défaut
Vous la définissez
365 jours
Licence
Votre propre code
MIT
Le plus difficile dans un bandeau de consentement n'est pas la boîte à l'écran, c'est de s'assurer que rien de non essentiel ne s'exécute avant que le visiteur dise oui. En React, c'est un problème de state : une seule source de vérité pour le choix, et des composants qui la lisent avant d'injecter une balise script. La démo ci-dessous fait exactement cela : vous pouvez voir le chargeur d'analytics rester inactif jusqu'à ce que vous acceptiez.
Un hook useConsent lit le choix éventuellement enregistré au démarrage de l'application et l'expose avec des fonctions pour le modifier.
Le bandeau ne s'affiche que tant qu'aucun choix n'est enregistré, et propose Tout accepter, Tout refuser et des interrupteurs par catégorie, désactivés au départ.
Les chargeurs de scripts consultent le hook avant d'ajouter leur balise script : en cas de refus, la balise n'est jamais ajoutée.
Si vous utilisez les balises Google, la même fonction envoie une mise à jour Consent Mode avec les catégories acceptées.
Un lien Paramètres des cookies, placé n'importe où dans l'application, efface le choix enregistré pour que le bandeau réapparaisse.
Affichez le bandeau depuis votre layout racine pour qu'il apparaisse sur chaque route, y compris lors d'une visite directe sur une page profonde.
Avec le rendu côté serveur, ne lisez le choix enregistré que dans un effet côté client, pour que le rendu serveur et le premier rendu client correspondent.
Donnez au bandeau role=dialog ou une région avec un libellé, et rendez chaque bouton accessible au clavier.
Enregistrez un numéro de version avec le choix ; quand vous ajoutez une catégorie, incrémentez-le pour redemander.
Ne cachez jamais l'option de refus derrière l'écran des paramètres ; placez Tout refuser à côté de Tout accepter.
Questions fréquentes
react-cookie-consent bloque-t-il les scripts à ma place ?
Non. Son README décrit un bandeau qui enregistre la réponse du visiteur dans un cookie et appelle onAccept ou onDecline. Charger ou non votre analytics reste votre travail, par exemple en vérifiant getCookieConsentValue avant d'ajouter le script.
Comment ajouter un bouton de refus à react-cookie-consent ?
Activez la prop enableDeclineButton ; elle vaut false par défaut. Le texte du bouton est I decline par défaut et se modifie avec declineButtonText, et onDecline s'exécute quand on clique dessus.
Comment permettre aux visiteurs de changer d'avis ?
Avec votre propre hook, effacez la valeur enregistrée et le bandeau revient. Avec le package, appelez resetCookieConsentValue en passant le même nom de cookie que celui donné au bandeau si vous avez changé la valeur par défaut.
Faut-il stocker le consentement dans un cookie ou dans le stockage du navigateur ?
Les deux fonctionnent côté navigateur. Un cookie peut aussi être lu par votre serveur, ce qui aide si c'est le serveur qui décide quelles balises afficher. Le stockage du navigateur évite d'envoyer la valeur à chaque requête. Les deux sont autorisés pour mémoriser le choix lui-même.
Où placer les appels Consent Mode dans React ?
Placez le gtag consent default dans le head HTML avant toute balise Google, en dehors de React, pour qu'il s'exécute en premier. Appelez gtag('consent', 'update', ...) depuis votre gestionnaire Accepter dans React.
Pourquoi bloquer vaut mieux que masquer
Un bandeau qui se contente de disparaître après Refuser, alors que le snippet d'analytics de index.html s'est déjà exécuté, enregistre quand même la visite. La solution consiste à déplacer le snippet dans un composant qui ne s'affiche qu'après le consentement.
Pour les balises que vous ne pouvez pas déplacer, comme celles qu'une plateforme injecte pour vous, utilisez le réglage de consentement de cette plateforme ou Consent Mode, pour que la balise fonctionne en mode restreint jusqu'à l'arrivée de la mise à jour.
Tester votre bandeau
Ouvrez le site dans une fenêtre privée, ouvrez les outils de développement du navigateur et regardez le panneau Réseau : avant d'appuyer sur quoi que ce soit, aucune requête d'analytics ou de publicité ne doit apparaître. Acceptez ensuite et vérifiez qu'elles démarrent.
Recommencez avec Tout refuser et rechargez une deuxième page pour vérifier que le refus est bien mémorisé.
Le coder vous-même : hook, bandeau et script conditionnel
Trois petits éléments. Ils n'utilisent aucune bibliothèque, fonctionnent dans toute application React 18 ou 19, et correspondent à la démo ci-dessus.
Hook useConsent
Lit une fois le choix enregistré côté client, puis enregistre et diffuse chaque changement.
Composant ConsentBanner
Accepter et Refuser sont côte à côte ; les cases de catégorie sont décochées au départ.
Charger un script seulement après consentement
La balise script n'est créée que si la catégorie est acceptée : en cas de refus, elle n'existe jamais.
Utiliser le package react-cookie-consent
Installez-le avec npm install react-cookie-consent. Voici les props et fonctions utilitaires documentées dans son README, avec leurs valeurs par défaut, en octobre 2026.
Props et valeurs par défaut de react-cookie-consent
Prop ou fonction
Défaut
Rôle
"bottom"
Position de la barre : top, bottom ou none
buttonText
"I understand"
Texte du bouton Accepter
enableDeclineButton
Affiche un bouton de refus
declineButtonText
"I decline"
Texte du bouton de refus
cookieName
"CookieConsent"
Nom du cookie qui enregistre la réponse
Nombre de jours avant l'expiration du cookie
onAccept / onDecline
Exécute votre code quand le visiteur répond
getCookieConsentValue(name)
Lit la réponse enregistrée
resetCookieConsentValue()
Supprime la réponse enregistrée pour que la barre réapparaisse
Bandeau avec bouton de refus
Accepter charge l'analytics ; Refuser ne charge rien d'optionnel. La vérification au premier chargement couvre les visiteurs qui reviennent.
Démo en direct : un bandeau de consentement qui bloque les scripts
Site fictif
Nous utilisons des cookies d'analytics et de publicité uniquement si vous êtes d'accord.
Tout accepter
Tout refuser
Choisir
Enregistrer mes choix
Analytics
Publicité
Nécessaires (toujours actifs)
Ce qui serait chargé
{c} : script ajouté
{c} : bloqué
Aucun choix pour l'instant, donc rien d'optionnel n'est chargé.
Paramètres des cookies
Mise à jour Consent Mode envoyée
Aucune pour l'instant.
La démo mémorise votre choix dans ce navigateur uniquement. Rien n'est envoyé nulle part.