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 (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.
- 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 |
| Astro | <head> des Basis-Layouts, mit is:inline | Auf Astro installieren |
| React (Vite, CRA, React Router) | index.html, ganz oben im <head>, plus SPA-Modus | Auf React installieren |
| 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:
<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.
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).
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.
Installation prüfen
- Öffnen Sie die Produktionsdomain in einem privaten Fenster: Das Banner erscheint.
- Im Tab Netzwerk geht vor Akzeptieren keine Anfrage an Drittanbieter raus.
- Starten Sie den Einrichtungsassistenten (Builder → Integration): Loader mit dem richtigen Lizenzcode vorhanden, Consent Mode Stub vorhanden und vor jedem Google-Tag platziert.
- 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 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 und FlowConsent für KI-Agenten.
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.