# FlowConsent auf Netlify installieren

FlowConsent auf Netlify installieren: Code-Snippet ganz oben in den <head> im Website-Code einfügen, oder per Snippet injection, wenn kein Skript davor steht.

> Canonical: https://www.flowconsent.com/de/doc/install-netlify
> Last updated: 2026-10-01
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](https://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](/de/doc/cloudflare-deployment)), 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:

```html title="FlowConsent-Code-Snippet"
<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](/de/doc/nextjs-integration).
- **Astro**: das Basis-Layout, mit `is:inline`, siehe [Auf Astro installieren](/de/doc/install-astro).
- **React (Vite, Create React App)**: `index.html`, siehe [Auf React installieren](/de/doc/install-react).

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.

> [!WARNING]
> Die Snippet injection setzt das Snippet **ans Ende des `<head>`**, nicht an den Anfang. Jedes Tracking-Skript, das bereits im `<head>` Ihrer Seiten steht (Google Analytics, Meta Pixel, Google-Tag-Manager-Container…), landet damit **oberhalb** von FlowConsent und feuert vor der Entscheidung des Besuchers. Nutzen Sie diese Methode nur, wenn der `<head>` Ihrer Website kein Tracking-Skript enthält; andernfalls fügen Sie das Snippet in den Code ein (Schritt 2).

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](/de/doc/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](/de/doc/setup-wizard) (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](/de/doc/compliance-verification)).

## 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](/de/doc/mcp-server) und [FlowConsent für KI-Agenten](/de/mcp).

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