Iubenda logo
Inizia la generazione

Documentazione

Indice dei contenuti

Come integrare la Cookie Solution con Google AMP (WordPress incluso)

Raccogliere il consenso ai cookie per le pagine AMP richiede alcuni accorgimenti tecnici, e iubenda può esserti d’aiuto. In questa guida vedremo gli step da seguire per integrare la Cookie Solution con le Accelerated Mobile Pages di Google, inclusi il blocco dei cookie prima del consenso dell’utente e alcuni suggerimenti per WordPress (ti ricordiamo che il nostro plugin supporta AMP).

Inizieremo da WordPress, essendo la scelta più popolare quando si tratta di AMP. Se non usi WordPress, passa a questa sezione.

iubenda e Google AMP – Come raccogliere il consenso ai cookie su WordPress

Il nostro plugin per WordPress è pienamente compatibile con Google AMP (funziona con entrambi i plugin AMP e AMP for WP), e ti permette di raccogliere facilmente il consenso ai cookie preventivamente bloccati, come richiesto dalla Cookie Law.

1. Installa il nostro plugin Cookie and Consent Solution

Se non l’hai già fatto, installa il nostro plugin per WordPress. Dai un’occhiata alla nostra guida all’installazione per maggiori informazioni.

2. Abilita il supporto a Google AMP

AMP richiede specifici parametri di configurazione e una pagina ospitata sul dominio da cui viene caricata la configurazione.

Ecco perché, una volta aggiunto il codice di integrazione della Cookie Solution e abilitato il supporto a Google AMP, il nostro plugin genererà automaticamente il file di configurazione amp.html (ricordati di impostare a 664 i permessi della cartella “templates” per evitare messaggi di errore).

iubenda Cookie Solution plugin per WordPress - Supporto a Google AMP

3. Blocca i componenti

Come indicato su amp.dev/documentation, una volta abilitato il supporto a Google AMP, aggiungi data-block-on-consent a tutti gli elementi che devono essere bloccati prima di aver ottenuto il consenso dell’utente.

Un paio di note:

  • AMP non è compatibile con il consenso per categoria, pertanto non puoi specificare perPurposeConsent: true nella configurazione quando usi AMP.
  • Se hai abilitato il supporto al Transparency and Consent Framework, tieni presente che per le pagine AMP non devi aggiungere lo script stub-v2.js

All-in-One Cookie e Consent Solution (compatibile con AMP)

Installa il plugin per WordPress

Leggi la guida all’installazione


iubenda e Google AMP – Come raccogliere il consenso ai cookie su siti che non usano WordPress

Se non usi WordPress, segui questa procedura per integrare la Cookie Solution con Google AMP.

1. Crea un file HTML

Come prima cosa copia questo codice e caricalo sul tuo sito HTTPS sotto forma di file HTML (ricordati di modificare i parametri della Cookie Solution in modo da riflettere la tua configurazione):

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="robots" content="noindex">
    <title>AMP Cookie Consent</title>
</head>

<body>
    <script type="text/javascript">
        var _iub = _iub || [];
        _iub.csConfiguration = {
            lang: 'it',
            siteId: 896537, // Usa il tuo siteId
            cookiePolicyId: 8207462, // Usa il tuo cookiePolicyId

            // Tuoi parametri di configurazione 
            enableCMP: true,
            askConsentIfCMPNotFound: true,
            perPurposeConsent: false, // forzato a false perché AMP non lo supporta
            // /Tuoi parametri di configurazione

            banner: {
                position: 'float-bottom-center', // Personalizza come preferisci
                acceptButtonDisplay: true, // Consigliato
                customizeButtonDisplay: true, // Consigliato
                backgroundOverlay: true, // Obbligatorio in quanto AMP richiede il caricamento del cookie banner in un iframe a schermo intero e gli iframe non possono essere cliccati
                rejectButtonDisplay: true // Consigliato
            },
            callback: { // Obbligatoria
                onPreferenceExpressed: function(preference) {
                    var AMP_CONSENT_STRING_MAX_LENGTH = 1024;
                    var consentObject = {
                        type: 'consent-response',
                        action: preference && preference.consent ? 'accept' : 'reject'
                    };

                    if (typeof window.__tcfapi === 'function') {
                        __tcfapi('getTCData', 2, function(res) {
                            var consentString = res.tcString;

                            if (consentString.length <= AMP_CONSENT_STRING_MAX_LENGTH) {
                                consentObject.info = consentString;
                            }

                            console.log('send consent-response', consentObject.action, 'with CMP v2 consent string', consentString);
                            window.parent.postMessage(consentObject, '*');
                        });
                    } else if (typeof window.__cmp === 'function') {
                        __cmp('getConsentData', null, function(res) {
                            var consentString = res.consentData;

                            if (consentString.length <= AMP_CONSENT_STRING_MAX_LENGTH) {
                                consentObject.info = consentString;
                            }

                            console.log('send consent-response', consentObject.action, 'with CMP consent string', consentString);
                            window.parent.postMessage(consentObject, '*');
                        });
                    } else {
                        console.log('send consent-response', consentObject.action);
                        window.parent.postMessage(consentObject, '*');
                    }
                }
            }
        };
    </script>
    <script async src="https://cdn.iubenda.com/cs/iubenda_cs.js"></script>
</body>
</html>
Cookie Solution, AMP e TCF

Se hai abilitato il supporto al Transparency and Consent Framework, tieni presente che per le pagine AMP non devi aggiungere lo script stub-v2.js

In produzione, puoi caricare questo file:

Ambiente di sviluppo

Poiché AMP non consente di caricare iframe dallo stesso dominio, se carichi questo file sullo stesso dominio da cui si serve la pagina AMP, non verrà mostrato nessun cookie banner. Il problema si pone solo in fase di sviluppo, in quanto in uno scenario “reale” la pagina verrà caricata direttamente da Google e mai dallo stesso dominio.

Ad ogni modo, per ovviare a questo inconveniente in fase di sviluppo, ospita il file HTML su un dominio/sottodominio diverso (ad esempio, se il tuo dominio principale è www.iltuosito.com, puoi ospitare il file su amp.iltuosito.com). Se preferisci, in alternativa a un sottodominio puoi fare un redirect www/non-www.

Tieni inoltre presente che l’iframe andrà caricato su un sito dotato di protocollo HTTPS.

2. Modifica le tue pagine AMP

Ora aggiungi alle tue pagine AMP questo <amp-consent>:

<amp-consent id="myUserConsent" layout="nodisplay">
    <!--
      È preferibile impostare il consent ID come "consent" + site ID
      Per richiedere il consenso ai soli utenti UE sostituisci "consentRequired": true con "promptIfUnknownForGeoGroup": "eu" 
    -->
    <script type="application/json">
        {
            "consentInstanceId": "consent896537", //"consent" + site ID
            "consentRequired": "remote",
            "checkConsentHref": "https://amp.iubenda.com/cs/amp/checkConsent",
            "promptUI": "myConsentFlow"
        }
    </script>
    <div id="myConsentFlow" class="popupOverlay">
        <!--
            Modifica l'attributo src con l'indirizzo della pagina con la Cookie Solution per AMP.
            Nota: devi utilizzare il protocollo HTTPS
            Vedi https://cdn.iubenda.com/cs/test/cs-for-amp.html per un esempio di configurazione di una pagina che integra la Cookie Solution
      	-->
        <amp-iframe layout="fill" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" src="https://cdn.iubenda.com/cs/test/cs-for-amp.html">
            <div placeholder>Loading</div>
        </amp-iframe>
    </div>
</amp-consent>

A seguire includi questo setup all’interno dell’head:

<!-- ## Setup -->
<!-- Includiamo `amp-consent` ... -->
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-latest.js"></script>
<!-- ... e l'estensione `amp-iframe` -->
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-latest.js"></script>
<!-- `amp-geo` per chiedere il consenso solo agli utenti UE -->
<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-latest.js"></script>
<style amp-custom>
    .popupOverlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    amp-iframe {
        margin: 0;
    }

    amp-consent.amp-active {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
    }
</style>
<!-- /Setup -->

Note:

  • Aggiungi amp-geo solo se vuoi limitare la raccolta dei consensi all’UE.
  • Se queste risorse sono già state aggiunte alla pagina, otterrai un innocuo messaggio di errore.
Stringa di consenso e fornitori pubblicitari di terza parte

Per recuperare la stringa di consenso su AMP, i fornitori pubblicitari di terza parte possono usare context.initialConsentValue

3. Blocca i componenti

Come indicato su amp.dev/documentation, aggiungi data-block-on-consent a tutti gli elementi che devono essere bloccati prima di aver ottenuto il consenso dell’utente.

Attenzione

AMP non è compatibile con il consenso per categoria, pertanto non puoi specificare perPurposeConsent: true nella configurazione quando usi AMP.

Leggi anche