Cookie banner e tracciamento

Le regole del Garante sui cookie, quando il banner serve davvero, come deve essere fatto e perché il blocco preventivo degli script è la parte che quasi tutti sbagliano.

Le Linee guida cookie del Garante (giugno 2021) e la Direttiva ePrivacy (2002/58/CE, recepita nell’art. 122 del Codice Privacy) regolano cookie e strumenti di tracciamento.

Quando serve il banner

Il banner serve se il sito installa cookie o identificatori non tecnici. Non serve se il sito usa solo cookie tecnici.

¹ Gli analytics possono essere esentati solo se effettivamente anonimizzati e non condivisi con terzi, alle condizioni indicate dal Garante. Google Analytics nella configurazione standard non rientra nell’esenzione.

Attenzione. Ci sono casi che sfuggono: un font caricato da Google Fonts, una mappa incorporata, un video YouTube, un CDN esterno trasmettono l’IP dell’utente a un terzo. Anche senza cookie in senso stretto, sono trattamenti che richiedono una base giuridica.

Le regole del banner

1. Nessun cookie o tracker non tecnico prima del consenso. È la regola sostanziale: tutto il resto è forma.
2. Pari evidenza tra “Accetta tutti” e “Rifiuta tutti”: stesso peso grafico, stessa dimensione, stesso livello. Un “Rifiuta” nascosto in un link testuale grigio è un dark pattern.
3. Chiusura senza scelta non è consenso. Lo scroll non è consenso. La “X” per chiudere non è consenso.
4. Granularità per categoria, con possibilità di scegliere.
5. Revoca sempre disponibile, facile quanto il consenso.
6. Non riproporre il banner a ogni visita dopo un rifiuto: il Garante indica un intervallo ragionevole (almeno 6 mesi) prima di richiedere di nuovo.

Markup di un banner accessibile

Se lo implementi tu, il banner è un elemento interattivo che va reso accessibile:

<div role="dialog"
     aria-modal="true"
     aria-labelledby="cookie-titolo"
     aria-describedby="cookie-testo">

  <h2 id="cookie-titolo">Cookie e tracciamento</h2>

  <p id="cookie-testo">
    Usiamo cookie tecnici e, previo consenso, strumenti di terze parti.
    Leggi la <a href="/cookie">cookie policy</a>.
  </p>

  <button type="button" data-azione="rifiuta">Rifiuta tutti</button>
  <button type="button" data-azione="personalizza">Personalizza</button>
  <button type="button" data-azione="accetta">Accetta tutti</button>
</div>

Requisiti di accessibilità che valgono anche per il banner:

• il focus va spostato dentro il dialog all’apertura e intrappolato finché resta aperto;
• Esc deve poterlo chiudere (equivalendo a un rifiuto, non a un consenso);
• i tre pulsanti devono avere lo stesso rilievo visivo;
• il contrasto deve rispettare le WCAG anche qui.

La parte che quasi tutti sbagliano: il blocco preventivo

Installare il banner è la parte facile. Quella che conta è che nessuno script di terze parti parta prima del consenso.

Lo schema corretto è caricare gli script solo dopo la scelta:

<!-- NON viene eseguito: il tipo non è riconosciuto dal browser -->
<script type="text/plain" data-categoria="statistici"
        src="https://esempio.com/analytics.js"></script>

// Dopo il consenso, gli script della categoria accettata vengono attivati
function attiva(categoria) {
  document
    .querySelectorAll(`script[type="text/plain"][data-categoria="${categoria}"]`)
    .forEach((vecchio) => {
      const nuovo = document.createElement("script");
      // copia gli attributi rilevanti
      for (const { name, value } of vecchio.attributes) {
        if (name !== "type" && name !== "data-categoria") {
          nuovo.setAttribute(name, value);
        }
      }
      nuovo.textContent = vecchio.textContent;
      vecchio.replaceWith(nuovo);
    });
}

Stesso principio per gli iframe (mappe, video): l’src va sostituito con un data-src e valorizzato solo dopo il consenso, mostrando nel frattempo un segnaposto.

Come verificarlo davvero

Questo controllo va fatto sempre, anche (soprattutto) quando si usa una CMP commerciale:

1. apri il sito in una finestra anonima, senza aver dato alcun consenso;
2. apri gli strumenti per sviluppatori, scheda Rete e Applicazione › Archiviazione;
3. verifica che non vengano impostati cookie non tecnici né caricati script di analytics o marketing;
4. accetta, e verifica che a quel punto compaiano.

Un CMP installato male mostra il banner ma non blocca gli script: è il caso più frequente di non conformità, ed è invisibile a chi non guarda il traffico di rete.

Vedi anche: integrazioni e CMP di terze parti.