# Installer FlowConsent sur React

Installer FlowConsent sur React (Vite, Create React App, React Router) : coller l'extrait de code en haut du <head> de index.html et activer le mode SPA.

> Canonical: https://www.flowconsent.com/fr/doc/install-react
> Last updated: 2026-10-01
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](https://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](/fr/doc/cloudflare-deployment)) ; sur Pro et Enterprise, il se fait en un clic.
- Vous utilisez Next.js ? Suivez plutôt le [guide Next.js et SPA React](/fr/doc/nextjs-integration).

## É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 dans `public/`). 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 :

```html title="index.html (Vite) ou public/index.html (Create React App)"
<!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` :

```tsx title="app/root.tsx"
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

> [!WARNING]
> N'injectez pas le script FlowConsent depuis un composant React, un `useEffect` ou une bibliothèque de gestion du `<head>`. Ce code ne s'exécute qu'après le téléchargement du bundle et le montage de l'application : les scripts déjà présents dans `index.html` auront eu le temps de partir, et le blocage préalable ne fonctionne plus. L'extrait de code doit être écrit en dur dans le HTML, en tête du `<head>`.

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](/fr/doc/nextjs-integration)). Avec Google Tag Manager, l'extrait de code se place **au-dessus** du conteneur GTM, jamais à l'intérieur ([guide Google Consent Mode](/fr/doc/google-consent-mode)).

## Vérifier l'installation

1. Ouvrez l'application en ligne en navigation privée : la bannière s'affiche.
2. Dans l'onglet **Réseau**, aucune requête tierce ne part avant **Accepter**, y compris après plusieurs changements de route.
3. Lancez l'[assistant d'installation](/fr/doc/setup-wizard) (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.
4. Terminez par un scan de refus depuis l'onglet **Conformité** ([vérification de conformité](/fr/doc/compliance-verification)).

## 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](/fr/doc/mcp-server) et [FlowConsent pour les agents IA](/fr/mcp).

## 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](/fr/doc/install-vercel) et [Netlify](/fr/doc/install-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**.