Consentimiento de Cookies para Aplicaciones de Página Única (React, Vue, Angular)
Por qué las SPA son complicadas para el Consentimiento de Cookies
Las aplicaciones de página única se cargan una vez y manejan la navegación del lado del cliente. No hay recargas de página que reactiven las verificaciones de consentimiento. Los scripts de terceros cargados en index.html se ejecutan antes de que aparezca cualquier interfaz de consentimiento.
Errores comunes en SPA
- Cargar Google Analytics en index.html antes del consentimiento
- No volver a verificar el estado de consentimiento en los cambios de ruta
- Perder el estado de consentimiento cuando la app se vuelve a renderizar
- Disparar eventos de seguimiento en el ciclo de vida del componente sin verificaciones de consentimiento
Implementación correcta
- Carga solo el script CMP en el head de tu HTML — nada más
- Carga condicionalmente los scripts de terceros solo después de obtener el consentimiento
- Usa la JavaScript API del CMP para verificar el estado de consentimiento programáticamente
- Protege las llamadas de analytics y marketing en tus componentes con verificaciones de consentimiento
Consejos específicos por Framework
React
Usa un consent context provider. Verifica el estado de consentimiento en hooks useEffect antes de inicializar rastreadores.
Vue
Crea un plugin de consentimiento. Usa router guards para verificar el estado de consentimiento en la navegación.
Angular
Usa un servicio de consentimiento inyectado mediante DI. Verifica el consentimiento en route guards y en la inicialización de componentes.
FlexyConsent con SPA
El enfoque de script único de FlexyConsent funciona con cualquier framework. Se carga de forma asíncrona, gestiona el estado de consentimiento mediante cookies y expone una JavaScript API para verificaciones programáticas de consentimiento. No se necesita SDK específico para ningún framework.