Guida Avanzata: GDPR Gestire il Consenso di Categoria Granulare di Iubenda con Google Tag Manager

Finalmente pure Iubenda si è adeguata alla gestione di categoria dei Cookie come fanno altri servizi come Cookiebot o OneTrust.

Complice il fatto che è uscita una circolare ufficiale dell’European Data Protection Board  che dichiara in modo esplicito e senza alcun dubbio interpretativo che non si è norma GDPR se il consenso NON è granulare e/o se si usa lo scroll come accettazione.

In altre parole da Maggio 2020 è possibile su Iubenda gestire il consenso di categoria in modo granulare. Evviva!

Certo, evviva… ma questo comporta delle leggerissime configurazioni in GTM.

Quali sono le categorie di Iubenda

Nella sua gestione standard, Iubenda dispone di 5 categorie:

Strettamente necessari (id 1)

Finalità incluse:

• Salvataggio e gestione di backup
• Hosting ed infrastruttura backend
• Gestione di landing page e pagine di invito
• Servizi di piattaforma e hosting
• Protezione dallo SPAM
• Ottimizzazione e distribuzione del traffico
• Monitoraggio dell’infrastruttura
• Gestione dei pagamenti

Interazioni e funzionalità semplici (id 2)

Finalità incluse:

• Contattare l’Utente
• Interazione con le piattaforme di live chat
• Gestione di conferenze web e telefonia online
• Gestione delle richieste di supporto e contatto
• Interazione con le piattaforme di supporto e di feedback
• Gestione dei tag
• Registrazione ed autenticazione

Esperienza migliorata (id 3).

Finalità incluse:

• Commento dei contenuti
• Interazione con piattaforme di raccolta dati e altre terze parti
• Visualizzazione di contenuti da piattaforme esterne
• Interazione con social network e piattaforme esterne
• Interazione con le piattaforme per sondaggi online
• Gestione dei feed RSS
• Funzionalità sociali

Misurazione (id 4).

Finalità incluse:

• Statistica
• Beta testing
• Test di performance di contenuti e funzionalità (A/B testing)
• Heat mapping e registrazione sessioni
• Gestione della raccolta dati e dei sondaggi online

Targeting e pubblicità (id 5).

Finalità incluse:

• Pubblicità
• Infrastruttura al servizio pubblicitario
• Affiliazione commerciale
• Gestione contatti e invio di messaggi
• Remarketing e behavioral targeting

Oh, che bravi hanno proprio fatto un elenco chiaro e a prova di male interpretazioni. Quindi nel banner apparirà una cosa simile:

 

Ora che ci è tutto più chiaro iniziamo l’installazione con Google Tag Manager

Step 1 – Recupera lo script di Iubenda

Ti basta entrare nel profilo e generare lo script attraverso la voce “Cookie Solution“, fare le impostazioni del banner e scrollare più in basso.

Dovresti trovare una text area dove poter copiare il codice proprio come l’immagine qui sotto:

Nel dettaglio il codice sarà una cosa simile a questa

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
      "consentOnContinuedBrowsing":false,
      "whitelabel":false,
      "lang":"it",
      "siteId":XXXXXXXX,
      "countryDetection":true,
      "perPurposeConsent":true,
      "cookiePolicyId":YYYYYYYYY,
      "cookiePolicyUrl":"demo.tagmanageitalia.it/esempio/", 
      "banner":{ 
             "acceptButtonDisplay":true,
             "customizeButtonDisplay":true,
             "position":"float-top-center",
             "rejectButtonDisplay":true 
             }
      };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Ovviamente i parametri in rosso sono dinamici e variano a seconda di come hai configurato la cookie solution su Iubenda e il sito di destinazione (nel mio caso demo.tagmanageritalia.it). Nel mio caso il codice di cookiePolicyId è 20508754 (te lo dico perché lo rivedrai dopo) negli screenshot.

Potresti inoltre avere dei parametri in aggiunta o averne meno. Insomma tutto dipende da quello che configuri.

Ecco un altro esempio:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
     "lang": "it",
     "siteId": XXXXXX, 
     "cookiePolicyId": YYYYYY,
     "banner": {
               "position": "float-top-center",
               "acceptButtonDisplay": true,
               "customizeButtonDisplay": true
               },
     };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Come vedi i valori in rosso rimangono 🙂

STEP 2 – Modifica lo script per Google Tag Manager

Ora che hai lo script pronto dovrai aggiungere un pezzetto di codice che permetterà di istruire Google Tag Manager quando l’utente accetta o meno una delle cinque categorie. L’istruzione (guarda caso) avverrà attraverso un push nel dataLayer con un evento personalizzato.

La parte in blu è quella da aggiungere al tuo codice. Ci metto pure uno spazio apposta così da non poter sbagliare 🙂

l codice sarà una cosa simile a questa

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
      "consentOnContinuedBrowsing":false,
      "whitelabel":false,
      "lang":"it",
      "siteId":XXXXXXXX,
      "countryDetection":true,
      "perPurposeConsent":true,
      "cookiePolicyId":YYYYYYYYY,
      "cookiePolicyUrl":"demo.tagmanageitalia.it/esempio/", 
      "banner":{ 
             "acceptButtonDisplay":true,
             "customizeButtonDisplay":true,
             "position":"float-top-center",
             "rejectButtonDisplay":true 
             }

              ,
      callback: {
            onPreferenceExpressedOrNotNeeded: function(preference) {
                dataLayer.push({
                    iubenda_ccpa_opted_out: _iub.cs.api.isCcpaOptedOut()
                });
                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 (var purposeId in preference.purposes) {
                            if (preference.purposes[purposeId] && ({{cookie iubenda}} === undefined || {{cookie iubenda}}.indexOf('"' + purposeId + '":true') < 0)){
                                dataLayer.push({
                                    event: "iubenda_consent_given_purpose_" + purposeId
                                });
                            }
                        }
                    }
                }
            }
        }
      
      };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Ora non ci resta che inserirlo dentro un custom HTML 🙂

Step 3 – Crea un Tag HTML Personalizzato

Bene ora on ci resta che crearci il nostro bellissimo tag:

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

Dovresti avere una cosa simile:

Step 4 – Creiamo una variabile di tipo Cookie

Per capire se l’utente ha accettato ile varie categorie di profilazione useremo un #barbatrucco ormai noto. Sappiamo che attraverso un cookie Iubenda si salverà i vari consensi e nei prossimi cambi pagina non farà più apparire la barra della gestione dei cookie.

Con Google Tag Manager è possibile andare a leggere questo 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. Nel mio caso sarà sempre: 20508754

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:

Bene, ora se mettiamo in Anteprima di Debug dovrebbe apparirci la barra dei cookie di iubenda. Nel mio esempio ho anche un tag di Google Analytics ancora da bloccare.

Se se accettiamo tutto dovremmo vedere una serie di eventi personalizzati a sinistra e il cookie di iubenda valorizzato,

Nel dettaglio gli eventi si chiamano:

• iubenda_consent_given_purpose_1
• iubenda_consent_given_purpose_2
• iubenda_consent_given_purpose_3
• iubenda_consent_given_purpose_4
• iubenda_consent_given_purpose_5

Che originalità 😀

Mentre il cookie avrà un valore del genere:

{"timestamp":"2020-06-11T12:46:23.993Z","version":"1.20.6","purposes":{"1":true,"2":true,"3":true,"4":true,"5":true},"id":20508754}

dunque analizziamo. Per comodità ho già messo in blu le varie tipologie che ci interessano:

• timestamp = l’ora con cui l’utente ha accettato
• version = la versione dello script di iubenda
• purposes = oh ecco la cosa che ci interessa: le categorie accettate (con valore true) e quelle non accettate (con valore false)
• id = è il solito cookiePolicyId 🙂

Quindi non ci resta che:

• Creare 5 attivatori per i 5 eventi personalizzati di Iubenda
• Creare 5 variabili per estrapolare il valore della categoria accettata che ora risiede dentro il Cookie
• Creare 5 attivatori universali negativi che ci serviranno per essere suuuuuper dinamici nelle configurazioni.

Partiamo con la creazione dei 5 attivatori personalizzati.

Step 5 – Crea i cinque attivatori di tipo evento personalizzato

Sì, lo so… questo è un passaggio semplice ma un po’ monotono (lo dovrai fare 5 volte cambiando il nome).

Il concetto è molto semplice: il numero alla fine identifica la categoria:

1. Strettamente necessari
2. Interazioni e funzionalità semplici
3. Esperienza migliorata
4. Misurazione
5. Targeting e pubblicità

Facciamolo per il primo iubenda_consent_given_purpose_1

• Attivatore > Nuovo > Configurazione attivatore
• Tipo Attivatore: Evento personalizzato
• Nome evento: iubenda_consent_given_purpose_1
• Questo attivatore su: Tutti gli eventi personalizzati
• Inserisci come nome dell’Attivatore: “Iubenda 1 – Strettamente necessari”

Dovresti quindi avere una cosa simile:

Ottimo fai la stessa cosa per:

• iubenda_consent_given_purpose_2 con nome “Iubenda 2 – Interazioni”
• iubenda_consent_given_purpose_3 con nome “Iubenda 3 – Esperienza”
• iubenda_consent_given_purpose_4 con nome “Iubenda 4 – Misurazione”
• iubenda_consent_given_purpose_5 con nome “Iubenda 5 –  Targeting”

Eccoli tutti assieme

Ottimo, ora creiamo le 5 variabili che ci permetteranno di capire dal Cookie se l’utente ha accettato o no quella specifica categoria. Ci servirà per creare poi gli attivatori negativi universali 🙂

Step 6 – Crea le cinque variabili dei consensi per categoria

Visto che abbiamo una variabile contenente il Cookie delle preferenze possiamo creare cinque variabili per gestire tutte le categorie di consenso valori. Per farlo useremo un po’ di astuzia e di espressioni regolari 😉

• Variabili > Variabili definite dall’utente > Nuova.
• Tipo di Variabile: Tabella delle espressioni regolari
• Valore input: {{cookie iubenda}}
• Pattern: "1":true ► Output: true
• Pattern: "1":false ► Output: false
• Advanced Settings: Flaggare solo ignora maiuscole e minuscole
• Nome Variabile: cookie.purpose 1 – Strettamente necessari
• Salva

Ecco come dovrebbe essere:

Fai la stessa cosa per gli altri quattro variando il valore dentro il pattern con il numero adatto e ovviamente il nome:

• Pattern: "2":true ► Output: true
• Pattern: "2":false ► Output: false
• Nome Variabile: cookie.purpose 2 – Interazioni

Per il tre

• Pattern: "3":true ► Output: true
• Pattern: "3":false ► Output: false
• Nome Variabile: cookie.purpose 3 – Esperienza

Per il quattro

• Pattern: "4":true ► Output: true
• Pattern: "4":false ► Output: false
• Nome Variabile: cookie.purpose 4 – Misurazione

Per il quinto

• Pattern: "5":true ► Output: true
• Pattern: "5":false ► Output: false
• Nome Variabile: cookie.purpose 5 – Targeting

Ecco il risultato finale

MA A CHE SERVONO ‘STE VARIABILI?

Uhhh… aspetta, ora te lo dico.

Avremo il valore della preferenza dell’utente ben prima del DOM Ready. In altre parole non ci saranno più problemi nella gestione degli eventi predefiniti di Google Tag Manager (come ad esempio il Page View che dal 10 Giugno 2020 si chiama Container Loaded)

Yuppieeeeeeee!

Ci siamo quasi, ora manca solo la creazione degli attivatori negativi universali e poi la configurazione nei vari tag 🙂

STEP 7 – Crea degli attivatori negativi universali

Questo tipo di attivatore ha la particolarità di adattarsi a qualsiasi tipo di evento. Quindi non importa se il tag di Google Analytics o Facebook si dovrà attivare al click, allo scroll e così via. Anche qui ne dovrai creare 5, uno per ogni categoria. La logica dell’attivatore negativo universale è quella di impedire l’accensione grazie agli attivatori in eccezione che è possibile configurare su qualsiasi Tag.

Quindi faremo un attivatore con la logica: se l’utente non ha accettato questa categoria di iubenda.

Difficile? No, ora te lo spiego 🙂

• Attivatori > Nuovo.
• Tipo di Attivatore: Evento personalizzato
• Nome evento: .*
• Flag Utilizza la corrispondenza con espressione regolare: true
• Questo attivatore si attiva su: cookie.purpose 1 – Strettamente necessari non è uguale a true
• Salva con il nome: “cookie.purpose 1 – Strettamente necessari – Non Accettato”

Ottimo ora facciamolo per i restanti 4. Ecco cosa dovresti cambiare

Il secondo:

• Questo attivatore si attiva su: cookie.purpose 2 – Interazioni non è uguale a true
• Salva con il nome: “cookie.purpose 2 – Interazioni – Non Accettato”

Il terzo

• Questo attivatore si attiva su: cookie.purpose 3 – Esperienza non è uguale a true
• Salva con il nome: “cookie.purpose 3 – Esperienza – Non Accettato”

Il quarto

• Questo attivatore si attiva su: cookie.purpose 4 – Misurazione non è uguale a true
• Salva con il nome: “cookie.purpose 4 – Misurazione- Non Accettato”

Il quinto

• Questo attivatore si attiva su: cookie.purpose 5 – Targeting non è uguale a true
• Salva con il nome: “cookie.purpose 5 – Targeting – Non Accettato”

Yeah! ce l’abbiamo fatta, ora non ci resta che configurare tutti i tag in base alla categoria

STEP 8 – AGGIORNA I TUOI ATTIVATORI E TAG

Grazie alla combinazione di Attivatori di tipo evento personalizzato e Attivatori negativi universali possiamo gestire tranquillamente qualsiasi tipo di Tag. Ad esempio il classico pageview di Google Analytics potremmo categorizzarlo come Misurazione

Per essere in regola con la GDPR ti basterà semplicemente aggiungere due attivatori:

• Iubenda 4 – Misurazione come attivatore
• cookie.purpose 4 – Misurazione- Non Accettato (come attivatore di tipo eccezione)

Ora avvia il debug (ricordati di aggiornare) e BOOM verifica che tutto sia pronto.

Ecco la prova del nove: l’attivatore negativo universale blocca tutto 🙂

Ora, grazie a Google Tag Manager, hai tutte le armi per gestire correttamente il consenso delle categoria con Iubenda nel metodo più ottimizzato possibile 🙂

Cosa ne pensi? Ti è stato utile? Scrivimelo nei commenti!

Buon Tag 😉

Link utili:

• Guida ufficiale di Iubenda con Google Tag Manager
• Sconto del 10% per l’attivazione di Iubenda