FAI DECOLLARE LA TUA WEB ANALYTICS. CON GOOGLE TAG MANAGER.

Le guide e i video tutorial gratuiti di Matteo Zambon, autore del libro "GTM per chi inizia"

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

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

Per gestire correttamente la Cookie Law dobbiamo disabilitare gli strumenti di profilazione dell’utente e, soprattutto, far apparire il fastidioso avviso che il sito sta utlizzando 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 per esempio, Iubenda.

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

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

[Aggiornamento 11 Aprile 2017]

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

Proprio grazie a questo, Iubenda mi ha dato la possibilità di avere uno sconto esclusivo del 10% del servizio.

Se ritieni opportuno ti lascio il link: [SCONTO 10% IUBENDA]

Sei pronto? 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.

Tipo Attivatore ► Evento personalizzato
Nome ► iubenda_consent_given
Questo attivatore su ► Tutti gli eventi personalizzati

Come nome dell’attivatore: Iubenda Accettato

Dovresti quindi avere una cosa simile:

iubenda step 1 attivatore e google tag manager

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:

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

iubenda step 2 tag

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.

iubenda attivazione evento

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.

Tipo Attivatore ► Tag HTML personalizzato
HTML ► incolla lo snippet di Iubenda
Attivazione ► All pages (Tutte le pagine)
Impostazioni avanzate ► Priorità Tag ► 99999

Dovresti avere una cosa simile:

iubenda step 1 tag HTML personalizzato

[Aggiornamento 11 Aprile 2017]

Questa è la parte inserita nella guida avanzata.

Step 2 – Creiamo una variabile di tipo Cookie

Iubenda per capire se l’utente ha accettato i cookie, e quindi non far più apparire più il messaggio di accettazione della Cookie Law, 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:

Tipo variabile ► Cookie proprietario
Nome Cookie ► _iub_cs-XXX
Decodifica in formato URI il cookie ► Flag attivato

Nome variabile ► cookie iubenda

Dovresti avere una cosa simile:

iubenda step 2 variabile di tipo cookie

Step 3 – Creiamo un attivatore “negativo”: No accetta la 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.

Tipo Attivatore ► Visualizzazione di pagina
Questo attivatore su ► Alcune visualizzazioni di pagina
Aziona questo attivatore… ► cookie iubenda ► non contiene ►”consent”:true

Come nome dell’attivatore: no accetto cookie law

Dovresti avere una variabile simile a questa:

iubenda step 3 attivatore no cookie law in eccezione

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 Hotjar

iubenda step 4 tag no cookie law in eccezione

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 dovremmo aspettare l’evento personalizzato di Iubenda.

Allora gestire la Cookie Law con Google Tag Manager divene 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 senza Iubenda.

27 commenti su “Guida Base: Gestire la Cookie Law di Iubenda con Google Tag Manager

  1. Ciao Matteo,
    suppondento un sito del genere:
    http://www.tagmanageritalia.it per la lingua italiana –> deve visualizzare il banner italiano
    http://www.tagmanageritalia.it/en/ per gli utenti in lingua inglese –> deve visualizzare il banner inglese
    http://www.tagmanageritalia.it/fr/ per gli utenti in lingua francese –> deve visualizzare il banner francese

    Come bisogna configurare i banner degli script che sono appunto uno per lingua e farli attivare nelle corrispondenti pagine del sito?

    Grazie in anticipo

    • Ciao Francesco, l’attivatore si baserà semplicemente sul click dell’elemento pulsante presente nel banner che magari avrà lo stesso ID o classe CSS su tutti e 3 i banner. Io fare un unico attivatore semplicemente, a meno che tu non debba per qualche motivo dividere le 3 tipologie. Allora potresti utilizzare il path url oppure il assegnare id o css diversi nel pulsante 🙂

    • l’attivatore, giustamente, è unico come dici tu…così come quello per “non accetta cookie”.
      Tuttavia credo, dimmi se mi sbaglio, che in questo caso vanno fatti n-tag uno per banner-lingua…giusto?
      Se il suffisso della lingua viene aggiunto solo per tutte le altre lingue, meno quella di default (l’italiano ad esempio), avremo i seguenti tag:
      – tag banner cookie per l’italiano: url > corrisponde all’espressione regolare > .*
      – tag banner cookie per l’inglese: url > contiene > /en/
      – tag banner cookie per francese: url > contiene > /fr/

      é giusto facendo i tag del banner cookie per ogni lingua? in special modo per l’italiano che NON ha nella url il suffisso /it/ ?

      Grazie ancora

    • Perché dovresti fare N tag per banner? Hai funzionalità di tag di profilazione diversa a seconda della lingua? Se la risposta è no, allora non serve fare inutili divisioni 🙂

      A presto!

    • Ciao Francesco, forse a Matteo è sfuggito che l’id (cookiePolicyId: XXX,) cambia per ciascuna lingua.
      Pertanto io aggiungerei tanti snippet con il loro cookiePolicyId: XXX, quante sono le lingue per cui deve essere mostrato il banner.
      Inoltre anche tante variabili No Cookie con il relativo cookiePolicyId: XXX,.devo essere tanti quante sono le lingue.
      Probabilmente l’attivatore non va modificato. Non avendo però avuto tempo per testare questa configurazione (probabilmente anche con quello che hai accennato anche tu), non posso verificarla.
      Forse Matteo potrà prendere spunto e completare la configurazione.
      Ciao.
      Gioacchno

    • Grazie Gioacchino del dettaglio. In effetti mi era sfuggita 🙂

    • Ciao Matteo,
      ti volevo aggiornare su alcune integrazioni (che insieme a Gioacchino) abbiamo fatto per i siti Multilingua.
      Prendiamo un banale Italiano/Inglese dove nell’italiano, essendo lingua di default, la url del sito è senza suffisso di lingua (es. tagmanageritalia.it; mentre per l’inglese viene aggiunto in automatico il suffisso finale /en/).
      1) Abbiamo creato due (invece che una) variabili di tipo Cookie Proprietario; una “VAR – Cookie Iubenda ITA” e “VAR – Cookie Iubenda ENG”.
      2) E’ stato creato come hai specificato tu l’attivatore (unico anche nei multilingua) “Accetta Cookie” con all’interno il valore “iubenda_consent_given”.
      3) Creati due Attivatori Negativi (“NON Accetta Cookie ITA”, “NON Accetta Cookie ENG”), uno per lingua, ai quali gli abbiamo fatto corrispondere le rispettive variabili di lingua (quelle dette sopra).
      4) Creati altri due attivatori per far visualizzare correttamente i banner di iubenda nelle rispettive lingue e nelle sezioni corrette del sito:
      “Attivatore Pagine ITA” (Visualizzazione di Pagina > Alcune Visualizzazioni di pagina / Page URL, non contiene, /en/) e “Attivatore Pagine ENG” (Visualizzazione di Pagina > Alcune Visualizzazioni di pagina / Page URL, contiene, /en/).
      5) A questo punto abbiamo creato i due tag contenenti i rispettivi snippet di codice dei banner cookie(uno per il banner italiano e uno per l’inglese); ogni banner avrà, in attivazione, il suo attivatore di lingua (“Attivatore Pagine ITA” o “Attivatore Pagine ENG”).
      6) Associazione con i TAG (analytics, facebook pixel, remarketing, adwords….): ogni tag avrà nella sezione di Attivazione “All Pages” e “Accetta Iubenda” e nelle eccezioni gli attivatori negativi che sono uno per lingua (vedi punto 3).
      Abbiamo testato e sembra che sia tutto ok.
      Se vuoi un sito di riferimento per controllare, scrivimi pure in privato alla mia mail.
      Spero di essere stato chiaro e spero sia tutto corretto. Ho anche qualche schermata se ti è utile per aggiornare la guida.
      Attendo un tuo riscontro.
      Grazie.

    • Ciao Francesco 🙂

      Ottima implementazione. In effetti iubenda ha un codice diverso per lingua come dice Gioacchino. Però nulla toglie che potresti creare comunque un unico attivatore negativo che comprende che l’utente non ha accettato ITA e non ha accettato ENG. Però è solo un’ottimizzazione. Come l’hai implementato va benissimo.

      Grazie del contributo Francesco. Sarà sicuramente utile ad altri 🙂

    • Grazie Matteo.
      Un grazie anche a Gioacchino con il quale ho condiviso quest’integrazione!

  2. Ottimo lavoro Matteo.
    Penso che il TAG dello script Iubenda vada associato solo a ALL PAGES. Senza nessuna eccesione o sbaglio?

    • Ciao Gioacchino. Esattamente, infatti nel step 1 (nella seconda parte) c’è scritto all pages 🙂

      A presto!

  3. Ciao Matteo,

    nella modalità da te suggerita, tra lo step 2 e lo step 3 manca la descrizione della creazione dell’attivatore positivo che citi a fondo pagina “Attivatore ► Iubenda Accettato”, giusto? Oppure non è necessario?

    Grazie

    • Lo vedi nell’immagine dello step 4. Comunque sì, ci va. 🙂

  4. Ciao Matteo,

    considerando un sito multilingua, per ogni lingua va creata una variabile di tipo cookie?
    Hai considerato che l’accettazione dei cookie avviene per scorrimento della pagina e/o chiusura del banner con la “x”?
    Grazie comunque !!!

    • Stai parlando di iubenda in particolare? Come vedi dall’esempio il cookie che genera iubenda è legato all’ID e non alla lingua usata. Immagino che la lingua serva solamente per le diciture che compaiono all’utente.
      A presto!

  5. Ciao Matteo, complimenti per le tue guide sempre molto ben fatte. Una domanda: iubenda a parte è possibile bloccare i cookie (remarketing, GA, FB, ecc.) prima di un click o page scroll (come indicato nella EU cookie law) usando GTM?
    Come si potrebbe fare? Grazie in anticipo per la risposta.

    • Ciao Fabrizio e grazie dei complimenti, sempre ben accetti.
      La risposta è sì 🙂 Ti basta ragionare nello stesso modo, usi un attivatore negativo che inibisce l’attivazione dei vari tag di profiliazione 🙂

    • Grazie Matteo, mi puoi indicare una tua guida dove posso trovare come creare un attivatore negativo?

    • È nella guida qui sopra. Crei l’attivatore e lo metti come eccezione: step 4.

  6. Ottimo. In un sito gestisco la cookie law con iubenda….ora la gestirò con GTM
    Ho una curiosità: conosci qualcuno che è stato multato perchè non rispetta la cookie law?

    • Ciao Gennaro 🙂
      Si ho letto di alcuni casi in cui ci sono state multe. Tipicamente aziende di un certo spessore dove – sicuramente – qualche competitor ha fatto la spia. Sinceramente non ricordo i nomi 🙂

  7. Chiarissimo, ti ringrazio ancora!

    • Di nulla Paolo 🙂

  8. Ciao Matteo, una domanda: come va gestito il tag di Analytics che attiva la generazione dei rapporti di remarketing e sulla pubblicità?

    In questo momento è tutto governato con un tag unico di Analytics: nelle impostazioni ho inserito una variabile per “anonymizeIp” su true se il cookie è accettato e su false se non lo è. Purtroppo non trovo un modo impedire la raccolta dati per il remarketing in base allo status di accettazione.

    Conviene gestire il tutto con due tag Analytics separati secondo te? (Uno con IP anonimo e display features disattivati prima dell’accettazione del cookie, uno con IP in chiaro e display features attivate dopo l’accettazione del cookie).

    Ti ringrazio

    • Ciao Paolo,
      ma che bellissima domanda 🙂
      La risposta (ed è quello che faccio) è sì. Implementi 2 Tag GA e li alterni a seconda se l’utente ha espresso il consenso o meno.

      A presto!

    • Ciao Matteo, grazie per la risposta, hai risolto un dubbio che avevo da tempo 🙂
      Riguardo la gestione delle “display features” ti chiedo ancora una cosa: ci sono due attivatori nelle opzioni di Analytics (“remarketing” e “funzioni di generazione di rapporti sulla pubblicità”) e uno all’interno del tag manager (tag di universal analytics > more settings > advertising).

      Qual è secondo te la best practice per gestire queste opzioni?

      Due casistiche in particolare:
      – se attivo l’opzione in GTM e tengo disattivato in Analytics cosa succede?
      – se attivo l’opzione solamente in Analytics ma non “flaggo” l’opzione nelle opzioni del tag Analytics invece?

      Spero di essermi spiegato al meglio 🙂

    • Ciao Paolo:

      1- se attivi su GTM e tieni disattivato su analytics succede che passi i valori (immagina dell’acqua) ad analytics, ma GA ha il rubinetto chiuso.
      2- se fai il contrario il rubinetto è aperto, ma l’acqua non gli arriva mai.

      Spero di essermi spiegato io 🙂

Hai ancora qualche dubbio? Chiedi pure qui sotto, sarò pronto a risponderti!

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Schermata dashboard Club Tag Manager Italia

Entra GRATIS nel Club Tag Manager Italia!

Ho riaperto temporaneamente le iscrizioni al Club: il posto – l’unico posto – dove puoi accedere a TUTTI i miei materiali avanzati (ore e ore di roba).

In aggiunta, nel Club rispondo a tutte le tue domande in un gruppo di Facebook riservato ai membri!

Richiedi subito il tuo PASS GRATUITO di 60 giorni per provare senza impegno il Club Tag Manager Italia!