Sur une application React, l'extrait de code FlowConsent se colle tout en haut du <head> du fichier HTML de l'application : index.html à la racine du projet avec Vite, public/index.html avec Create React App, ou le composant Layout de app/root.tsx avec React Router en mode framework. Deux étapes suffisent, et la seconde est obligatoire : activer le mode SPA, car une application React navigue sans recharger la page. Le piège principal consiste à charger le script depuis un composant React ou un useEffect : il arrive alors trop tard.
Avant de commencer
- Un compte sur app.flowconsent.com (offre Free gratuite, sans carte bancaire, jusqu'à 25 000 sessions par mois).
- Une bannière créée puis déployée. Sur l'offre Free, le déploiement passe par votre compte Cloudflare (guide Cloudflare) ; sur Pro et Enterprise, il se fait en un clic.
- Vous utilisez Next.js ? Suivez plutôt le guide Next.js et SPA React.
Étape 1 : coller l'extrait de code dans le HTML de l'application
Copiez l'extrait de code depuis Builder → Déploiement → Intégration, onglet HTML / No-code. Ouvrez ensuite le fichier HTML qui sert de point d'entrée :
- Vite :
index.html, à la racine du projet (et non danspublic/). Vite le traite comme le point d'entrée de l'application. - Create React App :
public/index.html. Create React App est déprécié depuis février 2025 pour les nouveaux projets, mais les applications existantes fonctionnent de la même façon.
Collez l'extrait de code juste après l'ouverture de <head>, avant tout autre script :
<!doctype html>
<html lang="fr">
<head>
<script>
// FlowConsent Loader - PLACER AVANT tout autre script dans le <head>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{
'ad_storage':'denied',
'analytics_storage':'denied',
'ad_user_data':'denied',
'ad_personalization':'denied',
'wait_for_update':500
});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);
</script>
<!-- FlowConsent CMP -->
<script src="https://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"></script>
<meta charset="UTF-8" />
<title>Mon application</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>N'ajoutez pas type="module" aux deux balises FlowConsent : un script module est différé, alors que ces scripts doivent s'exécuter immédiatement. Reconstruisez puis redéployez l'application.
React Router en mode framework
En mode framework (React Router v7), le document HTML est rendu par le composant Layout de app/root.tsx. Placez l'extrait de code en premier dans son <head>, le stub passant par dangerouslySetInnerHTML :
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<head>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{'ad_storage':'denied','analytics_storage':'denied','ad_user_data':'denied','ad_personalization':'denied','wait_for_update':500});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);`,
}}
/>
{/* FlowConsent CMP */}
<script src="https://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE" />
<meta charSet="utf-8" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
)
}En mode déclaratif ou data (avec Vite), React Router n'a pas de root.tsx : utilisez index.html comme ci-dessus.
Étape 2 : activer le mode SPA (obligatoire)
Une application React change de page avec history.pushState, sans rechargement. Sans le mode SPA, la bannière ne revérifie pas le consentement aux navigations suivantes. Dans le Builder, ouvrez l'onglet Réglages, activez le mode SPA et redéployez la bannière. FlowConsent intercepte alors pushState, replaceState et popstate à chaque navigation côté client.
Le piège : charger FlowConsent depuis un composant
De même, ne chargez pas Google Analytics ou Meta Pixel dans vos composants : déclarez-les dans Builder → Services pour que la bannière ne les injecte qu'après consentement. Pour réagir au choix du visiteur dans votre code, écoutez l'événement flowconsent:consent (exemple dans le guide Next.js et SPA React). Avec Google Tag Manager, l'extrait de code se place au-dessus du conteneur GTM, jamais à l'intérieur (guide Google Consent Mode).
Vérifier l'installation
- Ouvrez l'application en ligne en navigation privée : la bannière s'affiche.
- Dans l'onglet Réseau, aucune requête tierce ne part avant Accepter, y compris après plusieurs changements de route.
- Lancez l'assistant d'installation (Builder → Intégration) : il vérifie que le chargeur est présent avec votre code de licence et que le stub Consent Mode précède chaque tag Google.
- Terminez par un scan de refus depuis l'onglet Conformité (vérification de conformité).
Le faire depuis votre agent IA (MCP)
FlowConsent dispose d'un serveur MCP officiel, https://mcp.flowconsent.com, utilisable depuis Claude, ChatGPT ou tout client MCP, avec une connexion OAuth 2.0 à votre compte FlowConsent (pas de clé d'API). L'agent récupère l'extrait de code et les consignes de placement (get_banner_snippet, get_setup_instructions), vérifie l'installation par un vrai scan (verify_consent_compliance) et peut poser une surveillance récurrente (monitor_compliance). La modification de index.html reste de votre ressort, ou de celui de votre agent de code.
Donne-moi l'extrait de code de ma bannière pour mon application React (Vite), dis-moi où le placer, puis vérifie qu'il est bien installé sur https://monsite.fr
En savoir plus : serveur MCP et FlowConsent pour les agents IA.
Questions fréquentes
Faut-il installer un paquet npm pour React ?
Non : la bannière est un script autonome, à placer dans le HTML. Un paquet importé dans le bundle s'exécuterait trop tard pour le blocage préalable.
Le mode SPA est-il vraiment obligatoire ?
Oui, dès que l'application utilise un routeur côté client (React Router, TanStack Router…). Sans lui, les scripts injectés après la première page ne sont pas rebloqués lors des navigations suivantes.
Mon application est hébergée sur Vercel ou Netlify : où coller l'extrait ?
Toujours dans index.html (ou app/root.tsx). L'hébergeur ne change rien. Voir Vercel et Netlify.
La bannière s'affiche, mais Google Analytics part avant le choix. Pourquoi ?
Un script GA est probablement chargé au-dessus de l'extrait de code, ou depuis un composant. Retirez-le et déclarez Google Analytics dans Builder → Services.