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 (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), bei Pro und Enterprise mit einem Klick.
- Sie nutzen Next.js? Folgen Sie stattdessen der Anleitung für Next.js und React-SPAs.
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.htmlim Projektstamm (nicht inpublic/). 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:
<!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:
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
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). Bei Google Tag Manager gehört das Code-Snippet oberhalb des GTM-Containers, niemals hinein (Anleitung zu Google Consent Mode).
Installation prüfen
- Öffnen Sie die Live-App in einem privaten Fenster: Das Banner erscheint.
- Im Tab Netzwerk geht vor Akzeptieren keine Anfrage an Drittanbieter raus, auch nicht nach mehreren Routenwechseln.
- Starten Sie den Einrichtungsassistenten (Builder → Integration): Er prüft, ob der Loader mit Ihrem Lizenzcode vorhanden ist und der Consent Mode Stub vor jedem Google-Tag steht.
- Schließen Sie mit einem Ablehnungs-Scan im Tab Konformität ab (Konformitätsprüfung).
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 und FlowConsent für KI-Agenten.
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 und 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.