1Consent × React
Cookie-Consent für deine React-App
Steuere optionale Skripte, Pixel und Embeds mit expliziten Consent-Gates. Nutze reaktiven Consent-Zustand in Komponenten und stimme das Banner auf deine App ab.
Öffentliche Beta: @1consent/react. React 19+; installiere über den expliziten @beta-Kanal.
Consent im Komponentenbaum
Ein Provider für die App, Dienst-Gates dort, wo Drittanbieter-Markup erscheint. Website-Framework und Coding-Assistent kannst du unabhängig wählen.
01
Vorhandene Erfassung finden
Prüfe Tracker im HTML-Einstieg, Komponentenbaum und in Startmodulen. React-Komponenten können bereits außerhalb eines Gates ausgeführten Tracker-Code nicht rückgängig machen.
02
Installieren und Gates setzen
Installiere @1consent/react@beta, generiere Diensttypen und platziere den Provider vor gesteuerten Inhalten. Gate HTML-Ausgabe; nutze once für globale Seiteneffekte, nicht für sichtbare Embeds.
03
SPA-Lebenszyklus testen
Prüfe erstes Laden, Client-Navigation und erneutes Mounten. Erlaubte Embeds sollen wieder erscheinen; globale Tracking-Skripte dürfen nicht doppelt starten.
Lass deinen Coding-Assistenten die Einrichtung übernehmen
Nutze einen MCP-fähigen Coding-Assistenten mit Projektzugriff. Verbinde die ausgewählte 1Consent-App und lass ihn deinen React-Aufbau prüfen.
Prompt für dein Projekt
Integriere 1Consent über den verbundenen MCP in diese React-App. Prüfe Einstiegspunkt, Tracker und vorhandenen Consent-Code. Lies die React-Referenz und den Installationskontext der gewählten App. Nutze @1consent/react@beta, generiere exakte Diensttypen, ergänze den Provider einmal und gate zustimmungspflichtiges Markup. Erhalte Theme und App-Verhalten. Teste Ablehnung, granulare Einwilligung, Widerruf, Neuladen und SPA-Remounts. Benenne ungeprüfte Punkte. Frage vor Kontoänderungen oder Veröffentlichung.Der Assistent ändert dein Projekt. Der MCP liefert App-Kontext und Anleitung. Ein erfolgreicher Tool-Aufruf belegt noch keine wirksame Tracker-Steuerung. Teste die fertige Website.
Verbinde deinen Assistenten mit 1Consent
Verwende diesen Produktions-MCP-Server mit OAuth in einem kompatiblen Coding-Assistenten. Melde dich mit deinem freigeschalteten 1Consent-Konto an und wähle die richtige App. Für die Installation genügen Kontext- und App-Konfigurations-Lesezugriff. Design- und Analysezugriff sind separate Entscheidungen.
URL des Produktions-MCP-Servers
https://mcp.1consent.app/mcpApp-Design erhalten, Consent gestalten
Provider und Gates passen in deinen Komponentenbaum. Konfiguriere das eigenständige CMP-Theme im Dashboard passend zu Farben, Typografie und Hell-/Dunkelmodus deiner App.
Mit gesondert freigegebenem Zugriff kann der gehostete MCP Kunden-Theme-Entwürfe bearbeiten, Frameworks zuweisen und eine private Vorschau mit der echten Laufzeit erstellen. Live-Veröffentlichungen erfordern deine separate Freigabe des konkreten Vorschlags im Dashboard. Prüfe Kontrast, große Schrift, Einstellungen und das tatsächlich ausgelieferte Verhalten in beiden Farbmodi.
Prüfe das Ergebnis auf deiner Website
Prüfe Browser-Verhalten und die Stellen, an denen deine SPA Drittanbieter-Inhalte mountet. Der Fast Path für wiederkehrende Besucher benötigt gültige Einwilligung und passende gehostete Konfiguration; er garantiert keinen Zeitpunkt vor jedem ersten Paint.
Lade ohne gespeicherte Auswahl und lehne optionale Erfassung ab. Prüfe Anfragen, Cookies und anderen Anbieter-Speicher.
Erlaube einen konfigurierten Dienst. Sein Inhalt soll aktiv werden, während andere Gates inaktiv bleiben.
Widerrufe in den Einstellungen und prüfe die Einschränkung nach dem Neuladen durch die CMP.
Navigiere weg und zurück. Einmalige Skripte dürfen nicht doppelt laufen; erlaubte sichtbare Embeds sollen korrekt neu mounten.
Halte fest, was getestet wurde und was ungeprüft bleibt. Ein sichtbares Banner oder ein erfolgreicher Build allein belegen weder wirksame Tracker-Steuerung noch Rechtskonformität.
Vor der Integration
Welche React-Versionen werden unterstützt?
Die aktuelle öffentliche Beta richtet sich an React 19+. Installiere @1consent/react@beta und beachte die versionsbezogene Anleitung. Next.js-Apps können den eigenen Adapter nutzen.
Kann ich jede React-Komponente umschließen?
OneConsent steuert einfaches HTML-Markup wie Skripte, iframes und Pixel. Es verhindert nicht die Ausführung beliebiger Komponenten. Gate deren relevante Ausgabe oder nutze useConsent für clientseitiges Verhalten.
Brauche ich einen KI-Assistenten oder MCP?
Nein. Die React-Anleitung führt durch Paketinstallation, Provider und Typgenerierung. KI ist ein zusätzlicher Einrichtungsweg; die Consent-Steuerung läuft auf der Website.