Il 2 giugno 2015 è il nuovo incubo dei webmaster. Entro quel giorno tutti i siti che fanno uso di cookie dovranno mostrare all'utente un'informativa per l'acquisizione del relativo consenso. Vediamo uno script per gestire, dal punto di vista tecnico, la problematica.
Disclaimer: questo articolo non contiene alcun riferimento normativo che possa garantirvi di essere in regola conj il provvedimento Generale dell’8 maggio 2014 del Garante della privacy. Sulle questioni normative, vi rimandiamo ovviamente ad una consulenza con un legale o quantomeno ad una navigazione su siti specializzati di diritto e leggi.
Visto però che la maggior parte delle soluzioni adottate in questi giorni è basata su un banner -di solito nell'area del piè di pagina- con un link all'informativa sulla privacy ed un link "chiudi" che impedisce che il banner stesso sia visualizzato durante le successive navigazioni del sito, vi proponiamo uno script che esegue questo compito.
Il file è questo:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<style>
* {
margin: 0;
}
html, body {
height: 100%;
background-color:#FAFAD2;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#footerCookie {
height: 50px;;
background-color:#D3D3D3;
color:#C71585;
display:none;
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
</style>
<script>
function chiudiBannerCookie(){
var chiudi=document.getElementById('footerCookie');
chiudi.style.display='none';
document.cookie="policycookie=accettata; expires=Thu, 17 May 2018 12:00:00 UTC";
}
</script>
</head>
<body>
<div class="wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. <br />
Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. <br />
</div>
<div id="footerCookie">
Questo sito utilizza cookie per le proprie funzionalità e per inviarti pubblicita? e servizi in linea con le tue preferenze. Se vuoi saperne di piu? o negare il consenso a tutti o ad alcuni cookie <a href="informativa-cookie.html" target="_blank">clicca qui</a>. <br />
<a href="javascript:chiudiBannerCookie();void(0);">Chiudendo questo banner</a>, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all’uso dei cookie.
</div>
<script type="text/javascript">
flag_policy = false;
var name = "policycookie=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
flag_policy = true;
break;
}
}
if(!flag_policy){
var divChiudi=document.getElementById('footerCookie');
divChiudi.style.display='block';
}
</script>
</body>
</html>
Procediamo con il commento.
L'intestazione inizia con una serie di metatag che impediscono che la pagina finisca in cache (della cui gestione si occupano però i CMS, per cui se ne usate qualcuno potete saltare i vari <meta> qui proposti).
Il foglio stile è usato per creare un footer "dinamico", che rimanga cioè sempre in primo piano a prescindere dallo scrool e dalla risoluzione del browser dell'utente. A tal proposito è un piacere mantenere il credits al sito http://ryanfait.com/ che fornisce gentilmente questo css a migliaia di siti, senza chiedere nulla in cambio.
Lo script prosegue poi con una funzione che viene richiamata quando l'utente decide di chiudere il banner (ed implicitamente accettare la policy): chiudiBannerCookie() si occupa di nascondere la banda del footer ed impostare un cookie cosi da evitare che il messaggio venga mostrato all'utente ogni volta che accede al sito.
Il resto della pagina è normale html, compreso il div "footerCookie" che contiene il messaggio di avviso dell'utilizzo di cookie, con due link: uno per aprire la policy (che ovviamente dovrete creare sul sito, in questo caso viene richiamato un ipotetico file "informativa-cookie.html") ed un altro per chiudere il banner, richiamando di fatto la funzione vista poco fa.
Infine un javascript si occupa di mostrare o nascondere il div appena creato, a seconda che l'utente abbia già cliccato o meno sul tasto "chiudi", grazie all'apposito cookie.
La soluzione proposta è stand-alone, non richiede plugin o librerie esterne come jquery. Come detto ad inizio articolo, vi rimandiamo alla consulenza di un legale per l'effettiva verifica dei testi, delle diciture, dell'efficacia di questa soluzione che comunque, ad oggi, è quella usata dalla maggior parte dei siti, anche dai portali nazionali.