FlowConsent auf Netlify installieren

Auf Netlify platzieren Sie das FlowConsent-Code-Snippet am besten ganz oben im <head>, direkt im Code Ihrer Website, und deployen anschließend neu. Netlify bietet außerdem die Snippet injection (Project configuration → Developer settings → Post processing), ohne Codeänderung und ohne neues Deployment. Die Falle: Sie fügt das Snippet direkt vor </head> ein, also hinter den Skripten, die schon im <head> stehen, und sie gilt nicht für serverseitig gerenderte Seiten.

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 Code der Website oder auf das Netlify-Dashboard des Projekts.

Schritt 1: Code-Snippet kopieren

Öffnen Sie Builder → Deployment → Integration und kopieren Sie das Code-Snippet (Tab HTML / No-code, oder Next.js für eine Next.js-App). Es besteht aus zwei Teilen in dieser Reihenfolge:

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

Schritt 2 (empfohlen): Im Code der Website einfügen

Fügen Sie das Code-Snippet direkt nach dem öffnenden <head>-Tag ein, vor jedem anderen Skript, und zwar in der Datei, die den <head> aller Seiten erzeugt:

• Statische HTML-Website: jede HTML-Seite oder die gemeinsame Vorlage Ihres Generators (Hugo, Eleventy, Jekyll…).
• Next.js: app/layout.tsx oder pages/_document.tsx, siehe Anleitung für Next.js und React-SPAs.
• Astro: das Basis-Layout, mit is:inline, siehe Auf Astro installieren.
• React (Vite, Create React App): index.html, siehe Auf React installieren.

Pushen Sie die Änderung anschließend: Netlify baut und veröffentlicht die Website neu. Nur diese Methode garantiert die Position ganz oben im <head>, und sie funktioniert auch auf serverseitig gerenderten Seiten.

Variante ohne Code: Snippet injection

Wenn Sie den Code nicht ändern können, kann Netlify das Snippet in jede ausgelieferte Seite einfügen:

1. Öffnen Sie in der Netlify-Oberfläche Project configuration → Developer settings → Post processing.
2. Wählen Sie im Bereich Snippet Injection die Option Add Snippet.
3. Wählen Sie die Einfügung vor dem schließenden </head>-Tag, vergeben Sie einen Namen (zum Beispiel FlowConsent) und fügen Sie das vollständige Code-Snippet ein, <script>-Tags inklusive.
4. Klicken Sie auf Save.

Laut Netlify-Dokumentation wird das Snippet sofort eingefügt, ein neues Deployment ist nicht nötig.

Weitere von Netlify dokumentierte Grenzen: Die Einfügung erfolgt beim Ausliefern der Seiten und funktioniert nicht auf Proxy-Routen oder auf Routen, die von Functions bearbeitet werden. Serverseitig gerenderte Seiten (SSR), die über Netlify Functions laufen, erhalten das Snippet daher nicht. Bei einer Next.js-, Astro- oder anderen SSR-Website gehen Sie über den Code.

Tracking-Skripte und Single-Page-Apps

Lassen Sie keinen Tracker fest im <head> stehen: Deklarieren Sie Google Analytics, Meta Pixel und andere Dienste unter Builder → Services, dann lädt das Banner sie erst nach der Einwilligung. Bei Google Tag Manager gehört das Code-Snippet oberhalb des GTM-Containers, niemals in GTM (Anleitung zu Google Consent Mode).

Navigiert Ihre Website ohne Neuladen der Seite (React, Next.js, Vue, Astro mit <ClientRouter />), aktivieren Sie den SPA-Modus im Tab Einstellungen des Builders und stellen Sie das Banner erneut bereit.

Installation prüfen

1. Öffnen Sie die veröffentlichte Website in einem privaten Fenster: Das Banner erscheint.
2. Zeigen Sie den Seitenquelltext an: Das Code-Snippet steht vor jedem anderen Skript im <head>.
3. Im Tab Netzwerk geht vor Akzeptieren keine Anfrage an Drittanbieter raus.
4. Starten Sie den Einrichtungsassistenten (Builder → Integration): 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).

Direkt aus Ihrem KI-Agenten (MCP)

FlowConsent bietet einen offiziellen MCP-Server, https://mcp.flowconsent.com, nutzbar aus Claude, ChatGPT oder jedem MCP-Client, mit OAuth-2.0-Verbindung zu Ihrem FlowConsent-Konto (kein API-Schlüssel). Der 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). Netlify konfiguriert er nicht für Sie.

Ich brauche das Code-Snippet meines Banners für meine Website auf Netlify und 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

Snippet injection oder Code der Website: Was soll ich wählen?

Den Code der Website, wann immer möglich: Dort steht das Snippet ganz oben im <head> und wirkt auf allen Seiten, SSR inklusive. Die Snippet injection eignet sich für eine statische Website, deren <head> kein Tracking-Skript enthält.

Auf manchen Seiten fehlt das Banner. Warum?

Diese Seiten werden wahrscheinlich von einer Function gerendert (SSR) oder über einen Proxy ausgeliefert: Dort greift die Snippet injection nicht. Setzen Sie das Code-Snippet ins Layout Ihres Frameworks.

Erscheint das Snippet auch in Deploy Previews?

Ja, die Snippet injection gilt für alle von Netlify ausgelieferten Seiten, Previews eingeschlossen. Den Einrichtungsassistenten und den Ablehnungs-Scan nutzen Sie trotzdem auf Ihrer Produktionsdomain.

Muss ich nach einer Snippet injection neu deployen?

Nein, Netlify wendet sie sofort an. Eine Änderung im Code erfordert dagegen ein neues Deployment.