LGPD / Cookies Componentes

O que é

Não é só um aviso bonito: ele segura os scripts de terceiros (Google Analytics, pixel do Facebook, chat…) até a pessoa aceitar a categoria deles. Você coloca uma linha <div sw-lgpd> na página e troca o <script> desses serviços para type="text/plain" com a categoria em data-sw-lgpd. O banner oferece "Aceitar todos", "Recusar todos" (com o mesmo peso, como a lei pede) e "Personalizar" (liga/desliga por categoria). Depois da escolha, um botãozinho redondo fica no canto para a pessoa mudar de ideia.

Precisa do JavaScript do SWCore. O navegador não executa um <script type="text/plain">; quando a pessoa aceita a categoria, o componente troca esse script por um de verdade e ele roda. A escolha fica guardada no navegador dela (com data e hora) e vale nas próximas visitas. A categoria Necessários sempre existe e não pode ser desligada. O visual acompanha o tema claro/escuro (menos o estilo drk, que é sempre escuro).

Quando usar

• Todo site que usa Google Analytics, pixel de anúncio, chat ou vídeo incorporado — isto é, quase todo site público.
• Loja e site de cliente: dá para mostrar "o que eu aceitei" (SW.Lgpd.accepted('marketing')) antes de disparar evento de conversão.
• Site sem nenhum script de terceiros e sem cookie além do necessário não precisa do banner.

Comece aqui

1. 1

   Coloque o SWCore na página.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Coloque o banner uma vez na página, com o endereço da sua política de privacidade.

   <div sw-lgpd sw-lgpd-policy="/privacidade"></div>

3. 3

   Troque o script de estatística/anúncio para type="text/plain" e diga a categoria. Ele só roda depois do "aceitar".

   <!-- ANTES: rodava para todo mundo -->
   <script>
     /* código do Google Analytics */
   </script>
   
   <!-- DEPOIS: só roda se a pessoa aceitar "Estatísticas" -->
   <script type="text/plain" data-sw-lgpd="analytics">
     /* código do Google Analytics */
   </script>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div sw-lgpd sw-lgpd-policy="/privacidade" sw-lgpd-cats="analytics"></div>

<!-- o carregador do GA: endereço em data-sw-lgpd-src, não em src -->
<script type="text/plain" data-sw-lgpd="analytics"
        data-sw-lgpd-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" async></script>

<!-- a configuração do GA -->
<script type="text/plain" data-sw-lgpd="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

<div sw-lgpd="tint" sw-lgpd-pos="bar" sw-lgpd-policy="/privacidade" sw-lgpd-reload></div>

<script type="text/plain" data-sw-lgpd="marketing">
  /* código do pixel do Meta / Google Ads */
</script>

<footer>
  <a href="/privacidade">Política de privacidade</a>
  <a href="#" sw-lgpd-open>Preferências de cookies</a>
</footer>

// antes de disparar um evento de conversão
if (SW.Lgpd.accepted('marketing')) {
  fbq('track', 'Purchase');
}

// tudo de uma vez: { necessarios: true, analytics: false, marketing: true, … }
console.log(SW.Lgpd.consent());

// quando a pessoa escolher ou mudar de ideia
document.addEventListener('sw:lgpd:change', (e) => {
  console.log(e.detail.categories, e.detail.changed, e.detail.firstTime);
});

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js.
• Uma página de política de privacidade no seu site (o link do banner aponta para ela).
• Marcar você mesmo cada script de terceiros com type="text/plain" e data-sw-lgpd.

Cuidados — erros comuns

• Deixar o script do Analytics sem type="text/plain": ele roda antes do aceite, e o banner vira enfeite. Todo script de terceiros precisa da marcação.
• Script externo com src="…" e type="text/plain": não é liberado do jeito certo. Coloque o endereço em data-sw-lgpd-src.
• Escrever a categoria em português ou com erro (data-sw-lgpd="estatisticas"): o script nunca roda. As categorias são analytics, marketing, preferencias, necessarios.
• Link "Preferências de cookies" (sw-lgpd-open) numa página sem <div sw-lgpd>: o painel abre com as categorias padrão, mas sem o banner os scripts marcados daquela página só são liberados depois de uma nova escolha. Coloque a <div sw-lgpd> em todas as páginas.
• Duas <div sw-lgpd> na mesma página: só a primeira vale.

O que ele não faz

• Não bloqueia sozinho o que você não marcou: iframes (YouTube, mapas) e scripts comuns rodam normalmente.
• Script que já rodou não "desliga" quando a pessoa tira a permissão — por isso existe sw-lgpd-reload.
• A escolha fica no navegador da pessoa: em outro aparelho, ou depois de limpar os dados, o banner volta. Não guarda nada no seu servidor.
• Scripts marcados que forem adicionados à página depois da escolha só são liberados na próxima escolha ou na próxima visita.
• Os nomes e descrições das categorias e o texto dos botões são fixos, em português.