Comment ajouter un bandeau cookies à une application React monopage

Où placer la balise dans une application React ?

Une application React monopage a un seul fichier HTML, qui charge le bundle. La balise va dans son head, au-dessus de tout le reste. Dans un projet Vite, ce fichier est index.html à la racine du projet ; dans Create React App, c’est public/index.html. L’équipe React a déprécié Create React App en février 2025 et l’outil continue de fonctionner en mode maintenance : la même étape s’applique donc aux applications existantes.

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cookiequiet.com/cq.js" data-site="%VITE_COOKIEQUIET_SITE%" data-consent-mode="1" data-auto-block="1" defer></script>
    <title>My app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Vite remplace %VITE_COOKIEQUIET_SITE% dans index.html par la variable de votre fichier .env. Si la variable n’est pas définie, Vite laisse le texte tel quel : vérifiez donc le fichier construit, ou écrivez la clé directement. Le script d’entrée de Vite est un script de module, que le navigateur exécute après l’analyse du document, dans l’ordre du document avec les scripts différés : cq.js, placé au-dessus, s’exécute donc en premier.

Ne bundlez pas cq.js et ne l’injectez pas depuis un composant. Le bandeau lit ses réglages dans sa propre balise script et doit s’exécuter avant les balises qu’il contrôle, ce que seule l’enveloppe HTML garantit.

Comment bloquer mes balises jusqu’au consentement ?

Balises marquées dans l’enveloppe HTML. Collez-les sous la balise Cookiequiet et modifiez leur balise d’ouverture :

html
<script type="text/plain" data-cq-category="marketing">
  /* code de base du pixel Meta, inchangé */
</script>

Cookiequiet les exécute quand la catégorie est accordée, et d’emblée lors des visites suivantes où le choix enregistré l’inclut. Les guides Meta Pixel et Google Analytics 4 montrent les balises complètes.

Scripts que votre code ajoute à l’exécution. Avec data-auto-block="1", les scripts et iframes créés en JavaScript par environ 80 traceurs connus sont retenus jusqu’à ce que leur catégorie soit accordée. Pour tout le reste, conditionnez-les dans votre propre code.

Comment les composants React lisent-ils le choix du visiteur ?

Cookiequiet émet un événement cq:consent sur window chaque fois qu’il applique un choix : un choix enregistré au chargement de la page, un nouveau choix après un clic, et toutes les catégories dans les régions où le ciblage géographique n’affiche pas le bandeau. event.detail.categories liste les catégories accordées. window.Cookiequiet.get() renvoie le choix en vigueur, dont le tableau c contient la même liste (avec a: "geo" là où aucun bandeau n’est affiché), ou null tant qu’aucun choix ne s’applique. Un hook construit sur useSyncExternalStore :

tsx
// src/consent.ts
import { useSyncExternalStore } from "react";
​
const cq = (window as any).Cookiequiet;
let granted: string[] = cq?.get()?.c ?? [];
const listeners = new Set<() => void>();
​
window.addEventListener("cq:consent", (e) => {
  granted = (e as CustomEvent).detail.categories;
  listeners.forEach((l) => l());
});
​
export function useConsent(category: string) {
  return useSyncExternalStore(
    (cb) => {
      listeners.add(cb);
      return () => { listeners.delete(cb); };
    },
    () => granted.includes(category),
  );
}

Ne rendez un lecteur YouTube que lorsque useConsent("marketing") vaut true ; sinon, affichez un espace réservé avec un bouton qui appelle window.Cookiequiet.showPreferences().

Et les changements de route ?

React Router et les autres routeurs côté client changent l’URL sans recharger la page. La balise s’exécute une fois par chargement complet, le choix reste appliqué et le bandeau ne réapparaît pas. Deux conséquences :

• Les scripts marqués sont activés au chargement et après chaque choix. Gardez-les dans l’enveloppe HTML, pas dans des composants rendus plus tard.
• Les pages vues des changements de route relèvent de votre code. Avec React Router, lancez un effet sur useLocation() :

tsx
const location = useLocation();
const analytics = useConsent("analytics");
useEffect(() => {
  if (analytics) sendPageView(location.pathname); // votre appel de mesure d’audience
}, [location, analytics]);

Si vous utilisez Next.js, Gatsby ou un framework avec rendu côté serveur, suivez plutôt le guide Next.js ou la page du framework correspondant.

Comment ajouter le lien Préférences de cookies ?

tsx
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Cookiequiet gère les clics sur ce lien partout dans la page : aucun gestionnaire de clic n’est nécessaire.

Comment tester ?

1. Lancez le build et prévisualisez-le (vite build puis vite preview), puis affichez le code source de la page : cq.js vient en premier.
2. Ouvrez l’application dans une fenêtre de navigation privée et cliquez sur Tout refuser. Les cookies sont cq_consent et les vôtres, rien de Google ni de Meta.
3. Effacez les cookies, cliquez sur Tout accepter, rechargez : les balises marquées s’exécutent. Changez de route et vérifiez que les pages vues suivent le choix.
4. Ouvrez le registre des consentements dans le tableau de bord.

Une Content Security Policy doit autoriser https://cookiequiet.com dans script-src et connect-src. Cookiequiet est gratuit pour un site, ciblage géographique compris ; Starter coûte 3 € par site et par mois, et les pages vues sont illimitées dans toutes les offres.