Consentement aux cookies pour les applications monopage (React, Vue, Angular)
Pourquoi les SPA sont problématiques pour le consentement aux cookies
Les applications monopage se chargent une seule fois et gèrent la navigation côté client. Il n'y a pas de rechargement de page pour relancer les vérifications de consentement. Les scripts tiers chargés dans index.html s'exécutent avant l'apparition de toute interface de consentement.
Erreurs courantes avec les SPA
- Charger Google Analytics dans index.html avant le consentement
- Ne pas revérifier l'état du consentement lors des changements de route
- Perdre l'état du consentement lorsque l'application se re-rend
- Déclencher des événements de suivi dans le cycle de vie des composants sans vérification du consentement
Implémentation correcte
- Chargez uniquement le script CMP dans votre head HTML — rien d'autre
- Chargez conditionnellement les scripts tiers uniquement après l'obtention du consentement
- Utilisez la JavaScript API du CMP pour vérifier l'état du consentement de manière programmatique
- Protégez les appels analytics et marketing dans vos composants par des vérifications de consentement
Conseils spécifiques par framework
React
Utilisez un consent context provider. Vérifiez l'état du consentement dans les hooks useEffect avant d'initialiser les trackers.
Vue
Créez un plugin de consentement. Utilisez des router guards pour vérifier l'état du consentement lors de la navigation.
Angular
Utilisez un service de consentement injecté via DI. Vérifiez le consentement dans les route guards et à l'initialisation des composants.
FlexyConsent avec les SPA
L'approche mono-script de FlexyConsent fonctionne avec n'importe quel framework. Il se charge de manière asynchrone, gère l'état du consentement via les cookies et expose une JavaScript API pour les vérifications programmatiques du consentement. Aucun SDK spécifique à un framework n'est nécessaire.