Documentazione

Indice dei contenuti

Come usare Google Tag Manager per bloccare i cookie

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.

Importante

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.

Google Tag Manager - Definizioni contenitore, tag e attivatore
Definizioni di contenitore, tag e attivatore

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.

iubenda cookie demo

Per maggiori dettagli su Google Tag Manager ti rimandiamo alla documentazione ufficiale.

Crea un account

Per prima cosa crea un account gratuito su Google Tag Manager.

Crea un contenitore

Una volta effettuato l’accesso, dovrai creare un contenitore facendo click sul pulsante Crea contenitore:

Google Tag Manager - Crea contenitore
Google Tag Manager - 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:

Google Tag Manager - Area di lavoro

Fai click su Aggiungi un nuovo tag e poi sul blocco Configurazione tag, come mostrato nell’immagine sottostante:

Google Tag Manager - Configurazione tag

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.

Google Tag Manager - Nuova variabile

Ora puoi impostare il tuo tipo di monitoraggio. In questo esempio vogliamo monitorare le visualizzazioni di pagina, quindi selezioniamo Visualizzazione di pagina.

Google Tag Manager - Visualizzazione di pagina

Configura le regole per l’attivazione del tag

Dopo aver impostato i parametri di cui sopra, dobbiamo impostare l’attivatore (le regole che consentiranno agli script di attivarsi). Fai click sul blocco Attivazione:

Google Tag Manager - Attivazione

Fai click sul piccolo segno + in alto a destra per aggiungere un nuovo attivatore. Nella finestra di configurazione seleziona Evento personalizzato.

Google Tag Manager - 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:

Google Tag Manager - Evento personalizzato

Poi salva il tag:

Google Tag Manager - Evento personalizzato

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”.

Note
  • nell’esempio precedente si presuppone di voler attivare il tag su tutte le pagine del sito, se desideri attivarlo su una sola pagina (ad esempio il carrello) vai al primo punto delle configurazioni avanzate.
  • Google supporta ma non consiglia l’aggiunta di più contenitori su una stessa pagina: in caso assicurati di usare lo stesso nome dataLayer per tutti i contenitori, come spiegato qui.
  • Ricorda che se desideri monitorare più di un evento sulla stessa pagina (ad esempio le visualizzazioni e l’invio di un modulo), dovrai creare i tag aggiuntivi e specificare il tipo di monitoraggio. Vedi le specifiche nella sezione dedicata alle configurazioni avanzate.

Installa Google Tag Manager sul tuo sito

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.

Google Tag Manager - Amministrazione
Google Tag Manager - Codice

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.

Installa lo script di iubenda

Segui il percorso dashboard > [il tuo sito] > Cookie Solution e fai click sul pulsante Integra:

Integrazione della Cookie Solution

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": "top"
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Devi adattarlo come indicato di seguito (aggiungendo il riferimento alla funzione onConsentGiven) e inserirlo nelle tue pagine prima della chiusura del tag BODY:

<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": "top"
        },
        "callback": {
            onConsentGiven: function() {
                dataLayer.push({
                    'event': 'iubenda_consent_given'
                });
            }
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

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).

Configurazioni avanzate

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.

Google Tag Manager - Variabili

Crea una variabile “URL” facendo click all’interno del blocco Configurazione variabile:

Google Tag Manager - Variabili

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).

Google Tag Manager - Configurazione attivatore

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”).

Google Tag Manager - Eccezione

Per farlo clicca sulla matita nella sezione Attivazione e poi su Aggiungi eccezione.

Google Tag Manager - 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.

Google Tag Manager - Eccezione

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”).

Google Tag Manager - Configurazione tag transazione

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.

Google Tag Manager - Variabile 'Cookie proprietario'

Fai click su Salva e chiamala ad esempio “Cookieiubenda”.

Google Tag Manager - Rinonima variabile

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.

Google Tag Manager - Attivatore 'Invio modulo'

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.

Google Tag Manager - Attivatore 'Acquisto'

Salva e avrai concluso.

Google Tag Manager - Tag

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.

Google Tag Manager - Variabile Cookie proprietario

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.

Google Tag Manager - Configurazione attivatore

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.

Google Tag Manager - Attivazione

Ora seleziona l’attivatore appena creato e salva.

Google Tag Manager - Tag

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

Pubblica il contenitore

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.

Google Tag Manager - Pubblica il contenitore

Questi esempi possono essere riutilizzati per qualsiasi altro script o funzione JavaScript.