Política de cookies: como añadir el mensaje a tu web

Desde el pasado año 2013 hemos visto como practicamente todas las páginas web de internet iban incorporando paulativamente un mensaje advirtiendo sobre la política de cookies del site en el pie de página o en la cabecera.

Esto es debido a la llamada «Ley de Cookies», una ley que pretende regular el uso y seguimiento que se hace de las cookies. Mejor dicho, más que regular, quieren que el usuario sea consciente de lo que ocurre. Puedes leer más información sobre la ley aquí

Con unas sanciones bastante altas, ha habido que ponerse manos a la obra para añadir el mensaje necesario. Una tarea bastante sencilla de realizar y que resultará más sencilla todavía con este pequeño tutorial.

El código para nuestra política de cookies

Lo primero de todo será añadir el código. Una pequeña capa fijada en la parte superior o inferior del site con un mensaje de advertencia y dos enlaces: uno a la página correspondiente con la información necesaria sobre la política de cookies y otra para aceptar y cerrar el mensaje.

<div id="overbox3">
    <div id="infobox3">
        <p>Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Si continúas navegando consideramos que aceptas su uso.
        <a href="politica-privacidad.php">Más información</a>
        <a >
Después, le damos un poco de estilo a esta capa. Lo más importante será el atributo position que será el que mantenga la capa siempre visible en el lugar que creamos oportuno (en nuestro caso, pegado al pie de página).
 
#overbox3 {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 999999;
    display: block;
}
#infobox3 {
    margin: auto;
    position: relative;
    top: 0px;
    height: 58px;
    width: 100%;
    text-align:center;
    background-color: #eeeeee;
}
#infobox3 p {
    line-height:58px;
    font-size:12px;
    text-align:center;
}
#infobox3 p a {
    margin-right:5px;
    text-decoration: underline;
}
 
Y por último, el javascript. Lo único que tenemos que hacer es hacer la llamada a la librería de jQuery y la llamada a un archivo llamado cookies.js
 
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/cookies.js" type="text/javascript"></script>
 
Este javascript de la política de cookies tiene un par de funciones que crean y/o detectan si tienes una cookie llamada cookie_surestao y muestran o no el mensaje en función de si existe dicha cookie.
 
function GetCookie(name) {
    var arg=name+"=";
    var alen=arg.length;
    var clen=document.cookie.length;
    var i=0;

    while (i<clen) {
        var j=i+alen;

        if (document.cookie.substring(i,j)==arg)
            return "1";
        i=document.cookie.indexOf(" ",i)+1;
        if (i==0)
            break;
    }

    return null;
}

function aceptar_cookies(){
    var expire=new Date();
    expire=new Date(expire.getTime()+7776000000);
    document.cookie="cookies_surestao=aceptada; expires="+expire;

    var visit=GetCookie("cookies_surestao");

    if (visit==1){
        popbox3();
    }
}

$(function() {
    var visit=GetCookie("cookies_surestao");
    if (visit==1){ popbox3(); }
});

function popbox3() {
    $('#overbox3').toggle();
}
 
¡Et voilà, con pocas líneas tendremos nuestro aviso y un problema legal menos!
 
————————
 
[ACTUALIZADO] – Añadimos los ficheros originales (descárgalos aquí) funcionando correctamente para que podáis descargarlo y utilizarlo sin problemas. Con Chrome en local no va como debería, ya que no guarda las cookies, pero subido a un servidor funcionará sin problemas.
 
Política de cookies: como añadir el mensaje a tu web enero 12th, 2018Jose Antonio Vila