Cookie-Einwilligung für v0

Cookie-Einwilligung für v0,
vor dem ersten Render

v0 gibt Ihnen eine Next.js-App. Das Tag kommt mit strategy="beforeInteractive" in app/layout.tsx, sodass die Consent-Standardwerte vor der Hydration und vor jedem von v0 eingefügten Tag-Manager existieren.

Die ganze Änderung: die Runtime zuerst, und jeder Tracker wird zu einem Skript, das auf seine Kategorie wartet.

die Regel

Was v0 weglässt

Ein v0-Projekt mit aktivierter Analyse führt sie bei der Hydration aus. Ohne Consent-Ebene wird jeder EU-Besucher getrackt, bevor die Seite überhaupt interaktiv ist.

Die Regel ist überall in der EU und im Vereinigten Königreich dieselbe: Ohne Zustimmung darf nichts über das unbedingt Notwendige hinaus auf dem Gerät eines Besuchers gespeichert oder von dort ausgelesen werden. Das ist Artikel 5 Absatz 3 der ePrivacy-Richtlinie, und die Zustimmung muss der DSGVO-Definition von Einwilligung genügen: freiwillig, spezifisch, informiert und unmissverständlich, mit einer Ablehnung, die so einfach ist wie die Annahme. Das Vereinigte Königreich hält dieselbe Regel in PECR fest, mit engen Ausnahmen für risikoarme Statistiken seit dem 5. Februar 2026. Kalifornien und die anderen US-Bundesstaaten funktionieren umgekehrt: kein Opt-in, aber ein Opt-out-Link und Unterstützung für das Global-Privacy-Control-Signal.

Für eine Website folgen daraus drei Dinge. Analyse-, Werbe- und Social-Media-Skripte müssen auf eine Entscheidung warten. Die Entscheidung muss so aufgezeichnet werden, dass Sie sie später vorzeigen können, denn Artikel 7 Absatz 1 legt die Beweislast bei Ihnen. Und der Widerruf muss so einfach sein wie die Zustimmung, also braucht es auf jeder Seite ein Bedienelement, das das Banner wieder öffnet. Ein Banner, das zwei Buttons zeigt und Google Analytics trotzdem lädt, fällt beim ersten Test durch, und genau dieses Versagen ahnden die Aufsichtsbehörden, von den CNIL-Entscheidungen gegen Google und SHEIN bis zu den Prüfwellen der niederländischen und belgischen Behörden.

so funktioniert es

So funktioniert Einwilligung in einer v0-App

v0 erzeugt Next.js mit dem App Router, shadcn/ui und Tailwind und deployt auf Vercel. Damit ist es der Builder, bei dem es am leichtesten richtig zu machen ist, denn Next.js hat eine korrekte Antwort für eine Consent-Runtime: ein next/script-Tag mit strategy="beforeInteractive" in app/layout.tsx. Ins initiale HTML eingefügt, läuft es vor der Hydration und vor jedem Tag-Manager, den v0 mit der Standardstrategie hinzugefügt hat.

Die Skripte, die v0 typischerweise hinzufügt, Vercel Analytics, Speed Insights und welches GA4 oder Pixel Sie auch verlangt haben, sind alle Statistik oder Marketing und müssen alle warten. Der Prompt auf dieser Seite platziert die Runtime und taggt jedes davon. Für Komponenten, die beim Mounten einen Tracker laden, tut ConsentGate aus @cookiecrumbs/next dasselbe im Baum.

Auf Vercel bekommen Preview-Deployments den Preview-Schlüssel und die Produktion den Produktionsschlüssel, sodass eine v0-Iteration nie die Einwilligung echter Besucher berührt. Der Scan läuft gegen die Produktions-Domain, und der Installations-Check bestätigt, dass das Tag an erster Stelle steht; beides ist im kostenlosen Tarif.

Einrichtung

Einrichtung aus v0

Zehn Minuten, ein Prompt, kein npm.

  1. Website anlegen, Schlüssel holen

    Registrieren, die Domain hinzufügen, unter der Ihre App veröffentlicht ist, und den Produktionsschlüssel unter Installation kopieren. Der kostenlose Tarif deckt zwei Domains ab.

  2. Diesen Prompt in v0 einfügen

    Er setzt das Tag an erste Stelle und macht jeden Tracker zu einem einwilligungspflichtigen Skript. Lesen Sie das Diff, das er erzeugt; sonst sollte sich nichts ändern.

    Add this to app/layout.tsx, before any other script:
    import Script from 'next/script';
    <Script src="https://app.cookiecrumbs.eu/runtime/cc.js"
      strategy="beforeInteractive"
      data-cc-site="pk_live_…" data-cc-env="production" />
    Then change every analytics, advertising and social script to type="text/plain" with data-cc-category="analytics" or "marketing". Do not change anything else.
  3. Veröffentlichen, dann scannen

    Veröffentlichen Sie die App. Starten Sie im Dashboard den ersten Scan: Er lädt die Live-App in einem echten Browser und listet auf, was noch vor der Einwilligung feuert, falls überhaupt.

  4. Einmal einsortieren, rechtliche Links setzen, Banner veröffentlichen

    Sortieren Sie jeden Anbieter unter eine Kategorie, setzen Sie Impressum- und Datenschutz-Links, veröffentlichen Sie. Das Banner ist live, und das Einwilligungsprotokoll zeichnet auf.

  5. Installations-Check ausführen

    Er lädt Ihre Seite wie ein Besucher und bestätigt, dass das Banner vor jedem Tracker lief. Dieses Häkchen ist der Nachweis.

aufgepasst

Fehler, die wir bei v0 sehen

Jeder davon taucht im ersten Scan als Tracker auf, der vor der Einwilligung gefeuert hat.

  • afterInteractive für die RuntimeDie Standardstrategie läuft nach der Hydration. Nur beforeInteractive ist früh genug.
  • Vercel Analytics als notwendig gezähltDas ist Statistik. Sperren Sie es wie GA4.
  • Ein Banner aus einem v0-UI-PromptSchön, und es blockiert nichts. Die Runtime muss die Skripte sperren.
  • Umgebungsvariablen für den Site-SchlüsselIn Ordnung, solange das Tag selbst in app/layout.tsx und an erster Stelle bleibt.
  • Den Scan auslassen, weil „es nur eine Landingpage ist“Landingpages tragen mehr Pixel als jeder andere Seitentyp. Führen Sie ihn aus.

vor dem Livegang

Die Compliance-Checkliste

Acht Zeilen. Die letzten beiden hakt das Dashboard anhand echter Daten ab.

  • Das Tag ist das erste Skript im HeadAlles darüber kann ein Cookie setzen, das die Runtime nicht zurücknehmen kann.
  • Jedes Analyse-, Werbe- und Social-Skript wartet auf seine KategorieEntweder type="text/plain" mit einer Kategorie, oder der Host steht in der Block-Map aus dem Scan.
  • „Alle ablehnen“ steht auf der ersten EbeneGleiche Größe, gleiches Gewicht wie „Alle akzeptieren“. Kein „X“, das als Einwilligung zählt, keine vorangekreuzten Kästchen.
  • Die Consent-Mode-Standardwerte stehen auf „denied“, bevor Google lädtPrüfen Sie die sieben Signale im Tag Assistant bei verweigerter Einwilligung.
  • Die Links zu Impressum und Datenschutzerklärung sind gesetztOhne beide wird die Veröffentlichung verweigert; die Banner-Fußzeile verlinkt darauf.
  • Ein Widerrufs-Element ist auf jeder Seite erreichbarDas dauerhafte Bedienelement oder ein Link „Cookies verwalten“ in Ihrer Fußzeile.
  • Der erste vollständige Scan ist gelaufen und jeder Anbieter ist einsortiertDas Urteil auf der Startseite sagt datiert, was vor der Einwilligung gefeuert hat.
  • Der Installations-Check ist bestandenEr lädt Ihre Seite wie ein Besucher und bestätigt, dass das Banner vor jedem Tracker lief.

was Sie bekommen

Was der kostenlose Tarif enthält

Zwei Domains, 100 gescannte Unterseiten pro Monat und Domain, jede Regulierung, die CLI, die SDKs und der MCP-Server.

Ein Scanner, der die gerenderte Seite liest

Jede Seite, in jedem Einwilligungszustand, in einem echten Browser. Cookies, Pixel, iFrames und Storage-Schlüssel, mit der Seite und dem Skript, die sie gesetzt haben. Regelmäßig neu gescannt.

Die Cookie-Erklärung schreibt sich aus dem Ergebnis von selbst.

Ein Banner, das zuerst blockiert

Tags bleiben inaktiv, bis ihre Kategorie erlaubt wird. „Alle ablehnen“ ist so sichtbar wie „Alle akzeptieren“. Sieben Layouts, 25 Sprachen, Consent Mode v2 und die richtige Regel pro Region.

21 kB, eine Datei, keine eigenen Anfragen an Dritte.

Ein Nachweis, den Sie vorlegen können

Jede Entscheidung wird mit Zeitstempel, Banner-Version und einem Hash der angezeigten Texte gespeichert, verkettet mit dem Datensatz davor. Exporte sind signiert. Gehostet in Frankfurt.

Artikel 7 Absatz 1, im kostenlosen Tarif.

kostenloser Check

Sehen Sie, was Ihre v0-App gerade lädt

Das HTML der Startseite, abgeglichen mit der Tracker-Datenbank. Kein Konto, nichts wird gespeichert. Der vollständige Scan im Dashboard macht dasselbe für jede Seite, in einem echten Browser.

Fragen

Klare Antworten

Fügt v0 standardmäßig ein DSGVO-Cookie-Banner hinzu?
Nein. v0 erzeugt die UI und die Analyse, die Sie anfordern, und nichts, das den Besucher vorher fragt.
Wo kommt das Tag in einem v0-Projekt hin?
In app/layout.tsx als next/script-Tag mit strategy="beforeInteractive", vor jedem anderen Skript. Der Prompt auf dieser Seite erledigt das.
Ist ein Cookie-Banner für eine kleine App Pflicht?
Wenn die App Besucher in der EU oder im Vereinigten Königreich bedient und irgendein nicht notwendiges Cookie setzt, Analyse eingeschlossen, dann ja. Die Pflicht liegt beim Betreiber der Website, nicht beim Werkzeug, das sie erzeugt hat. Ein Hobbyprojekt ohne Analyse und ohne Embeds braucht nichts.
Macht das Banner die App langsamer?
Die Runtime ist 21 kB gzip, eine Datei, asynchron geladen, ohne eigene Anfragen an Dritte. Die Layouts Bar und Ribbon reservieren ihren Platz vor dem Rendern, also keine Layoutverschiebung.
Kann ich den Builder danach weiter nutzen?
Ja. Das Tag und die gesperrten Skripte sind gewöhnliches HTML, das v0 zwischen Bearbeitungen erhält. Führen Sie den Scan nach großen Änderungen erneut aus; das Dashboard warnt Sie, wenn ein neuer Tracker auftaucht.
Wohin gehen die Einwilligungsdaten?
Nach Frankfurt, Deutschland. Datensätze verlassen die EU nie, neben einem Datensatz wird weder IP-Adresse noch User-Agent gespeichert, und jeder Datensatz exportiert sich als signiertes CSV oder JSON, auch nach der Kündigung.

nächster Schritt

Konform, bevor Sie den Link teilen

Kostenloser Tarif, zwei Domains, keine Karte. Scannen Sie zuerst die Live-App, wenn Sie sehen wollen, was sie heute lädt.