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

In un articolo precedente abbiamo illustrato una modalità di inserimento del banner dell'informativa cookies su Blogger.

Ora che la scadenza del 2 giugno si avvicina, e le multe sono salatissime, ci siamo chiesti: ma sarà sufficiente? Il dubbio, che non siamo ancora riusciti a dissipare pur leggendo veramente tante fonti, riguarda i cookies di Google Analytics: cookies assimilabili ai cookies tecnici o cookies di profilazione?


Abbiamo letto alcuni articoli che come soluzione indicavano di attivare la navbar di default di Blogger: compare in automatico un banner con l'informativa breve, ma il funzionamento sembra simile alla barra attivata con cookiechoices.

Siamo andati alla ricerca di un'alternativa in grado di assicurare che i cookies di Analytics vengano creati nel dispositivo del visitatore solo dopo il suo esplicito consenso.

Tra le diverse soluzioni trovate in rete, abbiamo provato questa http://www.primebox.co.uk/projects/jquery-cookiebar/ che potete vedere ora attiva sul blog. Scaricato il file .zip abbiamo personalizzato le opzioni di default del file jquery.cookiebar.js adattandole alle nostre esigenze (le opzioni sono commentate in modo molto chiaro) e gli stili del file jquery.cookiebar.css

I passi da seguire per inserire questa barra su Blogger sono:

• caricare il files .js su un server esterno (per esempio AlterVista o GoogleSites);
• in Modello, Modifica HTML, prima della chiusura del tag </head> scrivere questo codice, personalizzandolo dove serve:

<script type="text/javascript" src="http://example.com/jquery.cookiebar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $.cookieBar();
}); 
   if(jQuery.cookieBar('cookies')){
        // codice di Google Analytics o altro codice da inserire nella pagina in modo condizionato
    }
</script>

Il file .js richiede la libreria jQuery, quindi, se non è già presente in head, occorre includerla prima dello script.

• in Designer modelli, Layout, nella sezione Avanzato -> Aggiungi CSS inserire il contenuto del file jquery.cookiebar.css che può essere personalizzato a piacere:

#cookie-bar {
background-color: #585858; /* per IE8 */
background-color: rgba(88, 88, 88, 0.8);
*background-color: #585858; /* per IE7 */
height:auto;
min-height:28px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 16px;
line-height: 32px;
color:#fff;
text-align:center;
padding:20px;
box-sizing: border-box;
}
#cookie-bar.fixed {
position:fixed;
top:0;
left:0;
width:100%;
}
#cookie-bar.fixed.bottom {
bottom:0;
top:auto;
}
#cookie-bar p {
margin:0;
padding:0;
}
#cookie-bar a.cb-enable {
color:#585858;
border-radius:6px;
text-decoration:none;
padding:6px;
margin-left:8px;
}
#cookie-bar .cb-enable {
background:#fff;
}
#cookie-bar .cb-enable:hover {
background:#fff;
}
#cookie-bar .cb-disable {
background:#fff;
}
#cookie-bar .cb-disable:hover {
background:#fff;
}
#cookie-bar a.cb-policy {
color:#fff;
font-weight:bold;
text-decoration: underline;
}
#cookie-bar a.cb-policy:hover {
text-decoration:none;
}

Se avete inserito l'ID di proprietà di Google Analytics nelle impostazioni del blog, non dimenticatevi di rimuoverlo.

Verificate anche che il modello che avete scelto per i dispositivi mobile preveda le personalizzazioni che avete effettuato.

Non resta (si fa per dire) che scrivere l'informativa estesa creando un'apposita pagina.

Per maggior sicurezza, in attesa che si diradi la nebbia, abbiamo disabilitato anche i pulsanti per la condivisione in ogni articolo... abbiamo esagerato?


Link utili:

• Web Developer  - utile componente aggiuntivo
• cookiesdirective.com - un'altra alternativa per il banner informativo