React Cookie Consent: Ein Banner, der Skripte wirklich blockiert
React Cookie-Consent-Banner
React Cookie Consent: Ein Banner, das Skripte sperrt | We.Inc
Baue einen Cookie-Consent-Banner in React: Auswahl speichern, Analytics erst nach Zustimmung laden, Consent-Mode-Updates senden. Dazu die Props des Pakets react-cookie-consent.
Halte die Auswahl des Besuchers im React-State, speichere sie in einem First-Party-Cookie oder im Browserspeicher und rendere Analytics- oder Werbeskripte nur, wenn die passende Kategorie erlaubt ist. Ein kleiner Hook plus eine Banner-Komponente reichen dafür. Wenn du lieber ein Paket nutzt, liefert react-cookie-consent einen fertigen Banner mit Props für Ablehnen-Buttons, Cookie-Namen und Ablaufzeit.
Zwei Wege, eine Einwilligung zu einer React-Website hinzuzufügen
Selbst bauen
Paket react-cookie-consent
Kategorien (Analytics, Werbung)
Ja, beliebig viele
Standardmäßig ein Wert für Zustimmen oder Ablehnen
Ablehnen-Button
Ja
Standardmäßig aus; enableDeclineButton schaltet ihn ein
Wo die Auswahl gespeichert wird
Cookie oder Speicher nach deiner Wahl
Standardmäßig in einem Cookie namens CookieConsent
Standard-Ablaufzeit
Legst du selbst fest
365 Tage
Lizenz
Dein eigener Code
MIT
Das Schwierige an einem Consent-Banner ist nicht das Kästchen auf dem Bildschirm, sondern sicherzustellen, dass nichts Optionales läuft, bevor der Besucher zustimmt. In React ist das ein State-Problem: eine einzige Quelle der Wahrheit für die Auswahl und Komponenten, die sie lesen, bevor sie ein Script-Tag einfügen. Die Live-Demo unten macht genau das, sodass du sehen kannst, wie der Analytics-Loader aus bleibt, bis du zustimmst.
Ein useConsent-Hook liest beim Start der App eine gespeicherte Auswahl und stellt sie mit Setter-Funktionen bereit.
Der Banner wird nur angezeigt, solange keine Auswahl gespeichert ist, und bietet Alle akzeptieren, Alle ablehnen sowie Schalter pro Kategorie, die anfangs aus sind.
Script-Loader prüfen den Hook, bevor sie ihr Script-Tag hinzufügen, sodass bei einer Ablehnung das Tag nie hinzugefügt wird.
Wenn du Google-Tags nutzt, sendet derselbe Setter ein Consent-Mode-Update mit den erlaubten Kategorien.
Ein Link zu den Cookie-Einstellungen an beliebiger Stelle in der App löscht die gespeicherte Auswahl, sodass der Banner wieder erscheint.
Rendere den Banner aus deinem Root-Layout, damit er auf jeder Route erscheint, auch bei direkten Aufrufen tiefer Seiten.
Lies die gespeicherte Auswahl bei Server-Rendering nur in einem Effect auf dem Client, damit Server und erster Client-Render übereinstimmen.
Gib dem Banner role=dialog oder eine beschriftete Region und mach jeden Button per Tastatur erreichbar.
Speichere eine Versionsnummer mit der Auswahl; wenn du eine neue Kategorie hinzufügst, erhöhe sie, um erneut zu fragen.
Versteck den Weg zum Ablehnen nie in den Einstellungen; setz Alle ablehnen direkt neben Alle akzeptieren.
Häufige Fragen
Blockiert react-cookie-consent Skripte für mich?
Nein. Seine README beschreibt einen Banner, der die Antwort des Besuchers in einem Cookie speichert und onAccept oder onDecline aufruft. Ob deine Analytics geladen werden oder nicht, bleibt deine Aufgabe, zum Beispiel indem du getCookieConsentValue prüfst, bevor du das Skript hinzufügst.
Wie füge ich react-cookie-consent einen Ablehnen-Button hinzu?
Setze die Prop enableDeclineButton; sie ist standardmäßig false. Der Button-Text ist standardmäßig I decline und lässt sich mit declineButtonText ändern, und onDecline läuft, wenn er gedrückt wird.
Wie lasse ich Besucher ihre Meinung ändern?
Mit deinem eigenen Hook löschst du den gespeicherten Wert, und der Banner erscheint wieder. Mit dem Paket rufst du resetCookieConsentValue auf und übergibst denselben Cookie-Namen, den du dem Banner gegeben hast, falls du ihn vom Standard geändert hast.
Sollte ich die Einwilligung in einem Cookie oder im Browserspeicher ablegen?
Für den Browser funktioniert beides. Ein Cookie kann auch dein Server lesen, was hilft, wenn der Server entscheidet, welche Tags ausgegeben werden. Der Browserspeicher hält den Wert aus jeder Anfrage heraus. Beides ist erlaubt, um die Auswahl selbst zu speichern.
Wohin gehören Consent-Mode-Aufrufe in React?
Setz den gtag-Consent-Standard in den HTML-Head vor jedes Google-Tag, außerhalb von React, damit er zuerst läuft. Ruf gtag('consent', 'update', ...) aus deinem Zustimmen-Handler innerhalb von React auf.
Warum Sperren besser ist als Verstecken
Ein Banner, der sich nach Ablehnen nur selbst ausblendet, während das Analytics-Snippet in index.html schon gelaufen ist, erfasst den Besuch trotzdem. Die Lösung ist, das Snippet in eine Komponente zu verschieben, die erst nach der Einwilligung rendert.
Für Tags, die du nicht verschieben kannst, etwa solche, die eine Plattform für dich einfügt, nutze die Consent-Einstellung dieser Plattform oder Consent Mode, damit das Tag im eingeschränkten Zustand läuft, bis das Update ankommt.
Deinen Banner testen
Öffne die Website in einem privaten Fenster, öffne die Entwicklertools deines Browsers und prüfe den Network-Tab: Bevor du etwas anklickst, sollten keine Analytics- oder Werbeanfragen erscheinen. Stimme dann zu und prüfe, ob sie starten.
Wiederhole das mit Alle ablehnen und lade eine zweite Seite, um zu prüfen, ob die Ablehnung gespeichert bleibt.
Selbst bauen: Hook, Banner und gesperrtes Skript
Drei kleine Bausteine. Sie nutzen keine Bibliothek, laufen in jeder React-18- oder React-19-App und entsprechen der Demo oben.
useConsent-Hook
Liest die gespeicherte Auswahl einmal auf dem Client und speichert und verbreitet jede Änderung.
ConsentBanner-Komponente
Zustimmen und Ablehnen stehen nebeneinander; Kategorie-Kästchen sind anfangs nicht angehakt.
Ein Skript erst nach Einwilligung laden
Das Script-Tag wird nur erzeugt, wenn die Kategorie erlaubt ist, bei einer Ablehnung existiert es also nie.
Das Paket react-cookie-consent verwenden
Installiere es mit npm install react-cookie-consent. Dies sind die Props und Hilfsfunktionen, die seine README dokumentiert, mit ihren Standardwerten, Stand Oktober 2026.
Props und Standardwerte von react-cookie-consent
Prop oder Hilfsfunktion
Standard
Was sie tut
"bottom"
Wo die Leiste sitzt: top, bottom oder none
buttonText
"I understand"
Text des Zustimmen-Buttons
enableDeclineButton
Zeigt einen Ablehnen-Button
declineButtonText
"I decline"
Text des Ablehnen-Buttons
cookieName
"CookieConsent"
Name des Cookies, das die Antwort speichert
Tage, bis das Cookie abläuft
onAccept / onDecline
Führt deinen Code aus, wenn der Besucher antwortet
getCookieConsentValue(name)
Liest die gespeicherte Antwort
resetCookieConsentValue()
Entfernt die gespeicherte Antwort, damit die Leiste wieder erscheint
Banner mit Ablehnen-Button
Zustimmen lädt Analytics; Ablehnen lädt nichts Optionales. Die Prüfung beim ersten Laden deckt wiederkehrende Besucher ab.
Live-Demo: ein Consent-Banner, der Skripte sperrt
Beispiel-Website
Wir nutzen Cookies für Analytics und Werbung nur, wenn du zustimmst.
Alle akzeptieren
Alle ablehnen
Auswählen
Auswahl speichern
Analytics
Werbung
Notwendig (immer aktiv)
Was geladen würde
{c}: Skript hinzugefügt
{c}: blockiert
Noch keine Auswahl, also wird nichts Optionales geladen.
Cookie-Einstellungen
Gesendetes Consent-Mode-Update
Noch keins.
Die Demo speichert deine Auswahl nur in diesem Browser. Nichts wird irgendwohin gesendet.