Consenso cookies

Open2b fornisce strumenti integrati che facilitano la raccolta del consenso per i cookie, e altri sistemi di traccimento, e permettono di abilitarne il blocco preventivo con riattivazione asincrona una volta che il consenso è stato dato.

• Tenere traccia del consenso dato o negato
• Bloccare preventivamente il codice di tracciamento

Tenere traccia del consenso

In qualsiasi pagina del template si può chiamare la funzione JavaScript Open2b.trackingConsent per tenere traccia della scelta dell'utente, se ha dato o rifiutato il consenso, e per verificarne lo stato.

A seguire si vedrà come utilizzare questa funzione per implementare facilmente un proprio cookie banner.

Quando l'utente dà il proprio consenso, ad esempio proseguendo con la navigazione o facendo clic su un pulsante "accetta", si può registrare questo consenso:

Open2b.trackingConsent(true);

Il consenso registrato verrà mantenuto per tutta la sessione.

Allo stesos modo, se l'utente nega il proprio consenso, ad esempio perché fa clic su un pulsante "rifiuta", si può registrare il rifiuto al trattamento:

Open2b.trackingConsent(false);

In quasiasi momento e da qualsiasi pagina si può verificare se il consenso è stato dato oppure negato:

Open2b.trackingConsent().then(function(given) {
    if ( given ) {
        // il consenso è stato dato.
    } else {
        // il consenso è stato negato.
    }
});

Open2b.trackingConsent chiamata senza argomento ritorna una promise che è pending fintanto che il consenso non viene dato o negato. Se al momento della chiamata il consenso è già stato dato o negato, la promise si risolve subito.

Esempio

Il seguente è un semplice cookie banner che richiede un consenso esplicito all'utente e chiama la funzione Open2b.trackingConsent per tenere traccia del consenso dato.

<div class="cookie-banner">
  <div>Dai il consenso al tracciamento?</div>
  <div class="buttons">
    <button onclick="Open2b.trackingConsent(true)">Consenti</button>
    <button onclick="Open2b.trackingConsent(false)">Nega</button>
  </div>
</div>

Bloccare preventivamente il codice di tracciamento

Per bloccare preventivamente il codice di tracciamento e abitarlo in modo asincrono se e quando l'utente ha dato il consenso si può racchiude il codice HTML in questione all'interno di uno o più elementi template con attributo data-cookie-consent:

<template data-cookie-consent>
  <!-- qui va messo il codice da bloccare preventivamente -->
</template>

Il codice all'interno di un elemento template non viene renderizzato dal browser (a parte le immagini come vedremo in seguito) e pertanto il codice che contiene è "bloccato". Per sbloccarlo basta che venga chiamata, o sia già stata chiamata in un momento precedente della navigazione, la funzione Open2b.trackingConsent con argomento true.

Esempio

Si deve mettere nelle pagine del sito il codice di tracciamento di Analytics e si vuole che venga bloccato fintanto che l'utente non ne da il consenso. Si metterà quindi il codice di Analytics all'interno di un elemento template con l'apposito attributo data-cookie-consent:

<template data-cookie-consent>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'GA_MEASUREMENT_ID');
  </script>

</template>

Il codice di Analytics sarà pertanto bloccato fintanto che non viene chiamata Open2b.trackingConsent con argomento true, ossia non viene dato il consenso, e questo può essere fatto tramite un proprio cookie banner o installando l'app Cookie Policy presente nel App Store nel gestionale.

Una volta dato il consenso, durante tutta la sessione di navigazione sul sito il codice dentro template verrà automaticamente sbloccato.

Ordine di sblocco

Gli elementi bloccati vengono sbloccati in ordine di apparizione nella pagina. Quando viene sbloccato un elemento script con attributo src gli elementi successivi all'interno dello stesso elemento template sono sbloccati sono quando lo script è stato caricato ed eseguito. Se si verifica un errore nel suo caricamento o nella sua esecuzione, gli elementi successivi non sono sbloccati.

Questa dipendenza tra gli elementi di uno stesso elemento template si può estendere anche ad altri elementi nella pagina. Se due elementi template hanno lo stesso valore per l'attributo data-cookie-consent, come ad esempio:

<template data-cookie-consent="analytics">
  <script src="//track.analytics.com/visit.js"></script>
  <script>h('visit');</script>
</template>

<template data-cookie-consent="analytics">
  <script>h('order');</script>
</template>

allora un singolo non verrà sbloccato fintanto che tutti i precedenti non lo sono. Nell'esempio precedente il codice <script>h('order');</script> non verrà sbloccato fintanto che <script src="//track.analytics.com/visit.js"></script> non è sbloccato.

Immagini

Se il codice di tracciamento contiene un'immagine allora è importante anche rinominare l'attributo src del tag img in data-src. Questo perché il browser Firefox carica l'immagine anche il suo tag si trova dentro un elemento template. Nel momento in cui il tag img viene sbloccato, l'attributo data-src verrà rinominato in src e l'immagine potrà essere caricata.

Ad esempio, il seguente codice di tracciamento

<img src="https://www.tracking.com/track.png">

potrà essere aggiunto alla pagina di template in questo modo

<template data-cookie-consent>
  <img data-src="https://www.tracking.com/track.png">
</template>