In questa guida spiegheremo come utilizzare Google Tag Manager con la Cookie Solution, in modo da “attivare” qualsiasi JavaScript che utilizza i cookie solo dopo che l’utente ha dato il consenso.
Pur consigliando vivamente l’utilizzo di Google Tag Manager, poiché rende più facile adeguarsi ai requisiti della Cookie Law, ti ricordiamo che è efficace solo per gli script “non posizionali”. Per script “non posizionali” si intendono tutti gli script che non visualizzano un elemento specifico in un punto della pagina. In altre parole, puoi adottare questa soluzione per tutti gli strumenti di analytics, ma non per i banner di AdSense, per i video Youtube o per i pulsanti social o widget di altro genere.
La Cookie Solution si basa sull’impedire l’esecuzione degli script prima di aver ricevuto il consenso dell’utente, l’attivatore (“trigger” in inglese) utilizzato in questo tutorial verrà innescato solo quando viene fornito il consenso dell’utente.
L’esempio seguente mostra l’attivazione dello script di Google Analytics solo dopo che l’utente ha fornito il consenso utilizzando il banner dei cookie.
Per maggiori dettagli su Google Tag Manager ti rimandiamo alla documentazione ufficiale.
Per prima cosa crea un account gratuito su Google Tag Manager.
Una volta effettuato l’accesso, dovrai creare un contenitore facendo click sul pulsante Crea contenitore:
Una volta creato il contenitore puoi passare alla creazione del tag. Il tag rappresenta lo script che verrà attivato solo in base a determinate regole, nel nostro caso il consenso dell’utente all’uso dei cookie.
Il tag che creeremo sarà correlato a Google Analytics:
Fai click su Aggiungi un nuovo tag e poi sul blocco Configurazione tag, come mostrato nell’immagine sottostante:
Seleziona il tipo di monitoraggio Google Analytics – Universal Analytics. Nelle impostazioni di Google Analytics seleziona Nuova variabile, inserisci il tuo ID di monitoraggio di Google Analytics e infine salva.
Ora puoi impostare il tuo tipo di monitoraggio. In questo esempio vogliamo monitorare le visualizzazioni di pagina, quindi selezioniamo Visualizzazione di pagina.
Dopo aver impostato i parametri di cui sopra, dobbiamo impostare l’attivatore (le regole che consentiranno agli script di attivarsi). La procedura cambia a seconda che tu abbia o meno abilitato la funzionalità consenso per categoria della Cookie Solution (al momento non disponibile sul canale Stable).
Fai click sul blocco Attivazione:
Fai click sul piccolo segno + in alto a destra per aggiungere un nuovo attivatore. Nella finestra di configurazione seleziona Evento personalizzato.
Dai il nome iubenda_consent_given all’evento personalizzato appena creato. In questo modo il trigger sarà attivato su tutti gli eventi personalizzati con nome “Consenso dato”. Ora salva l’attivatore:
Poi salva il tag:
Impostando questa regola, Google Tag Manager attiverà il tag di Google Analytics appena creato solo quando questa regola è vera, cioè ogni volta che riceve un evento con valore iubenda_consent_given.
Fai click sul blocco Attivazione:
Fai click sul piccolo segno + in alto a destra per aggiungere un nuovo attivatore. Nella finestra di configurazione seleziona Evento personalizzato.
Ti ricordiamo che – ad eccezione di “Strettamente necessari” – devi creare un evento personalizzato per ogni categoria mostrata nel cookie banner e nella cookie policy. Per scoprire a quali categorie appartengono i servizi che utilizzi nel tuo sito, puoi fare riferimento alle tipologie indicate nella tua cookie policy.
A seguire le 5 categorie (e i relativi valori degli eventi personalizzati):
iubenda_consent_given_purpose_2)iubenda_consent_given_purpose_3)iubenda_consent_given_purpose_4)iubenda_consent_given_purpose_5)Poiché Google Analytics è un servizio di statistica incluso appunto nella categoria “Statistica”, dovrai creare un evento personalizzato con valore iubenda_consent_given_purpose_4. In questo modo il trigger sarà attivato su tutti gli eventi personalizzati con nome “Consenso Dato Categoria 4”.
Salva il trigger:
Salva il tag:
Impostando questa regola, Google Tag Manager attiverà il tag di Google Analytics appena creato solo quando questa regola è vera, cioè ogni volta che riceve un evento con valore iubenda_consent_given_purpose_4.
dataLayer per tutti i contenitori, come spiegato qui.Per installare Google Tag Manager visita l’area di amministrazione, copia il codice fornito da Google e inseriscilo in tutte le pagine del tuo sito web seguendo le istruzioni fornite – se utilizzi un CMS che estrae l’intestazione della pagina da un template (ad esempio header.php), ti basterà incollarlo in quel file.
Nota bene: dovrai rimuovere il tuo codice Google Analytics.
Google Analytics verrà attivato automaticamente dallo script di Google Tag Manager solo dopo che il visitatore avrà acconsentito all’uso dei cookie.
Segui il percorso dashboard > [il tuo sito] > Cookie Solution e fai click sul pulsante Integra:
Recupera il codice di integrazione del banner (dovrai fare click su Attiva se non hai già attivato la Cookie Solution), sarà simile a questo:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"lang": "it",
"siteId": XXXXXX, //usa il tuo siteId
"cookiePolicyId": YYYYYY, //usa il tuo cookiePolicyId
"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>A seconda che tu abbia o meno abilitato la funzionalità consenso per categoria della Cookie Solution (al momento non disponibile sul canale Stable), il codice soprastante deve essere modificato come indicato a seguire:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"lang": "it",
"siteId": XXXXXX, //usa il tuo siteId
"cookiePolicyId": YYYYYY, //usa il tuo cookiePolicyId
"banner": {
"position": "float-top-center",
"acceptButtonDisplay": true,
"customizeButtonDisplay": true
},
"callback": {
onPreferenceExpressedOrNotNeeded: function(preference) {
if (!preference || preference.consent) {
dataLayer.push({
'event': 'iubenda_consent_given'
});
}
}
}
};
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
Nota: se stai usando il canale Stable della Cookie Solution dovrai utilizzare una callback diversa, poiché al momento onPreferenceExpressedOrNotNeeded non è disponibile su quel canale:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"lang": "it",
"siteId": XXXXXX, //usa il tuo siteId
"cookiePolicyId": YYYYYY, //usa il tuo cookiePolicyId
"banner": {
"position": "float-top-center",
"acceptButtonDisplay": true,
"customizeButtonDisplay": true
},
"callback": {
onConsentGiven: function() {
dataLayer.push({
'event': 'iubenda_consent_given'
});
}
}
};
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/stable/iubenda_cs.js" charset="UTF-8" async></script>
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"lang": "it",
"siteId": XXXXXX, //usa il tuo siteId
"cookiePolicyId": YYYYYY, //usa il tuo cookiePolicyId
"banner": {
"position": "float-top-center",
"acceptButtonDisplay": true,
"customizeButtonDisplay": true
},
"callback": {
onPreferenceExpressed: function(preference) {
for (var purposeId in preference.purposes) {
if (preference.purposes[purposeId] === true) {
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>
Una volta adattato, il codice andrà inserito nelle tue pagine prima della chiusura del tag BODY.
Ora puoi passare direttamente alla Pubblicazione del contenitore. Altrimenti continua a leggere per le configurazioni avanzate (queste impostazioni ti consentono di accelerare l’attivazione dei tag aggiungendo due parametri aggiuntivi alla tua configurazione GTM).
In questa sezione utilizzeremo “Variabili” e “Eccezioni” per essere ancora più specifici: Google Tag Manager consente di creare variabili e di impostare le eccezioni nelle condizioni di attivazione del tag.
Puoi pensare alle eccezioni come a dei “trigger di blocco”. Ad esempio, se desideri che il tag Google Analytics venga attivato nella tua pagina del carrello degli acquisti, puoi impostare un’eccezione alla regola di attivazione in cui si afferma che il tag non venga attivato in nessuna pagina che non sia la pagina del carrello degli acquisti; impostando questa eccezione, impedisce al tag di attivarsi su pagine diverse dalla pagina del carrello degli acquisti. Allo stesso modo, puoi impostare un trigger per attivarsi solo se vengono soddisfatte le condizioni relative a una particolare variabile.
In questo modo, sia le variabili che le eccezioni consentono una maggiore flessibilità nella gestione dei tag (puoi leggere ciò che Google ha da dire sulle eccezioni qui e sulle variabili qui).
Come accennato in precedenza, se desideri che il tag di Google Analytics si attivi solo sulla tua pagina del carrello degli acquisti, puoi impostare un’eccezione alla regola di attivazione in cui si afferma che il tag non viene attivato in nessuna pagina che non sia la pagina del carrello.
Ecco come fare: fai click su Variabili nella colonna di sinistra dell’area di lavoro, quindi su Nuova.
Crea una variabile “URL” facendo click all’interno del blocco Configurazione variabile:
Ora fai click su Salva e dai un nome alla variabile in relazione alla pagina in cui desideri venga attivato il tag. Nel nostro esempio abbiamo chiamato la variabile “Carrello”.
Successivamente, crea il nuovo trigger di blocco/eccezione che desideri aggiungere (fai click su Attivatori nella colonna di sinistra, quindi su Nuovo). Dai alla tua eccezione un nome significativo: per questo esempio abbiamo optato per “non è il carrello”.
Ora fai click all’interno della casella di configurazione del trigger per scegliere il tipo di attivatore, in questo caso Visualizzazione di pagina.
Seleziona Alcune visualizzazioni di pagina, poi associa la variabile (in questo caso “Carrello”, appena creata), scegli “non è uguale a” e digita l’URL della tua pagina come condizione di attivazione (ad esempio https://carrello.iltuosito.it).
In alternativa a “non è uguale a” puoi selezionare “inizia con” se desideri che il tag venga attivato nelle pagine che iniziano con l’URL del carrello degli acquisti. Come vedi, puoi configurare le impostazioni come meglio si adattano al tuo caso.
Fai click su Salva, torna al tuo tag e associa l’eccezione appena creata (andrà ad aggiungersi all’attivatore “Consenso dato”).
Per farlo clicca sulla matita nella sezione Attivazione e poi su Aggiungi eccezione.
Seleziona l’eccezione appena creata e salvala. Ora il tag continuerà a attivarsi solo dopo che il consenso ai cookie è stato raggiunto (come richiesto dalla legge), ma non verrà attivato nelle pagine che non sono il carrello.
Se desideri monitorare più di un evento sulla stessa pagina (ad esempio le visualizzazioni di pagina e l’invio di un modulo di acquisto), dovrai creare i tag aggiuntivi e specificare il tipo di monitoraggio. Sebbene Google Tag Manager permetta di implementare con facilità più tipi di monitoraggio, per garantire il rispetto della legge è necessario assicurarsi che gli altri eventi di attivazione avvengano solo dopo aver ricevuto il consenso.
Ecco come fare: supponiamo che oltre al monitoraggio delle visualizzazioni di pagina in Google Analytics (come impostato nel tag creato in precedenza), desideri monitorare anche le transazioni.
Per fare ciò, dovrai creare un altro tag di Google Analytics, scegliere il tipo di monitoraggio Transazione e cliccare su Salva (puoi dare un nome descrittivo come “Transazioni di Universal Analytics”).
Ora fai click su Variabili nel pannello di sinistra e aggiungi una nuova variabile personalizzata per creare una variabile “Cookie proprietario”. Specifica il nome della variabile nel formato _iub_cs-XXXXXX” (XXXXXX dovrà essere sostituito con il tuo cookiePolicyId) e scegli l’opzione Decodifica in formato URI il cookie.
Fai click su Salva e chiamala ad esempio “Cookieiubenda”.
Ora crea l’attivatore che desideri aggiungere (es. “Acquisto fatto”): scegli Invio modulo, seleziona l’opzione Alcuni moduli, indica il cookie iubenda (la variabile appena creata) come variabile associata e imposta contiene e “consent”:true come condizione di attivazione.
Infine, torna al tag “Transazioni di Universal Analytics” e associa l’attivatore che hai appena creato. Per farlo clicca sul blocco Attivazione e scegli l’attivatore Acquisto fatto.
Salva e avrai concluso.
Nota: se desideri che il monitoraggio delle transazioni si verifichi solo su una pagina (ad esempio quella del carrello degli acquisti), consulta la sezione precedente, Attiva i tag solo su una pagina.
È possibile attivare i tag più velocemente utilizzando 2 parametri aggiuntivi.
Fai click su Variabili nella colonna di sinistra e aggiungi una nuova variabile personalizzata per creare una variabile “Cookie proprietario”. Specifica il nome della variabile nel formato “_iub_cs-XXXXXX” (XXXXXX dovrà essere sostituito con il tuo cookiePolicyId) e scegli l’opzione Decodifica in formato URI il cookie.
Ora crea un nuovo attivatore “Non accettato dalla Cookie Law” e scegli Visualizzazione di pagina. Questo nuovo trigger ti consentirà di considerare la presenza del cookie di iubenda come un’eccezione: scegli Alcune visualizzazioni di pagina, indica il cookie di iubenda (la variabile che hai appena creato) come variabile associata e scegli non contiene e “consent”:true come condizione di attivazione.
Infine torna al tuo tag e associa l’eccezione appena creata (andrà ad aggiungersi all’attivatore “Consenso dato”). Per farlo clicca sull’icona della matita nella sezione Attivazione e poi su Aggiungi eccezione.
Ora seleziona l’attivatore appena creato e salva.
Nota: quando si implementa questa configurazione avanzata, ricorda che in caso di modifica del cookiePolicyId la modifica va applicata anche nella configurazione. Per una corretta configurazione, non è necessario né vantaggioso includere il codice di iubenda tramite Google Tag Manager.
Fonte: tagmanageritalia.it/guida-base-gestire-la-cookie-law-di-iubenda-con-google-tag-manager
Se in precedenza sei passato alle configurazioni avanzate subito dopo aver creato e configurato tag e attivatori, prima di continuare con la sezione sottostante assicurati di aver installato gli script di Google Tag Manager e iubenda.
Dopo aver impostato le regole dovrai pubblicare il contenitore per rendere le modifiche effettive sul tuo sito web. Fai click sul pulsante Invia in alto a destra nella pagina della panoramica, quindi conferma.
Questi esempi possono essere riutilizzati per qualsiasi altro script o funzione JavaScript.
