# FlowConsent auf React installieren

FlowConsent auf React installieren (Vite, Create React App, React Router): Code-Snippet ganz oben in den <head> von index.html und SPA-Modus aktivieren.

> Canonical: https://www.flowconsent.com/de/doc/install-react
> Last updated: 2026-10-01
In einer React-App gehört das FlowConsent-Code-Snippet ganz oben in den `<head>` der HTML-Datei der Anwendung: `index.html` im Projektstamm bei Vite, `public/index.html` bei Create React App oder die Komponente `Layout` in `app/root.tsx` bei React Router im Framework-Modus. Zwei Schritte genügen, und der zweite ist Pflicht: den **SPA-Modus** aktivieren, denn eine React-App navigiert ohne Neuladen der Seite. Die häufigste Falle: das Skript aus einer React-Komponente oder einem `useEffect` zu laden. Dann ist es zu spät.

## Bevor Sie beginnen

- Ein Konto auf [app.flowconsent.com](https://app.flowconsent.com) (kostenloser Free-Tarif, ohne Kreditkarte, bis zu 25.000 Sitzungen pro Monat).
- Ein erstelltes und bereitgestelltes Banner. Im Free-Tarif erfolgt die Bereitstellung über Ihr eigenes Cloudflare-Konto ([Cloudflare-Anleitung](/de/doc/cloudflare-deployment)), bei Pro und Enterprise mit einem Klick.
- Sie nutzen Next.js? Folgen Sie stattdessen der [Anleitung für Next.js und React-SPAs](/de/doc/nextjs-integration).

## Schritt 1: Code-Snippet ins HTML der Anwendung einfügen

Kopieren Sie das Code-Snippet aus **Builder → Deployment → Integration**, Tab **HTML / No-code**. Öffnen Sie dann die HTML-Datei, die als Einstiegspunkt dient:

- **Vite**: `index.html` im Projektstamm (nicht in `public/`). Vite behandelt sie als Einstiegspunkt Ihrer Anwendung.
- **Create React App**: `public/index.html`. Create React App ist seit Februar 2025 für neue Projekte veraltet, bestehende Apps funktionieren aber genauso.

Fügen Sie das Code-Snippet **direkt nach dem öffnenden `<head>`-Tag** ein, vor jedem anderen Skript:

```html title="index.html (Vite) oder public/index.html (Create React App)"
<!doctype html>
<html lang="de">
  <head>
    <script>
    // FlowConsent Loader - VOR jedem anderen Script im <head> platzieren
    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://IHR-LIZENZCODE.consent.flowconsent.com/cookie-manager.js?code=IHR_LIZENZCODE"></script>

    <meta charset="UTF-8" />
    <title>Meine App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
```

Fügen Sie den beiden FlowConsent-Tags kein `type="module"` hinzu: Modul-Skripte werden verzögert ausgeführt, diese Skripte müssen aber sofort laufen. Bauen Sie die App neu und stellen Sie sie erneut bereit.

### React Router im Framework-Modus

Im Framework-Modus (React Router v7) rendert die Komponente `Layout` in `app/root.tsx` das HTML-Dokument. Setzen Sie das Code-Snippet an den Anfang ihres `<head>`, den Stub über `dangerouslySetInnerHTML`:

```tsx title="app/root.tsx"
export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="de">
      <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://IHR-LIZENZCODE.consent.flowconsent.com/cookie-manager.js?code=IHR_LIZENZCODE" />
        <meta charSet="utf-8" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}
```

Im deklarativen oder Data-Modus (mit Vite) hat React Router keine `root.tsx`: Verwenden Sie `index.html` wie oben.

## Schritt 2: SPA-Modus aktivieren (Pflicht)

Eine React-App wechselt Seiten mit `history.pushState`, ohne Neuladen. Ohne SPA-Modus prüft das Banner die Einwilligung bei späteren Navigationen nicht erneut. Öffnen Sie im Builder den Tab **Einstellungen**, aktivieren Sie den **SPA-Modus** und stellen Sie das Banner erneut bereit. FlowConsent hängt sich dann bei jeder clientseitigen Navigation in `pushState`, `replaceState` und `popstate` ein.

## Die Falle: FlowConsent aus einer Komponente laden

> [!WARNING]
> Injizieren Sie das FlowConsent-Skript nicht aus einer React-Komponente, einem `useEffect` oder einer Bibliothek zur Verwaltung des `<head>`. Dieser Code läuft erst, nachdem das Bundle geladen und die App gemountet ist: Skripte, die bereits in `index.html` stehen, haben dann schon gefeuert, und die Vorabblockierung greift nicht mehr. Das Code-Snippet muss fest im HTML stehen, ganz oben im `<head>`.

Laden Sie Google Analytics oder Meta Pixel ebenso wenig in Ihren Komponenten: Deklarieren Sie sie unter **Builder → Services**, damit das Banner sie erst nach der Einwilligung injiziert. Um in Ihrem Code auf die Entscheidung des Besuchers zu reagieren, hören Sie auf das Ereignis `flowconsent:consent` (Beispiel in der [Anleitung für Next.js und React-SPAs](/de/doc/nextjs-integration)). Bei Google Tag Manager gehört das Code-Snippet **oberhalb** des GTM-Containers, niemals hinein ([Anleitung zu Google Consent Mode](/de/doc/google-consent-mode)).

## Installation prüfen

1. Öffnen Sie die Live-App in einem privaten Fenster: Das Banner erscheint.
2. Im Tab **Netzwerk** geht vor **Akzeptieren** keine Anfrage an Drittanbieter raus, auch nicht nach mehreren Routenwechseln.
3. Starten Sie den [Einrichtungsassistenten](/de/doc/setup-wizard) (Builder → Integration): Er prüft, ob der Loader mit Ihrem Lizenzcode vorhanden ist und der Consent Mode Stub vor jedem Google-Tag steht.
4. Schließen Sie mit einem Ablehnungs-Scan im Tab **Konformität** ab ([Konformitätsprüfung](/de/doc/compliance-verification)).

## Direkt aus Ihrem KI-Agenten (MCP)

FlowConsent bietet einen offiziellen MCP-Server, `https://mcp.flowconsent.com`, nutzbar aus Claude, ChatGPT oder jedem MCP-Client, mit OAuth-2.0-Verbindung zu Ihrem FlowConsent-Konto (kein API-Schlüssel). Der Agent ruft das Code-Snippet und die Platzierungshinweise ab (`get_banner_snippet`, `get_setup_instructions`), prüft die Installation mit einem echten Scan (`verify_consent_compliance`) und kann eine wiederkehrende Überwachung einrichten (`monitor_compliance`). Die Änderung an `index.html` nehmen Sie oder Ihr Coding-Agent vor.

> Ich brauche das Code-Snippet meines Banners für meine React-App (Vite), den richtigen Platz dafür und danach eine Prüfung, ob es auf https://meinewebsite.de korrekt installiert ist.

Mehr dazu: [MCP-Server](/de/doc/mcp-server) und [FlowConsent für KI-Agenten](/de/mcp).

## Häufige Fragen

### Muss ich ein npm-Paket für React installieren?

Nein: Das Banner ist ein eigenständiges Skript, das ins HTML gehört. Ein ins Bundle importiertes Paket liefe für die Vorabblockierung zu spät.

### Ist der SPA-Modus wirklich Pflicht?

Ja, sobald die App einen clientseitigen Router nutzt (React Router, TanStack Router…). Ohne ihn werden Skripte, die nach der ersten Seite eingefügt werden, bei späteren Navigationen nicht erneut blockiert.

### Meine App läuft auf Vercel oder Netlify. Wohin kommt das Code-Snippet?

Weiterhin in `index.html` (oder `app/root.tsx`). Der Hoster ändert nichts. Siehe [Vercel](/de/doc/install-vercel) und [Netlify](/de/doc/install-netlify).

### Das Banner erscheint, aber Google Analytics feuert vor der Entscheidung. Warum?

Wahrscheinlich wird ein GA-Skript oberhalb des Code-Snippets oder aus einer Komponente geladen. Entfernen Sie es und deklarieren Sie Google Analytics unter **Builder → Services**.