# FlowConsent auf Fimo installieren

Auf Fimo ist die Website Ihr eigener Code: Setzen Sie den FlowConsent-Code an den Anfang des <head> im Root-Layout oder beauftragen Sie den Studio-Chat.

> Canonical: https://www.flowconsent.com/de/doc/install-fimo
> Last updated: 2026-10-01
Auf Fimo (fimo.ai) gibt es kein Feld für „benutzerdefinierten Code“: Ihre Website ist echter Code in einem Repository, das Sie kontrollieren. Der FlowConsent-Code gehört daher **ganz an den Anfang des `<head>` im Root-Layout**, entweder über den **Chat in Fimo Studio** oder mit Ihrem Coding-Agenten, danach **veröffentlichen** Sie. Die wichtigste Falle: Fimo-Websites basieren auf Frameworks, die Seiten ohne vollständiges Neuladen wechseln, deshalb müssen Sie den **SPA-Modus** des Banners aktivieren.

## Bevor Sie beginnen

- Ein Konto auf [app.flowconsent.com](https://app.flowconsent.com) (kostenloser Free-Plan, ohne Kreditkarte, 25.000 Sessions pro Monat) und ein erstelltes und bereitgestelltes Banner. Im Free-Plan erfolgt die Bereitstellung über Ihr eigenes Cloudflare-Konto ([Anleitung](/de/doc/cloudflare-deployment)), bei Pro und Enterprise mit einem Klick.
- Ein Fimo-Projekt, das Sie bearbeiten und veröffentlichen dürfen. Fimo erstellt Websites mit Next.js (Standard), React Router, Vite + React, Astro oder SvelteKit und kann auch andere Anwendungen hosten.

## Schritt 1: Den Code kopieren

Öffnen Sie in FlowConsent **Builder → Deployment → Integration**, Tab **HTML / No-code** (oder **Next.js**, wenn Ihre Fimo-Website Next.js nutzt). Der Code besteht aus zwei Teilen, und ihre Reihenfolge zählt:

```html title="Anfang des <head> im Root-Layout"
<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>
```

Der erste Block setzt die Standardwerte für Consent Mode v2 (alles `denied`), der zweite lädt das Banner. Beide müssen vor jedem Tracking-Script stehen.

## Schritt 2: Im Root-Layout einfügen

Die Fimo-Dokumentation beschreibt kein Menü für benutzerdefinierten Code in Studio: Der `<head>` ist Teil des Codes Ihrer Website. Es gibt zwei Wege.

**Mit dem Chat in Fimo Studio (am einfachsten).** Öffnen Sie den Chat Ihres Projekts, beschreiben Sie das gewünschte Ergebnis und fügen Sie den Code ein:

> Füge diesen Code ganz am Anfang des `<head>` im Root-Layout ein, vor jedem anderen Script, auf allen Seiten, ohne den Code zu verändern: [FlowConsent-Code]

Der Chat bereitet die Änderung vor und legt sie zur Prüfung ab: Mit **View changes** prüfen Sie, dass der Code das erste Element im `<head>` ist, mit **Open preview** sehen Sie ihn in einer Vorschau.

**Mit Ihrem Coding-Agenten oder von Hand.** Die Datei hängt vom Framework ab:

| Framework | Wo der Code hingehört |
| - | - |
| Next.js | Das Root-Layout (`app/layout.tsx`), siehe [Next.js-Anleitung](/de/doc/nextjs-integration) |
| Astro | Das Layout, das den `<head>` rendert (`src/layouts/Base.astro` in neuen Fimo-Projekten), mit `is:inline` an beiden `<script>`-Tags, damit Astro sie nicht bündelt |
| SvelteKit | `src/app.html`, am Anfang des `<head>`, vor `%sveltekit.head%` |
| Vite + React | `index.html` im Projektstamm |
| React Router | Die Komponente, die den `<head>` in `app/root.tsx` rendert |

Anschließend aktualisiert `fimo deploy` die Vorschau des aktuellen Branches, ohne etwas zu veröffentlichen.

## Schritt 3: Veröffentlichen

Gespeicherte Änderungen verändern die öffentliche Website nicht. Ist die Änderung in den Produktions-Branch (`main` standardmäßig) gemergt, klicken Sie oben rechts im Projektkopf auf **Publish** und im Panel erneut auf **Publish**. Im Terminal: `fimo checkout main`, dann `fimo deploy --publish`.

## Fimo-spezifische Fallen

> [!WARNING]
> Next.js, React Router, Vite + React und SvelteKit wechseln Seiten im Browser, ohne den `<head>` neu zu laden. Aktivieren Sie den **SPA-Modus** in den Banner-Einstellungen, damit FlowConsent die Einwilligung bei jeder Navigation erneut prüft. Dasselbe gilt für Astro, wenn Sie View Transitions nutzen.

- **Vorschau und Produktion sind getrennt.** Die Vorschau dient der Prüfung unter Projektmitgliedern, sie ist nicht Ihre öffentliche Website. Führen Sie die abschließenden Prüfungen auf der veröffentlichten Adresse durch.
- **Andere Tracker kommen danach.** Lädt der Code Google Analytics, das Meta Pixel oder den Google Tag Manager, müssen diese nach dem FlowConsent-Code stehen. Am sichersten: Entfernen Sie sie aus dem Code und deklarieren Sie sie unter **Builder → Services**, damit das Banner sie erst nach Einwilligung lädt.
- **Sicherheits-Header.** In `.fimo/config.json` lassen sich HTTP-Header festlegen. Fügen Sie dort eine Content Security Policy hinzu, erlauben Sie die Domain Ihres FlowConsent-Banners, sonst blockiert der Browser es.

## Installation prüfen

1. Öffnen Sie die veröffentlichte Website in einem **privaten Fenster**: Das Banner muss erscheinen.
2. Im Tab **Netzwerk** der Entwicklertools darf vor dem Klick auf „Akzeptieren“ keine Drittanbieter-Anfrage rausgehen.
3. Starten Sie den **Installationsassistenten** (**Builder → Integration**): Er prüft die Live-Seite (Loader mit Ihrem Lizenzcode vorhanden, Consent-Mode-Stub vorhanden, Stub VOR jedem Google-Tag). Siehe [Installationsassistent](/de/doc/setup-wizard).
4. Schließen Sie mit einem **Ablehnungs-Scan** im Tab **Compliance** ab: Ein echter Browser lehnt die Einwilligung ab und bestätigt, dass nichts feuert. Siehe [Konformitätsprüfung](/de/doc/compliance-verification).

## Mit Ihrem KI-Agenten erledigen (MCP)

FlowConsent bietet einen offiziellen MCP-Server, `https://mcp.flowconsent.com`, nutzbar aus Claude, ChatGPT oder jedem MCP-Client. Die Verbindung läuft über OAuth 2.0 mit Ihrem FlowConsent-Konto, ohne API-Schlüssel. Ihr Agent kann den Code und die Platzierungshinweise abrufen (Tools `get_banner_snippet` und `get_setup_instructions`), die Installation mit einem echten Scan prüfen (`verify_consent_compliance`) und eine wiederkehrende Überwachung einrichten (`monitor_compliance`).

Beispielanfrage:

> Gib mir den Banner-Code für meine Fimo-Website und prüfe, ob er auf https://meinewebsite.de korrekt installiert ist

Der MCP-Server von FlowConsent ändert Ihre Website nicht: Er liefert den Code, die Anleitung und die Prüfung. Den Code ins Layout einfügen Sie selbst, Ihr Coding-Agent oder der Fimo-Chat. Siehe [MCP-Server](/de/doc/mcp-server) und [MCP-Seite](/de/mcp).

## Häufige Fragen

### Hat Fimo ein Feld, um Code in den `<head>` einzufügen?

Die Fimo-Dokumentation beschreibt keines: Die Studio-Einstellungen betreffen etwa SEO und Domains, der `<head>` gehört zum Code Ihrer Website. Sie fügen den Code daher ins Root-Layout ein, über den Studio-Chat oder Ihren Coding-Agenten.

### Sollte ich FlowConsent über den Google Tag Manager laden?

Nein. FlowConsent lädt nicht über GTM, denn ein aus GTM geladenes Banner kommt für die Vorabblockierung zu spät. Der Code gehört an den Anfang des `<head>`, oberhalb des GTM-Containers. Siehe [Google Consent Mode](/de/doc/google-consent-mode).

### Kann ein Fimo-Agent den Code versehentlich entfernen?

Fimo-Agenten arbeiten in Branches und legen ihre Änderungen vor dem Merge zur Prüfung vor. Lesen Sie Diffs, die das Root-Layout betreffen, und lassen Sie die FlowConsent-Überwachung (`monitor_compliance`) jede Regression melden.