Consentimento de Cookies para Aplicações de Página Única (React, Vue, Angular)
Por que SPAs são complicadas para consentimento de cookies
Aplicações de página única carregam uma vez e lidam com a navegação no lado do cliente. Não há recarregamentos de página para reativar verificações de consentimento. Scripts de terceiros carregados no index.html são executados antes de qualquer interface de consentimento aparecer.
Erros comuns em SPAs
- Carregar Google Analytics no index.html antes do consentimento
- Não verificar novamente o estado de consentimento nas mudanças de rota
- Perder o estado de consentimento quando a aplicação é re-renderizada
- Disparar eventos de rastreamento no ciclo de vida do componente sem portas de consentimento
Implementação correta
- Carregue apenas o script CMP no HTML head — nada mais
- Carregue scripts de terceiros condicionalmente apenas após o consentimento ser concedido
- Use a JavaScript API do CMP para verificar o estado de consentimento programaticamente
- Limite chamadas de análise e marketing atrás de verificações de consentimento nos seus componentes
Dicas específicas por framework
React
Use um provedor de contexto de consentimento. Verifique o estado de consentimento em hooks useEffect antes de inicializar rastreadores.
Vue
Crie um plugin de consentimento. Use guardas de roteador para verificar o estado de consentimento na navegação.
Angular
Use um serviço de consentimento injetado via DI. Verifique o consentimento em guardas de rota e na inicialização de componentes.
FlexyConsent com SPAs
A abordagem de script único do FlexyConsent funciona com qualquer framework. Carrega de forma assíncrona, gere o estado de consentimento através de cookies e expõe uma JavaScript API para verificações programáticas de consentimento. Nenhum SDK específico de framework é necessário.