Bloqueio prévio de cookies: codificação manual (com exemplos práticos)

O Privacy Controls and Cookie Solution da iubenda permite a gestão de todos os detalhes para o cumprimento da Lei dos Cookies: um banner de cookies para notificar seus usuários, uma política de cookies para informação complementar e o salvamento de preferências, e bloqueio de scripts antes da concessão do consentimento do usuário e provas das preferências dos usuários.

Como instalar o Privacy Controls and Cookie Solution da iubenda

Para obter o manual de instalação, consulte nossa introdução ao Privacy Controls and Cookie Solution. Para o WordPress, leia nosso post exclusivo para o WordPress, que ensina como usar o plugin do Privacy Controls and Cookie Solution da iubenda no WordPress a fim de automatizar o bloqueio de scripts.

Quais scripts de instalação de cookies devem ser bloqueados?

Isso depende da jurisdição competente aplicável ao seu site. Na Europa, você é legalmente obrigado a bloquear scripts de cookies até que o consentimento do usuário seja obtido. Todos os cookies devem ser bloqueados, no entanto, há exceções, os chamados cookies estritamente necessários.

Na Itália, a categoria de cookies isentos de consentimento são:

• Cookies técnicos, de preferência, de sessão e de otimização;
• Cookies estatísticos são operados por soluções próprias (por exemplo, Matomo/Piwik ou outras soluções hospedadas/operadas por você);
• Cookies estatísticos de terceiros (por exemplo, Google Analytics), mas apenas quando os dados forem anônimos e quando não forem usados ​​para perfilamento (ainda que de forma indireta).

Em relação ao Google Analytics

Na Itália, o anonimato do IP é a condição para que o Google Analytics esteja apto a ser “sem consentimento prévio necessário” – no entanto, na França, o Google Analytics não parece estar suscetível a exceções, ainda que o uso do Matomo/Piwik seja recomendado – é a anonimização do IP do usuário que permite que a análise seja realizada de forma discriminada.

É importante observar que, nos casos em que o GDPR se aplica, o uso pretendido considera a necessidade ou não de consentimento, dado que até os dados estatísticos podem ser classificados como “perfilamento” ou “monitoramento”, dependendo de como os dados estão sendo usados.

Para proceder:

• Google Analytics: siga o manual para anonimização do IP do Google Analytics (basta adicionar uma linha à definição de configuração);
• Segundo as informações de que dispomos, o Webtrekk, e muitas outras ferramentas de análise, já estão nos padrões e não requerem configuração adicional.

Em relação às outras ferramentas que asseguram a não utilização de cookies

Caso outras ferramentas de terceiros assegurem o não uso de cookies, possivelmente pelo fornecimento de opções de configuração específicas, elas também podem ser consideradas isentas de bloqueio prévio.

É o caso do YouTube, que disponibiliza um recurso específico para evitar que o usuário seja rastreado através de cookies.

Utilização do Google Tag Manager para simplificar a aplicação dos regulamentos de cookies

O Google Tag Manager é uma ferramenta gratuita que ajuda a simplificar a aplicação dos regulamentos de cookies. É compatível com o Privacy Controls and Cookie Solution da iubenda. Você pode consultar nosso manual do Google Tag Manager aqui.

O Google Tag Manager evita a codificação de scripts, conforme descrito abaixo, embora isso seja limitado a uma determinada categoria de scripts – scripts que não possuem parâmetro posiciona/não definem uma posição. Portanto, ele não lida com scripts incorporados, como aqueles relacionados a banners publicitários, widgets de vídeo do YouTube, botões de curtidas do Facebook, etc. Embora esse método não seja a solução absoluta, é recomendável que você o utilize.

Como aplicar o bloqueio para os scripts que podem instalar cookies

Alterações ao script

Para todos os outros scripts que instalam ou podem instalar cookies, você precisa dar prosseguimento às alterações no código para implementar o recurso de bloqueio.

Para ativar o bloqueio de scripts que podem instalar cookies, você precisa alterar esses scripts para que o Privacy Controls and Cookie Solution da iubenda possa impedir sua execução quando consentimento ainda não tiver sido dado.

Para tanto,

1. você aplicará a classe _iub_cs_activate às tags script.
2. Por fim, mudamos o atributo type de text/javascript para . text/plain

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/_iub_cs_activate.js]

O src pode permanecer inalterado, mas é aconselhável substituí-lo por data-suppressedsrc (não disponível no antigo canal atual/beta/estável) ou por suppressedsrc. A substituição do src é necessária em alguns casos, pois o navegador, ainda que o script esteja bloqueado, pode baixar e/ou decodificar o recurso e, consequentemente, instalar cookies.

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/safemode/tag-options/suppressedsrc.html]

Observação: para a reativação do script, o Privacy Controls and Cookie Solution da iubenda opera a reativação do srcpor meio do controle dos atributos descritos anteriormente na seguinte ordem: data-suppressedsrc (não disponível no antigo canal atual/beta/estável), suppressedsrc e src (caso não tenha sido alterado).

Para ativar a tag inline JavaScript, você deve aplicar a classe_iub_cs_activate-inline.

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/_iub_cs_activate-inline.js]

Observação: a classe _iub_cs_activate-inline precisa ser aplicada a todos os objetos document.write ou document.writeln.

Módulos JavaScript

Graças aos atributos personalizados suppressedtype e data-iub-type, nosso Privacy Controls and Cookie Solution também pode bloquear/ativar outros scripts além de text/javascript (por exemplomodule):

<script type="module">
   console.log('this is a module, e.g. "this" is undefined:', this);
</script>

Para bloqueá-lo:

<script suppressedtype="module" type="text/plain" class="_iub_cs_activate">
   console.log('this is a module, e.g. "this" is undefined:', this);
</script>

ou (alternativa equivalente):

<script data-iub-type="module" type="text/plain" class="_iub_cs_activate">
   console.log('this is a module, e.g. "this" is undefined:', this);
</script>

Codificação manual e consentimento por categoria

Se você ativou o recurso de consentimento por categoria, será necessário especificar as categorias dos scripts/iframes com atributo especial data-iub-purposes separado por vírgulas, por exemplo, data-iub-purposes="2" ou data-iub-purposes="2, 3" (é raro, mas um único ativador pode servir a diferentes finalidades).

Lembre-se de que as finalidades são agrupadas em 5 categorias (necessários, funcionalidades, experiência, medição, marketing), cada uma com um id (1, 2, 3, 4, 5):

1. Estritamente necessário (id 1). Finalidades incluídas:
   • Salvar e gestão de backup
   • Hospedagem e infraestrutura de backend
   • Gerenciamento de página Inicial e de Convite
   • Serviços de plataforma e hospedagem
   • Proteção anti-spam
   • Otimização e distribuição de tráfego
   • Monitoração de infraestrutura
   • Controle de pagamento
2. Interações e funcionalidades básicas (id 2). Finalidades incluídas:
   • Contatar o Usuário
   • Interação com as plataformas de chat ao vivo
   • Gerenciamento de webconferências e telefonia online
   • Gestão de solicitações de suporte e contato
   • Interação com as plataformas de suporte e de feedback
   • Gerenciamento de tags
   • Registro e autenticação
   • Gerenciamento de banco de dados de Usuários
3. Otimização da experiência (id 3). Finalidades incluídas:
   • Comentário de conteúdo
   • Interação com plataformas de coleta de dados e outros terceiros
   • Visualizar conteúdo de plataformas externas
   • Interação com redes sociais e plataformas externas
   • Interação com as plataformas de pesquisa online
   • Gereciamento de RSS feed
   • Características sociais
4. Medição (id 4). Finalidades incluídas:
   • Estatísticas
   • Testes Beta
   • Desempenho de conteúdo e características de teste (teste A/B)
   • Mapeamento térmico e gravação de sessão
   • Gerenciamento de coleta de dados e pesquisas online
5. Direcionamento e publicidade (5). Finalidades incluídas:
   • Publicidade
   • Infraestrutura de serviço de publicidade
   • Afiliação comercial
   • Gerenciamento de contatos e envio de mensagens
   • Remarketing e objetivo comportamental

Vejamos o botão de seguir do Twitter como exemplo:

<a href="https://twitter.com/iubenda" class="twitter-follow-button" data-show-count="false">Follow @iubenda</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Como o botão para seguir no Twitter faz parte da finalidade “Interação com redes sociais e plataformas externas” incluído na categoria “Otimização da experiência” (3), o código será:

<a href="https://twitter.com/iubenda" class="twitter-follow-button" data-show-count="false">Follow @iubenda</a>
<script async type="text/plain" class="_iub_cs_activate" data-iub-purposes="3" data-suppressedsrc="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Callback

Alternativamente, caso os cookies estejam ativados por partes do código JavaScript, é possível prosseguir via callback para a instância csConfiguration.

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/callback/onConsentRead.html]

Observação: o onConsentGiven, acima especificado, ainda está disponível em razão da compatibilidade com versões anteriores. No entanto, seu valor será substituído pelo onConsentRead, caso este último seja usado.

Aletrações de scripts, iframe e img para gerenciamento de dependências

Em alguns casos, para reativar adequadamente uma tag bloqueada, é necessário aguardar a disponibilidade de uma variável ou de um objeto JavaScript. Para gerenciar corretamente as dependências, você localizará o atributo data-iub-cs-wait-for (não disponível no antigo canal atual/beta/estável).

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/safemode/tag_options/iub_cs_wait_for.html]

tags img e iframe

Diversas tags img e iframe também podem instalar cookies. Nestes casos, é necessário adicionar a classe _iub_cs_activate (assim como para as tags de script descritas acima), atribuir o valor original da tag src a um novo atributo chamado data-suppressedsrc ou suppressedsrc e atribuir o valor "about:blank" ao src (veja o exemplo abaixo para visualizar essas regras).

<iframe id="player" class="_iub_cs_activate" width="640" height="390" frameborder="0" suppressedsrc="https://www.youtube.com/embed/erVv_Gm7CC4" src="about:blank"></iframe>

Observação: o valor data:text/html;base64,PGh0bWw+PGJvZHk+U3VwcHJlc3NlZDwvYm9keT48L2h0bWw+ indicado anteriormente neste manual (é a versão base64 codificada do: Suppressed, que será exibido pela maioria dos navegadores antes do consentimento, em vez da saída real do script) não afeta o bloqueio correto e a ativação subsequente da tag, mas seu uso pode resultar em erros na exibição de algumas visualizações da web no Android.

Neste endereço você encontrará uma ferramenta de código/codificação para gerar qualquer outra versão base64 de qualquer outra string.

tags noscript

Atualmente, a tag noscript, que pode instalar cookies quando o usuário desabilitar o JavaScript em seu navegador, está em fase de implementação. Para estar preparado também para estes casos, sugerimos remover as tags noscript do documento ou, em vez disso, utilizar soluções de backend que podem, após descobrir a presença do cookie _iub_cs-local, incluir ou excluir seletivamente as tags noscript dos documentos.

Exemplos práticos

Abaixo você pode encontrar exemplos de scripts comumente usados ​​e orientações sobre como modificá-los de acordo com a lei dos cookies.

Marketing 4w

Antes

Depois:

1. defina o callBack para o onConsentGiven na instância _iub.csConfiguration

[file:pre_html-code@https://gist.githubusercontent.com/s2imon/bd683a02635b39eced38/raw]

2. inclua todo o script que carrega o banner em um div com “display: none” definido – Exemplo

---

AddThis

• Antes
• Depois

Botão:

• Antes
• Depois

---

AddToAny

• Antes
• Depois

---

AdRoll

• Antes
• Depois

---

Altervista

A Altervista e seus provedores de anúncios aderem e apoiam a Estrutura de Transparência e Consentimento (TCF). Mais informações no Altervista Wiki.

---

Amazon

Banner

• Antes
• Depois

Login

• Antes
• Depois

---

Bing Tracker

• Antes
• Depois

---

Booking (afiliada)

• Antes
• Depois

---

CodePen

• Antes
• Depois

---

Criteo

• Antes
• Depois – recurso URL é primeiramente incorporado inteiramente no código do bloco e, em seguida, inserido na propriedade src da tag do script.

---

Customerly

• Antes
• Depois

---

Disqus

• Antes
• Depois

---

Elevio

• Antes
• Depois

---

Facebook

Pixel

• Antes
• Depois

Botão curtir

• Antes
• Depois

Caixa curtir

• Antes
• Depois

Plugin de Página

• Antes
• Depois

---

Foursquare

• Antes
• Depois

---

Freshchat

• Antes
• Depois

---

Google Ads (conversão)

• Antes
• Depois

Observação: os snippets devem ser bloqueados em uma ordem específica, caso haja mais conversões por página no Ads

• O primeiro snippet deve ser bloqueado com a _iub_cs_activate-inlineclasse
• Todos os snippets subsequentes devem ser bloqueados com a _iub_cs_activateclasse

Dessa forma, o primeiro snippet de conversão será:

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adwords_after_iub.js]

E os snippets de conversão serão:

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adword_after_iub_standard_block.html]

Todos os snippets na página podem ser bloqueados com a classe _iub_cs_activate. Por exemplo:

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adword_after_iub_standard_block.html]

---

Google AdSense

• Antes
• Depois

---

Google Analytics

O disposto abaixo é implementado apenas quando são utilizados os recursos do Google Analytics que permitem o rastreamento de um utilizador único. Em todos os outros casos, sugere-se anonimizar o IP.

gtag.js

• Antes
• Depois

---

Google Calendar

• Antes
• Depois

---

Google Maps (iframe)

• Antes
• Depois

---

Google Custom Search / Site Search

• Antes
• Depois

---

Google Publisher Tag

Observação: se você veicular anúncios personalizados usando os serviços do Google, é necessário se certificar de que o consentimento explícito para a personalização de anúncios seja coletado antes da exibição dos anúncios personalizados para usuários finais, com base no EAA. Mais informações aqui.

• Antes
• Depois

---

Google Track (com tag img)

• Antes
• Depois

---

Headway

• Antes
• Depois

---

Intercom

• Antes
• Depois

---

Kissmetrics

• Antes
• Depois

---

MediaMond

• Antes
• Depois

---

Mixpanel

• Antes
• Depois

---

MyLiveChat

• Antes
• Depois

---

OpenX banner

• Antes
• Depois

Observação: se houver muitos banners OpenX na página, você pode agilizar a ativação usando a opção inlineDelay (para mais informações, consulte o manual de Instalação e Customização da iubenda). Recomendamos evitar valores menores que 200milésimos de segundo.

---

Optimizely

• Antes
• Depois

---

PayPal (botão Compre agora)

• Antes
• Depois

---

ShareThis

• Antes
• Depois

---

Smart Adserver

Observação: use tags assíncronas (AJAX).

head

• Antes
• Depois

body

• Antes
• Depois

---

SoundCloud

• Antes
• Depois

---

Spotify

Ouvir

• Antes
• Depois

Seguir

• Antes
• Depois

---

Stripe

• Antes
• Depois

---

TradeTracker

• Antes
• Depois

---

TripAdvisor

Badge Widget

Antes:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Depois:

1. Adicione à configuração básica do script da iubenda o reloadOnConsent, conforme exposto abaixo:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Defina isConsentGiven para controlar os cookies:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Substitua o elemento TripAdvisor original por este recurso:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_badge_after.html]

Ler widget de resenha

Antes:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Depois:

1. Adicione à configuração básica do script da iubenda o reloadOnConsent, conforme exposto abaixo:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Defina isConsentGiven para controlar os cookies:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Substitua o elemento TripAdvisor original por este recurso:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_badge_after.html]

Escrever widget de resenha

Antes:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Depois:

1. Adicione à configuração básica do script da iubenda o reloadOnConsent, conforme exposto abaixo:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Defina isConsentGiven para controlar os cookies:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Substitua o elemento TripAdvisor original por este recurso:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_writereview_after.html]

---

Twitter

Botão seguir

• Antes
• Depois

Botão compartilhar

• Antes
• Depois

Tweet incorporado

• Antes
• Depois

---

UserVoice

• Antes
• Depois

---

Vimeo

• Antes
• Depois

---

Viralize

• Antes
• Depois

---

YouTube

O disposto abaixo se aplica apenas aos casos em que você não usa a opção que permite incluir vídeos do YouTube sem instalar cookies para os visitantes do site.

• Antes
• Depois

Veja também

• Introdução ao bloqueio prévio de cookies