Cómo implementar aviso de cookies

Cookies

La Ley 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSI) afecta a todos los profesionales o empresas que presten servicios en España.

Es necesario recalcar que esta normativa es aplicable a los sitios web que utilicen los diferentes tipos de cookies vistas anteriormente, con excepción de las cookies técnicas.

BOE-ley-34-2002
BOE-ley-34-2002

La comúnmente denominada “Ley de Cookies” obliga a alertar al usuario de los tipos de cookies que se residen en la web que visitan. De lo contrario puede haber una sanción económica elevada a la empresa i/o dueño de la Web.

Implementación Aviso de Cookies

La idea principal es que aparezca un Div flotante en el footer tipo fixed (si nos movemos arriba o abajo, siempre estará en ese lugar fijo) tendrá un botón que cuando aceptemos generará una Cookie que residirá en vuestro ordenador en un tiempo determinado fijado por vosotros mismos.

CookiesCookies

Paso 1:  Generar un documento PHP,HTML,JSP,TPL, etc, dependiendo del lenguaje de programación en el que esté implementada la WEB donde queréis que aparezca la etiqueta div con el botón para llamar al JavaScript y un pequeño jQuery para hacer desaparecer el div si el usuario hace click en un enlace.

<html>
	<head>
		<title>Cookies</title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	</head>
	<body>
		<div id="barraaceptacion" style="display: none;">
			<div class="inner">
				<span class="spanfoot">
					Nuestra web usa Cookies para obtener datos estadísticos, si continúa navegando consideramos que acepta el uso de Cookies.
					
				 
					<a href="politicacookies.html" target="_blank" class="info">Más información</a>&nbsp;|&nbsp;<a class="ok" href="javascript:PonerCookie()">Cerrar</a>
				</span>
			</div>
		</div>
		<script>
			$(document).ready(function(){
				$("a").click(function(){
					if(getCookie('tucookie')!="1"){
						PonerCookie();
					}
				});
			});
		</script>
		<script type="text/javascript" src="js/cookies.js"></script>
	</body>
</html>

Paso 2:  Documento JavaScript donde hacemos el proceso de programación para ocultar o dejar visible el Div y añadir la cookie del usuario.

//cookies

// funcion para comprobar si tiene una cookie ya asignada
function getCookie(c_name){
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1){
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1){
        c_value = null;
    }else{
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1){
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}
// funcion para fijar la cookie
function setCookie(c_name,value,exdays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}
//Mostramos la pantalla si no tiene la cookie, pero si la tiene la ocultamos
if(getCookie('tucookie')!="1"){
    document.getElementById("barraaceptacion").style.display="block";
}else{
	document.getElementById("barraaceptacion").style.display="none";
}

//funcion para llamar a la función setcookie y establecer los parámetros que deseamos
function PonerCookie(){
    setCookie('tucookie','1',365);
    document.getElementById("barraaceptacion").style.display="none";
}

//fin cookies

Paso 3: Documento CSS para dar estilo a nuestra etiqueta Div (A gusto del usuario).

#barraaceptacion {
    display:none;
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    text-align:center;
    min-height:40px;
    background-color: rgba(0, 0, 0, 0.7);
    color:#fff;
    z-index:99999;
}
 
.inner {
    text-align:center;
    font-family:verdana;
    font-size:12px;
    margin:auto;
}

.spanfoot {
     vertical-align: middle;
     text-align:center;
}
.inner a.ok {
    
    color:#00ff2e;
    text-decoration:none;
}
 
.inner a.info {
    margin-left:5px;
    text-decoration:none;
    color:#faff00;
}

Hasta aquí otro de los artículos en informaticapremium sobre lo último en hardware, sistemas, almacenamiento, redes, programación, diseño web, recuperación de datos y actualidad del mundo de la técnica y la informática. Nos vemos en breve.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.