Indice della documentazione

Cookie solution ›

Banner e raccolta del consenso – Installazione e personalizzazione


Il nostro banner di richiesta del consenso ha le seguenti caratteristiche:

  • 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 – si veda 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 ch’erano stati precedentemente bloccati
  • Se la preferenza era stata già fornita, il banner non compare e gli script vengono eseguiti in modo automatico

1. Installazione

Installazione generica

Per abilitare la iubenda Cookie Solution è 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>

Il codice riportato in alto è a titolo esemplificativo. Per generare il proprio codice, basta cliccare su “Attiva/Configura cookie policy” che si trova sulla destra all’interno della pagina di modifica di ciascuna privacy policy presente all’interno del proprio account iubenda. È inoltre disponibile un video tutorial che riepiloga i passaggi fondamentali per configurare la iubenda Cookie Solution, con anche delle indicazioni su come generare il codice e sulla cookie law in generale:

Installazione su WordPress

Se usi WordPress, la iubenda Cookie Solution 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 la iubenda Cookie Solution 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 la iubenda Cookie Solution, il processo è identico. Ti ricordiamo che come sempre il codice della iubenda 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.

Nota

  • La iubenda Cookie Solution richiede attualmente una versione di jQuery almeno pari alla 1.4.4 (se il sito ha una versione più vecchia, bisogna effettuare un aggiornamento. Se invece jQuery non è presente, se ne occupa iubenda)

2. 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

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

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

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

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

consentOnScrollDelay: (intero, default 500 millisecondi) – Ritardo con il quale viene rilevato il consenso via scroll una volta che il banner informativa è stato mostrato

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 Cookie Solution, che richiede di impostare priorConsent: false)

rebuildIframe (boolean, default false) – Di default la 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 delle snippet taggate con la classe “_iub_cs_activate-inline” (le snippet taggate in questo modo vengono infatti attivate sequenzialmente). Diminuendo questo valore si abbrevia il tempo totale di attivazione. ATTENZIONE: Il suo valore di default è stabilito in modo che tutte le snippet censite si attivino correttamente; ridurlo potrebbe impedire la corretta attivazione di alcune snippet. Si consiglia altamente di verificare l’attivazione delle snippet presenti nella propria pagina se questa impostazione viene modificata

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

banner {} (object) – Utilizza questo oggetto per personalizzare l’aspetto (o apparenza) del banner. Le opzioni sono elencate in basso e devono essere contenute all’interno dell’oggetto banner {}.

Visualizza una configurazione di esempio →

  • slideDown (boolean, default true) – È possibile settare questo parametro su false per disabilitare l’animazione iniziale del banner
  • zIndex (number) – Si tratta dello zIndex del div del cookie banner. Il valore di default è 99999998
  • content (string) – Si tratta del contenuto (testo) presente all’interno del cookie banner. Ad esempio per l’italiano il valore di default è:

    Informativa
    Questo sito o gli strumenti terzi da questo utilizzati si avvalgono di cookie necessari al funzionamento ed utili alle finalità illustrate nella cookie policy. Se vuoi saperne di più o negare il consenso a tutti o ad alcuni cookie, consulta la %{cookie_policy_link}.
    Chiudendo questo banner, scorrendo questa pagina, cliccando su un link o proseguendo la navigazione in altra maniera, acconsenti all’uso dei cookie.

    Nota: %{cookie_policy_link} è il placeholder in cui viene inserito il link alla cookie policy. Ricorda che di default la cookie policy linkata nel banner è quella ospitata sui nostri spazi. Per modificare il comportamento di default, personalizza il parametro cookiePolicyUrl (fai riferimento alla sezione dedicata di questa guida per ulteriori informazioni sul parametro cookiePolicyUrl). Il contenuto del cookie banner viene localizzato in tutte le lingue disponibili nel generatore (la lingua in cui mostrare il contenuto del cookie banner è definita attraverso il parametro lang)

  • cookiePolicyLinkCaption (string) – Anchor text del link alla cookie policy (il valore di default è “cookie policy”)
  • backgroundColor (string, default “#000”) – Il colore di sfondo del banner
  • textColor (string, default “#fff”) – Il colore del testo del banner
  • fontSize (string, default null) – La dimensione del testo del banner (incluso il tasto di chiusura). Se questa opzione è attiva gli eventuali valori presenti nelle opzioni banner.fontSizeCloseButton e banner.fontSizeBody (disponibili solo in beta) non verranno presi in considerazione.
  • fontSizeCloseButton (string, default “20px”) – La dimensione del tasto di chiusura del banner (disponibile per la sola versione beta).
  • fontSizeBody (string, default “14px”) – La dimensione del testo contenuto nel banner (disponibile per la sola versione beta).
  • innerHtmlCloseBtn (string, default “x”) – Il testo del bottone di chiusura del banner
  • applyStyles (boolean, default true) – Settando questo parametro su false, al banner non viene applicato alcuno stile/CSS; è utile settare applyStyles su false ad esempio quando si vuole dare al banner uno stile diverso da quello di default. Come base di partenza per modificare il CSS del banner, si consiglia di utilizzare quello di default disponibile a questo indirizzo, che riapplica gli stessi stili esclusi da questa opzione ma che ha il vantaggio di essere modificabile una volta inserito nelle proprie pagine.

    Ecco alcuni esempi:

  • html (string, default null) – È l’HTML del banner, che attraverso questo parametro può essere sostituito a quello di default. Nota: alcuni elementi sono comunque necessari per il corretto funzionamento del banner, in particolare:
    • div.iubenda-cs-content (il container principale)
    • a.iubenda-cs-cookie-policy-lnk (il link con href settato per puntare alla cookie policy, i.e. https://www.iubenda.com/privacy-policy/417383/cookie-policy?an=no&s_ck=false)
    • a.iubenda-cs-close-btn (il bottone di chiusura del banner)
  • prependOnBody (boolean, default false) – Settando prependOnBody su true, il codice HTML del banner viene iniettato all’interno del sito come primo elemento del BODY. Di default, invece, prependOnBody è impostato su false ed il banner viene inserito come ultimo elemento del BODY

    È necessario impostare il prependOnBody su true ad esempio quando si desidera posizionare il banner al di sopra dell’header. In questo modo il banner sarà il primo elemento della pagina e, per visualizzarlo sopra l’header, basterà applicare un padding-top all’elemento successivo:

    #iubenda-cs-banner + * { padding-top: 180px; }

footer {} (object)

  • message (string) – Si tratta del messaggio di testo visualizzato in basso nella finestra in cui viene mostrata l’informativa estesa (cookie policy) quando si clicca sul link cookie policy all’interno del banner (ad esempio in italiano il valore di default è “Proseguendo la navigazione o chiudendo la finestra presti il tuo consenso all’installazione dei cookie”)
  • btnCaption (string) – È il messaggio di testo visualizzato nel pulsante (che si trova in basso nella finestra in cui viene mostrata l’informativa estesa quando si clicca sul link cookie policy all’interno del banner) per confermare il consenso all’installazione dei cookie policy; ad esempio in italiano il valore di default è “Prosegui la navigazione”

Visualizza una configurazione di esempio →

callback {} (object) – È il parametro attraverso cui è possibile definire le callback che la iubenda Cookie Solution può eseguire al verificarsi di un evento, e vale a dire:

  • onReady (function) – Se il consenso dell’utente non è stato ancora raccolto (ad esempio perché è alla sua prima visita), la callback onReady viene invocata non appena il cookie banner viene visualizzato; se invece l’utente ha già prestato il proprio consenso all’installazione dei cookie, questa callback viene invocata non appena la iubenda Cookie Solution è inizializzata. Il consenso prestato o meno viene passato come argomento, true o false
  • onBannerShown (function) – Attraverso questa funzione è possibile eseguire uno script nel momento in cui il banner viene mostrato
  • onCookiePolicyShown (function) – Invocata quando la cookie policy viene mostrata (sia nella modale che in una pagina separata)
  • onConsentGiven (function) – Questa callback viene invocata se l’utente ha prestato il proprio consenso all’installazione dei cookie, sia quando acconsente per la prima volta che in tutte le successive visite
  • onConsentFirstGiven (function) – Invocata la prima volta che l’utente presta consenso. Una delle seguenti stringhe viene passata come argomento: ‘documentScroll’, ‘documentMoved’, ‘bannerXClose’, ‘documentClicked’ o ‘cookiePolicyClosed’
  • onConsentRead (function) – Invocata la prima volta che l’utente presta consenso e ad ogni caricamento successivo quando il consenso viene rilevato. La callback onConsentGiven diviene un alias di onConsentRead e non viene invocata se quest’ultima è definita
  • onStartupFailed (function) – Invocata nel caso in cui la iubenda Cookie Solution fallisce la fase di startup. Un messaggio di errore viene passato come argomento
  • onError (function) – Invocata nel caso in cui la iubenda Cookie Solution riscontri un errore. Un messaggio di errore viene passato come argomento
  • onFatalError (function) – Invocata nel caso in cui la iubenda Cookie Solution riscontri un errore che non le consente di proseguire. Un messaggio di errore viene passato come argomento

Visualizza una configurazione di esempio →

preferenceCookie {} (object) – È il parametro attraverso cui personalizzare la durata del cookie di preferenza installato da iubenda sul browser dell’utente nel momento in cui ne viene registrato il consenso. In particolare, l’oggetto da definire è:

  • expireAfter (number, default 365) – Rappresenta il numero di giorni di validità del consenso prestato dall’utente su un dato sito web. Nota: questo valore si aggiorna ad ogni successiva visita dell’utente

Visualizza una configurazione di esempio →

Ulteriori parametri per sviluppatori

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

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

logViaAlert: (boolean, default false) – Settando questo parametro su true, il logging viene mostrato via alert

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. Il parametro consentOnButton, settato su false, modifica il comportamento standard facendo in modo che in questi casi il consenso non risulti prestato

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 della iubenda Cookie Solution 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>

Qui in basso ci sono poi altri esempi di possibili configurazioni:

3. API

Iubenda Cookie Solution espone una API JS attraverso cui interagire programmaticamente con alcune delle sue funzioni principali.

Sintassi: _iub.cs.api.NOME_METODO.

I metodi disponi sono:

  • printErrors(): stampa gli eventuali errori della Iubenda Cookie Solution 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 parametro (opzionale) il seguente oggetto:
    {
    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 delle snippet bloccate preventivamente e l’invocazione delle callback onConsentFirstGiven e onConsentRead. Per la sola attivazione delle snippet è a disposizione il metodo activateSnippets() (disponibile nella sola versione beta).
  • activateSnippets(): attiva le snippet bloccate preventivamente (disponibile nella sola versione beta).

    Nota: questo metodo può essere invocato ripetutamente: le snippet già attivate non saranno prese in considerazione. E’ pertanto utile in quelle installazioni dove, a consenso fornito, alla pagina vengono aggiunti dinamicamente contenuti preventivamente bloccati e che hanno bisogno di essere attivati (ad esempio: lazy loading o infinite scrolling).

  • isConsentGiven() (boolean): restituisce true se il consenso è stato dato, altrimenti false (disponibile nella sola versione beta).

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.


Hai ancora domande?

Visita il nostro forum di supporto Scrivici via email