Documentazione

AMP-HTML: Mostrare il cookie banner

Poiché AMP limita ciò che può essere fatto con il codice di terze parti, è necessario ricorrere a qualche “espediente” per poter assecondare le richieste della Cookie Law. Questa guida mostra come mostrare un cookie banner utilizzando il tag amp-user-notification e configurare il blocco preventivo in 2 casi.

Attenzione

Quello che segue è un modo alternativo per mostrare la cookie bar in una pagina AMP. Non implica in alcun modo la Cookie Solution di iubenda: come puoi immaginare non abbiamo alcuna voce in capitolo sull’evoluzione del progetto AMP e sui cambiamenti a cui potresti essere soggetto.

Configurazione iniziale

Includi gli script amp-user-notification e amp-analitycs nell’header, entrambi necessari:

<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Aggiungi l’amp-user-notification nel body:

<amp-user-notification id="notification1" layout="nodisplay">
    <div>
        Questo è un elemento amp-user-notification.
        <button on="tap:notification1.dismiss">Accetto</button>
    </div>
</amp-user-notification>

Attributi opzionali:

  • data-show-if-href => una richiesta GET all'url specificato determinerà se la notifica deve essere mostrata (verranno trasmesse nell'url 2 variabili di default: elementId e ampUserId).
  • data-dismiss-href => verrà eseguita una richiesta POST all'URL specificato dopo che l'utente avrà accettato (come impostazione predefinita verranno trasmesse le variabili elementId e ampUserId).
  • data-persist-dismissal => di default true. Se false, la notifica verrà mostrata sempre.

Nota:

  • Essendo consentiti più elementi amp-user-notification è necessario usare un id per differenziarli.
  • Per chiudere un elemento amp-user-notification, aggiungi l'attributo on a un pulsante sfruttando la sintassi event:idElementoAMPUserNotification.dismiss.
  • Il componente amp-user-notification dovrebbe sempre avere layout=nodisplay e sarà posizionato a footer tramite position:fixed (il valore di default è bottom:0, ma può essere sovrascritto).

Stilizzare il banner

Tramite CSS puoi cambiare l'aspetto del banner proprio come faresti con qualsiasi altro elemento della pagina. Ecco un esempio dalla documentazione AMP ufficiale:

Componente

<amp-user-notification id="my-notification" layout="nodisplay">
    <div>
        This is an amp-user-notification. It uses local storage to store the dismissed state.
        <button on="tap:my-notification.dismiss" class="ampstart-btn caps ml1">I accept</button>
    </div>
</amp-user-notification>

CSS

<style amp-custom>
    amp-user-notification > div {
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

AMP banner
Screenshot dalla documentazione ufficiale

Una configurazione alternativa, più in linea con lo stile di iubenda:

Componente

<amp-user-notification id="my-notification" layout="nodisplay">
    <div>
        Questo sito o gli strumenti terzi da questo utilizzati si avvalgono di cookie necessari al funzionamento e utili alle finalità illustrate nella <a href="">cookie policy</a>. Cliccando su "Accetto" acconsenti all'uso dei cookie.
        <button on="tap:my-notification.dismiss" class="ampstart-btn caps ml1">Accetto</button>
    </div>
</amp-user-notification>

CSS

<style amp-custom>
    amp-user-notification > div {
        font: 14px/1.5 Helvetica, Arial, sans-serif;
        color: #fff;
        background: #000;
        padding: 1rem;
    }
    
    amp-user-notification > div a {
        color: #fff;
    }
</style>

Cookie banner di iubenda per AMP
Stile più vicino alla Cookie Solution di iubenda

Come usare questa configurazione

Ogni elemento da bloccare deve avere l'attributo data-consent-notification-id="amp-user-notification id" (per una lista di tutti i componenti AMP-HTML: ampproject.org/docs/reference/components).

Esempio

Basandoci su quanto detto poco sopra, ecco come bloccare gli elementi:

amp-analytics

<amp-analytics type="XYZ" data-consent-notification-id="Stesso id dell'amp-user-notification"> ... </amp-analytics>

amp-ad

<amp-ad width="123" height="123" type="XYZ" data-consent-notification-id="Stesso id dell'amp-user-notification"></amp-ad>

Limiti di questa configurazione

Al momento sono solo 2 i componenti che accettano l'attributo data-consent-notification-id:

  • amp-ad
  • amp-analytics

Come evitare di dover mostrare il cookie banner

Esiste uno scenario che prevede l'utilizzo della tecnologia AMP-HTML secondo cui la presenza di una cookie bar potrebbe non essere necessaria. Questi i prerequisiti:

  • il proprietario di un sito web ha una normale pagina HTML per la quale decide di fornire una versione ottimizzata AMP;
  • nella pagina originale si farà riferimento alla versione AMP grazie al seguente markup (come da documentazione):
<link rel="amphtml" href="http://www.example.com/url/to/amp/document.html">
  • quando arriva sul sito, NON stai inviando l'utente direttamente alla pagina AMP, né stai fornendo alcun collegamento diretto a quella pagina.

Ecco cosa succede dopo la pubblicazione di /url/to/amp/document.html:

  • gli spider di Google analizzano il tuo sito web, trovano i riferimenti alle pagine AMP (<link rel="amphtml" />) e li memorizzano nella cache;
  • quando Google propone una pagina del tuo sito web tra i risultati di ricerca, il link è in realtà un collegamento alla versione AMP memorizzata nella cache, e non alla pagina effettiva ospitata nel tuo sito web.

Essendo Google il fornitore della versione AMP, il proprietario del sito web (in questo caso, tu) non è più responsabile della notifica dei cookie e potrebbe potenzialmente prendere in considerazione la rimozione di qualsiasi tecnologia intesa a svolgere tali attività.

Avvertenza

Quanto brevemente delineato poco sopra è valido solo in linea di principio. Di fatto, poiché Google conosce la posizione della tua pagina AMP, potrebbe iniziare a fornire l'url della tua pagina AMP originale (ospitata nei tuoi server) anziché quella memorizzata nella cache (ospitata nei loro server) nei risultati di ricerca.

Non c'è modo di controllare questo aspetto: per ovviare al problema potresti valutare l'idea di ricorrere allo sniffing dello userAgent e reindirizzare tutto ciò che non è il bot di Google alla versione "normale" delle pagine.

In breve

Se vuoi essere in grado di controllare tutto ciò che accade nelle tue pagine, probabilmente dovresti evitare di usare AMP-HTML per il momento. Tuttavia, se hai bisogno di usarlo, la tecnica sopra descritta ti consente di bloccare 2 componenti:

  • Analytics
  • Ads

Non potendo garantirne l'efficacia, vogliamo sottolineare che la sezione "Come evitare di dover mostrare il cookie banner" potrebbe non essere necessariamente la strada corretta.

Segnaliamo infine che Google Tag Manager incorpora funzionalità AMP tramite il contenitore AMP. Maggiori dettagli nel blog di Google Analytics.