# 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.

<!-- Fonte: https://sitoanorma.it/docs/cookie/banner-tracciamento -->
<!-- Aggiornato: 2026-08-15 -->

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.

| Categoria | Consenso | Esempi |
|-----------|----------|--------|
| Tecnici / necessari | **No** | sessione, carrello, bilanciamento di carico, preferenza lingua impostata dall'utente |
| Preferenze | Sì | personalizzazioni non essenziali |
| Statistici / analytics | Sì¹ | Google Analytics, Matomo in cloud |
| Marketing / profilazione | Sì | Meta Pixel, Google Ads, retargeting |

¹ 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:

```html
<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:

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

```js
// 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](/docs/cookie/integrazioni-terze-parti).