Cookietoestemming voor Single-Page Applications (React, Vue, Angular)
Waarom SPA's lastig zijn voor cookietoestemming
Single-page applications laden eenmaal en verwerken navigatie aan de clientzijde. Er zijn geen paginavernieuwingen om toestemmingscontroles opnieuw te activeren. Scripts van derden die in index.html zijn geladen, worden uitgevoerd voordat enige toestemmings-UI verschijnt.
Veelgemaakte SPA-fouten
- Google Analytics laden in index.html vóór toestemming
- Toestemmingsstatus niet opnieuw controleren bij routewijzigingen
- Toestemmingsstatus verliezen wanneer de app opnieuw rendert
- Trackinggebeurtenissen afvuren in de componentlevenscyclus zonder toestemmingspoorten
Correcte implementatie
- Laad alleen het CMP-script in uw HTML head — niets anders
- Laad scripts van derden alleen voorwaardelijk na het verkrijgen van toestemming
- Gebruik de JavaScript API van de CMP om de toestemmingsstatus programmatisch te controleren
- Beperk analytics- en marketingaanroepen achter toestemmingscontroles in uw componenten
Frameworkspecifieke tips
React
Gebruik een toestemmingscontextprovider. Controleer de toestemmingsstatus in useEffect-hooks voordat u trackers initialiseert.
Vue
Maak een toestemmingsplugin. Gebruik routerguards om de toestemmingsstatus bij navigatie te verifiëren.
Angular
Gebruik een toestemmingsservice die via DI is geïnjecteerd. Controleer toestemming in routeguards en bij componentinitialisatie.
FlexyConsent met SPA's
De single-scriptaanpak van FlexyConsent werkt met elk framework. Het laadt asynchroon, beheert de toestemmingsstatus via cookies en biedt een JavaScript API voor programmatische toestemmingscontroles. Geen frameworkspecifieke SDK nodig.