Introdução
Nos últimos anos, a evolução das normas internacionais de proteção à privacidade, como o GDPR e a LGPD, reforçou a necessidade de empresas e desenvolvedores adotarem práticas que garantam transparência, consentimento explícito e respeito aos direitos dos usuários.
Estar em conformidade com essas regulamentações não é apenas uma obrigação legal, mas também um diferencial competitivo que fortalece a confiança do público.
Ferramentas que auxiliam na gestão de consentimentos de cookies para garantir conformidade legal tornaram-se indispensáveis. Foi nesse cenário que surgiu o uabiConsent, uma solução de código aberto e totalmente gratuita.
Desenvolvido em JavaScript puro, a solução dispensa o uso de bibliotecas adicionais, garantindo leveza e simplicidade na implementação, ao mesmo tempo que oferece alta customização e suporte a múltiplos idiomas.
Download
Para baixar o uabiConsent, clique no botão Download ou acesse o repositório diretamente no GitHub:
Carregando
Inclua o CSS e o JavaScript no seu site adicionando o seguinte código ao HTML:
HTML
<link rel='stylesheet' href='/caminho/para/css/uabi-consent-1.1.min.css'> <script src='/caminho/para/js/uabi-consent-1.1.min.js'></script>
A melhor localização para a chamada do CSS é dentro da tag <head> do HTML, enquanto a chamada do JavaScript deve ser inserida logo antes do fechamento da tag </body>.
Traduções
O arquivo de tradução uabi-consent-1.1.lang.json deve ser copiado para o mesmo diretório do arquivo JavaScript principal. Esse arquivo contém traduções disponíveis em Português, Inglês e Espanhol.
Caso necessário, as traduções podem ser alteradas diretamente no arquivo JSON. Também é possível adicionar suporte para novos idiomas seguindo o padrão estrutural já disponibilizado.
Inicialização
Após o carregamento do JavaScript principal, insira o código abaixo para inicializar o uabiConsent:
JavaScript
myUabiConsent = new uabiConsent({ name: 'uabiConsent-', lang: 'pt', initialConsent: 'denied', expire: 365, privacyPolicyUrl: 'https://telazul.drusian.com.br/pt/artigo/politica-de-privacidade', showDecline: true, showSettings: true, consoleLog: true });
Explicando:
- name: O valor configurado nesta opção será usado como prefixo para os nomes dos diferentes tipos de cookies (saiba mais sobre os tipos na próxima seção). Por exemplo, usando a configuração acima, o cookie relacionado ao desempenho será armazenado com o nome uabiConsent-performanceCookies. Altere conforme sua preferência ou utilize o valor padrão.
- lang: Define o idioma da interface. Idiomas suportados: 'pt' (Português), 'en' (Inglês) e 'es' (Espanhol).
- initialConsent: Define o consentimento inicial antes que o usuário faça uma escolha:
- 'granted': Cookies serão armazenados sem o consentimento explícito do usuário.
- 'denied': Cookies só serão armazenados após o usuário consentir explicitamente.
- expire: Tempo de expiração dos cookies em dias.
- privacyPolicyUrl: URL para a política de privacidade do site. Esta opção é obrigatória para o funcionamento do script. Consulte o endereço fornecido no exemplo para referência.
- showDecline: Exibe true ou oculta false o botão para recusar todos os cookies.
- showSettings: Exibe true ou oculta false o botão para personalizar os tipos de cookies individualmente.
- consoleLog: Exibe no console do navegador o valor definido para cada tipo de cookie. Esta opção é útil para testes e depuração, mas recomenda-se desabilitá-la no ambiente de produção.
O exemplo acima configura a caixa de diálogo em português, exibindo todos os botões (Aceitar, Recusar e Personalizar). O script considera que, inicialmente, o usuário não concedeu consentimento, garantindo que nenhum cookie além dos estritamente necessários seja armazenado até que o usuário faça uma escolha explícita.
Tipos de Cookies
O uabiConsent oferece quatro tipos de cookies personalizáveis para atender às necessidades do site e garantir conformidade com as regulamentações de privacidade. Abaixo estão os detalhes de cada tipo:
- Cookies Estritamente Necessários:
- São essenciais para o funcionamento básico do site e não podem ser desativados.
- Geralmente são criados em resposta a ações do usuário, como definir preferências de privacidade, fazer login ou preencher formulários.
- Não armazenam informações pessoais identificáveis.
- Cookies de desempenho
- Usados para medir e melhorar a experiência do usuário e a performance do site.
- Responsáveis por coletar dados sobre o número de visitas, fontes de tráfego e como os visitantes interagem com o site (por exemplo, páginas mais visitadas).
- Ferramentas como o Google Analytics se enquadram nessa categoria.
- Todas as informações que estes cookies recolhem são agregadas e, portanto, anônimas.
- Cookies funcionais
- Proporcionam funcionalidades aprimoradas e personalizações no site.
- Podem ser definidos pelo próprio site ou por terceiros.
- Exemplos incluem a capacidade de lembrar preferências do usuário, como tema, idioma ou região.
- Cookies de direcionamento
- Usados para tornar os anúncios publicitários mais relevantes ao perfil de interesses do usuário.
- Podem ser definidos pelo site ou por terceiros, como o Google Adsense.
- Quando aceitos, permitem a exibição de anúncios personalizados com base nas preferências do usuário.
- Quando recusados, os anúncios serão exibidos sem personalização.
Referência
Este sistema de classificação de cookies e os textos utilizados tanto nesta página quanto no script foram inspirados no sistema de gerenciamento de cookies disponível no site Stack Overflow.
Observação Importante
Quando o script é configurado para considerar o consentimento inicial como 'denied' (negado), o comportamento das ferramentas integradas segue as seguintes regras:
- O Google Analytics será carregado com sinais para não armazenar cookies.
- O Google Adsense exibirá anúncios sem personalizações baseadas nas preferências do usuário.
Ao aceitar ou recusar os cookies clicando nos botões correspondentes, os sinais adequados serão enviados automaticamente para que tanto o Analytics quanto o Adsense ajustem suas operações de acordo com as preferências do usuário.
Alterar o Consentimento
Após o usuário aceitar, recusar ou personalizar as preferências de cookies, a caixa de diálogo será fechada. Para permitir que o usuário reabra a caixa de diálogo e altere suas configurações posteriormente, basta criar um link com a classe 'uabi-consent-show-dialog'.
Veja o exemplo abaixo:
HTML
<a href='#' class='uabi-consent-show-dialog'>Cookies</a>
Ao clicar no link acima, a caixa de diálogo de consentimento será exibida novamente, permitindo que o usuário ajuste suas preferências de cookies.
Como integrar com Google Analytics e Adsense
Abaixo está um exemplo de como configurar o Google Analytics e o Google Adsense para serem carregados automaticamente pelo uabiConsent:
JavaScript
myUabiConsent = new uabiConsent({ name: 'uabiConsent-', lang: 'pt', initialConsent: 'denied', 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' });
Funcionamento dos Anúncios do Adsense
Os anúncios automáticos do Google Adsense serão exibidos utilizando apenas a inicialização acima. No entanto, para anúncios manuais, aqueles em que você decide onde colocá-los no site, é necessário incluir o elemento <ins> no código HTML. Veja o exemplo abaixo:
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 é gerenciado em Cookies de direcionamento.
Nenhuma configuração adicional é necessária para o funcionamento das ferramentas. Elas são carregadas automaticamente com base nas preferências do usuário definidas no uabiConsent.
Importante: Evitar Conflitos
Consentimento Implícito
O consentimento implícito ocorre quando o usuário é considerado como tendo aceitado os termos ou condições do site simplesmente ao navegar ou utilizá-lo, sem a possibilidade de recusar explicitamente (opt-out). Essa prática é comum em países onde regulamentações de privacidade ainda não exigem consentimento explícito para coletar ou processar dados.
Para garantir conformidade com normas globais e respeitar a privacidade dos usuários, recomenda-se sempre oferecer opções claras e possibilitar que os usuários possam gerenciar suas preferências.
O uabiConsent permite configurar o consentimento implícito, conforme demonstrado no exemplo a seguir:
JavaScript
myUabiConsent = new uabiConsent({ name: 'uabiConsent-', lang: 'pt', initialConsent: 'granted', privacyPolicyUrl: 'https://telazul.drusian.com.br/pt/artigo/politica-de-privacidade', showDecline: false, showSettings: false });
- A opção initialConsent: 'granted' define que o consentimento é concedido automaticamente ao carregar o site.
- As configurações showDecline: false e showSettings: false desabilitam os botões de recusa e personalização, respectivamente, implementando assim o consentimento implícito.
- O script exibirá uma mensagem informando que, ao navegar no site, o usuário aceita o uso de cookies de acordo com a política de privacidade, fornecendo um link para consulta.
Ao combinar initialConsent: 'granted' com showSettings: true, o consentimento inicial será garantido automaticamente antes de o usuário interagir com as configurações. No entanto, ao acessar a tela de personalização manual, todas as opções estarão habilitadas por padrão.
Múltiplos idiomas
O uabiConsent oferece suporte a múltiplos idiomas, permitindo que o script seja configurado dinamicamente de acordo com o idioma do site. A seguir, demonstramos como inicializá-lo em um site que utiliza múltiplos idiomas baseados na URL.
Funcionamento Geral
- Obtenção do Idioma da URL: A função getSiteLang() extrai o idioma do site a partir da URL no navegador. Essa abordagem pressupõe que a estrutura da URL siga o formato: https://dominio.com/idioma/. Por exemplo:
- https://dominio.com/pt/ → Idioma: Português (pt)
- https://dominio.com/en/ → Idioma: Inglês (en)
- https://dominio.com/es/ → Idioma: Espanhol (es)
- Definição da Política de Privacidade: Com base no idioma extraído, o código define a URL da política de privacidade. Isso garante que os usuários tenham acesso à versão correta da política de privacidade em seu idioma.
- Inicialização do Script: O script do uabiConsent é então inicializado com as configurações adequadas, incluindo o idioma detectado e a URL da política de privacidade correspondente.
JavaScript
// Função para pegar o idioma da URL function getSiteLang() { const path = window.location.pathname; const array = path.split('/'); return array[1]; } const myUabiLang = getSiteLang(); // Política de privacidade de acordo com a linguagem if (myUabiLang == 'pt') { myUabiPrivacyPolicy = 'https://telazul.drusian.com.br/pt/artigo/politica-de-privacidade'; } else if (myUabiLang == 'en') { myUabiPrivacyPolicy = 'https://telazul.drusian.com.br/en/article/privacy-policy'; } else if (myUabiLang == 'es') { myUabiPrivacyPolicy = 'https://telazul.drusian.com.br/es/articulo/politica-de-privacidad'; } // Inicializando script myUabiConsent = new uabiConsent({ name: 'uabiConsent-', // Prefixo para os cookies lang: myUabiLang, // Idioma detectado initialConsent: 'denied', // Consentimento inicial negado privacyPolicyUrl: myUabiPrivacyPolicy // URL da política de privacidade });
Verificando se o Usuário Consentiu
Para o Google Analytics e o Google Adsense, o script já envia automaticamente os sinais correspondentes à aceitação ou recusa dos cookies, sem necessidade de configuração adicional.
No entanto, para recuperar o valor dos cookies de consentimento e gravar novos cookies com base nas escolhas do usuário, ou para integrar o script com outras ferramentas, é necessário utilizar a função getCookie(). Essa função permite verificar o status de um tipo específico de cookie e tomar decisões com base no consentimento do usuário.
JavaScript
if (getCookie(myUabiConsent.opt.name + 'functionalCookies') === 'granted') { // Código a ser executado se o usuário consentiu com o uso de cookies funcionais }
A condição acima verifica se o valor do cookie 'functionalCookies' é 'granted' (consentido). Caso positivo, o código dentro do bloco será executado. Para verificar outros tipos de cookies, basta substituir 'functionalCookies' por:
- 'performanceCookies' (cookies de desempenho),
- 'targetingCookies' (cookies de direcionamento).
Para facilitar a depuração e testes, você pode iniciar o uabiConsent com a opção consoleLog: true. Isso exibirá no console do navegador o valor dos cookies de consentimento, permitindo que você valide seu comportamento. Lembre-se de desabilitar esta opção em ambientes de produção.
Funcionalidades
O uabiConsent disponibiliza uma caixa de diálogo para solicitar permissão ao usuário para armazenar cookies com diferentes finalidades. Abaixo estão suas principais funcionalidades:
-
- Dois Tipos de Consentimento:
- Consentimento Explícito: O usuário escolhe se e a quais cookies deseja consentir. Oferece controle granular sobre as preferências.
- Consentimento Implícito: Informa ao usuário que os cookies serão armazenados automaticamente, tornando o uso do site condicional ao consentimento.
- Política de Privacidade:
- Permite definir a URL da política de privacidade do site, garantindo conformidade legal e transparência.
- Suporte Multilíngue:
- Suporta três idiomas: Português, Inglês e Espanhol.
- É possível adicionar novas linguagens, expandindo o alcance global do script.
- Customização de Textos:
- Todos os textos das mensagens e botões são personalizáveis em todas as linguagens.
- Utiliza textos diferentes para a mensagem principal e o botão de consentimento, dependendo se o consentimento é explícito ou implícito. Ambos são totalmente configuráveis.
- Configurações Iniciais:
- Possibilita definir o consentimento inicial, ou seja, se o consentimento será considerado garantido (granted) ou negado (denied) antes que o usuário faça uma escolha.
- Controle de Botões:
- Permite definir se os botões Recusar Cookies e Personalizar Cookies serão exibidos na interface.
- Link para Configurações:
- Facilita a criação de um link para reabrir a caixa de diálogo de configurações dos cookies, permitindo que o usuário altere suas preferências a qualquer momento.
- Logs no Console:
- Oferece uma opção para registrar os valores dos cookies no console do navegador, útil para depuração e testes. Recomenda-se desativar essa funcionalidade em ambientes de produção.
- Integração Automática com Ferramentas:
- Integra-se automaticamente ao Google Analytics e ao Google Adsense utilizando sinais. Basta fornecer os IDs correspondentes, e as ferramentas serão carregadas com base nas escolhas do usuário.
- Personalização Visual:
- Permite a personalização completa da caixa de diálogo através do arquivo SASS (.scss) que acompanha o script. Isso possibilita ajustar o design para atender às necessidades visuais do site.
- Dois Tipos de Consentimento:
