Iubenda logo

Documentazione

Indice dei contenuti

Come integrare la Cookie Solution con AMP

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, incluso il blocco dei cookie prima di aver ottenuto consenso dell’utente (e alcuni suggerimenti per WordPress).

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,
            isTCFConsentGlobal: true,
            googleAdsPreferenceManagement: true,
            // /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 consentAction = 'reject';
                    var consentObject = {
                        type: 'consent-response'
                    };

                    if (preference && preference.consent) {
                        consentAction = 'accept';
                    }

                    consentObject.action = consentAction;

                    if (_iub.cs.options.enableCMP) {
                        __cmp('getConsentData', null, function(res) {
                            var consentString = res.consentData;

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

                            console.log('send consent-response', consentAction, 'with CMP consent string', consentString);

                            window.parent.postMessage(consentObject, '*');
                        });
                    } else {
                        console.log('send consent-response', consentAction);

                        window.parent.postMessage(consentObject, '*');
                    }
                }
            }
        };
    </script>
    <script async src="https://cdn.iubenda.com/cs/beta/iubenda_cs.js"></script>
</body>
</html>

Questo file deve essere ospitato o sullo stesso dominio o su un sottodominio, a meno che non si abilitino remoteConsent e isTCFConsentGlobal (se hai attivato lo IAB Transparency and Consent Framework). In tal caso, è possibile utilizzare anche un dominio diverso.

Poiché AMP non consente di caricare iframe dallo stesso dominio, caricando questo file sullo stesso dominio da cui si serve la pagina AMP non verrà mostrato il cookie banner. Non si tratta comunque di un problema insormontabile, in quanto una volta cliccato sui risultati di ricerca, le pagine AMP vengono caricate direttamente da Google. Il problema si pone solo in fase di sviluppo quindi, quando il sito non è ancora in produzione.

Ad ogni modo, per ovviare a questo inconveniente basta ospitare 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). Questo approccio funziona anche facendo un redirect da un sottodominio al dominio principale, se il file risiede sul dominio principale (puoi anche fare un redirect www/non-www per evitare di creare sottodomini).

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": true,
            "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.

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 supporta il consenso per categoria.

Suggerimenti per WordPress

💡 Il nostro plugin per WordPress supporta anche AMP.

Alcuni consigli:

  • Per caricare un file HTML in WordPress potresti voler utilizzare File Manager.
  • Se non riesci a includere il blocco amp-consent con il plugin ufficiale di AMP, prova con questo.
  • Usa il plugin Code Snippets per aggiungere un “hook” a functions.php ed evitare che lo script amp-iframe venga incluso due volte nelle pagine in cui il plugin di AMP rileva un iframe:
add_filter('amp_post_template_data', function($data) {
    $data['amp_component_scripts'] = array_merge($data['amp_component_scripts'], array('amp-iframe' => 'https://cdn.ampproject.org/v0/amp-iframe-latest.js'));
    return $data;
});
  • Puoi aggiungere il resto della configurazione direttamente nelle impostazioni del plugin (Settings > Advanced Settings).
  • Aggiungi il tuo CSS in AMP > Design > Global. Per essere considerati validi, script e stili devono essere inclusi nell’head, e style deve essere dichiarato solo una volta: prendi in considerazione l’idea di utilizzare un CSS esterno.

Leggi anche