Inserire banner per l'informativa cookies su Blogger

Recentemente il Garante della privacy ha indicato le modalità per informare gli utenti sull'uso dei cookies nei siti web.
C'è una distinzione fondamentale tra i cookies con finalità di marketing e i cookies tecnici (raccolta dati per statistiche, cookies di sessione per la gestione di un'area riservata etc.). Nel primo caso è necessario il consenso dell'utente prima di memorizzare i cookies nel terminale (PC, tablet, smartphone etc.). Nel caso, invece, di cookies tecnici è sufficiente un'adeguata informativa.
Per informazioni sull'argomento è possibile consultare le FAQ in materia di cookies nel sito del Garante della privacy.

Prendendo come riferimento lo script messo a disposizione da www.cookiechoices.org abbiamo apportato alcune modifiche per ottenere il banner informativo che potete vedere in questa pagina.

I passi da seguire per inserire questa barra in Blogger sono:
1. Scaricare il file Javascript cookiechoices-mod.js a cui sono state apportate, rispetto all'originale, le seguenti modifiche:

• rimosse alcune proprietà di stile per permetterne una gestione più agevole tramite CSS

  var butterBarStyles = 'position:fixed; width:100%; margin:0; left:0; z-index:10001;';

• aggiunto id al pulsante che rimanda alla pagina dell'informativa sempre per facilitarne la personalizzazione tramite CSS

  infoLink.id = 'cookieMore-info'; 

• sostituito il codice per la durata del cookie in 60 giorni (valore personalizzabile)

  var d = new Date();
  var expiryDate = new Date(d.getTime() + 86400000 * 60); //modificare il valore 60 per cambiare il numero dei giorni di durata del cookie
  document.cookie = cookieName + '=y; expires=' + expiryDate;

Il file deve essere caricato su un server esterno, per esempio AlterVista o Google Sites.

2. Aggiungere un gadget HTML/JavaScript nella parte bassa della scheda Layout ed inserire questo codice:

 

<script src="http://example.com/cookiechoices-mod.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
    cookieChoices.showCookieConsentBar('Questo sito fa uso di cookies. Continuando la navigazione se ne autorizza l\'uso.', 'OK', 'Più info', 'http://example.com/p/privacy.html');
});
</script>

Sono da personalizzare:

• gli indirizzi del file .js e della pagina privacy che, se non già presente, deve essere creata con gli appositi strumenti di Blogger; 
• il messaggio da visualizzare nella barra (se contiene un apostrofo usare il backslash per evitare errori Javascript);
• i testi dei bottoni per l'accettazione e per il link alla pagina informativa.

In alternativa, per garantire una maggiore compatibilità con i browser più datati di casa Microsoft è possibile utilizzare la libreria jQuery e richiamare la funzione al caricamento del documento:

<script src="http://example.com/cookiechoices-mod.js"></script>
<script>
jQuery(function(){
    cookieChoices.showCookieConsentBar('Questo sito fa uso di cookies. Continuando la navigazione se ne autorizza l\'uso.', 'Ok', 'Più info', 'http://www.example.com/p/privacy.html');
  });
</script>

3. Sempre da Layout in Designer modelli nella sezione Avanzato -> Aggiungi CSS inserire il CSS che può essere personalizzato a piacere:

/* div barra */
#cookieChoiceInfo{
    color:white;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    line-height:28px;
    background-color: #585858; /* per IE8 */
    background-color: rgba(88, 88, 88, 0.8);
    *background-color: #585858; /* per IE7 */
    top:0; /* sostituire con bottom:0; per posizionare il banner in basso */   
    text-align:center;
    padding:20px 0 20px 0;
}
/* links */
#cookieChoiceInfo a{
    text-decoration:none;
    padding:8px;
    background-color:white;
    font-size:12px;
    border-radius:6px;
    color:#585858;
}
/* link pagina informativa */
a#cookieMore-info{
    margin-left:12px;
}
/* link accettazione */
a#cookieChoiceDismiss{
    margin-left:24px;
    padding:8px 11px;
}

Post correlati:

• Inserire banner per l'informativa cookies su Blogger con jQuery CookieBar