WabiLGPD, um script para implementar gestão de cookies em seu site

A Lei Geral de Proteção de Dados Pessoais (LGPD), foi criada para regulamentar a coleta, armazenamento e partilha de dados pessoais, defendendo os direitos fundamentais de liberdade e de privacidade.

O script é desenvolvido em javascript puro, o que significa que não necessita de nenhuma biblioteca para funcionar, basta incluir no site e usar.

Download

Faça o download do arquivo em formato zip ou bz2.

Download Zip Download Bz2

Carregando

Carregue o css e o javascript no site.

HTML

<link rel='stylesheet' type='text/css' href='/caminho/para/css/wabi-lgpd-1.0.min.css'>
<script src='/caminho/para/js/wabi-lgpd-1.0.min.js'></script>

Traduções

Lembre-se de copiar o arquivo da linguagem wabi-lgpd-1.0.lang.json no mesmo diretório do javascript principal.

Altere as traduções neste arquivo conforme necessidade.

Inicialização

Execute o código abaixo após o carregamento do javascript principal.

JavaScript

myWabiLGPD = new wabiLGPD({
   name: 'wabiConsentLGPD',
   lang: 'pt',
   initialConsent: false,
   expire: 365,
   privacyPolicyUrl: 'https://telazul.drusian.com.br/pt/artigo/politica-de-privacidade',
   showDecline: true,
   showSettings: true
});

O exemplo acima carrega a caixa de diálogo em português, com todos os botões. O script considera que inicialmente o usuário não deu o consentimento e portanto não devem ser armazenados cookies além do estritamente necessário até a decisão do usuário.

A opção name define o nome que irá preceder cada tipo de cookie.

Tipos de Cookies

Estão disponíveis quatro tipos de cookies:

Estritamente necessários: são cookies usados para o funcionamento do site, que não podem ser desativados. Geralmente são criados em resposta a alguma ação executada pelo usuário do site, solicitando algum serviço como definir as preferências de privacidade deste script, fazer login no site e preencher formulários.
Cookies de desempenho: são cookies usados para contar o número de visitas e fontes de tráfego, para medir e melhorar a experiência do usuário e a performance do site. Eles são responsáveis pelas informações sobre como os visitantes se movem dentro do site, as páginas mais e menos visitadas. O Google Analytics se enquadra aqui, se este tipo de cookie for aceito ele será carregado.
Cookies funcionais: são cookies usados para prover personalizações e funcionalidades aprimoradas. Podem ser cookies definidos por terceiros.
Cookies de direcionamento: são cookies usados para tornar os anúncios publicitários mais relevantes e podem ser definidos tanto pelo próprio site como por terceiros. Pode ser usado para criar um perfil de interesses para mostrar anúncios mais relevantes. O Google Adsense se encaixa aqui e a aceitação deste tipo de cookie estará vinculada ao carregamento ou não dos anúncios.

Para mais informações sobre os tipos de cookies consulte as próprias mensagens disponíveis nesta ferramenta, os textos estão mais completos. Esse sistema de 4 tipos de cookies e os textos usados tanto nesta página como no script em sí foram baseados no sistema de gerenciamento de cookies disponível no site stackoverflow.

Observação: Quando o script é configurado para considerar o consentimento inicial como falso, Analytics e Adsense não serão carregados. Ao aceitar os cookies ambos serão iniciados automaticamente, porém, desativar os cookies não interrompe os serviços imediatamente, é necessário o usuário atualizar a página.

Link para a caixa de diálogo

Adicionar um link no site para abrir a caixa de diálogo com as configurações das permissões de armazenamento de cookies é simples, basta adicionar a classe wabi-lgpd-show-dialog.

HTML

<a href='#' class='wabi-lgpd-show-dialog'>Cookies</a>

Google Analytics e Adsense

Exemplo de como configurar ambos Analytics e Adsense para serem carregados dinamicamente mediante ao consentimento do usuário.

JavaScript

myWabiLGPD = new wabiLGPD({
   name: 'wabiConsentLGPD',
   lang: 'pt',
   initialConsent: false,
   expire: 365,
   privacyPolicyUrl: 'https://telazul.drusian.com.br/pt/artigo/politica-de-privacidade',
   showDecline: true,
   showSettings: true,
   analytics: true,
   analyticsID: 'G-MEU_ID',
   adsense: true,
   adsenseID: 'ca-pub-MEU_ID'
});

Anúncios automáticos do Adsense serão exibidos utilizando somente esta inicialização, porém para anúncios manuais, aqueles que você decide onde colocar em seu site, é necessário incluir somente o elemento <ins> no código html, exemplo:

HTML

<ins class='adsbygoogle'
     style='display:block'
     data-ad-client='ID do cliente'
     data-ad-slot='ID do anúncio'
     data-ad-format='auto'
     data-full-width-responsive='true'>
</ins>

O Google Analytics é habilitado/desabilitado nas configurações na opção Cookie de desempenho enquanto o Adsense em Cookies de direcionamento.

Consentimento obrigatório e múltiplos idiomas

Abaixo a versão com a caixa de diálogo básica, somente informando ao usuário que o site utiliza cookies. Assume-se que para utilizar o site é obrigatório o consentimento.

Antes de iniciar o script foi criada a função para pegar a linguagem do site a partir da URL do navegador e depois um if para definir a URL da política de privacidade de acordo com a linguagem. Estes códigos supõe que a URL do site usa o formato mais comum: https://dominio.com.br/linguagem/. Esses códigos são somente sugestões, a lógica pode ser ajustada as suas necessidades.

JavaScript

// Função para pegar o idioma da URL
function getSiteLang() {
   const path = window.location.pathname;
   const array = path.split('/');
   return array[1];
}
const myWabiLang = getSiteLang();

// Política de privacidade de acordo com a linguagem
if (myWabiLang == 'pt') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/pt/artigo/politica-de-privacidade';
} else if (myWabiLang == 'en') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/en/article/privacy-policy';
} else if (myWabiLang == 'es') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/es/articulo/politica-de-privacidad';
}

// Inicializando consentimento obrigatório
myWabiLGPD = new wabiLGPD({
   name: 'wabiConsentLGPD',
   lang: myWabiLang,
   initialConsent: true,
   expire: 365,
   privacyPolicyUrl: myWabiPrivacyPolicy,
   showDecline: false,
   showSettings: false
});

Restringindo a utilização de cookies

Para Analytics e Adsense o script já faz as restrições, porém para os Cookies funcionais não há nenhuma ação automática, é necessário fazer as restrições manualmente. Para checar se um consentimento foi garantido use a função getCookie que acompanha o script.

JavaScript

if (getCookie(myWabiLGPD.opt.name + 'functionalCookies') == 'true') {
   // Meu código para manipular os cookies
}

Essá condição vale para todos os outros tipos de cookies, bastando alterar 'functionalCookies' por 'performanceCookies' ou 'targetingCookies'.

A variável myWabiLGPD.opt.name contém o nome padrão definido na inicialização e que precede todo nome de um tipo de cookie.

A condição usa a comparação == 'true' pois o cookie é armazenado em formato texto. Usar o valor true sem aspas não funcionará.

Funcionalidades

Este script disponibiliza uma caixa de dialogo para pedir permissão ao usuário para armazenar cookies com diferente finalidades. As principais são:

Duas opções de consentimento:
- Consentimento consensual, onde o usuário escolhe se e a quais cookies quer consentir.
- Consentimento obrigatório, onde somente é informado ao usuário que os cookies serão armazenadas, ou seja, a utilização do site é condicional ao consentimento para a utilização de cookies.
Permite definir a URL para a política de privacidade.
Suporta 3 linguagens, português, inglês e espanhol. É possível adicionar outras.
Textos das mensagens e botões customizáveis em todas as linguagens.
Utiliza textos diferentes para a mensagem principal e o botão consentir dependendo se o consentimento é obrigatório ou consensual. Em ambos os casos os textos são personalizáveis.
Opção de definir o consentimento inicial, ou seja, ao usuário entrar no site e antes de escolher uma opção, se o consentimento deve ser considerado verdadeiro ou falso.
Definir se os botões Recusar Cookies e Configurar Cookies serão exibidos.
Possibilita criar link para abrir a caixa de dialogo com as configurações dos cookies.
Função para logar os valores dos cookies no console.
Integração com Google Analytics e Adsense, que são carregados automaticamente por este script bastando fornecer os respectivos IDs. Os scripts são carregados mediante a consentimento do usário ou inicial.
Permite a personalização da caixa de diálogo através do arquivo sass (.scss) que acompanha script.