Barra para aviso de cookies que graba una cookie

Lo de poner un aviso para general conocimiento sobre que en el sitio de uno se usan cookies, es algo que tenía en la cabeza desde hace mucho tiempo, más o menos desde que salieron una serie de leyes y directivas que afectaban a todas las webs cuyos administradores residen en España o incluso -decían- a todas las webs que se pudieran visualizar en España.

Hay algún que otro debate sobre la interpretación de estas normas en cuanto a si hay que avisar de que se van a instalar cookies ANTES de que se instale ninguna (cosa harto difícil en muchos casos), que si el consentimiento tiene que ser expreso (no tácito: "si continúa entenderemos que sí acepta"), que sólo afecta a las webs comerciales pero que el simple hecho de tener publicidad ya supone que se obtiene un beneficio, etc. etc. etc.

Pero llegó el día en que ni tengo tiempo de estar comprobando bien todas esas disposiciones legales, ni las iba a entender del todo, ni tampoco quiero calentarme más la cabeza, así que como es una cosa muy fácil de solucionar se pone el dichoso aviso y listo. Hace unas pocas semanas que lo hice y un peligro menos.

Imagen: yahyanikrushdi

Lo que es la barra con el aviso y un enlace al lugar dónde se explica bien el tema de las cookies (al parecer otro requisito) es muy fácil de hacer, pues con un div y un position:fixed ya lo tenemos prácticamente hecho.

Pero ¿que tal si no somos cansinos y en lugar de estar mostrando tooooodos los días el aviso en toooodas las páginas, lo hacemos sólo una vez con cada usuario distinto?

Bueno, realmente será con cada ordenador distinto porque, de momento, las cookies no hilan tan fino como para saber quién está sentado al teclado. Todo se andará (que se lo pregunten a Google o a Facebook), pero de momento va a ser que no.

Pues eso, que para que a cada usuario sólo le salga una vez el aviso, le vamos a grabar precisamente una cookie para que quede constancia de que ya lo vio y no darle más el tostón en el futuro. El sistema de gestión de cookies será precisamente este que vimos en una ocasión anterior y que ya expliqué con más detalle en su momento.

Hay otros servicios que se pueden encontrar por la Red y que nos proporcionan algo parecido, pero la ventaja es que este código funciona de manera autónoma y no tenemos que depender de nadie. Lo presento listo para copiar y pegar en un gadget tipo HTML/JavaScript. Luego lo comento un poco.

<div id="barracookies">
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
<br/>
Si continúa navegando consideramos que acepta su uso. <a href="javascript:void(0);" onclick="var expiration = new Date(); expiration.setTime(expiration.getTime() + (60000*60*24*365)); setCookie('avisocookies','1',expiration,'/');document.getElementById('barracookies').style.display='none';"><b>OK</b></a> <a href="http://www.google.com/intl/es-419/policies/technologies/types/" target="_blank" >Más información</a> | <a href="http://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf" target="_blank" >Y más</a>
</div>
<!-- Estilo barra CSS -->
<style>#barracookies {display: none;z-index: 99999;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;padding:5px;background: #333333;color:#d7c712;line-height:20px;font-family:verdana;font-size:12px;text-align:center;box-sizing:border-box;} #barracookies a:nth-child(2) {padding:4px;background:#4682B4;border-radius:5px;text-decoration:none;} #barracookies a {color: #fff;text-decoration: none;}</style>
<!-- Gestión de cookies-->
<script type='text/javascript'>function setCookie(name,value,expires,path,domain,secure){document.cookie=name+"="+escape(value)+((expires==null)?"":"; expires="+expires.toGMTString())+((path==null)?"":"; path="+path)+((domain==null)?"":"; domain="+domain)+((secure==null)?"":"; secure")}function getCookie(name){var cname=name+"=";var dc=document.cookie;if(dc.length>0){begin=dc.indexOf(cname);if(begin!=-1){begin+=cname.length;end=dc.indexOf(";",begin);if(end==-1)end=dc.length;return unescape(dc.substring(begin,end))}}return null}function delCookie(name,path,domain){if(getCookie(name)){document.cookie=name+"="+((path==null)?"":"; path="+path)+((domain==null)?"":"; domain="+domain)+"; expires=Thu, 01-Jan-70 00:00:01 GMT"}}</script>
<!-- Gestión barra aviso cookies -->
<script type='text/javascript'>
var comprobar = getCookie("avisocookies");
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + (60000*60*24*365));
setCookie("avisocookies","1",expiration);
document.getElementById("barracookies").style.display="block"; }
</script>

Como podéis observar, la primera parte hasta el primer comentario es la parte HTML, la que forma el texto, el botón de OK y los enlaces. Ese texto lo podéis poner como os plazca, así como el destino del enlace. Por cierto que yo he puesto dos genéricos en el ejemplo, pero lo mejor es que el primero vaya a una página específica de vuestro sitio dónde se desarrolle el tema de las cookies. Con ese de hecho creo que es suficiente. El segundo podría apuntar a dónde yo apunté el primero o directamnte suprimirlo.

Después de eso está el estilo de la barra. Evidentemente, cambiando propiedades y valores podéis cambiar ese CSS para que tenga otro aspecto.

El tercer bloque es el JavaScript que gestiona cookies en general y que ya vimos en el pasado. Si por casualidad ya lo tenéis en vuestra plantilla, podéis eliminar ese trozo por ser innecesario ponerlo una segunda vez.

En último lugar se encuentra la pequeña rutina que comprueba cada vez que se carga una página de vuestro sitio, si la cookie ya está grabada (ya se ha estado anteriormente) o no. En este último caso y sólo en este, se muestra la barra con el aviso. Por cierto que esa multiplicación 60000*60*24*365 es para que la cookie dure un año. Pasado ese tiempo volverá a saltar. Podéis ajustar esa cifra como prefiráis.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter