Cookie-Einwilligung für Single-Page-Anwendungen (React, Vue, Angular)
Warum SPAs bei der Cookie-Einwilligung problematisch sind
Single-Page-Anwendungen werden einmal geladen und handhaben die Navigation clientseitig. Es gibt keine Seitenneuladungen, die Einwilligungsprüfungen erneut auslösen. Drittanbieter-Skripte, die in index.html geladen werden, werden ausgeführt, bevor eine Einwilligungs-Oberfläche erscheint.
Häufige SPA-Fehler
- Google Analytics in index.html laden, bevor die Einwilligung erteilt wurde
- Den Einwilligungsstatus bei Routenwechseln nicht erneut prüfen
- Verlust des Einwilligungsstatus beim Neu-Rendern der App
- Tracking-Events im Komponenten-Lebenszyklus ohne Einwilligungsprüfung auslösen
Korrekte Implementierung
- Laden Sie nur das CMP-Skript in Ihren HTML-Head — nichts anderes
- Laden Sie Drittanbieter-Skripte nur nach erteilter Einwilligung bedingt
- Verwenden Sie die JavaScript API des CMP, um den Einwilligungsstatus programmatisch zu prüfen
- Schützen Sie Analytics- und Marketing-Aufrufe in Ihren Komponenten durch Einwilligungsprüfungen
Framework-spezifische Tipps
React
Verwenden Sie einen Consent-Context-Provider. Prüfen Sie den Einwilligungsstatus in useEffect-Hooks, bevor Sie Tracker initialisieren.
Vue
Erstellen Sie ein Consent-Plugin. Verwenden Sie Router-Guards, um den Einwilligungsstatus bei der Navigation zu überprüfen.
Angular
Verwenden Sie einen Consent-Service, der über DI injiziert wird. Prüfen Sie die Einwilligung in Route-Guards und bei der Komponenten-Initialisierung.
FlexyConsent mit SPAs
Der Single-Script-Ansatz von FlexyConsent funktioniert mit jedem Framework. Es lädt asynchron, verwaltet den Einwilligungsstatus über Cookies und bietet eine JavaScript API für programmatische Einwilligungsprüfungen. Kein framework-spezifisches SDK erforderlich.