Adaptación a la nueva normativa de la EU en materia de Cookies

¿Qué es una cookie?

Las cookies son pequeños archivos de texto que los sitios web pueden mandar a los navegadores de sus usuarios para almacenar información y recuperarla más adelante.

El uso más extendido es la llamada “cookie de sesión” que permite al navegador evitar tener que solicitar los datos de registro (usuario y login) al seguir un enlace a otra página del mismo sitio web. Los scripts de estadísticas, como el ubiquo script de Google Analitics, usan cookies para verificar las conversiones de objetivos.

Cookies

¿Por qué hay una normativa sobre las cookies?

La nueva normativa pretende proteger al usuario de servicios online contra un uso determinado de las cookies: las “cookies de rastreo”. Permiten llevar un control qué sitios web visitan los usuarios, normalmente las usan anunciantes, es por eso que a veces un anuncio parece seguirte por Internet.

Tengo un sitio web, ¿en qué me afecta?

No cumplir la nueva normativa puede conllevar una multa de hasta 60.000 €

En este enlace podéis ver información sobre un procedimiento sancionador

¿Qué dice la normativa?

La normativa indica que hay que obtener un consentimiento del usuario antes de colocar una cookie que no sea estrictamente necesaria para proporcionar el servicio solicitado por el usuario.

¿Qué se entiende por estrictamente necesario?

Aquellas sin las que el servicio que espera obtener el usuario no se podría proporcionar, por ejemplo, mantener al usuario registrado, llevar una cesta de la compra, controlar una lista de reproducción o incluso personalizar la interfaz del sitio.

Sin embargo, realizar estadísticas sobre los usuarios, por ejemplo mediante Google Analytics, aunque puede ser muy importante para el propietario de un comercio online no se considera necesario.

¿Qué puedo hacer para cumplir la normativa?

Instalación de un módulo, plugin o script personalizado que obtenga el permiso de acuerdo a la ley.

El código tiene tres partes y se ha de desarrollar una página donde expondremos nuestra política de cookies.

La primera parte es un código JavaScript que podemos incluir entre el código HEAD de nuestra página web.

<!-- SCRIPT DE COOKIES -->
<script type="text/javascript">
function controlcookies() {
         // si variable no existe se crea (al clicar en Aceptar)
    localStorage.controlcookie = (localStorage.controlcookie || 0);

    localStorage.controlcookie++; // incrementamos cuenta de la cookie
    cookie1.style.display='none'; // Esconde la política de cookies
}
</script>

La segunda parte incluye un código CSS que podemos variar para adaptarlo a la estética de nuestro portal y que hace la animación del aviso. Este código también lo incluiremos en el HEAD de la página o bien, mejor, en el CSS de nuestra web.

<!--- Codigo para la política de cookies-->

 
<style type="text/css">
 
/* CSS para la animación y localización de los DIV de cookies */
 
@keyframes desaparecer
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
 
@-webkit-keyframes desaparecer /* Safari and Chrome */
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
 
@keyframes aparecer
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
 
@-webkit-keyframes aparecer /* Safari and Chrome */
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
#cookiesms1:target {
    display: none;
}
.cookiesms{	
	width:100%;
	height:43px;
	margin:0 auto;
	padding-left:1%;
        padding-top:5px;
        font-size: 1.2em;
	clear:both;
        font-weight: strong;
color: #333;
bottom:0px;
position:fixed;
left: 0px;
background-color: #FFF;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
transition: bottom 1s;
-webkit-transition:bottom 1s; /* Safari */
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
z-index:999999999;
}
 
.cookiesms:hover{
bottom:0px;
}
.cookies2{
background-color: #FFF;
display:inline;
opacity:0.95;
filter:alpha(opacity=95);
position:absolute; 
left:1%; 
top:-30px;
font-size:15px;
height:30px;
padding-left:25px;
padding-right:25px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
}
 
/* Fin del CSS para cookies */
 
</style>

Por último incluiremos este pequeño código en el BODY para tener la marquesina flotante para indicar nuestra política de cookies.

<!--Código HTML de la política de cookies -->
 
<!--La URL incluida es la parte que se ha de modificar -->
 
<div class="cookiesms" id="cookie1">
Esta web utiliza cookies, puedes ver nuestra  <a href="tu-url-donde-explicas-la-politica-de-cookies">la política de cookies, aquí</a> 
Si continuas navegando estás aceptándola
<button onclick="controlcookies()">Aceptar</button>
<div  class="cookies2" onmouseover="document.getElementById('cookie1').style.bottom = '0px';">Política de cookies + </div>
</div>
<script type="text/javascript">
if (localStorage.controlcookie>0){ 
document.getElementById('cookie1').style.bottom = '-50px';
}
</script>
 
<!-- Fin del código de cookies --->

Tienes que crear una página a donde apuntar la política de cookies donde informas de las cookies que estás utilizando. La mía por ejemplo, es esta.

VOLVER