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 (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), 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:
<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 |
| 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
- 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.jsonlassen 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
- Öffnen Sie die veröffentlichte Website in einem privaten Fenster: Das Banner muss erscheinen.
- Im Tab Netzwerk der Entwicklertools darf vor dem Klick auf „Akzeptieren“ keine Drittanbieter-Anfrage rausgehen.
- 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.
- 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.
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 und MCP-Seite.
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.
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.