# FlowConsent auf Vercel installieren

FlowConsent auf einer Vercel-Website: Das Code-Snippet kommt in den <head> des bereitgestellten Frameworks (Next.js, Astro, React, HTML), dann neu deployen.

> Canonical: https://www.flowconsent.com/de/doc/install-vercel
> Last updated: 2026-10-01
Vercel ist ein Hoster: Das FlowConsent-Code-Snippet wird nicht im Vercel-Dashboard eingefügt, sondern in den `<head>` des Frameworks, das Sie bereitstellen (Next.js, Astro, React, statische Website), und anschließend neu deployt. Die Installation folgt also der Anleitung Ihres Frameworks, in zwei Schritten. Vercel-spezifisch sind zwei Punkte: die hauseigenen Messwerkzeuge (Vercel Web Analytics und Speed Insights) und die Preview-Domains, die nicht der richtige Ort für die Prüfung der Installation sind.

## 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.
- Das Git-Repository des Projekts mit Vercel verbunden, oder die Vercel CLI.

## Schritt 1: Code-Snippet ins Framework einfügen

Kopieren Sie das Code-Snippet aus **Builder → Deployment → Integration** (Tabs HTML / No-code, Webflow, Next.js) und folgen Sie der Anleitung Ihres Frameworks:

| Bereitgestelltes Framework | Wohin das Code-Snippet kommt | Anleitung |
| --- | --- | --- |
| Next.js | `app/layout.tsx` oder `pages/_document.tsx`, plus SPA-Modus | [Next.js und React-SPAs](/de/doc/nextjs-integration) |
| Astro | `<head>` des Basis-Layouts, mit `is:inline` | [Auf Astro installieren](/de/doc/install-astro) |
| React (Vite, CRA, React Router) | `index.html`, ganz oben im `<head>`, plus SPA-Modus | [Auf React installieren](/de/doc/install-react) |
| Statische Website (HTML) | Ganz oben im `<head>` jeder Seite | Siehe unten |

Bei einer statischen HTML-Website gehört das Code-Snippet direkt nach das öffnende `<head>`-Tag, vor jedes andere Skript:

```html title="index.html (und jede HTML-Seite)"
<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>
<!-- Ihre weiteren Tags folgen danach -->
</head>
```

## Schritt 2: Neu deployen

Pushen Sie die Änderung auf Ihren Produktions-Branch (oder führen Sie `vercel --prod` aus). Vercel baut die Website neu, und das Code-Snippet ist auf Ihrer Produktionsdomain live. Nutzt Ihre App clientseitige Navigation (Next.js, React, Astro mit `<ClientRouter />`), prüfen Sie, ob der **SPA-Modus** im Tab **Einstellungen** des Builders aktiv ist.

## Vercel Web Analytics und Speed Insights

Beide Vercel-Produkte werden im Projekt-Dashboard aktiviert und über die Pakete `@vercel/analytics` (Komponente `<Analytics />`) und `@vercel/speed-insights` in den Code eingebunden. Laut offizieller Vercel-Dokumentation gilt:

- **Web Analytics** erfasst pro Seitenaufruf URL, Referrer, gefilterte Query-Parameter, Geolokalisierung (Land, Region, Stadt), Betriebssystem, Browser und Gerätetyp. Vercel gibt an, keine Drittanbieter-Cookies zu verwenden: Besucher werden über einen Hash aus der eingehenden Anfrage identifiziert, die Sitzung wird nach 24 Stunden verworfen. Seitenaufrufe werden auch bei clientseitigen Navigationen erfasst.
- **Speed Insights** misst bei jedem Seitenaufruf die Core Web Vitals, mit Route, Netzwerktyp, Browser, Gerät und Land. Vercel beschreibt diese Daten als anonym; sie erlauben weder, eine Sitzung über Seiten hinweg zu rekonstruieren, noch einen Nutzer zu identifizieren.

> [!NOTE]
> Die Vercel-Dokumentation stellt diese Werkzeuge als datenschutzfreundlich dar, sagt aber **nicht**, dass sie von der Einwilligungspflicht ausgenommen sind. Diese Einordnung hängt von Ihrer Konfiguration und von der Auffassung Ihrer Datenschutzbehörde ab: Lassen Sie sie von Ihrem Datenschutzbeauftragten bestätigen. Wenn Sie sie an die Einwilligung koppeln möchten, rendern Sie die Komponente `<Analytics />` erst nach der Analytics-Einwilligung, indem Sie auf das Ereignis `flowconsent:consent` hören (Beispiel in der [Next.js-Anleitung](/de/doc/nextjs-integration)). Mit der Option `beforeSend` von `@vercel/analytics` lässt sich ein Ereignis zudem verwerfen, indem `null` zurückgegeben wird.

Tracker von Drittanbietern (Google Analytics, Meta Pixel…) werden unter **Builder → Services** deklariert, nie fest im Layout. Bei Google Tag Manager gehört das Code-Snippet **oberhalb** des GTM-Containers ([Anleitung zu Google Consent Mode](/de/doc/google-consent-mode)).

## Preview-Domains

Jeder Branch und jeder Pull Request erhält ein Preview-Deployment unter einer generierten `*.vercel.app`-URL. Zwei von Vercel dokumentierte Eigenheiten verfälschen Ihre Tests:

- **Deployment Protection**: Ist sie mit **Standard Protection** aktiviert, verlangen alle Deployments außer den Produktionsdomains eine Authentifizierung. Ein externer Scan, etwa der Ablehnungs-Scan von FlowConsent, kommt nicht durch.
- **Vercel Toolbar**: Sie ist standardmäßig auf allen Preview-Deployments aktiv, in der Produktion nicht. Was Sie in einer Preview sehen, entspricht also nicht genau dem, was Ihre Besucher sehen.

> [!TIP]
> Testen Sie das Banner gern in Previews, nutzen Sie den Einrichtungsassistenten und den Ablehnungs-Scan aber auf Ihrer **Produktionsdomain**.

## Installation prüfen

1. Öffnen Sie die Produktionsdomain in einem privaten Fenster: Das Banner erscheint.
2. Im Tab **Netzwerk** geht vor **Akzeptieren** keine Anfrage an Drittanbieter raus.
3. 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.
4. 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 zu Ihrem Framework passenden 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`). Ihr Vercel-Projekt ändert er nicht für Sie.

> Ich brauche das Code-Snippet meines Banners für meine Next.js-Website auf Vercel 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

### Kann ich das Code-Snippet im Vercel-Dashboard hinzufügen?

Nein. Vercel stellt den Code Ihres Repositorys bereit: Das Code-Snippet gehört in die Dateien Ihres Frameworks, und ein neues Deployment bringt es online.

### Das Banner erscheint nicht auf meiner Preview-URL. Ist das schlimm?

Prüfen Sie zuerst, ob das Deployment die Änderung enthält. Testen Sie dann auf der Produktionsdomain: Diese sehen Ihre Besucher, und diese prüft der Einrichtungsassistent.

### Ist Vercel Web Analytics von der Einwilligung ausgenommen?

Vercel behauptet das nicht. Die Dokumentation beschreibt eine anonymisierte Messung ohne Drittanbieter-Cookies, die Entscheidung liegt aber bei Ihnen: Laden Sie es im Zweifel erst nach der Einwilligung.

### Brauche ich auf Vercel den SPA-Modus?

Das hängt vom Framework ab, nicht von Vercel: ja für Next.js, React und Astro mit `<ClientRouter />`, nein für eine statische Multi-Page-Website.