Cookie consent em React: um banner que realmente bloqueia scripts
Banner de consentimento de cookies em React
Cookie consent em React: um banner que controla os scripts | We.Inc
Crie um banner de consentimento de cookies em React: salve a escolha, carregue analytics só depois do Aceitar e envie atualizações do Consent Mode. Mais as props do pacote react-cookie-consent.
Mantenha a escolha do visitante no state do React, salve em um cookie próprio ou no armazenamento do navegador e só renderize scripts de analytics ou anúncios quando a categoria correspondente for autorizada. Um hook pequeno e um componente de banner resolvem. Se preferir um pacote, o react-cookie-consent oferece um banner pronto com props para botão de recusa, nome do cookie e validade.
Duas formas de adicionar consentimento a um site em React
Fazer você mesmo
Pacote react-cookie-consent
Categorias (analytics, anúncios)
Sim, quantas precisar
Um único valor de aceitar ou recusar por padrão
Botão de recusar
Sim
Desligado por padrão; enableDeclineButton o ativa
Onde a escolha fica salva
Cookie ou armazenamento, você escolhe
Um cookie chamado CookieConsent por padrão
Validade padrão
Você define
365 dias
Licença
Seu próprio código
MIT
A parte difícil de um banner de consentimento não é a caixa na tela, é garantir que nada não essencial rode antes de o visitante dizer sim. Em React isso é um problema de state: uma única fonte da verdade para a escolha e componentes que a leem antes de injetar uma tag script. A demo ao vivo abaixo faz exatamente isso, para você ver o carregador de analytics ficar desligado até aceitar.
Um hook useConsent lê qualquer escolha salva quando o app inicia e a expõe com funções para alterá-la.
O banner só é renderizado enquanto não houver escolha salva e oferece Aceitar tudo, Recusar tudo e chaves por categoria que começam desligadas.
Os carregadores de script consultam o hook antes de adicionar a tag script, então uma recusa significa que a tag nunca é adicionada.
Se você usa tags do Google, a mesma função envia uma atualização do Consent Mode com as categorias autorizadas.
Um link de Configurações de cookies em qualquer lugar do app apaga a escolha salva para o banner aparecer de novo.
Renderize o banner a partir do layout raiz para que ele apareça em todas as rotas, inclusive em acessos diretos a páginas internas.
Com renderização no servidor, leia a escolha salva só dentro de um effect no cliente, para que o servidor e a primeira renderização no cliente coincidam.
Dê ao banner role=dialog ou uma região com rótulo e deixe todos os botões acessíveis pelo teclado.
Salve um número de versão junto com a escolha; quando adicionar uma nova categoria, aumente-o para perguntar de novo.
Nunca esconda a recusa atrás da tela de configurações; coloque Recusar tudo ao lado de Aceitar tudo.
Perguntas frequentes
O react-cookie-consent bloqueia scripts por mim?
Não. O README descreve um banner que salva a resposta do visitante em um cookie e chama onAccept ou onDecline. Carregar ou pular o seu analytics continua sendo tarefa sua, por exemplo verificando getCookieConsentValue antes de adicionar o script.
Como adiciono um botão de recusa ao react-cookie-consent?
Defina a prop enableDeclineButton; ela é false por padrão. O texto do botão é I decline por padrão e pode ser trocado com declineButtonText, e onDecline roda quando ele é clicado.
Como deixo os visitantes mudarem de ideia?
Com o seu próprio hook, apague o valor salvo e o banner volta. Com o pacote, chame resetCookieConsentValue, passando o mesmo nome de cookie que você deu ao banner se tiver mudado o padrão.
Devo salvar o consentimento em um cookie ou no armazenamento do navegador?
Os dois funcionam no navegador. Um cookie também pode ser lido pelo seu servidor, o que ajuda se o servidor decide quais tags imprimir. O armazenamento do navegador mantém o valor fora de cada requisição. Ambos são permitidos para lembrar a própria escolha.
Onde ficam as chamadas do Consent Mode no React?
Coloque o default de consentimento do gtag no head do HTML antes de qualquer tag do Google, fora do React, para que rode primeiro. Chame gtag('consent', 'update', ...) a partir do handler de Aceitar dentro do React.
Por que bloquear é melhor que esconder
Um banner que apenas se esconde depois do Recusar, enquanto o snippet de analytics no index.html já rodou, registra a visita do mesmo jeito. A correção é mover o snippet para um componente que só é renderizado depois do consentimento.
Para tags que você não consegue mover, como as que uma plataforma injeta por você, use a configuração de consentimento dessa plataforma ou o Consent Mode, para que a tag rode em modo restrito até a atualização chegar.
Testando seu banner
Abra o site em uma janela anônima, abra as ferramentas de desenvolvedor do navegador e confira o painel Network: antes de clicar em qualquer coisa, nenhuma requisição de analytics ou anúncios deve aparecer. Depois aceite e confirme que elas começam.
Repita com Recusar tudo e recarregue uma segunda página para confirmar que a recusa é lembrada.
Fazer você mesmo: hook, banner e script controlado
Três peças pequenas. Não usam nenhuma biblioteca, rodam em qualquer app React 18 ou 19 e correspondem à demo acima.
Hook useConsent
Lê a escolha salva uma vez no cliente e salva e transmite cada mudança.
Componente ConsentBanner
Aceitar e Recusar ficam lado a lado; as caixas de categoria começam desmarcadas.
Carregar um script só depois do consentimento
A tag script só é criada quando a categoria é autorizada, então uma recusa significa que ela nunca existe.
Usando o pacote react-cookie-consent
Instale com npm install react-cookie-consent. Estas são as props e funções auxiliares que o README documenta, com seus valores padrão, em outubro de 2026.
Props e valores padrão do react-cookie-consent
Prop ou função
Padrão
O que faz
"bottom"
Onde a barra fica: top, bottom ou none
buttonText
"I understand"
Texto do botão de aceitar
enableDeclineButton
Mostra um botão de recusa
declineButtonText
"I decline"
Texto do botão de recusa
cookieName
"CookieConsent"
Nome do cookie que guarda a resposta
Dias até o cookie expirar
onAccept / onDecline
Rodam o seu código quando o visitante responde
getCookieConsentValue(name)
Lê a resposta salva
resetCookieConsentValue()
Remove a resposta salva para a barra aparecer de novo
Banner com botão de recusa
Aceitar carrega o analytics; Recusar não carrega nada opcional. A verificação no primeiro carregamento cobre quem volta ao site.
Demo ao vivo: um banner de consentimento que controla os scripts
Site de exemplo
Usamos cookies de analytics e anúncios só se você concordar.
Aceitar tudo
Recusar tudo
Escolher
Salvar escolhas
Analytics
Publicidade
Necessários (sempre ativos)
O que seria carregado
{c}: script adicionado
{c}: bloqueado
Nenhuma escolha ainda, então nada opcional é carregado.
Configurações de cookies
Atualização do Consent Mode enviada
Nenhuma ainda.
A demo lembra sua escolha só neste navegador. Nada é enviado para lugar nenhum.