Según la Wikipedia una cookie (o galleta informática) es una pequeña información enviada por un sitio web y almacenada en el navegador del usuario, de manera que el sitio web puede consultar la actividad previa del usuario. Se suele utilizar para llevar el control de usuarios, conseguir información sobre los hábitos de navegación del usuario (como Google Analytics), etc.
Si tienes una web en la cual utilizas cookies deberás de advertir de este hecho a tus visitantes, especialmente si son visitantes de la Unión Europea (España incluida), en aplicación de la LSSI. Vamos a ver en este post como implementar con jQuery y un par de plugins una solución sencilla y práctica para cumplir este requisito legal.
Requisitos
Para implementar esta solución utilizaremos estos tres componentes básicos:
- La biblioteca jQuery. La mayoría de desarrolladores de FrontEnd ya conocemos esta librería y seguro que la cargamos como base en la mayoría de nuestros proyectos. http://jquery.com/
- El plugin jquery.cookie.js. Se tratra de un plugin en el cual se apoyará el último de los componentes para poder insertar y borrar cookies según acepte (o no) el visitante de nuestro site el empleo de cookies. https://github.com/carhartl/jquery-cookie
- El plugin CookieCuttr. Es la parte visible de nuestra implementación permitiéndonos situar en la ventana del navegador una ventana flotante en donde el visitante podrá elegir pulsando un botón si quiere utilizar cookies en la navegación o no. http://cookiecuttr.com/
Cargando los componentes
Obviamente lo primero que deberemos de hacer es descargar los plugins o enlazarlas a un CDN como hacemos en este ejemplo las distintas librerías e incluirlas en nuestra página web.
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script src="http://cdn.imnjb.me/libs/jquery.cookiecuttr/1.0/jquery.cookiecuttr.min.js"></script> |
A continuación incluiremos o modificaremos los estilos CSS de la ventana del aviso de cookies. En este caso acudimos nuevamente a un CDN aunque por supuesto podremos descargar y adaptar los estilos CSS a nuestro site.
<link href="http://cdn.imnjb.me/libs/jquery.cookiecuttr/1.0/cookiecuttr.css" rel="stylesheet" type="text/css"/> |
Ahora ya tenemos implementad el código necesario en nuestra página. Pasemos a la siguiente fase que es incluir el código necesario para que se muestre la ventana de aviso de cookies y determinar la inclusión de las mismas o no.
Incluyendo el condicional y lanzando el plugin de aviso de cookies
Incluyamos el siguiente código al final de nuestra página, antes del </body>. En donde aparece el código comentado podríamos utilizar el codigo de Google Analytics en nuestra web pero obviamente no podremos ejecutarlo hasta que nuestros usuarios acepten. Por este motivo incluiremos un condicional.
<script type="text/javascript"> if(jQuery.cookie('cc_cookie_accept') == 'cc_cookie_accept') { //Código que no queremos que cargue hasta que el usuario acepte. Aquí pondríamos el código de Google Analytics o lo que nos interese. } </script> |
Y por último activaremos el plugin de aviso cookies para que todo funcione a continuación.
<script type="text/javascript"> $.cookieCuttr(); </script> |
Personalizando el aviso
Podemos ver que es muy sencilla su implementación, sin embargo lo primero que salta a la vista es que el texto no aparece en castellano, amén de otras personalizaciones que admite.
Para ello editaremos el código de activación y personalizaremos las opciones que nos interesen, entre otras el posicionamiento de la ventana, traduciremos su contenido y una serie de opciones más.
$.cookieCuttr({ cookieNotificationLocationBottom: true, cookieAnalytics: true, cookiePolicyPageMessage: 'Por favor lea la siguiente información y elija una de las siguientes opciones', cookiePolicyLink: '/politica-cookies', cookieMessage: 'Utilizamos cookies en nuestro website. Puede leer nuestra <a href="{{cookiePolicyLink}}" title="Política de cookies">política de cookies</a>', cookieAnalyticsMessage: 'Utilizamos cookies sólo para recoger estadísticas de uso sin almacenar datos personales. <a href="/politica-cookies" title="Política de cookies">Política de cookies</a>', cookieErrorMessage: "Lo sentimos. Esta funcionalidad está desactivada en su navegador. <br>Para seguir utilizando esta funcionalidad, por favor ", cookieWhatAreTheyLink: "/sobre-las-cookies", cookieAcceptButtonText: "ACEPTAR COOKIES", cookieDeclineButtonText: "NO USAR COOKIES", cookieResetButtonText: "BORRAR COOKIES", cookieWhatAreLinkText: "¿Qué son las cookies?", }); |
Podemos ver como queda nuestro código pulsando sobre el siguiente botón:
Ejemplo de aviso de cookies con CookieCuttr
Lista completa de opciones de CookieCuttr
La verdad es que es un plugin tremendamente completo permitiendo una gran personalización. Podemos cambiar la posición en la que queremos que aparezca dentro de nuestra página, mostrar el aviso en una capa mucho más pequeña y discreta, personalizar los textos, activar y desactivar botones, mostrar el aviso sólo en la página de Política de Cookies, etc. Aquí tenemos la lista completa de opciones que admite este plugin:
- cookieCutter: texto Si activamos esta opción podremos ocultar o mostrar un div o span que no queremos que se muestren hasta que se acepte la política de cookies.
- cookieDisable: nombre Relacionado con el anterior incluiremos el nombre de clase que queremos utilizar para mostrar u ocultar divs/spans.
- cookieCutterDeclineOnly: true/false Si desea para ocultar el aviso cuando alguien haya hecho clic en No usar cookies configurar en true
- cookieAnalytics: true/false Si sólo va a emplear Gogle Analytics utilice true
- cookieDeclineButton: true/false Permite mostrar u ocultar el boton de No usar cookies
- cookieAcceptButton: true/false Permite mostrar u ocultar el boton de Aceptar cookies
- cookieResetButton: true/false Permite mostrar u ocultar el boton de Borrar cookies
- cookieOverlayEnabled: true/false Permite mostrar de forma más llamativa el Aviso de cookies y no permite navegar por la web hasta que no se acepte el uso de cookies
- cookiePolicyLink: /link/ Permite especificar la URL de la página de Política de Cookies
- cookieMessage: texto Nos permite personalizar el texto a incluir para advertir del empleo de cookies
- cookieAnalyticsMessage: texto Nos permite personalizar el texto a incluir para advertir del empleo de cookies si sólo empleamos Google Analytics
- cookieErrorMessage: texto Nos permite personalizar el mensaje de error si hay algún problema
- cookieWhatAreTheyLink: /link/ Permite incluir el enlace a una página que explique qué son las cookies
- cookieExpires: días Tiempo de expiración de la cookie de ‘Aceptación de política de cookies’. Por defecto un año
- cookieAcceptButtonText: texto Nos permite personalizar el botón de Aceptar cookies
- cookieDeclineButtonText: texto Nos permite personalizar el botón de No usar cookies
- cookieResetButtonText: texto Nos permite personalizar el botón de Borrar cookies
- cookieWhatAreLinkText: texto Nos permite personalizar el texto de qué son las cookies
- cookieNotificationLocationBottom: true/false Nos permite elegir dónde queremos incluir la página. Por defecto aparece arriba, pero si incluimos el valor true aparece abajo
- cookiePolicyPage: true/false Nos permite mostrar cambiar un texto distinto si estamos en la página de Política de Cookies mostrando los botones de Aceptar y Denegar
- cookiePolicyPageMessage: texto Nos permite personalizar el mensaje de aviso si ya estamos en la página de cookies
- cookieDiscreetLink: true/false Nos permite mostrar una ventana más discreta para el aviso de cookies
- cookieDiscreetReset: true/false Nos permite elegir si queremos mostrar un botón para Borrar cookies en el aviso discreto
- cookieDiscreetLinkText: texto, Nos permite personalizar el texto a mostrar en el aviso discreto
- cookieDiscreetPosition: topleft, topright, bottomleft, bottomright Podemos elegir la posición del aviso discreto en la página
- cookieNoMessage: true/false Podemos elegir que sólo se muestre en la página de Política de Cookies si cambiamos a true
- cookieDomain: dominio Personalizaremos el dominio con el que queremos que se guarden las cookies
En la propia página de CookieCuttr podemos consultar varios ejemplos de implementación.
Conclusión
Como podemos ver es una herramienta realmente potente a la hora de incluir un aviso de cookies en nuestra página, muy configurable y de fácil implementación. Espero que os sea de utilidad.
Fuentes
Cumplir la “Ley de Cookies” con CookieCuttr.js: http://blog.endeos.com/cumplir-ley-cookies-con-cookiecuttr/
Página oficial de CcookieCuttr: http://cookiecuttr.com/
Proyecto GitHub jQuery Cookie: https://github.com/carhartl/jquery-cookie
Wikipedia: ¿Qué es una cookie?: http://es.wikipedia.org/wiki/Cookie_%28inform%C3%A1tica%29
Autor:
Última actualización:
Hola, estoy implementando este codigo pero tengo algunas dudas.
Me gustaría que el aviso desaparezca una vez dado click en alguna sección de la web y también cuando se haga scroll. ¿este codigo lo permite?
Gracias
En su implementación básica no admite que al hacer scroll desparezca el banner. Sin embargo puedes hacer que una vez el usuario pinche sobre cualquier enlace «implicitamente» acepte las cookies. Aunque no es una práctica muy correcta.
Aquí tienes un ejemplo de código: http://stackoverflow.com/questions/19831048/updated-cookiecuttr-accept-cookies-while-navigation-around-the-web-cookie-l