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

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

<!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>

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://cdn.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.

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