Documentazione

Indice dei contenuti

Come integrare la Cookie Solution con AMP

Questa guida mostra come integrare iubenda con le pagine AMP, incluso il blocco dei cookie prima di aver ottenuto consenso dell’utente.

1. Crea un file HTML

Come prima cosa copia questo codice e caricalo sul tuo sito 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">
    <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: { // Mandatory
                onPreferenceExpressed: function(preference) {
                    var consentAction = 'reject';
                    if (preference && preference.consent) {
                        consentAction = 'accept';
                    }
                    console.log('send consent-response', consentAction);
                    window.parent.postMessage({
                        type: 'consent-response',
                        action: consentAction
                    }, '*');
                }
            }
        };
    </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).

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",
            "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-0.1.js"></script>
<!-- ... e l'estensione `amp-iframe` -->
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.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-0.1.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 presto supporterà 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.