Banner e raccolta del consenso – Installazione e personalizzazione (legacy)

Caratteristiche del banner

• Si implementa inserendo un semplice codice in tutte le pagine del sito
• Mostra un banner con un testo predefinito e personalizzabile e riporta un link alla cookie policy
• È ottimizzato per risoluzioni e device multipli
• Si assicura che la consultazione della cookie policy possa avvenire senza che il consenso venga fornito
• Si assicura che il blocco dei codici funzioni correttamente – vedi la guida introduttiva alla configurazione del blocco dei codici per ulteriori informazioni al riguardo
• Raccoglie la preferenza tramite proseguimento della navigazione, ad esempio lo scroll
• Allo scroll o al proseguimento della navigazione, attiva in modo asincrono (ovvero senza ricaricare la pagina) tutti gli script precedentemente bloccati
• Se la preferenza era stata già fornita, il banner non compare e gli script vengono eseguiti in modo automatico

Installazione

Installazione generica

Per abilitare Privacy Controls and Cookie Solution di iubenda è sufficiente inserire il seguente codice in tutte le pagine del proprio sito, prima della chiusura del tag HEAD.

<script type="text/javascript">
  var _iub = _iub || [];
  _iub.csConfiguration = {
    cookiePolicyId: XxX,
    siteId: YyY,
    lang: "en"
  };
  (function (w, d) {
    var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/cookie_solution/iubenda_cs.js"; tag.parentNode.insertBefore(s, tag); };
    if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; }
  })(window, document);
</script>

Installazione su WordPress

Se usi WordPress, Privacy Controls and Cookie Solution di iubenda può essere configurata ad esempio aprendo il file header.php del tema in uso ed inserendo il codice di base – come quello dell’esempio in alto – prima della chiusura del tag HEAD.

In alternativa, per WordPress abbiamo anche pubblicato un plugin dedicato. Per maggiori informazioni, consulta la guida completa al plugin WordPress di iubenda per automatizzare il blocco codici.

Installazione su Joomla!

Per configurare Privacy Controls and Cookie Solution di iubenda su Joomla! è possibile ad esempio installare un modulo come il Custom HTML advanced module. Qui c’è un articolo che spiega come utilizzare questo modulo per installare sul sito la privacy policy generata con iubenda. Anche se l’esempio specifico non riguarda Privacy Controls and Cookie Solution di iubenda, il processo è identico. Ti ricordiamo che come sempre il codice di Privacy Controls and Cookie Solution va inserito prima della chiusura del tag HEAD.

In alternativa, anche per Joomla! è disponibile un plugin dedicato. Per maggiori informazioni, consulta la guida completa al plugin Joomla! di iubenda per automatizzare il blocco codici.

Configurazione

Parametri disponibili _iub.csConfiguration {}:

Parametri obbligatori

siteId: – Il codice identificativo (ID) del tuo sito. Nota: questo ID viene utilizzato per condividere la preferenza fra più cookie policy in lingue diverse che siano però riconducibili allo stesso sito/app.

cookiePolicyId: – Il codice identificativo (ID) della tua cookie policy.

lang: – Questo parametro definisce la lingua in cui mostrare il contenuto presente all’interno del cookie banner (ad esempio, “it” per l’italiano, “en” per l’inglese, “es” per lo spagnolo ecc.). Sono disponibili per il contenuto del cookie banner le localizzazioni linguistiche relative a tutte le lingue in cui è possibile generare privacy/cookie policy con iubenda.

Parametri facoltativi

priorConsent: (boolean, default true) – abilita il blocco degli script e la loro riattivazione solo dopo aver raccolto il consenso. Se false, gli script sottoposti a blocco vengono sempre attivati indipendentemente dal fatto che il consenso sia o meno stato fornito (si sconsiglia fortemente di impostare priorConsent su false se si vuole essere a norma con la legislazione cookie UE e con la legislazione italiana, a meno che non si utilizzi consapevolmente la Light Privacy Controls and Cookie Solution, che richiede di impostare priorConsent: false).

Nota che se l’impostazione “Consenso preventivo” è disabilitata direttamente nel tuo pannello di configurazione di Privacy Controls and Cookie Solution su iubenda.com, questo parametro di configurazione sarà inefficace.

consentOnScroll: (boolean, default true) – È possibile settare questo parametro su false per evitare la registrazione del consenso dell’utente allo scrolling della pagina.

consentOnButton: (boolean, default true) – Il consenso dell’utente viene registrato di norma anche in presenza di un click su un pulsante (button) presente sulla pagina, oltre che sui link (a). Il parametro consentOnButton, settato su false, modifica il comportamento standard facendo in modo che in questi casi il consenso non risulti prestato.

consentOnElement: (string, default “input, textarea, form”) – Il consenso dell’utente viene registrato in presenza di un click su uno degli element html elencati nel parametro. Diversamente da consentOnButton (vedi sopra), l’opzione non gestisce i tag a e button. Importante: qualora vengano aggiunti dei nuovi element html ma si vuole che gli element di default siano ancora attivi, bisogna dichiararli nuovamente.

consentOnDocument: (boolean, default false) – Se impostato su true, il consenso dell’utente viene registrato in presenza di un click su un punto qualsiasi della pagina (esclusa l’area del banner).

consentOnScrollHorizontal: (boolean, default false) – Settando questo parametro su true, si fa in modo che il consenso venga dato anche in caso di scrolling orizzontale.

consentOnScrollOnElement: (DOMElement, default window.document) – L’evento di scrolling viene osservato sull’elemento passato come parametro. L’elemento DOM potrebbe essere non ancora disponibile al momento dell’inizializzazione di Privacy Controls and Cookie Solution. In tal caso è possibile utilizzare il metodo API setConsentOnScrollOnElement.

reloadOnConsent: (boolean, default false) – È possibile settare questo parametro su true se si vuole che la pagina venga ricaricata dopo aver raccolto il consenso dell’utente.

localConsentDomain: (string, default null) – Il domino sul quale si vuole che venga salvato il consenso fornito dall’utente. Se questo parametro non viene settato, il consenso viene salvato di default in un cookie nel dominio di secondo livello della pagina corrente (ad esempio, visitando www.example.com, il consenso viene salvato in un cookie nel dominio example.com). Nel caso in cui il comportamento di default non sia adeguato, ad esempio se il sito è www.paesaggiurbani.italia.it e il consenso deve essere fornito per paesaggiurbani.italia.it (e non per italia.it), occorre settare il localConsentDomain col valore paesaggiurbani.italia.it

Nota: qualora in uno scenario analogo a quello descritto con l’esempio www.paesaggiurbani.italia.it il parametro localConsentDomain non dovesse essere fornito, il banner potrebbe continuare a comparire al medesimo utente ad ogni successiva visita/visualizzazione di pagina.

localConsentPath: (string, default ‘/’) – Il path nel quale si vuole che venga salvato, nel dominio locale, il consenso fornito dall’utente. Di default, il consenso fornito dall’utente viene salvato nel dominio locale in un cookie nel path ‘/’. In questo modo il cookie è disponibile qualunque sia la pagina del dominio cui si accede. Se invece si vuole, ad esempio, che il cookie di preferenza settato per www.example.com/percorso1 non sia accessibile navigando su www.example.com/percorso2, e viceversa, occorrerà fornire a questo parametro il valore /percorso1 nel primo caso ed il valore /percorso2 nel secondo caso.

enableRemoteConsent: (boolean, default false) – È possibile settare questo parametro su true per abilitare la registrazione del consenso cross-site (utile ad esempio quando lo script viene implementato su più siti del medesimo network). In particolare, con questo parametro settato su true la nostra soluzione crea un cookie (tecnico) sul dominio iubenda.com che viene letto quando il cookie sul dominio locale non viene trovato.

skipSaveConsent: (boolean, default false) – Settando questo parametro su true, si fa in modo che il consenso non venga salvato nel cookie di preferenza.

Seguono ulteriori parametri facoltativi che richiedono la definizione di uno o più oggetti:

Ulteriori parametri per sviluppatori

cookiePolicyUrl: (string) – Si tratta dell’URL della cookie policy linkata all’interno del banner. È disponibile nella pagina di editing della tua privacy policy, in particolare nella tab “Integrazione > Cookie Policy”. Se non definisci questo parametro, di default il banner rimanda alla cookie policy generata tramite iubenda ed ospitata sui nostri spazi. Puoi scegliere in alternativa di ospitare la cookie policy su una pagina del tuo sito, specificandone il relativo URL attraverso il parametro cookiePolicyUrl. Ricorda che se decidi di ospitare la cookie policy su una tua pagina, questa non deve fare uso di cookie, al di là dei cookie tecnici.

Nota: il parametro cookiePolicyUrl è inefficace se stai utilizzando HTML custom per il banner (vedi la configurazione banner.html qui di seguito).

cookiePolicyInOtherWindow: (boolean, default false) – È possibile settare questo parametro su true se si vuole che la cookie policy venga aperta in un’altra finestra invece che nella lightbox/modale di iubenda.

rebuildIframe (boolean, default false) – Di default Privacy Controls and Cookie Solution, una volta registrato il consenso dell’utente, ripristina gli iframe precedentemente modificati in modo tale da farli diventare nuovamente funzionanti. Settando questo parametro su true, invece, dopo il consenso gli iframe precedentemente bloccati vengono completamente rigenerati (ossia reinseriti).

preserveOriginalClasses (boolean, default false) – Di default le classi originali degli snippet vengono cancellate a seguito della loro riattivazione. Settando invece questo parametro su true, si fa in modo che le classi originali rimangano inalterate anche dopo l’attivazione.

preserveIubClasses (boolean, default false) – Di default la classe _iub_cs_activate viene cancellata a seguito della riattivazione dello snippet. Settando invece questo parametro su true, si fa in modo che tale classe resti definita sullo snippet anche dopo l’attivazione. Nota bene: per essere efficace, questo parametro richiede che anche preserveOriginalClasses sia settato su true (vedi sopra per ulteriori dettagli). Inoltre, questo parametro non ha nessun effetto sugli snippet taggati con classe _iub_cs_activate-inline.

inlineDelay (integer, milliseconds, default 800 (safemode 500)) – Il tempo massimo che intercorre tra le attivazioni dagli snippet taggati con la classe _iub_cs_activate-inline (gli snippet taggati in questo modo vengono infatti attivati in sequenza). Diminuendo questo valore si abbrevia il tempo totale di attivazione. ATTENZIONE: Il suo valore di default è stabilito in modo che tutti gli snippet censiti si attivino correttamente; ridurlo potrebbe impedire la corretta attivazione di alcuni snippet. Si consiglia altamente di verificare l’attivazione degli snippet presenti nella propria pagina se questa impostazione viene modificata.

startOnDomReady (boolean, default false) – se true il rendering del banner e/o l’attivazione degli snippet bloccati verranno eseguiti non appena lo stato del documento risulta essere ‘caricato’ (ovvero quando il DOM raggiunge lo stato loaded); ciò implica che il rendering del banner e/o l’attivazione degli snippet potranno avvenire quando alcune risorse sono ancora in caricamento (come script, immagini, css e così via). Se invece l’opzione è impostata su false, allora Privacy Controls and Cookie Solution partirà quando la pagina è stata interamente caricata (ovvero quando lo stato del DOM risulta essere completed e tutte le risorse incluse in pagina sono state caricate) (disponibile solo sulla versione Safemode).

enableCMP (boolean, default false) — quando questa opzione è impostata su true apparirà il collegamento “Personalizza tracciamento pubblicità” nella parte inferiore della finestra modale della Cookie Policy. Quando cliccato, apparirà una finestra che consente agli utenti di gestire le proprie preferenze di tracciamento pubblicitario sulla base della IAB Transparency e al Consent Framework. Scopri di più.

askConsentIfCMPNotFound (boolean, default true) — se l’opzione enableCMP è impostata su true e la preferenza di IAB CMP Framework non viene trovata, gli utenti saranno invitati a fornire nuovamente il consenso anche se quest’ultimo è stato dato prima dell’attivazione del Framework. Se invece l’opzione è impostata su false, il comportamento descritto verrà impedito.

logLevel: (string) – Definisce la verbosità del logger (valori disponibili: debug, info, warn, error, fatal; il valore di default è noLog).

Classi a disposizione

• iubenda-cs-close-btn – Aggiungendo questa classe ad un elemento qualsiasi della pagina, il click sull’elemento chiude il banner e assume consenso fornito (in maniera equivalente al click sul pulsante X di default del banner)

• iubenda-cs-cookie-policy-lnk – Aggiungendo questa classe ad un elemento qualsiasi della pagina, il click sull’elemento permette la visualizzazione della Cookie Policy (in maniera equivalente al click sul link alla Cookie Policy presente nel banner)

Esempi

Ecco un esempio di configurazione di Privacy Controls and Cookie Solution di iubenda con parametri facoltativi:

<script type="text/javascript">
var _iub = _iub || [];
  _iub.csConfiguration = {
    siteId: 234578,
    cookiePolicyId: 340542,
    cookiePolicyUrl: 'http://www.site.com/cookie-policy',
    enableRemoteConsent: false,
    consentOnScroll: false,
    banner: {
        slideDown: false,
      zIndex: 99999998,
      content: "
Informativa
" +
      "
Questo sito o gli strumenti terzi da questo utilizzati si avvalgono di cookie necessari al funzionamento ed utili alle finalit&agrave; illustrate nella cookie policy. Se vuoi saperne di pi&ugrave; o negare il consenso a tutti o ad alcuni cookie, consulta la %{cookie_policy_link}.
Chiudendo questo banner, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all’uso dei cookie.
",
      cookiePolicyLinkCaption: "cookie policy",
        backgroundColor: "#CCC",
        textColor: "#000",
        fontSize: "12px",
        innerHtmlCloseBtn: "OK"
    },
    footer: {
      message: 'Proseguendo la navigazione o chiudendo la finestra presti il tuo consenso all\'installazione dei cookie.',
      btnCaption: 'Prosegui la navigazione'
    },
    callback: {
      onBannerShown: function(){doSomethingOnBannerShown()},
      onConsentGiven: function(){setCustomCookies()}
    },
    preferenceCookie: {
      expireAfter: 365
    },    
    consentOnButton: true,
  };
  (function (w, d) {
    var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/cookie_solution/iubenda_cs.js"; tag.parentNode.insertBefore(s, tag); };
    if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; }
    })(window, document);
</script>

Altri esempi di possibili configurazioni:

• Valori standard
• Banner sopra il footer
• Banner di altri colori
• Banner posizionato sopra l’header
• Banner in una lingua non supportata (con pulsanti “Accetto” and “Scopri di più” personalizzati)

API

Grazie alle API JS puoi interagire con alcune delle funzioni principali di Privacy Controls and Cookie Solution di iubenda.

Sintassi: _iub.cs.api.NOME_METODO

I metodi disponibili sono:

• printErrors(): stampa gli eventuali errori di Privacy Controls and Cookie Solution di iubenda sulla console del browser

• showCP(): mostra la Cookie Policy (in modo simile a quando si clicca sul link alla Cookie Policy nel banner o su un altro link con la classe iubenda-cs-cookie-policy-lnk, come descritto qui)

• consentGiven(): fornisce il consenso. Il metodo accetta come parametri facoltativi:

  • eventName: (stringa), uno tra i seguenti: documentClicked (default), documentScrolled, documentMoved, bannerXclose, cookiePolicyClosed; indica il tipo di azione attraverso la quale il consenso viene fornito.
  • force: (boolean), true | false (default): se false, iubenda CS si assicura che il banner sia mostrato prima di recepire effettivamente il consenso; invece, fornendo questa opzione a true, il consenso viene recepito in ogni caso.

  Nota: la chiamata a questo metodo assume il consenso fornito in maniera del tutto equivalente a quando lo si fornisce via UI, ad es. con lo scrolling della pagina. Pertanto tutte le azioni a valle del consenso fornito sono eseguite, tra cui l’aggiornamento del cookie di preferenza, l’attivazione degli snippet bloccati preventivamente e l’invocazione delle callback onConsentFirstGiven e onConsentRead.

  Per la sola attivazione delle snippet è a disposizione il metodo activateSnippets().

• activateSnippets(): attiva gli snippet bloccati preventivamente.

  Nota: questo metodo può essere richiamato ripetutamente: gli snippet già attivati non verranno presi in considerazione. È utile ad esempio quando, a consenso raccolto, si aggiungono dinamicamente alla pagina (via lazy loading o infinite scrolling) contenuti bloccati da attivare.

  Per la sola versione Safemode il metodo prevede l’opzione runOnActivationDoneCallback (boolean, default false), se tale opzione è true eseguirà la callback onActivationDone al completamento dell’attivazione degli snippet (rif. onActivationDone callback).

• isConsentGiven()(DOMElement, default window.document): restituisce true se il consenso è stato dato, altrimenti false.

• setConsentOnScrollOnElement()(boolean): la chiamata a questo metodo definisce l’elemento sul quale verrà osservato lo scroll ai fini del consenso.

  Nota: questo metodo è utile quando si vuole usufruire dell’opzione consentOnScrollOnElement ma il DOMelement non è ancora disponibile quando Privacy Controls and Cookie Solution viene inizializzata. A tal proposito è possible utilizzare la callback onBannerShow (esempio) che avviene ad inizializzazione della CS completata.

Lettura del cookie di preferenza

Il consenso fornito dall’utente viene salvato in alcuni cookie nel dominio della pagina ospite. Verificando la presenza o meno di questi cookie è possibile determinare se l’utente ha prestato il suo consenso.

In particolare il consenso si intende prestato se è presente il cookie _iub_cs-s[siteId] oppure il cookie _iub_cs-[cookiePolicyId], dove siteId e cookiePolicyId sono i parametri forniti nel codice di embedding (nel caso del codice di embedding illustrato in precedenza, i due cookie da cercare saranno _iub_cs-s234578 e _iub_cs-340542). Di seguito riportiamo un esempio di codice Javascript per la lettura del consenso client-side:

function isConsentGiven (siteId,cookiePolicyId){
        var cs = document.cookie.split(';');
  for (var i = 0; i < cs.length; i++) {
    while (cs[i].charAt(0) == ' ') cs[i] = cs[i].substring(1);
    if(cs[i].indexOf('_iub_cs-s'+ siteId) == 0||cs[i].indexOf('_iub_cs-'+ cookiePolicyId) == 0) return true;}
  return false;
}

Posizionando questo codice quanto più in alto possibile all’interno della pagina si riesce a leggere il consenso fornito ed a trasmettere questa informazione a tutti gli altri Javascript che seguono.