Di seguito spiegheremo come utilizzare Google Tag Manager con lo script di Iubenda Cookie Policy per attivare qualsiasi script Javascript che utilizza i cookie solo dopo il consenso dell’utente all’utilizzo di questi ultimi.
L’esempio che affronterò prenderà in questione la semplice attivazione dello script di Google Analytics dopo il consenso dell’utente sul banner di avviso.
Google Tag Manager + iubenda step by step
1. Google Tag Manager
Per prima cosa è necessario creare un account gratuito su Google Tag Manager.
2. Creare un container
Una volta creato un account è necessario creare un container cliccando sul bottone rosso New
Cosa è un container?
Google Tag Manager funziona grazie ai container (lo script che installaremo dopo) e si occupa di sostituire tutti gli script tipo Google Analytics, Adwords o altri script di terze parti solo dopo terminate regole o condizioni.
Informazioni su Google Tag Manager.
. Creazione di un container
4. Una volta creato un container possiamo passare alla creazione del tag.
Il tag rappresenta lo script che verrà attivato solo dopo determinate regole, nel nostro caso appunto l’approvazione dell’utente per l’utilizzo dei cookie.
Il tag che creeremo sarà relativo a Google analytics:
Come si vede dallo screenshot abbiamo impostato come Tag Type: Universal Google Analytics mentre sotto alla voce Tracking ID dovrete inserire il vostro ID di Google analytics.
5. Impostare una rules per l’attivazione del tag
Dopo aver impostato tali parametri è necessario cliccare in alto a destra sul bottone +Add Firing Rules ed impostare i seguenti valori:
Impostando tale regola stiamo specificando a Google Tag Manager di attivare il tag di Google Analytics che abbiamo creato sopra, solo quando quella regola è true. In altre parole ogni qual volta viene inviato un evento a Google Tag Manager con il valore di ‘iubenda_consent_given’.
Il seguente codice Javascript permette di fare quanto appena descritto:
dataLayer.push({'event': 'iubenda_consent_given'});
inviare un evento a Google Tag Manager.
6. Installare Google Tag Manager sul proprio sito web:
Per installare Google Tag Manager basta recarsi nell’admin di GTM, copiare il codice che Google fornisce, ed inserirlo in tutte le pagine del proprio sito web.
Nota bene: Dovrete rimuovere il vostro codice di Google Analytics.
Google analytics sarà infatti attivato in automatico dallo script di Google Tag Manager solo dopo il consenso all’utilizzo dei cookie da parte dell’utente.
7. Installare lo script di Iubenda
Andate su iubenda.com, attivate la Beta Cookie Policy e prelevate il vostro codice della cookie policy solution.
Il codice prelevato sarà simile a questo:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
cookiePolicyId: 254316,
};
(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>
Questo codice andrà modificato come segue per l’integrazione con Google Tag Manager, ed andrà incollato nelle pagine del vostro sito prima della chiusura del tag </head> :
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
cookiePolicyId: 254316,
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>
Abbiamo quindi aggiunto una callback che, al consenso dell’utente, richiamerà il codice di Google Tag Manager per scatenare l’evento che abbiamo impostato per l’attivazione di Google analytics.
Questo esempio è adattabile all’utilizzo di qualsiasi altro script o funzione javascript:
