Bei Astro gehört das FlowConsent-Code-Snippet ganz oben in den <head> Ihres Basis-Layouts (oft src/layouts/Layout.astro), mit der Direktive is:inline an jedem <script>-Tag, damit Astro die Skripte nicht verarbeitet. Die Installation umfasst zwei Schritte, plus einen dritten, wenn Ihre Website View Transitions (<ClientRouter />) nutzt: Dann erfolgt die Navigation ohne Neuladen der Seite, und Sie müssen den SPA-Modus aktivieren.
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.
- Zugriff auf den Quellcode Ihres Astro-Projekts.
Schritt 1: Code-Snippet kopieren
Öffnen Sie Builder → Deployment → Integration und kopieren Sie das Code-Snippet aus dem Tab HTML / No-code. Es besteht aus zwei Teilen in dieser Reihenfolge: dem Google Consent Mode v2 Stub (Standardwerte denied) und dem Banner-Loader.
Schritt 2: Mit is:inline ins Basis-Layout einfügen
Öffnen Sie die Layout-Komponente, die <html> und <head> für alle Seiten rendert. Astro-Projekte legen Layouts üblicherweise in src/layouts/ ab, das ist aber keine Pflicht: Suchen Sie die Datei, die Ihre Seiten gemeinsam nutzen. Fügen Sie das Code-Snippet direkt nach dem öffnenden <head>-Tag ein, vor jedem anderen Skript, und ergänzen Sie is:inline an beiden <script>-Tags:
<html lang="de">
<head>
<script is:inline>
// 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 is:inline src="https://IHR-LIZENZCODE.consent.flowconsent.com/cookie-manager.js?code=IHR_LIZENZCODE"></script>
<meta charset="utf-8" />
<title>{title}</title>
<!-- Ihre weiteren Tags und Skripte folgen danach -->
</head>
<body>
<slot />
</body>
</html>Warum is:inline? Standardmäßig verarbeitet Astro <script>-Tags: Es transformiert, bündelt und verschiebt sie. Mit is:inline wird das Skript genau so, wie es geschrieben ist, an der von Ihnen gewählten Stelle ins HTML ausgegeben. Genau das ist hier nötig: Der Consent Mode Stub muss sofort und ganz oben auf der Seite laufen, vor jedem Tracking-Tag.
Verwenden nicht alle Seiten dasselbe Layout, wiederholen Sie den Schritt in jedem Root-Layout. Bauen Sie die Website anschließend neu und stellen Sie sie erneut bereit.
Schritt 3: SPA-Modus aktivieren, wenn Sie ClientRouter nutzen
Bei einer Navigation behält Astro Skripte im <head>, die auch auf der neuen Seite vorhanden sind. Ihr Code-Snippet, auf allen Seiten identisch, bleibt also erhalten, ohne erneut ausgeführt zu werden. Fügen Sie seinen Tags kein data-astro-rerun hinzu. Details zum SPA-Modus finden Sie in der Anleitung für Next.js und React-SPAs.
Ohne <ClientRouter /> ist eine Astro-Website eine klassische Multi-Page-Website: Jeder Klick lädt die Seite neu, der SPA-Modus ist nicht nötig.
Tracking-Skripte gehören in Services
Fügen Sie Google Analytics, Meta Pixel oder andere Tracker nicht direkt ins Layout ein: Sie würden vor der Entscheidung des Besuchers feuern. Deklarieren Sie sie unter Builder → Services, dann lädt das Banner sie erst nach der Einwilligung. Wenn Sie Google Tag Manager nutzen, laden Sie FlowConsent nicht über GTM (es käme zu spät): Platzieren Sie das Code-Snippet oberhalb des GTM-Containers im selben <head>. Details in der Anleitung zu Google Consent Mode.
Installation prüfen
- Öffnen Sie die Live-Website in einem privaten Fenster: Das Banner erscheint.
- Im Tab Netzwerk der Entwicklertools geht vor dem Klick auf Akzeptieren keine Anfrage an Drittanbieter raus.
- Mit
<ClientRouter />: Navigieren Sie über mehrere Seiten und prüfen Sie, dass auch dort nichts feuert. - Starten Sie den Einrichtungsassistenten (Builder → Integration): Er prüft die Live-Seite (Loader mit dem richtigen Lizenzcode vorhanden, Consent Mode Stub vorhanden und vor jedem Google-Tag platziert).
- 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. Die Verbindung erfolgt per OAuth 2.0 mit Ihrem FlowConsent-Konto, ohne API-Schlüssel. Ihr 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). Das Layout bearbeiten Sie oder Ihr Coding-Agent: Der MCP-Server liefert Snippet, Anleitung und Prüfung.
Beispielanfrage:
Ich brauche das Code-Snippet meines Banners für meine Astro-Website, den richtigen Platz in meinem Layout 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
Warum funktioniert das Banner nach einer Navigation nicht mehr?
Ihre Website nutzt sehr wahrscheinlich <ClientRouter />, die Seite wird also nicht neu geladen. Aktivieren Sie den SPA-Modus unter Builder → Einstellungen, stellen Sie das Banner erneut bereit und testen Sie erneut in einem privaten Fenster.
Kann ich ein normales <script> ohne is:inline verwenden?
Nein. Ohne is:inline verarbeitet Astro das Skript und garantiert weder seine Position ganz oben im <head> noch die sofortige Ausführung. Die Vorabblockierung setzt voraus, dass das Code-Snippet vor jedem Tracker läuft.
Brauche ich einen bestimmten Astro-Adapter oder eine Integration?
Nein. Das Code-Snippet ist reines HTML: Es funktioniert im statischen Modus wie beim Server-Rendering, unabhängig vom Hoster (Vercel, Netlify, Cloudflare…).
Meine Astro-Website nutzt React- oder Vue-Inseln. Ändert das etwas?
Nein, solange die Navigation zwischen Seiten die Seite neu lädt. Nur <ClientRouter /> erfordert den SPA-Modus. Interaktive Inseln müssen FlowConsent nicht selbst laden.