# FlowConsent auf Astro installieren

FlowConsent auf Astro installieren: Code-Snippet mit is:inline ganz oben in den <head> des Basis-Layouts einfügen und bei ClientRouter den SPA-Modus aktivieren.

> Canonical: https://www.flowconsent.com/de/doc/install-astro
> Last updated: 2026-10-01
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](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.
- 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 title="src/layouts/Layout.astro"
<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

> [!WARNING]
> Astros Komponente `<ClientRouter />` (importiert aus `astro:transitions`, vor Astro 5 `<ViewTransitions />` genannt) ersetzt die klassische Navigation durch einen clientseitigen Router: Seiten wechseln **ohne vollständiges Neuladen**, über `history.pushState`. Das Banner läuft daher nicht auf jeder Seite erneut. Aktivieren Sie den **SPA-Modus** im Tab **Einstellungen** des Builders und stellen Sie das Banner erneut bereit: Die Einwilligung wird dann bei jeder clientseitigen Navigation erneut geprüft.

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](/de/doc/nextjs-integration).

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](/de/doc/google-consent-mode).

## Installation prüfen

1. Öffnen Sie die Live-Website in einem privaten Fenster: Das Banner erscheint.
2. Im Tab **Netzwerk** der Entwicklertools geht vor dem Klick auf **Akzeptieren** keine Anfrage an Drittanbieter raus.
3. Mit `<ClientRouter />`: Navigieren Sie über mehrere Seiten und prüfen Sie, dass auch dort nichts feuert.
4. Starten Sie den [Einrichtungsassistenten](/de/doc/setup-wizard) (Builder → Integration): Er prüft die Live-Seite (Loader mit dem richtigen Lizenzcode vorhanden, Consent Mode Stub vorhanden und vor jedem Google-Tag platziert).
5. 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. 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](/de/doc/mcp-server) und [FlowConsent für KI-Agenten](/de/mcp).

## 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.
