Cookie-Einwilligung für React,
ein Tag und eine Komponente

Eine React-Single-Page-App lädt ihre Analyse in main.tsx, bevor es irgendeine UI gibt. Eine später hinzugefügte Banner-Komponente zeigt eine Auswahl, kann aber nicht zurücknehmen, was schon gelaufen 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.

Eine React-SPA hat eine HTML-Datei, und dort muss Einwilligung beginnen. Die Runtime kommt in index.html als erstes Skript im Head, vor das Vite- oder Webpack-Bundle. Sie installiert ihren Interceptor synchron, noch bevor sie Ihre Konfiguration lädt, sodass alles, was das Bundle danach einschleusen will, abgefangen wird.

Im Baum haben Sie zwei Werkzeuge. ConsentGate rendert seine Kinder nur, wenn eine Kategorie erlaubt ist, und zeigt sonst Ihren Fallback, der richtige Weg für ein Chat-Widget, ein Video-Embed oder einen Analytics-Provider. Die Runtime-API auf window, von @cookiecrumbs/react als Hook verpackt, sagt jeder Komponente den aktuellen Status, das Regime, die Sprache und die Consent-ID und gibt ihr open(), um das Banner aus einem Footer-Link wieder zu öffnen.

Beliebte React-Muster, über die Leute stolpern: ein Analytics-Provider an der Baumspitze, der beim Mounten feuert, ein Router, der bei jeder Navigation Seitenaufrufe sendet, und ein useEffect, das ein Pixel einschleust. Jedes davon kommt entweder in ein Gate oder prüft isGranted("analytics"), bevor es etwas tut. Der Scan auf Ihrer deployten Website zeigt, welche davon noch vor der Einwilligung feuern, mit dem Skript, das es getan hat.

React-Apps mit Google Ads fügen gtag.js meist in index.html ein. Lassen Sie es dort, unter der Runtime, und die Consent-Mode-Standardwerte stehen beim Laden schon auf „denied“.

Google Consent Mode v2 ist die Signalebene zwischen dem Banner und Googles Tags. Bevor ein Tag läuft, werden sieben Signale (ad_storage, analytics_storage, ad_user_data, ad_personalization, functionality_storage, personalization_storage, security_storage) für Besucher im EWR, im Vereinigten Königreich und in der Schweiz auf „denied“ gesetzt. Sobald jemand entscheidet, aktualisiert die Runtime sie und Googles Tags passen sich an. Seit dem 15. Juni 2026 verwendet Google ad_storage als maßgebliches Signal für Ads-Daten, der richtige Standardwert ist also wichtiger als früher.

CookieCrumbs setzt die Standardwerte synchron, vor jedem Tag-Manager, aktualisiert sie bei jeder Entscheidung und liefert eine Google-Tag-Manager-Vorlage mit, damit die Consent-Trigger ohne handgeschriebene Listener existieren. Im Advanced-Modus halten Googles cookielose Pings die modellierten Conversions für Besucher am Laufen, die Nein gesagt haben. Was es nicht tut: sich als von Google zertifizierte CMP ausgeben. Für AdSense, Ad Manager oder AdMob im EWR brauchen Sie weiterhin eine mit IAB TCF, und das ist CookieCrumbs heute nicht.