React Cookie Consent: un Banner che Blocca Davvero gli Script
Banner Cookie Consent in React
React Cookie Consent: un Banner che Blocca gli Script | We.Inc
Crea un banner per il consenso ai cookie in React: salva la scelta, carica gli analytics solo dopo Accetta, invia gli update di Consent Mode. Più le props del pacchetto react-cookie-consent.
Tieni la scelta del visitatore nello state di React, salvala in un cookie di prima parte o nello storage del browser e renderizza gli script di analytics o pubblicità solo quando la categoria corrispondente è autorizzata. Bastano un piccolo hook e un componente banner. Se preferisci un pacchetto, react-cookie-consent offre un banner pronto con props per i pulsanti di rifiuto, il nome del cookie e la scadenza.
Due modi per aggiungere il consenso a un sito React
Fai da te
Pacchetto react-cookie-consent
Categorie (analytics, pubblicità)
Sì, tutte quelle che ti servono
Un solo valore accetta o rifiuta per impostazione predefinita
Pulsante Rifiuta
Sì
Disattivato per impostazione predefinita; enableDeclineButton lo attiva
Dove viene salvata la scelta
In un cookie o nello storage, a tua scelta
In un cookie chiamato CookieConsent per impostazione predefinita
Scadenza predefinita
La decidi tu
365 giorni
Licenza
Codice tuo
MIT
La parte difficile di un banner per il consenso non è il riquadro sullo schermo, è garantire che nulla di non essenziale venga eseguito prima che il visitatore dica sì. In React è un problema di state: un'unica fonte di verità per la scelta e componenti che la leggono prima di inserire un tag script. La demo qui sotto fa esattamente questo, così puoi vedere il loader degli analytics restare spento finché non accetti.
Un hook useConsent legge l'eventuale scelta salvata all'avvio dell'app e la espone con delle funzioni setter.
Il banner viene renderizzato solo finché non c'è una scelta salvata, e offre Accetta tutto, Rifiuta tutto e interruttori per categoria che partono disattivati.
I loader degli script controllano l'hook prima di aggiungere il loro tag script, quindi un rifiuto significa che il tag non viene mai aggiunto.
Se usi i tag Google, lo stesso setter invia un update di Consent Mode con le categorie autorizzate.
Un link Impostazioni cookie in qualsiasi punto dell'app cancella la scelta salvata, così il banner ricompare.
Renderizza il banner dal layout radice, così compare su ogni route, comprese le visite dirette alle pagine interne.
Con il server rendering, leggi la scelta salvata solo in un effect lato client, così il render del server e il primo render del client coincidono.
Dai al banner role=dialog o una regione con etichetta, e rendi ogni pulsante raggiungibile da tastiera.
Salva un numero di versione insieme alla scelta; quando aggiungi una nuova categoria, incrementalo per chiedere di nuovo.
Non nascondere mai l'opzione di rifiuto dietro la schermata delle impostazioni; metti Rifiuta tutto accanto ad Accetta tutto.
Domande frequenti
react-cookie-consent blocca gli script al posto mio?
No. Il suo README descrive un banner che salva la risposta del visitatore in un cookie e chiama onAccept o onDecline. Caricare o saltare i tuoi analytics resta compito tuo, per esempio controllando getCookieConsentValue prima di aggiungere lo script.
Come aggiungo un pulsante di rifiuto a react-cookie-consent?
Imposta la prop enableDeclineButton; è false per impostazione predefinita. Il testo del pulsante è I decline per impostazione predefinita e si può cambiare con declineButtonText, mentre onDecline viene eseguito quando lo si preme.
Come permetto ai visitatori di cambiare idea?
Con il tuo hook, cancella il valore salvato e il banner ritorna. Con il pacchetto, chiama resetCookieConsentValue, passando lo stesso nome di cookie che hai dato al banner se lo hai cambiato rispetto a quello predefinito.
Meglio salvare il consenso in un cookie o nello storage del browser?
Per il browser vanno bene entrambi. Un cookie può essere letto anche dal server, il che aiuta se è il server a decidere quali tag stampare. Lo storage del browser tiene il valore fuori da ogni richiesta. Entrambi sono ammessi per ricordare la scelta stessa.
Dove vanno le chiamate di Consent Mode in React?
Metti il consent default di gtag nell'head HTML prima di qualsiasi tag Google, fuori da React, così viene eseguito per primo. Chiama gtag('consent', 'update', ...) dall'handler di Accetta dentro React.
Perché bloccare è meglio che nascondere
Un banner che si limita a nascondersi dopo Rifiuta, mentre lo snippet di analytics in index.html è già stato eseguito, registra comunque la visita. La soluzione è spostare lo snippet in un componente che viene renderizzato solo dopo il consenso.
Per i tag che non puoi spostare, come quelli che una piattaforma inserisce per te, usa l'impostazione di consenso di quella piattaforma o Consent Mode, così il tag gira in modalità limitata finché non arriva l'update.
Testare il banner
Apri il sito in una finestra privata, apri gli strumenti per sviluppatori del browser e controlla il pannello Network: prima di premere qualsiasi cosa, non devono comparire richieste di analytics o pubblicità. Poi accetta e verifica che partano.
Ripeti con Rifiuta tutto e ricarica una seconda pagina per verificare che il rifiuto venga ricordato.
Fai da te: hook, banner e script bloccato
Tre piccoli pezzi. Non usano librerie, funzionano in qualsiasi app React 18 o 19 e corrispondono alla demo qui sopra.
Hook useConsent
Legge una volta la scelta salvata lato client, poi salva e notifica ogni modifica.
Componente ConsentBanner
Accetta e Rifiuta stanno uno accanto all'altro; le caselle delle categorie partono non spuntate.
Caricare uno script solo dopo il consenso
Il tag script viene creato solo quando la categoria è autorizzata, quindi un rifiuto significa che non esiste mai.
Usare il pacchetto react-cookie-consent
Installalo con npm install react-cookie-consent. Queste sono le props e gli helper documentati nel suo README, con i valori predefiniti, aggiornati a ottobre 2026.
Props e valori predefiniti di react-cookie-consent
Prop o helper
Predefinito
Cosa fa
"bottom"
Dove si trova la barra: top, bottom o none
buttonText
"I understand"
Testo del pulsante Accetta
enableDeclineButton
Mostra un pulsante di rifiuto
declineButtonText
"I decline"
Testo del pulsante di rifiuto
cookieName
"CookieConsent"
Nome del cookie che salva la risposta
Giorni prima che il cookie scada
onAccept / onDecline
Esegue il tuo codice quando il visitatore risponde
getCookieConsentValue(name)
Legge la risposta salvata
resetCookieConsentValue()
Rimuove la risposta salvata così la barra ricompare
Banner con pulsante di rifiuto
Accetta carica gli analytics; Rifiuta non carica nulla di opzionale. Il controllo al primo caricamento copre i visitatori di ritorno.
Demo dal vivo: un banner di consenso che blocca gli script
Sito di prova
Usiamo cookie per analytics e pubblicità solo se sei d'accordo.
Accetta tutto
Rifiuta tutto
Scegli
Salva le scelte
Analytics
Pubblicità
Necessari (sempre attivi)
Cosa verrebbe caricato
{c}: script aggiunto
{c}: bloccato
Nessuna scelta ancora, quindi non si carica nulla di opzionale.
Impostazioni cookie
Update di Consent Mode inviato
Ancora nessuno.
La demo ricorda la tua scelta solo in questo browser. Non viene inviato nulla da nessuna parte.