Adempiere alla normativa privacy e cookie oggi è diventato sempre più importante. Esistono infatti più strumenti che aiutano con gli adempimenti online, tra questi Iubenda.
La normativa oggi prevede che un sito web che installa cookie di terze parti abbia il cosiddetto “blocco preventivo”: i cookie di terze parti infatti non possono essere installati liberamente quando un utente visita un sito, ma devono essere installati sulla base delle preferenze espresse dell’utente.
In altre parole, quel famoso banner che vedi ad ogni visita di un sito è esattamente lo strumento (in front-end) che permette tutto questo.
Se premi su “Accetta tutti”, tutti i cookie verranno installati.
Se premi su “Personalizza”, invece, dovresti poter scegliere quale categoria di cookie vuoi accettare durante la navigazione. Per saperne di più, ti invito a leggere cos’è il consenso granulare per categoria.
In questo articolo ti spiego come configurare tecnicamente il consenso cookie granulare di Iubenda con WordPress e Google Tag Manager.
Quello che vediamo è un esempio tecnico semplificato e didattico, che non vuole né sostituire una consulenza legale, né prestarsi ad essere una soluzione “copia-incolla” per tutte le situazioni. 😉
Preparativi
Per poter configurare tutto correttamente devi avere:
- Sito web WordPress
- Licenza Iubenda (puoi acquistarne una qui con uno sconto)
- Google Tag Manager installato sul sito web
Hai tutto? Ottimo! Allora procediamo con i passaggi in ordine.
Fase 1: configurare gli attivatori di Iubenda su Google Tag Manager
Ipotizziamo che tu voglia installare sul tuo sito web lo script di tracciamento di HubSpot (una nota piattaforma di CRM). Questo script di fatto installa un cookie sul sito (semplifichiamo) che viene classificato come cookie di marketing. Ciò significa che un utente dovrebbe poter scegliere se attivarlo o meno durante la sua navigazione.
Uno dei modi più comodi per installare script come questo su un sito web, è utilizzare Google Tag Manager: una piattaforma gratuita che permette di gestire script e codici di tracciamento senza dover mettere le mani ogni volta direttamente sul codice del sito.
Non entro in dettaglio qui, ma la base di funzionamento di Tag Manager è attivare “qualcosa” (Tag) quando “succede qualcosa” (Attivatori).
Per comodità, la prima cosa che dobbiamo fare è creare gli attivatori speciali di Iubenda, che consentono di attivare determinati tag solo quando un utente esprime il consenso.
Gli attivatori principali sono questi, ognuno dei quali ha una stringa da utilizzare:
- Consenso cookie generale – iubenda_consent_given
- Preferenza non necessaria – iubenda_preference_not_needed
- Consenso cookie funzionalità – iubenda_consent_given_purpose_2
- Consenso cookie esperienza – iubenda_consent_given_purpose_3
- Consenso cookie misurazione – iubenda_consent_given_purpose_4
- Consenso cookie marketing – iubenda_consent_given_purpose_5
Sono ripresi dalla risorsa dettagliata di Iubenda.
Per configurarli su Google Tag Manager ti basta andare su “Attivatori” e crearne uno nuovo.
Seleziona “Evento personalizzato” e nel “Nome evento” copia la stringa che trovi affianco ad ogni attivatore.
Ogni attivatore su Tag Manager avrà un aspetto come questo:
Al termine dovresti avere 6 attivatori come questi:
Fatto?
Benissimo!
Fase 2: configurare l’attivazione di un tag con Google Tag Manager
Riprendendo l’esempio, se vuoi attivare lo script di HubSpot, devi creare un tag HTML personalizzato e copiare il codice fornito da HubSpot.
Nella sezione “Attivazione” ti sarà capitato magari di impostare “All pages” in passato, cioè l’attivatore di default che attiva il tag su ogni pagina del sito. Questo è tecnicamente corretto ai fini di marketing e di tracciamento, ma non permette all’utente di decidere se installare o meno quello script quando visita il sito.
Ed è qui che entrano in gioco gli attivatori speciali di Iubenda che abbiamo creato prima.
In questo caso selezioniamone 3:
- Consenso cookie generale – iubenda_consent_given
- Preferenza non necessaria – iubenda_preference_not_needed
- Consenso cookie marketing – iubenda_consent_given_purpose_5
In altre parole, stiamo dicendo a Tag Manager di installare il tag di HubSpot sul sito solo se avviene uno di questi eventi di attivazione:
- L’utente esprime il consenso per tutti i cookie (nel caso non sia configurato il consenso granulare)
- Il cookie viene classificato come cookie che non necessita di preferenza per essere installato
- L’utente esprime il consenso specifico per i cookie di marketing
Ora salva l’attivatore e pubblica l’aggiornamento di Tag Manager per rendere effettive le modifiche.
Fase 3: configurare il cookie banner con Iubenda
Se non l’hai già fatto, devi configurare il banner dei cookie sul sito di Iubenda. Puoi personalizzarlo con i colori del tuo brand, se preferisci, oppure puoi lasciare la configurazione di default.
Per personalizzarlo, vai sul sito di Iubenda, accedi alla dashboard del tuo sito, e clicca su “Modifica” nella sezione “Privacy Controls e Cookie Solutions”.
Per semplicità, consideriamo di configurare il tutto solo per un pubblico in Italia. Ciò significa che dobbiamo selezionare “GDPR” nelle impostazioni relative alla conformità.
Cliccando poi sui “Modifica”, ti suggerisco di selezionare la configurazione automatica per semplificarti la vita.
Dopo aver completato la configurazione, salva ed esci. Torna nella dashboard e stavolta clicca su “Integra”.
Ti porterà in una sezione in cui trovi un codice: copialo su una nota o da qualche parte. Ti servirà dopo.
Dopodiché, scorri un po’ in basso nella pagina e clicca su “Modifica impostazioni” nello step 2.
Fai in modo che sia configurato così per massimizzare le funzioni di Iubenda.
Salva ed esci. Dai che ci siamo quasi!
Fase 4: configurare Iubenda sul sito WordPress
Ora devi accedere al tuo sito web WordPress e, se non l’hai già fatto, devi installare lo script di Iubenda, in modo da far apparire il banner dei cookie e che l’utente possa esprimere le preferenze.
Il modo più semplice per farlo è installare il plugin ufficiale di Iubenda. Per farlo ti basta andare su Plugin > Aggiungi nuovo e cercare “Iubenda”.
Una volta installato, vai nella nuova sezione “Iubenda” dalla colonna a sinistra e attiva “Cookie Solutions”.
Se clicchi poi su “Configura”, ti si apre una schermata in cui devi selezionare “Integrazione manuale”. Nel campo sotto infatti trovi lo spazio per il codice che ti sei salvato prima da Iubenda.
Tuttavia c’è un MA! Per far funzionare il blocco con gli attivatori di Google Tag Manager, devi prima modificare quel codice.
Per capirci, il tuo codice originale dovrebbe essere una cosa così, con le tue personalizzazioni e i tuoi ID.
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"perPurposeConsent":true,"siteId":XXXXXX,"whitelabel":false,"cookiePolicyId":XXXXXXXX,"lang":"it", "banner":{ "acceptButtonColor":"#F4633A","acceptButtonDisplay":true,"backgroundColor":"#FFFFFF","closeButtonRejects":true,"customizeButtonCaptionColor":"#1B1B1B","customizeButtonColor":"#E4E4E4","customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"linksColor":"#F4633A","position":"float-top-center","showTitle":false,"textColor":"#1B1B1B" }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/457910.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>Mentre il codice modificato dovrebbe essere così:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"perPurposeConsent":true,"siteId":XXXXXX,"whitelabel":false,"cookiePolicyId":XXXXXXXX,"lang":"it", "banner":{ "acceptButtonColor":"#F4633A","acceptButtonDisplay":true,"backgroundColor":"#FFFFFF","closeButtonRejects":true,"customizeButtonCaptionColor":"#1B1B1B","customizeButtonColor":"#E4E4E4","customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"linksColor":"#F4633A","position":"float-top-center","showTitle":false,"textColor":"#1B1B1B" }, "callback": {
onPreferenceExpressedOrNotNeeded: function (preference) {
dataLayer.push({
iubenda_ccpa_opted_out: _iub.cs.api.isCcpaOptedOut(),
});
// il parametro delle preferenze può essere indefinito se non si applicano né il GDPR né la LGPD
// la riga sotto potrebbe essere necessaria per trovare le preferenze USPR invece di attenersi
// al parametro delle preferenze
var otherPreferences = _iub.cs.api.getPreferences();
if (otherPreferences) {
var usprPreferences = otherPreferences.uspr;
if (usprPreferences) {
for (const purposeName in usprPreferences) {
if (usprPreferences[purposeName]) {
dataLayer.push({
event: 'iubenda_consent_given_purpose_' + purposeName,
});
}
}
}
}
if (!preference) {
dataLayer.push({
event: 'iubenda_preference_not_needed',
});
}
else if (preference.consent === true) {
dataLayer.push({
event: 'iubenda_consent_given',
});
}
else if (preference.consent === false) {
dataLayer.push({
event: 'iubenda_consent_rejected',
});
}
else if (preference.purposes) {
for (const purposeId in preference.purposes) {
if (preference.purposes[purposeId]) {
dataLayer.push({
event: 'iubenda_consent_given_purpose_' + purposeId,
});
}
}
}
}
} };
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/457910.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>Occhio alle parentesi graffe, è facile sbagliare!
Ora copia il codice modificato nella casella del plugin.
Scorri in basso e seleziona queste impostazioni.
Salva ed esci.
Fase 5: testare il funzionamento
Adesso incrocia le dita, dovresti esserci! Non ti resta che testare che tutto funzioni correttamente.
Riprendo l’esempio di HubSpot: come puoi testare che tutto sia configurato correttamente? Tradotto, le domande che devi porti sono: lo script di HubSpot viene bloccato quando un nuovo utente visita il sito? Viene invece installato se l’utente esprime il consenso dal cookie banner?
Puoi aiutarti nel test con una semplice estensione di Google Chrome. Ce ne sono sicuramente molte, io mi trovo bene con Ghostery: permette di monitorare o bloccare diversi script durante la navigazione sui siti web.
La puoi scaricare qui gratuitamente.
Una volta installato, devi attivare l’opzione affinché l’estensione si attivi anche nelle schede di navigazione in incognito. Per farlo, vai su “Gestione estensioni” dal browser.
Trova Ghostery e clicca su “Dettagli”. A quel punto trova l’impostazione “Consenti modalità di navigazione in incognito” e attivala.
Ora apri una scheda di navigazione in incognito con Chrome. In alto a destra dovresti vedere l’iconcina azzura di Ghostery. Cliccaci sopra e nelle vista dettagliata clicca su “Metti in pausa”.
Questo evita che Ghostery blocchi gli script a prescindere (altrimenti non riusciresti a testare che tutto funzioni come si deve), ma continua ad essere attivo in modalità “monitoraggio”.
Ora puoi finalmente aprire il tuo sito web e dovresti vedere subito il cookie banner.
Prima di cliccare qualcosa, se vai sull’icona di Ghostery (dovrebbe essere grigia) puoi vedere quanti e quali script sono stati installati fino a quel momento sul sito web. Io nel mio caso vedo 8 script e (giustamente) non vedo quello di HubSpot.
Se torni al cookie banner e clicchi su “Accetta”, oppure su “Scopri di più e personalizza” e selezioni il consenso di Marketing, ecco che lo script di HubSpot viene installato.
Come verificarlo? Allo stesso modo di prima. Se ora clicchi di nuovo sull’icona di Ghostery, dovresti vedere che il numero di script è cambiato e scorrendo, dovresti vedere HubSpot.
Eureka, funziona!
Fossi in te mi prenderei una meritata pausa.
Ricorda che questa risorsa non vuole essere una consulenza legale, ma soltanto una guida tecnica e didattica. L’importante è che tu abbia chiara la meccanica di funzionamento. Poi nella realtà ci possono essere decine di casistiche diverse: ogni script o servizio (es. Meta Ads, Google Ads, HotJar, ecc.) infatti può ricadere in categorie diverse e può necessitare di configurazioni diverse.
È tutto!
Hai trovato utile questa guida? Oppure, hai dei feedback per migliorarla? Fammelo sapere nei commenti.
Grazie per aver letto fin qui.
A presto.
Federico
