Guida Base: Gestire la Cookie Law di Iubenda con Google Tag Manager

[Aggiornata 14 Aprile 2023]

Per gestire correttamente la Cookie Law e la GDPR dobbiamo disabilitare gli strumenti di profilazione dell’utente e, soprattutto, far apparire il fastidioso avviso che il sito sta utilizzando i cookie.

Allora, esistono vari modi per gestire la cosa. La prima soluzione è cercare di gestire in maniera autonoma questa implementazione (con Google Tag Manager diviene davvero semplice). Un’altra soluzione è quella di utilizzare servizi esterni, come ad esempio Iubenda.

Uh a proposito, se stai pensando di scegliere Iubenda ti lascio il link: [SCONTO 10% IUBENDA].

In questa guida ti spiegherò come gestire la Cookie Law/GDPR con Iubenda secondo le sue linee guida.

Poi ti dirò anche come le ho ottimizzate e rese più performanti 🙂

A seguito di questa guida Iubenda ha aggiornato la sua guida ufficiale, citandomi come fonte. Trovi tutto nella sezione “Configurazione Avanzata”.

Che cosa bellissima 🙂

Sei pronto ad installare Iubenda con GTM? Iniziamo!

Dalla guida di Iubenda (non proprio ottimale)

Secondo la guida dovresti, per prima cosa, inserire a mano il codice JavaScript prima della chiusura del body:

<script type="text/javascript">
 var _iub = _iub || [];
 _iub.csConfiguration = {
 cookiePolicyId: XXX,
 siteId: YYY,
 lang: "it",
 callback: {
 onConsentGiven: function(){
 dataLayer.push({'event': 'iubenda_consent_given'});
 }
 }
 };
 (function (w, d) {
 var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/cookie_solution/iubenda_cs.js"; tag.parentNode.insertBefore(s, tag); };
 if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; }
 })(window, document);
</script>

Dove XXX e YYY sono dei valori numerici univoci che Iubenda associa al vostro sito e alla vostra policy. La parte in blu invece, identifica la creazione di un evento personalizzato sul dataLayer che servirà come attivatore per i vari Tag.

Step 1 – Crea l’attivatore personalizzato

Una volta che hai inserito a mano lo snippet, il prossimo passo è creare l’Attivatore che utilizza proprio quell’evento personalizzato iubenda_consent_given.

• Attivatore > Nuovo > Configurazione attivatore.
• Tipo Attivatore: Evento personalizzato.
• Nome evento: iubenda_consent_given.
• Questo attivatore su: Tutti gli eventi personalizzati.
• Inserisci come nome dell’Attivatore: “Iubenda Accettato”.

Dovresti quindi avere una cosa simile:

Step 2 – Associa l’attivatore ai tag

Non ci resta che associare l’Attivatore personalizzato ai Tag che non vogliamo attivare senza il consenso.
Quali potrebbero essere?

Niente paura 🙂

Ecco un succoso elenco:

• Tag di Remarketing Google Ads
• Tag di Conversione Google Ads
• Pixel di Facebook
• Hotjar
• Google Analytics (senza IP anonymize)
• Strumenti di Email Marketing
• AdRoll
• Bing UET

Quello che devi fare è selezionare come attivatore “Iubenda Accettato”. Dovresti avere una serie di Tag simili a questo:

Alcune considerazioni

Dunque, sarò sincero. Questa soluzione non mi affascina. Per niente.

Ma come? Se la guida di Iubenda dice così, cosa c’è che non va?

C’è che non mi piace quando viene scatenato l’evento. Guarda tu stesso.

Non noti nulla di strano?

Sì dai, l’hai notato. L’evento di Iubenda scatta dopo il caricamento della pagina. Un bel problema.

Perché potrebbe essere un problema?

Semplice.

Alcuni Tag potrebbero attivarsi davvero troppo tardi.

E quindi?

E quindi ora ti dico cosa bisogna fare per farlo performare.

Allacciati le cinture, ora ti insegno un #barbatrucco.

Step 1 – Il codice di Iubenda inseriamolo con Google Tag Manager

Trovo assurdo che tutto sia gestito da uno snippet JavaScript che dobbiamo inserire a mano. Quindi elimina tutto dal <body> e facciamolo con un Tag di tipo HTML personalizzato. Daremo anche una priorità all’attivazione del Tag rispetto agli altri.

• Tag > Nuovo > Configurazione tag.
• Tipo di tag: Tag HTML personalizzato.
• Incolla lo snippet di Iubenda.
• Attivazione: All pages (Tutte le pagine)
• Impostazioni avanzate > Priorità di attivazione > 99999.

Dovresti avere una cosa simile:

 

 

Questa è la parte inserita nella guida avanzata.

Step 2 – Creiamo una variabile di tipo Cookie

Per capire se l’utente ha accettato i cookie, e quindi non far più apparire più il messaggio di accettazione della Cookie Law, Iubenda utilizza un cookie.

Con Google Tag Manager è possibile intercettare questi cookie. Per semplicità ti dico che il cookie di Iubenda è fatto in questo modo:

_iub_cs-XXX

Dove XXX è il cookiePolicyId di Iubenda, quello dello snippet per capirci.

Quindi non ti resta che creare la Variabile:

• Variabili > Nuova > Configurazione variabile.
• Tipo di variabile: Cookie proprietario.
• Nome Cookie: _iub_cs-XXX
• Flagga la voce Decodifica in formato URI il cookie.
• Nomina la Variabile: “cookie iubenda”.

Dovresti avere una cosa simile:

Step 3 – Creiamo un attivatore “negativo”: No accetta Cookie Law

Il cookie che abbiamo creato contiene un valore che identifica se effettivamente l’utente ha cliccato o meno l’accettazione della Cookie Law.

Per gestire al meglio la cosa, ci basterà creare un Attivatore che verifichi se l’utente NON ha accettato la Cookie Law.

• Attivatore > Nuovo > Configurazione attivatore.
• Tipo di attivatore: Visualizzazione di pagina.
• Questo attivatore si attiva su: Alcune visualizzazioni di pagina.
• Aziona questo attivatore quando: cookie iubenda non contiene “consent”:true
• Nomina l’Attivatore così: “no accetto cookie law”.

Dovresti avere una variabile simile a questa:

Step 4 – Associamo i Tag l’eccezione e l’attivatore iubenda

Ora che abbiamo a disposizione il cookie diviene tutto più immediato. Ai vari Tag che devono essere sottoposti alla gestione della Cookie Law.

Tutti i Tag devono sottostare a questa regola:

• Attivatore ►Attivatore classico (es: all pages)
• Attivatore ► Iubenda Accettato
• Attivatore Eccezioni ► no accetto cookie law
• Opzioni del tag: Attiva una sola volta per pagina

Ecco l’esempio con il Tag di Hotjar:

Ricordati che per rendere tutte le modifiche effettive devi sempre pubblicare la nuova versione del contenitore cliccando il pulsante blu “Invia” 😉

Ok, ma cosa accade realmente?

Dunque, tutto sto casino per ottimizzare cosa?

Semplice.

In questo modo:

• Nel caricamento di pagina, la prima volta il Tag non verrà subito attivato su All Pages perché il cookie non esiste ancora.
• Non appena viene scatenato “Iubenda Accettato” il Tag si attiva (e il cookie di Iubenda viene creato).
• Nei prossimi caricamenti di pagina il Tag verrà attivato su All Pages perché il cookie esiste già.

In questo modo non dovremo aspettare l’evento personalizzato di Iubenda.

Allora gestire la Cookie Law/GDPR con Google Tag Manager diventa semplice, non trovi?

Lasciami un commento se hai qualche domanda e, mi raccomando, iscriviti alla newsletter (ci sono tanti altri #barbatrucchi).

PS: Puoi fare tutto questo anche con altri strumenti come Cookiebot, oneTrust o altri servizi simili.