FlowConsent auf Framer installieren

Auf Framer gehört der FlowConsent-Code unter Project Settings → Custom Code → Add Script, platziert am Anfang des <head>, danach veröffentlichen Sie die Website. Die Installation umfasst drei Schritte. Die wichtigste Falle: Die Cookie Banner-Komponente von Framer ist ein eigenes Consent-Banner, das an den Google Tag Manager angebunden ist. Haben Sie sie eingefügt, entfernen Sie sie, damit Besucher nicht zwei Banner sehen.

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 Framer-Projekt, das Sie bearbeiten und veröffentlichen dürfen. Ein DSGVO-Banner läuft in der Praxis auf Ihrer eigenen Domain, und Framer behält eigene Domains den kostenpflichtigen Site-Plänen vor. Fordert der Editor beim Hinzufügen des Scripts ein Upgrade, enthält Ihr aktueller Plan die Funktion nicht.

Schritt 1: Den Code kopieren

Öffnen Sie in FlowConsent Builder → Deployment → Integration, Tab HTML / No-code. 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. Fügen Sie beide zusammen in ein einziges Framer-Script ein.

Schritt 2: Unter Project Settings → Custom Code einfügen

Die Oberfläche von Framer ist englisch. In Ihrem Projekt:

1. Öffnen Sie Project Settings (in manchen Versionen des Editors Site Settings).
2. Wählen Sie in der linken Seitenleiste den Tab Custom Code.
3. Klicken Sie auf Add Script, wenn noch kein Code existiert, sonst auf das Symbol +.
4. Geben Sie dem Script einen klaren Namen, etwa FlowConsent, und fügen Sie den Code ein.
5. Wählen Sie als Position den Anfang des <head>-Tags (start of <head>), damit der Code vor jedem anderen Script läuft.
6. Lassen Sie das Script auf allen Seiten aktiv, ohne die Seitenliste einzuschränken.
7. Wählen Sie bei der Ausführungshäufigkeit Once: Die Seite lädt den Code einmal, und das Banner folgt danach selbst den Seitenwechseln (siehe Schritt 3).

Schritt 3: Veröffentlichen, SPA-Modus aktivieren, Framer-Banner entfernen

Custom Code läuft nicht in der Canvas-Vorschau: Klicken Sie auf Publish, um den Code live zu schalten, und testen Sie auf der veröffentlichten Website.

Eine Framer-Website wechselt die Seiten im Browser, ohne vollständiges Neuladen. Aktivieren Sie daher den SPA-Modus in den Banner-Einstellungen: FlowConsent prüft die Einwilligung dann bei jeder Navigation erneut. Das Prinzip erklärt die Anleitung für Next.js und SPAs.

Haben Sie Google Tag Manager, Google Analytics oder das Meta Pixel über weitere Custom Code-Scripts geladen, darf keines davon vor FlowConsent laufen. Am sichersten: Entfernen Sie diese Scripts und deklarieren Sie die Dienste unter Builder → Services, damit das Banner sie erst nach Einwilligung lädt. Den GTM-Container können Sie im Custom Code behalten, aber am Ende des <head> (end of <head>), also nach dem FlowConsent-Code. Die integrierte Statistik von Framer (Framer Analytics) verwendet laut Framer keine Cookies und läuft daher nicht über das Banner.

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 (Google, Meta, LinkedIn usw.) 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.
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.

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 Framer-Website und prüfe, ob er auf https://meinewebsite.de korrekt installiert ist

Der Agent ändert Ihr Framer-Projekt nicht selbst: Er liefert den Code, die Anleitung und die Prüfung. Siehe MCP-Server und MCP-Seite.

Häufige Fragen

Warum erscheint das Banner nicht in der Framer-Vorschau?

Framer lädt Custom Code nicht in der Canvas-Vorschau. Veröffentlichen Sie die Website und öffnen Sie die Live-Adresse, am besten in einem privaten Fenster.

Brauche ich ein Banner, wenn ich nur Framer Analytics nutze?

Laut Framer setzt die integrierte Statistik keine Cookies und benötigt keine Einwilligung. Sobald Sie einen Drittanbieter-Dienst einbinden (Google Analytics, HubSpot, YouTube-Videos usw.), brauchen Sie ein Banner.

Kann ich FlowConsent nur auf einer einzelnen Seite einbinden?

Framer erlaubt das, empfehlenswert ist es nicht: Das Banner muss auf jeder Seite vorhanden sein, um Scripts vor der Einwilligung zu blockieren und Besuchern überall eine Änderung ihrer Wahl zu ermöglichen.

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.