Banner de Cookies LGPD: Como Implementar Corretamente em 2026
Aceitar todos os cookies como único botão não é mais aceito pela ANPD — é considerado dark pattern. A LGPD exige consentimento granular, livre e informado. Veja a implementação correta em Next.js, Google Consent Mode v2, registro auditável e os erros que geram multa.
Por Vitor Morais
Fundador do MochaLabz ·
Gere sua política de privacidade
Complemente o banner com uma política LGPD completa personalizada para seu site.
Gerar política de privacidade →Banner de cookies em conformidade com a LGPD deixou de ser opcional para qualquer site brasileiro que use cookies não-essenciais (Google Analytics, Facebook Pixel, retargeting, hotjar). A ANPD já aplicou multas de centenas de milhares de reais por banners mal implementados — a maioria por usar “dark patterns” que pressionam o usuário a aceitar. Este guia cobre o que a LGPD exige, design correto do banner, integração com Google Consent Mode v2, implementação em Next.js e WordPress e os erros que geram autuação.
O que a LGPD exige (arts. 7, 8 e 9)
Para usar cookies não-essenciais, o controlador precisa de consentimento que cumpra cinco critérios:
- Livre: sem coação, sem dark patterns, sem pressão visual.
- Informado: usuário sabe quais cookies, para quê e por quem.
- Inequívoco: exige clique ativo — checkboxes pré-marcados não valem.
- Específico: separado por finalidade (analytics, marketing, etc.) — não único para tudo.
- Revogável: tão fácil de revogar quanto de consentir.
Onde está na lei
Art. 7º, I (consentimento como base legal), Art. 8º (forma do consentimento) e Art. 9º (direito à informação). A ANPD também publicou Guia Orientativo sobre Cookies em 2022 detalhando como interpretar.
Categorias de cookies (e o que cada uma exige)
| Critério | Exemplos | Precisa consentimento? |
|---|---|---|
| Estritamente necessários | Sessão, carrinho, login, CSRF, balanceador | ❌ Não — base legal: contrato/legítimo interesse |
| Funcionais (preferências) | Idioma escolhido, tema dark/light, fonte | ⚠️ Recomendado avisar; consentimento facultativo |
| Analíticos | Google Analytics, Hotjar, Mixpanel, Plausible (free) | ✅ Sim — exceto Plausible/análise sem cookie |
| Marketing / publicidade | Facebook Pixel, Google Ads, Twitter Pixel, retargeting | ✅ Sempre |
| Personalização | Recomendações baseadas em comportamento, A/B test | ✅ Sempre |
| Sociais embedded | Botões de like, embed YouTube/Vimeo, comentários Disqus | ✅ Sempre (terceiros usam cookies próprios) |
Não tem cookie analítico real? Considere ferramentas cookieless como Plausible ou Fathom — tecnicamente não exigem consentimento, mas avise no banner por boa prática.
O design correto do banner
Padrão aceito pela ANPD e órgãos europeus equivalentes:
┌─────────────────────────────────────────────────┐
│ 🍪 Cookies neste site │
│ │
│ Usamos cookies para melhorar sua experiência │
│ e analisar tráfego. Você decide. │
│ │
│ [Personalizar] [Rejeitar] [Aceitar todos] │
│ │
│ Saiba mais na nossa Política de Privacidade │
└─────────────────────────────────────────────────┘
✅ 3 botões com mesmo peso visual (mesmo tamanho, cores
distintas mas comparáveis, mesma posição na linha)
✅ "Rejeitar" não escondido nem em link cinza
✅ "Aceitar" não destacado por cor mais chamativa
✅ Texto curto explicando o motivo
✅ Link visível para política de privacidade
Tela de "Personalizar" deve ter:
✅ Toggle por categoria, todos DESLIGADOS por padrão
✅ Descrição clara de cada categoria
✅ Lista detalhada de cookies usados (opcional mas recomendado)
✅ Botão "Salvar preferências" e "Aceitar todos"Implementação completa em Next.js
1. Componente do banner
// components/CookieBanner.tsx
'use client';
import { useState, useEffect } from 'react';
const CONSENT_KEY = 'cookie-consent-v1';
const CONSENT_VERSION = 1;
export type Prefs = {
analytics: boolean;
marketing: boolean;
functional: boolean;
};
const ALL: Prefs = { analytics: true, marketing: true, functional: true };
const NONE: Prefs = { analytics: false, marketing: false, functional: false };
export default function CookieBanner() {
const [show, setShow] = useState(false);
const [showCustom, setSC] = useState(false);
const [prefs, setPrefs] = useState<Prefs>(NONE);
useEffect(() => {
const stored = localStorage.getItem(CONSENT_KEY);
if (!stored) { setShow(true); return; }
try {
const parsed = JSON.parse(stored);
// Se mudou versão do banner, peça consent novamente
if (parsed.version !== CONSENT_VERSION) { setShow(true); return; }
// Se passou de 12 meses, peça novamente
const ageMs = Date.now() - parsed.timestamp;
if (ageMs > 365 * 24 * 60 * 60 * 1000) { setShow(true); return; }
applyConsent(parsed);
} catch {
setShow(true);
}
}, []);
function save(p: Prefs) {
const record = { ...p, timestamp: Date.now(), version: CONSENT_VERSION };
localStorage.setItem(CONSENT_KEY, JSON.stringify(record));
applyConsent(record);
logConsentToServer(record); // auditoria
setShow(false);
}
function applyConsent(p: Prefs) {
if (typeof window === 'undefined') return;
window.gtag?.('consent', 'update', {
analytics_storage: p.analytics ? 'granted' : 'denied',
ad_storage: p.marketing ? 'granted' : 'denied',
ad_user_data: p.marketing ? 'granted' : 'denied',
ad_personalization: p.marketing ? 'granted' : 'denied',
functionality_storage: p.functional ? 'granted' : 'denied',
});
}
if (!show) return null;
// ... JSX do banner (3 botões equivalentes + tela personalizar)
}2. Google Consent Mode v2 padrão denied
Antes de carregar Google Analytics ou Ads, declare consent como denied por padrão. Depois o banner faz update conforme escolha do usuário:
// app/layout.tsx (App Router) — antes do GA carregar
import Script from 'next/script';
export default function Layout({ children }) {
return (
<html>
<body>
{children}
{/* 1º — Define consent default DENIED */}
<Script id="consent-default" strategy="beforeInteractive">
{`window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'analytics_storage': 'denied',
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'functionality_storage':'denied',
'wait_for_update': 500,
});`}
</Script>
{/* 2º — Carrega Google Analytics (respeitará o consent) */}
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"
strategy="afterInteractive"
/>
<Script id="ga-init" strategy="afterInteractive">
{`gtag('js', new Date());
gtag('config', 'G-XXXXX');`}
</Script>
{/* 3º — Banner faz consent update conforme usuário decide */}
<CookieBanner />
</body>
</html>
);
}3. Registro de consentimento (auditoria)
// Salva log para defesa em fiscalização
async function logConsentToServer(record) {
try {
await fetch('/api/consent-log', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
prefs: record,
timestamp: record.timestamp,
userAgent: navigator.userAgent,
url: location.href,
bannerVersion: record.version,
}),
});
} catch {
// não bloqueia UX se logging falhar
}
}
// No backend (Next.js route handler):
// app/api/consent-log/route.ts
export async function POST(req: Request) {
const body = await req.json();
const ip = req.headers.get('x-forwarded-for') ?? 'unknown';
const ipHash = await sha256(ip); // armazene hash, não IP plain
await db.consentLogs.insert({
...body,
ipHash,
receivedAt: new Date(),
});
return Response.json({ ok: true });
}Implementação em WordPress
Em WordPress, o caminho mais comum é plugin pronto. Os principais para LGPD:
| Critério | Modelo | Suporte LGPD | Consent Mode v2 |
|---|---|---|---|
| Cookiebot | Pago (a partir de €11/mês) | Excelente | ✅ Nativo |
| CookieYes | Freemium | Bom | ✅ Em planos pagos |
| Complianz | Freemium | Excelente | ✅ Nativo |
| Iubenda | Pago | Excelente (italiano com BR) | ✅ Nativo |
| GDPR Cookie Consent (CookieYes) | Free básico | Aceitável | Limitado em free |
| WP Consent API + plugins | Free (técnico) | Bom para devs | ✅ Manual |
Cookieless analytics como alternativa
Se sua única necessidade é analytics simples (não precisa de marketing/Google Ads), considere ferramentas que NÃO usam cookies — eliminam a necessidade do banner para essa categoria:
- Plausible: open source, hosting próprio ou cloud, $9/mês.
- Fathom: simples, $14/mês.
- Umami: open source, self-hosted gratuito.
- SimpleAnalytics: $19/mês.
Trade-off
Cookieless analytics oferece menos detalhe (sem funis multi-sessão, sem cohorts) mas em compensação remove obrigação de consentimento para analytics e melhora UX (sem banner). Para muitos sites, é o melhor compromisso.
Os 8 dark patterns que a ANPD pune
Lista negra do banner ruim
- “Aceitar todos” em destaque visual maior que “rejeitar”.
- “Rejeitar” em link discreto em vez de botão.
- Cookie wall: bloquear acesso ao conteúdo até o usuário aceitar.
- Banner que reaparece a cada página insistindo até o usuário ceder.
- Checkboxes pré-marcados em categorias opcionais — viola consentimento inequívoco.
- “Continuar navegando = aceitar”: não constitui consentimento válido pela LGPD.
- Tela de “personalizar” cheia de friction: 12 toggles escondidos, ordem confusa.
- Trackear antes do consentimento: Google Analytics carregado “por padrão” antes do clique em aceitar.
Como auditar se seu banner está conforme
- Teste em janela anônima: banner aparece ANTES de qualquer cookie ser setado?
- DevTools → Application → Cookies: antes do consent, só cookies essenciais devem existir.
- Network tab: requisições para google-analytics.com, facebook.com, hotjar.com não devem sair antes do consent.
- Rejeitar: deve ser tão simples quanto aceitar (mesmo número de cliques).
- Revogar: link no rodapé deve abrir o banner de novo.
- Ferramenta: Cookiebot Scanner ou CookieServe.com fazem auditoria pública gratuita.
Conformidade vai além do banner
O banner é o componente visível, mas LGPD exige um conjunto:
- Política de Privacidade publicada e atualizada — veja checklist LGPD completo para sites.
- DPO (Encarregado) nomeado e contato público.
- ROPA (Registro de Operações de Tratamento) interno.
- Canal de exercício de direitos do titular.
- Plano de resposta a incidentes com comunicação à ANPD em 2 dias úteis.
Checklist do banner LGPD-compliant
- ✅ 3 botões com mesmo peso visual (aceitar / rejeitar / personalizar).
- ✅ Rejeitar funciona em 1 clique.
- ✅ Tela de personalizar com toggles desligados por padrão.
- ✅ Cookies não-essenciais NÃO setados antes do consent.
- ✅ Google Consent Mode v2 com default DENIED, update após escolha.
- ✅ Link “Gerenciar cookies” no rodapé que reabre banner.
- ✅ Registro de consentimento salvo no servidor (auditoria).
- ✅ IP armazenado em hash, nunca plain text.
- ✅ Re-consent automático após 6–12 meses ou mudança de versão.
- ✅ Política de Privacidade linkada visivelmente no banner.
- ✅ Sem cookie wall, sem dark patterns.
- ✅ Auditado em janela anônima + DevTools antes do go-live.
Perguntas frequentes
Banner de cookies é obrigatório no Brasil?+
Sim, sempre que o site usar cookies não-essenciais (analytics, marketing, retargeting, redes sociais embedded). Cookies estritamente necessários (sessão, carrinho, autenticação, CSRF) NÃO precisam de consentimento. A obrigatoriedade está no art. 7 e 8 da LGPD: tratamento de dados pessoais via cookies de terceiros depende de base legal de consentimento, o que exige o banner.
Posso usar 'aceitar todos' como único botão?+
Não. A ANPD considera dark pattern. O usuário precisa ter, com igual proeminência visual, opções de aceitar, rejeitar e personalizar. Aceitar não pode ser visualmente destacado em relação a rejeitar (mesmo tamanho, cor similar, mesmo posicionamento). Em fiscalizações, banner com 'aceitar' grande e 'rejeitar' escondido foi razão de multas.
Quais cookies são essenciais e não precisam de consentimento?+
Cookies estritamente necessários para o funcionamento do site: sessão de login, item no carrinho, tokens CSRF, preferência de idioma escolhida pelo usuário, cookies de balanceamento de carga. NÃO são essenciais: analytics (mesmo Google Analytics anonimizado), Facebook Pixel, hotjar, retargeting, cookies para personalização de conteúdo, cookies de teste A/B.
O que é Google Consent Mode v2 e por que importa?+
É a API do Google para sinalizar status de consentimento. Sem Consent Mode v2, Google Ads e Analytics podem não funcionar plenamente em usuários que rejeitam cookies. Com v2 configurado: o Google modela conversões anonimamente para usuários que rejeitam (modeled conversions), preservando capacidade de medição. Obrigatório desde março 2024 para anunciantes em mercados EEA, recomendado fortemente no Brasil.
Preciso registrar o consentimento do usuário?+
Sim. A LGPD exige que o controlador comprove o consentimento. Registro deve incluir: data/hora, categorias aceitas, identificador anônimo do usuário, versão do banner aceita, IP hashed (não plain). Plataformas como Cookiebot fazem isso automaticamente; em implementação custom, salve em banco com retenção mínima de 5 anos para defesa em fiscalização.
Cookie wall (bloquear conteúdo até aceitar) é permitido?+
Não. ANPD e EDPB consideram cookie wall (forçar aceitar para acessar conteúdo) violação do consentimento livre. Há exceções para conteúdo pago/premium (assinatura como alternativa ao consentimento). Para conteúdo gratuito, sempre permita rejeitar e continuar usando o site normalmente.
Quanto tempo o consentimento dura?+
A LGPD não fixa prazo, mas o consenso de mercado é 6 a 12 meses. Após esse período, peça consentimento novamente. Razão: contexto e intenções do usuário podem mudar. Cookiebot e similares forçam re-consent automaticamente após 12 meses por padrão. Em implementação custom, salve um campo 'expires' junto com a preferência.
Cookiebot, OneTrust ou implementação custom?+
Para sites pequenos/médios sem time legal dedicado: ferramenta plug-and-play (Cookiebot, CookieYes, Usercentrics) — paga, mas resolve compliance, atualização de regras automática, registro de consentimento auditável. Para sites grandes com requisitos custom (UX próprio, design system): implementação custom + Consent Mode v2. Para projetos open-source: react-cookie-consent + lógica de Consent Mode na mão.
Continue lendo
Política de Privacidade LGPD (2026): Guia Completo com Modelo para Copiar
Guia definitivo de política de privacidade sob LGPD: o que é obrigatório, estrutura por seção, bases legais, direitos do titular e modelo pronto para adaptar.
Open Graph Protocol: Guia Completo 2026 (Facebook, LinkedIn, WhatsApp)
Guia definitivo de Open Graph: tags essenciais, og:type por tipo de conteúdo, dimensões corretas de og:image por rede, implementação em Next.js/WordPress/HTML puro, debug por plataforma e os 7 erros que destroem o preview.
LGPD para Sites: Checklist Completo de Adequação (2026)
Guia LGPD para sites brasileiros: 30+ itens de checklist, bases legais explicadas, multas reais aplicadas pela ANPD, prioridade de implementação por fase e ferramentas recomendadas.