Iubenda logo

Documentazione

Indice dei contenuti

Come gestire i cookie a fini pubblicitari e statistici tramite Google Consent Mode

Per aiutare gli editori a gestire i cookie a fini pubblicitari e statistici, Google ha introdotto il Consent Mode, una funzionalità che consente di regolare il comportamento dei tag di Google in base alle preferenze di consenso degli utenti.

Non confondere il Consent Mode con l’Additional Consent Mode, una funzione che permette di raccogliere il consenso per i partner pubblicitari di Google che non hanno ancora aderito al Transparency and Consent Framework, ma che sono presenti nella lista dei fornitori di tecnologia pubblicitaria di Google.

Grazie a Consent Mode puoi indicare se il consenso è stato prestato per i cookie a fini pubblicitari e statistici. I nuovi tag di Google ad_storage e analytics_storage si adatteranno automaticamente, limitandosi a usare solo i cookie relativi alle finalità per le quali l’utente ha prestato il consenso:

  • se il consenso è stato prestato, i tag relativi funzioneranno regolarmente;
  • se il consenso per ad_storage e analytics_storage viene negato, i relativi tag usati da gtag.js o Google Tag Manager regoleranno il proprio comportamento di conseguenza.

Se ad esempio un utente non fornisce il consenso per i cookie pubblicitari, ma solo per quelli statistici, potrai comunque misurare le conversioni tramite Analytics, in quanto l’impostazione analytics_storage sarà attiva.

Il Consent Mode è supportato da:

  • Google Ads (incluso Google Ads Conversion Tracking and Remarketing)
  • Google Analytics
  • Floodlight
  • Conversion Linker

Consent Mode richiede gtag.js o Google Tag Manager per funzionare. Se usi una libreria obsoleta come ga.js, analytics.js o conversion.js, dovrai prima passare a gtag.js oppure Google Tag Manager.

Google Consent Mode e iubenda Cookie Solution – Esempi di implementazione

Potresti voler usare il Consent Mode come alternativa al blocco preventivo. Per implementarlo tramite la nostra Cookie Solution dovrai:

  • modificare il codice del tuo tag globale del sito (gtag.js) o del tuo contenitore di Tag Manager, e
  • aggiungere una callback al tuo codice di integrazione della Cookie Solution

Vediamo come fare con un paio di esempi, uno asincrono (con performance migliori) e l’altro sincrono.

Esempio asincrono

1. Inizializza il livello dati per Google Tag Manager

Se usi Google Analytics, probabilmente hai queste righe di codice all’interno dell’<head> delle tue pagine:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
</script>

Devono diventare:

<script>
    // Initialize the data layer for Google Tag Manager (this should mandatorily be done before the Cookie Solution is loaded)
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    // Default consent mode is "denied" for both ads and analytics, but delay for 2 seconds until the Cookie Solution is loaded
    gtag("consent", "default", {
        ad_storage: "denied",
        analytics_storage: "denied",
        wait_for_update: 2000 // milliseconds
    });

    // Further redact your ads data (optional)
    gtag("set", "ads_data_redaction", true);
    
    // Google Tag Manager
    (function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-XXXXXX'); //replace GTM-XXXXXX with the ID of your Google Analytics property
</script>

Riduci i dati degli annunci

Come puoi vedere da questa riga:

gtag("set", "ads_data_redaction", true);

Abbiamo scelto di ridurre ulteriormente i dati degli annunci quando ad_storage è 'denied'. Infatti, quando ads_data_redaction è settato a true e ad_storage è 'denied', gli identificativi degli annunci inviati dai relativi tag Google Ads e Floodlight vengono cancellati. Inoltre, le richieste di rete vengono inviate tramite un dominio privo di cookie.

Tieni presente che senza questa riga facoltativa, alcuni cookie potrebbero essere installati.

2. Configura le impostazioni di consenso

Dopo aver inizializzato il livello dati per Google Tag Manager, devi configurare le impostazioni di consenso:

<script>
    var consentUpdated = false;

    // Update the existing consent
    function updateConsent(ad_storage, analytics_storage) {
        gtag("consent", "update", {
            ad_storage: ad_storage ? "granted" : "denied",
            analytics_storage: analytics_storage ? "granted" : "denied"
        });
        consentUpdated = true;
    }
</script>

3. Aggiungi una callback alla tua Cookie Solution

Infine, devi aggiungere una callback al tuo codice di integrazione della Cookie Solution. Così facendo sarai in grado di chiamare il comando di aggiornamento una volta che cambia il consenso:

<script>    
    var _iub = _iub || [];
    
    _iub.csConfiguration = {
        lang: "en",
        siteId: 12345678, //use your siteId
        cookiePolicyId: 12345678, //use your cookiePolicyId
        ...
        callback: {
            onReady: function() {
                if (!consentUpdated) {
                    // Consent is needed and the user has not expressed his preference yet
                    updateConsent(false, false);
                }
            },
            onPreferenceExpressedOrNotNeeded: function(preferences) {
                var ad_storage = false;
                var analytics_storage = false;
                if (preferences) {
                    // Consent is needed and the user has expressed his preference
                    if (preferences.purposes) {
                        analytics_storage = preferences.purposes[4];
                        ad_storage = preferences.purposes[5];
                    } else {
                        analytics_storage = ad_storage = preferences.consent;
                    }
                    updateConsent(ad_storage, analytics_storage);
                } else {
                    // Consent is not needed
                    updateConsent(true, true);
                }
            }
        }
    };
</script>
<script src="https://cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Riepilogando:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
    // Initialize the data layer for Google Tag Manager (this should mandatorily be done before the Cookie Solution is loaded)
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    // Default consent mode is "denied" for both ads and analytics, but delay for 2 seconds until the Cookie Solution is loaded
    gtag("consent", "default", {
        ad_storage: "denied",
        analytics_storage: "denied",
        wait_for_update: 2000 // milliseconds
    });

    // Further redact your ads data (optional)
    gtag("set", "ads_data_redaction", true);
    
    // Google Tag Manager
    (function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-XXXXXX'); //replace GTM-XXXXXX with the ID of your Google Analytics property

    var consentUpdated = false;

    // Update the existing consent
    function updateConsent(ad_storage, analytics_storage) {
        gtag("consent", "update", {
            ad_storage: ad_storage ? "granted" : "denied",
            analytics_storage: analytics_storage ? "granted" : "denied"
        });
        consentUpdated = true;
    }
</script>

<!-- iubenda Cookie Solution -->
<script>    
    var _iub = _iub || [];
    
    _iub.csConfiguration = {
        lang: "en",
        siteId: 12345678, //use your siteId
        cookiePolicyId: 12345678, //use your cookiePolicyId
        countryDetection: true,
        perPurposeConsent: true,
        purposes: "1,4,5",
        consentOnContinuedBrowsing: false,
        banner: {
            position: "float-top-center",
            acceptButtonDisplay: true,
            customizeButtonDisplay: true,
            rejectButtonDisplay: true
        },
        callback: {
            onReady: function() {
                if (!consentUpdated) {
                    // Consent is needed and the user has not expressed his preference yet
                    updateConsent(false, false);
                }
            },
            onPreferenceExpressedOrNotNeeded: function(preferences) {
                var ad_storage = false;
                var analytics_storage = false;
                if (preferences) {
                    // Consent is needed and the user has expressed his preference
                    if (preferences.purposes) {
                        analytics_storage = preferences.purposes[4];
                        ad_storage = preferences.purposes[5];
                    } else {
                        analytics_storage = ad_storage = preferences.consent;
                    }
                    updateConsent(ad_storage, analytics_storage);
                } else {
                    // Consent is not needed
                    updateConsent(true, true);
                }
            }
        }
    };
</script>
<script src="https://cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
    // Define the gtag() function prior to your gtag.js or Tag Manager snippet. This should mandatorily be done before the Cookie Solution is loaded
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    // Further redact your ads data (optional)
    gtag("set", "ads_data_redaction", true);

    // Prepare Google Tag Manager but don't load it yet (it has to be loaded after the Cookie Solution)
    (window.loadgtm = function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    });
    
    var consentCommand = "default";

    // Set the default consent mode or update the existing consent
    function updateConsent(ad_storage, analytics_storage, command) {
        gtag("consent", command || consentCommand, {
            ad_storage: ad_storage ? "granted" : "denied",
            analytics_storage: analytics_storage ? "granted" : "denied"
        });
        consentCommand = "update";
    }
</script>

<!-- iubenda Cookie Solution -->
<script>
    var _iub = _iub || [];

    _iub.csConfiguration = {
        lang: "en",
        siteId: 12345678, //use your siteId
        cookiePolicyId: 12345678, //use your cookiePolicyId
        countryDetection: true,
        perPurposeConsent: true,
        purposes: "1,4,5",
        consentOnContinuedBrowsing: false,
        banner: {
            position: "float-top-center",
            acceptButtonDisplay: true,
            customizeButtonDisplay: true,
            rejectButtonDisplay: true
        },
        callback: {
            onReady: function() {
                if (consentCommand === "default") {
                    // Consent is needed and the user has not expressed his preference yet
                    updateConsent(false, false);
                }
                // Load GTM 
                window.loadgtm(window, document, 'script', 'dataLayer', 'GTM-XXXXXX'); //replace GTM-XXXXXX with the ID of your Google Analytics property
            },
            onPreferenceExpressedOrNotNeeded: function(preferences) {
                var ad_storage = false;
                var analytics_storage = false;
                if (preferences) {
                    // Consent is needed and the user has expressed his preference
                    if (preferences.purposes) {
                        analytics_storage = preferences.purposes[4];
                        ad_storage = preferences.purposes[5];
                    } else {
                        analytics_storage = ad_storage = preferences.consent;
                    }
                } else {
                    // Consent is not needed
                    ad_storage = true;
                    analytics_storage = true;
                }
                updateConsent(ad_storage, analytics_storage, 'update');
            }
        }
    };
</script>
<script src="https://cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Per saperne di più sul Consent Mode, dai un’occhiata al Google Analytics Help o alla Global Site Tag guide.

Leggi anche