Guida Avanzata: Come Installare CookieBot in Modo Performante e Salvarti dalla GDPR

[AGGIORNATO 22 NOVEMBRE 2019]

Se sei qui significa che hai già sentito parlare del servizio di CookieBot per gestire la GDPR sul tuo sito e lo vorresti installare con Google Tag Manager.

Devo darti due notizie, una buona (evviva!) e una cattiva (doh!).

La buona notizia è che esiste anche una guida ufficiale di CookieBot su come installarlo con Google Tag Manager (trovi il link in fondo a questa guida). Questa è un’ottima cosa perché i proprietari del servizio hanno capito che Google Tag Manager è ormai indispensabile per gestire i tracciamenti nei siti.

Però ahimè c’è la cattiva notizia. La cattiva notizia è che la guida da loro indicata non è esattamente performante al 100%, perché non tiene conto di alcuni dettagli del funzionamento tecnico di Google Tag Manager, facendone perdere uno dei benefici principali.
In altre parole la guida ufficiale va a creare dei malfunzionamenti che andrebbero a influenzare anche gli altri Tag del tuo contenitore.

Quale dettaglio? Te lo dico fra un po’ 😉

In poche parole ho provato la guida, ci ho pensato e ripensato. Non mi piaceva. E ho deciso di metterci mano io per risolvere questo problemino (beh, problemone in realtà).

Grazie ai miei #barbatrucchi (e una notte insonne) sono riuscito a renderla più performante senza perdere le potenzialità di Google Tag Manager.

Ora ti elenco cosa dice la guida ufficiale e poi cosa io ho cambiato e come l’ho ottimizzata 😉

STEP 1 – INSTALLA LO SCRIPT CON UN TAG HTML PERSONALIZZATO

La prima cosa che la guida dice di fare è installare lo script JavaScript per far funzionare CookieBot. Attenzione dovrai cambiare il codice Id con quello che hai all’interno del pannello CookieBot nella tab “I tuoi script”:

Ora che hai trovato il codice del tuo CookieBot dovrai inserirlo in uno script dentro a un Tag di tipo HTML personalizzato.

Lo script è il seguente:

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js?cbid=00000000-0000-0000-0000-000000000000" type="text/javascript"></script> <script> function CookiebotCallback_OnAccept() {     if (Cookiebot.consent.preferences)         dataLayer.push({'event':'cookieconsent_preferences'});     if (Cookiebot.consent.statistics)         dataLayer.push({'event':'cookieconsent_statistics'});     if (Cookiebot.consent.marketing)         dataLayer.push({'event':'cookieconsent_marketing'}); } </script>

• Sezione Tag > Nuovo.
• Tipo di Tag: HTML personalizzato
• Aggiungi gli Attivatori: “All Pages“.
• Salva il Tag come: “CookieBot GDPR Consent”.

Cosa fa questo script? Semplice 🙂
Crea tre eventi personalizzati a seconda della scelta dell’utente sui cookie di:

• preferenze (cookieconsent_preferences)
• statistici (cookieconsent_statistics)
• marketing (cookieconsent_marketing)

Probabilmente hai già intuito il prossimo step, vero?

STEP 2 – CREA GLI ATTIVATORI

Ora che lo script genera questi tre eventi personalizzati li dobbiamo catturare con altrettanti Attivatori di tipo Evento Personalizzato.

• Attivatori > Nuovo.
• Tipo di Attivatore: Evento personalizzato.
• Nome evento: cookieconsent_preferences.
• Salva con il nome: “cookieconsent_preferences”.

Faremo la stessa cosa per gli altri due eventi: cookieconsent_statistics e cookieconsent_marketing

STEP 3 – COLLEGA GLI ATTIVATORI AI TUOI TAG

Ora che abbiamo creato i 3 eventi, non ci resta che eliminare gli attivatori di tipo “Visualizzazione di pagina” (ovvero Finestra Caricata, Pronto per il DOM e Visualizzazione di Pagina) precedentemente presenti nei Tag, e sostituirli con i 3 eventi che abbiamo creato.

Ad esempio puoi collegarli a questi Tag:

• Pageview di Google Analytics
• Pixel di Facebook
• Hotjar
• Remarketing AdWords
• e così via.

Qui sotto riporto l’esempio del PageView di Google Analytics.

STEP 4 – AGGIORNA GLI ATTIVATORI PERSONALIZZATI

Ma come facciamo a gestire tutti gli altri attivatori come ad esempio un Attivatore sulla pagina della privacy (nella loro guida fanno questo esempio, ma per farti capire potrebbe essere un Attivatore per la thank you page)?

La guida ufficiale ci dice di aggiungere l’evento come parametro di filtro dell’attivatore:

 

STEP 5 – AGGIORNA TUTTI GLI ATTIVATORI

Ma se devo gestire altri attivatori, ad esempio click o un link, come diavolo faccio?

La guida ci suggerisce di creare delle variabili di tipo JavaScript personalizzato che andranno a rilevare le scelte degli utenti sulle tipologie di cookie che vogliono ricevere.

• Variabili > Variabili definite dall’utente > Nuova.
• Tipo di Variabile: JavaScript personalizzato.
• Nome Variabile: Cookiebot.consent.marketing
• Inserisci il seguente codice e poi salva

function()
{
    return Cookiebot.consent.marketing.toString();
}

La stessa cosa va replicata per preferenze e statistiche con Cookiebot.consent.preferences.toString() e Cookiebot.consent.statistics.toString().

La funzione restituirà true o false.

Il problema di questa versione è che il JavaScript riceverà il valore solo dopo l’evento Window Loaded (finestra caricata) e quindi tutti i Tag dovranno essere gestiti DOPO l’evento Window Loaded.

Come vedi in Page View e DOM Ready è ancora undefined.

 

Quindi in pratica perdiamo tutti gli eventi nativi di Google Tag Manager (Page View e DOM Ready) perché dovremo accendere i Tag solo DOPO AVER VERIFICATO la variabile di tipo JavaScript.

Perché non va bene questa guida

Trovo assurdo dover rinunciare a Page View e DOM Ready, andando a incasinare gli eventi personalizzati a loro collegati.

In altre parole, la guida proposta da Cookiebot non è performante. Non mi piace assolutamente.

Se posso descriverla con una parola: bleah.

Mi sono detto, col cavolo che rinuncio agli eventi nativi di Google Tag Manager per gestire la GDPR.

Dopo un bel po’ di sbattimento (e ripeto una notte insonne) sono riuscito ad ottimizzare questa guida con pochissime righe di codice in più e gestendo le tre variabili diverse.

Sei pronto?

STEP 1 – CREA LE VARIABILI DI COOKIEBOT

Prima di tutto crea una variabile che contenga il codice del tuo CookieBot Id che abbiamo prelevato con il precedente STEP 1.

• Variabili > Variabili definite dall’utente > Nuova.
• Tipo di Variabile: Costante
• Nome Variabile: CookieBotId
• Valore: Inserisci il valore del tuo id
• Salva

Questa costante ci servirà dopo 🙂

Ora ci serviranno altre quattro variabili personalizzate:

• CookieConsent
• CookieConsent.marketing
• CookieConsent.preferences
• CookieConsent.statistics

STEP 2 – CREA LA VARIABILE COOKIE

Il buon CookieBot ha un cookie contenente i valori delle scelte dell’utente. Il cookie si chiama CookieConsent:

A questo punti non ci resta che prendere quel cookie con Google Tag Manager attraverso una variabile. Farlo è abbastanza semplice 🙂

• Variabili > Variabili definite dall’utente > Nuova.
• Tipo di Variabile: Cookie proprietario
• Nome Variabile: CookieConsent
• Nome Cookie: “CookieConsent”
• Salva

STEP 3 – CREA LE VARIABILI DEI CONSENSI

Ora che abbiamo una variabile contenente il Cookie delle preferenze possiamo creare tre variabili per gestire i 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: {{CookieConsent}}
• Pattern: marketing:true ► Output: true
• Pattern: marketing:false ► Output: false
• Advanced Settings: Flaggare solo ignora maiuscole e minuscole
• Nome Variabile: CookieConsent.marketing
• Salva

 

 

Ripeteremo la stessa procedura per le altre due variabili CookieConsent.statistics e CookieConsent.preferences, stando attento a cambiare anche i valori nel campo “Pattern”.

Ma a che servono ‘ste variabili?

Uhhh… aspetta, ora te lo dico.

Avremo il valore della preferenza dell’utente ben prima del Window Loaded. In altre parole non ci saranno più problemi nella gestione degli eventi predefiniti di Google Tag Manager.

Yuppieeeeeeee!

STEP 4 – INSTALLA LO SCRIPT CON UN TAG HTML PERSONALIZZATO

La procedura è simile allo step 1 errato ma con qualche accorgimento 🙂

[Aggiornamento di Cookiebot da novembre 2019]

Cookiebot ha creato un proprio modello, ovvero un Tag creato da loro, che esegue un push (probabilmente vedendo la mia guida) tre eventi:

• cookie_consent_preferences
• cookie_consent_statistics
• cookie_consent_marketing

Di fatto però questi tre eventi risultano ancora non assolutamente performanti. Quindi il mio suggerimento è lasciarli stare (far finta che non esistano) e continuare ad usare questa mia guida. La differenza tra i miei e i suoi è un carattere underscore “_” che ho segnato in rosso.

Lo script da installare è semplicemente  seguente:

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js?cbid={{CookieBotId}}" type="text/javascript"></script>
<script>
function CookiebotCallback_OnAccept() {
 if ((Cookiebot.consent.preferences) && ({{CookieConsent.preferences}} != "true"))
 dataLayer.push({'event':'cookieconsent_preferences'});
 if ((Cookiebot.consent.statistics) && {{CookieConsent.statistics}} != "true")
 dataLayer.push({'event':'cookieconsent_statistics'});
 if ((Cookiebot.consent.marketing) && {{CookieConsent.marketing}} != "true")
 dataLayer.push({'event':'cookieconsent_marketing'});
}
</script>

• Sezione Tag > Nuovo.
• Tipo di Tag: HTML personalizzato
• Impostazioni avanzate: Opzioni di attivazione tag: “Una volta per pagina”
• Aggiungi gli Attivatori: “All Pages“.
• Salva il Tag come: “CookieBot GDPR Consent”.

Vediamo nel dettaglio cosa è cambiato.

Per prima cosa ho impostato che questo Tag si attivi solo una volta per pagina (così evitiamo che venga caricato due volte).

Passiamo alla seconda modifica. Se hai notato ho inserito un’altra condizione prima di ogni push nel dataLayer. In questo modo adesso ci sono due condizioni:

• la prima condizione verifica l’esistenza della funzione JavaScript
• la seconda condizione verifica che sia già stato registrato il CookieConsent e che il valore sia diverso da true (grazie alle Tabelle delle Espressioni Regolari già create).

In altre parole l’evento personalizzato sarà pushato solo se l’utente possiede già il CookieConsent (e quindi ha già espresso la sua preferenza su quali tipi di cookie accettare) e se quel tipo di cookie (preferenze, statistiche o marketing) NON è stato accettato.

Perché questo? Te lo spiego nei prossimi step.

STEP 5 – CREA GLI ATTIVATORI (UGUALE ALLO STEP 2)

Questo era l’unico step veramente utile nella guida precedente.

Ora che lo script genera questi tre eventi personalizzati li dobbiamo catturare con altrettanti Attivatori di tipo Evento Personalizzato.

• Attivatori > Nuovo.
• Tipo di Attivatore: Evento personalizzato.
• Nome evento: cookieconsent_preferences.
• Salva con il nome: “cookieconsent_preferences”.

Faremo la stessa cosa per gli altri due eventi: cookieconsent_statistics e cookieconsent_marketing

STEP 6 – CREA GLI ATTIVATORI NEGATIVI

Oltre agli Attivatori dello STEP 5, dovremmo creare degli attivatori con logica contraria.
Io di solito li chiamo attivatori negativi. Ci serviranno per metterli come attivatori di tipo eccezione nei Tag più comuni.

• Attivatori > Nuovo.
• Tipo di Attivatore: Visualizzazione di pagina.
• Questo attivatore si attiva su: Alcune visualizzazioni di pagina.
• Aziona questo attivatore: CookieConsent.marketing non è uguale a true
• Salva con il nome: “cookieconsent_marketing Non Accettato”.

Lo stesso faremo per statistics e preferences.

Come generare degli attivatori negativi universali validi per qualsiasi evenienza

L’esempio appena visto vale solo per la visualizzazione di pagina. Ma se avessi dei tag che si attivano su click o qualsiasi altro tipo di attivatore come facciamo?

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: CookieConsent.preference non è uguale a true
• Salva con il nome: “cookieconsent_preference Non Accettato”.

Il mio consiglio è di creare questi tre attivatori negativi universali e di metterli sempre in eccezione ai vari tag 🙂

STEP 7 – AGGIORNA I TUOI ATTIVATORI E TAG

Grazie alla combinazione di Attivatori di tipo evento personalizzato e Attivatori negativi possiamo gestire tranquillamente qualsiasi tipo di Tag, considerandoli divisi in due categorie:

• Tag che vengono attivati nel Pageview/DOM Ready/Window Loaded
• Tag che vengono attivati da altri attivatori

Vediamo come gestire il classico pageview di Google Analytics.

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

• cookieconsent_statistics
• cookieconsent_statistics Non Accettato (come attivatore di tipo eccezione)

“Tutto qui?!”

Yep. Tutto qui. Il Tag ora si attiverà nel Pageview, nel caso in cui c’è il consenso esplicito dell’utente (in questo caso solo quando l’utente accetta i cookie statistici).

Ma è una figata! E per eventi che non sono di tipo pagina come faccio? Per esempio in un click?

Qui, ragazzo mio, dovrai tirarti su le maniche e inserire sempre la condizione all’interno dell’attivatore. Ad esempio su questo attivatore che monitora il click sui link di tipo mailto ed collegato ad un tag di Google Analytics di tipo evento dovremmo aggiungere la condizione che l’utente abbia già accettato la condizione dei cookie statistici.

Ricordati di cliccare sempre sul pulsante blu “Invia” per pubblicare le tue modifiche.

Riepilogo e bonus

Grazie a CookieBot riusciamo a gestire in modo davvero semplice la GDPR a livello tecnico.

Fortunatamente è possibile gestire tutto alla grande con Google Tag Manager (e alla mia guida ottimizzata).

Se hai necessità di una consulenza posso fornirtela solo nel caso in cui tu sia iscritto a CookieBot attraverso questo link: CookieBot Tag Manager Italia.

Inoltre i membri del Club Tag Manager Italia (oltre ad avere delle priorità di risposta) avranno video tutorial e i template di Google Tag Manager pronti da importare. Se anche tu vuoi farne parte lasciami un commento 😉

Link utili

• Guida ufficiale su CookieBot (non ottimizzata)