FlowConsent auf einer eigenen Website installieren (HTML)

Auf einer individuell entwickelten Website fügen Sie den FlowConsent-Code ein einziges Mal ganz oben in den <head> der Vorlage ein, die alle Seiten teilen (Layout, eingebundener Header, Basisvorlage), vor jedem anderen Skript. Die Installation umfasst zwei Schritte: den Code kopieren und in diese gemeinsame Vorlage einfügen. Die zwei typischen Stolperfallen: eine Content-Security-Policy, die das Banner blockiert, und clientseitige Navigation, die den SPA-Modus erfordert.

Bevor Sie beginnen

• Ein Konto auf app.flowconsent.com (der Free-Tarif ist kostenlos, ohne Kreditkarte, bis zu 25.000 Sitzungen pro Monat).
• Ein erstelltes und bereitgestelltes Banner. Im Free-Tarif läuft die Bereitstellung über Ihr eigenes Cloudflare-Konto (Cloudflare-Anleitung), bei Pro und Enterprise genügt ein Klick.
• Zugriff auf den Quellcode Ihrer Website und auf deren Veröffentlichungsprozess.

Schritt 1: Code kopieren

Öffnen Sie Builder → Deployment → Integration und kopieren Sie den Code aus dem Tab HTML / No-code. Er besteht aus zwei Teilen in dieser Reihenfolge: dem Google-Consent-Mode-v2-Stub (Standardwerte denied) und dem Loader des Banners.

<head>
  <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>
 
  <meta charset="utf-8">
  <!-- Ihre übrigen Tags und Skripte folgen danach -->
</head>

Jedes Skript oberhalb dieses Codes entgeht dem vorherigen Blockieren. Der Code muss also vor Google Analytics, Meta Pixel, Google Tag Manager und jedem anderen Tracker stehen.

Schritt 2: Einmal in die gemeinsame Vorlage einfügen

Suchen Sie die Datei, die den <head> aller Seiten erzeugt. Je nach Technologie:

• Statische HTML-Website: Ohne Vorlage hat jede .html-Datei ihren eigenen <head>. Fügen Sie den Code in jede Datei ein (Suchen und Ersetzen auf <head> genügt) oder nutzen Sie ein serverseitiges Include, falls Ihr Hoster das unterstützt.
• PHP: der gemeinsame Header, oft header.php, der per include oder require in jede Seite eingebunden wird.
• Laravel: das Blade-Layout, zum Beispiel resources/views/layouts/app.blade.php.
• Django: die Basisvorlage (oft templates/base.html), die Ihre Seiten mit {% extends "base.html" %} erweitern.
• Ruby on Rails: app/views/layouts/application.html.erb.
• Hugo: die Basisvorlage layouts/baseof.html (layouts/_default/baseof.html vor Hugo 0.146) oder das von ihr aufgerufene Partial head.html. Bei einem Theme kopieren Sie diese Datei in den Ordner layouts/ Ihres Projekts, statt das Theme zu ändern.
• Jekyll: das Layout _layouts/default.html oder _includes/head.html bei einem Theme wie Minima. Um eine Theme-Datei zu überschreiben, kopieren Sie sie an denselben Pfad in Ihrer Website.
• Eleventy: das Basislayout in _includes/ (zum Beispiel _includes/base.njk), ausgewählt über den Schlüssel layout im Front Matter.

Der Code ist normales HTML: Keine Template-Engine verlangt ein Escaping. Hat Ihre Website mehrere Root-Layouts, wiederholen Sie den Schritt in jedem. Bauen Sie die Website anschließend neu bzw. stellen Sie sie erneut bereit.

Binden Sie Ihre Tracker (Google Analytics, Meta Pixel…) nicht fest in die Vorlage ein: Deklarieren Sie sie unter Builder → Services, dann lädt das Banner sie erst nach der Einwilligung. Für Google Tag Manager siehe die eigene Anleitung.

Content-Security-Policy und clientseitige Navigation

Content-Security-Policy: script-src 'self' 'nonce-RANDOM' https://*.consent.flowconsent.com; connect-src 'self' https://*.consent.flowconsent.com

Ergänzen Sie dann nonce="RANDOM" an beiden <script>-Tags des Codes, mit einem Wert, der für jede Antwort neu erzeugt wird. Dienste, die das Banner nach der Einwilligung lädt, müssen ebenfalls erlaubt sein, genau wie ohne FlowConsent. Bei einer Blockierung nennt die Browserkonsole die Direktive und die abgelehnte Domain.

Installation prüfen

1. Öffnen Sie die Live-Website in einem privaten Fenster: Das Banner erscheint.
2. Im Tab Netzwerk geht vor dem Klick auf Akzeptieren keine Anfrage an Drittanbieter raus. Die Konsole meldet keinen CSP-Verstoß.
3. Starten Sie den Einrichtungsassistenten (Builder → Integration): Er prüft die Live-Seite (Loader mit dem richtigen Lizenzcode vorhanden, Consent-Mode-Stub vorhanden und vor jedem Google-Tag platziert).
4. Schließen Sie mit einem Ablehnungs-Scan aus dem Tab Compliance ab (Konformitätsprüfung).

Mit Ihrem KI-Agenten erledigen (MCP)

FlowConsent bietet einen offiziellen MCP-Server, https://mcp.flowconsent.com, nutzbar mit Claude, ChatGPT oder jedem MCP-Client. Die Verbindung erfolgt per OAuth 2.0 mit Ihrem FlowConsent-Konto, ohne API-Schlüssel. Ihr Agent holt den Code und die Platzierungsanweisungen (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). Die Vorlage ändern Sie selbst oder Ihr Coding-Agent: Der MCP-Server liefert den Code, die Anweisungen und die Prüfung.

Beispielanfrage:

Gib mir den Code meines Banners für meine individuell entwickelte HTML-Website, sag mir, wo er in meine Vorlage gehört, und prüfe dann, ob er auf https://meinewebsite.de korrekt installiert ist

Mehr dazu: MCP-Server und FlowConsent für KI-Agenten.

Häufige Fragen

Muss ich den Code in jede Seite einfügen?

Er muss auf jeder Seite vorhanden sein, aber Sie fügen ihn nur einmal ein, wenn Ihre Seiten eine Vorlage teilen. Nur eine reine HTML-Website ohne Vorlage verlangt das Einfügen Datei für Datei.

Kann ich ihn ans Ende des <body> setzen?

Nein. Der Consent-Mode-Stub muss vor jedem Tracker laufen: Am Seitenende wären weiter oben stehende Skripte bereits ausgeführt. Setzen Sie ihn ganz oben in den <head>.

Das Banner erscheint nicht: Wo fange ich an?

Öffnen Sie die Browserkonsole. Ein CSP-Fehler nennt eine Domain, die Sie erlauben müssen. Andernfalls prüfen Sie, ob der Code im tatsächlich ausgelieferten HTML steht (Seitenquelltext), mit Ihrem Lizenzcode.

Meine Website wird statisch generiert: Funktioniert das Banner ohne Server?

Ja. Der Code läuft im Browser und funktioniert daher auf jedem Hosting für statische Dateien.