[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 😉
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>
Cosa fa questo script? Semplice 🙂
Crea tre eventi personalizzati a seconda della scelta dell’utente sui cookie di:
Probabilmente hai già intuito il prossimo step, vero?
Ora che lo script genera questi tre eventi personalizzati li dobbiamo catturare con altrettanti Attivatori di tipo Evento Personalizzato.
Faremo la stessa cosa per gli altri due eventi: cookieconsent_statistics e cookieconsent_marketing
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:
Qui sotto riporto l’esempio del PageView di Google Analytics.
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:
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.
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.
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?
Prima di tutto crea una variabile che contenga il codice del tuo CookieBot Id che abbiamo prelevato con il precedente STEP 1.
Questa costante ci servirà dopo 🙂
Ora ci serviranno altre quattro variabili personalizzate:
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 🙂
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 😉
Ripeteremo la stessa procedura per le altre due variabili CookieConsent.statistics e CookieConsent.preferences, stando attento a cambiare anche i valori nel campo “Pattern”.
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!
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:
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> 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:
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.
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.
Faremo la stessa cosa per gli altri due eventi: cookieconsent_statistics e cookieconsent_marketing
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.
Lo stesso faremo per statistics e preferences.
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 🙂
Il mio consiglio è di creare questi tre attivatori negativi universali e di metterli sempre in eccezione ai vari 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:
Vediamo come gestire il classico pageview di Google Analytics.
Per essere in regola con la GDPR ti basterà semplicemente aggiungere due attivatori:
“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.
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 😉
Per LaCuraDellAuto, punto di riferimento italiano per gli appassionati di car detailing, abbiamo avviato un…
Insieme a Linear - Gruppo Unipol, compagnia assicurativa online attiva dal 1996 e specializzata nell'offerta…
(* Il nome del cliente è coperto da accordo di riservatezza, e per questo motivo…
Cos'è il piano di misurazione (e cosa non è) Il piano di misurazione è un…
Avere automazioni di marketing per recuperare vendite e conversioni è un’ottima cosa. Se ci pensi…
Fgm04, fondata nel 2004 è una realtà di cosmeceutica professionale, evolutasi fino a diventare un…