Un lector me ha escrito consultando sobre un post algo antiguo, sobre cómo poner un sencillo mensaje de cookies en una web. La verdad es que no me he explicado muy bien en aquel post, los navegadores han cambiado durante estos últimos años, JavaScript también.. así que aquí estoy compartiendo otro mensaje de aceptar cookies más actual.
Este mensaje de aceptar cookies es una actualización de aquel antiguo que vengo usando en nuevos proyectos. Es un mensaje hecho artesanalmente que puedes copiar y pegar para tu web. El único requisito que tiene es que necesitas usar la librería de jQuery para que funcione. jQuery hoy día es como un estándar, hace tan bien su trabajo de acceder al DOM de las páginas web, que cómo no usarlo en todos los proyectos.
Una peculiaridad que tiene este mensaje es que no utiliza cookies, jeje, utiliza el localStorage de los navegadores. El localStorage es uno de los varios sistemas de almacenamiento de información en navegadores para hacer que las webs sean seguras y que funcionen. Espero que no se metan de nuevo los abogados a legislar y hacernos la vida más complicada también con el localStorage. Como si fueran un problema estas cookies, si realmente lo que hacen es aumentar la seguridad de las webs.. a saber:
Las webs que usan cookies son más seguras que las que no usan cookies.
Es un sin sentido, pero en fin, hecha la Ley, no queda más que obedecer y punto pelota. Todos a poner el bloqueante y cansino mensaje de cookies en todas las webs 🙁
Vamos con el código, el mensaje de aceptar cookies
Lo primero que todo es que necesitas cargar en el HEAD del documento la librería de jQuery. A fecha de hoy se publica este CDN que puedes copiar y pegar en tu web:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Lo siguiente es el código en sí que hace la caja del mensaje en la parte inferior de la web. El mejor sitio donde puedes ponerlo es antes de cerrar la etiqueta BODY, es decir, antes de donde pone </BODY> en tu página web. Otra opción es poner el DIV dentro del BODY, y los códigos STYLE y SCRIPT en la cabecera. Pero lo dicho, si quieres ser papista a tope y seguir los consejos sobre SEO, el mejor sitio es antes de cerrar el BODY. Ahí va el código:
<div id="div-cookies" style="display: none;">
Necesitamos usar cookies para que funcione todo, si permanece aquí acepta su uso, más información en
<a hreflang="es" href="/info/aviso-legal">Aviso Legal</a>
y la
<a hreflang="es" href="/info/politica-de-privacidad">Política de Privacidad</a>.
<button type="button" class="btn btn-sm btn-primary" onclick="acceptCookies()">
Acepto el uso de cookies
</button>
</div>
<style>
#div-cookies {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
background-color: white;
box-shadow: 0px -5px 15px gray;
padding: 7px;
text-align: center;
z-index: 99;
}
</style>
<script>
function checkAcceptCookies() {
if (localStorage.acceptCookies == 'true') {
} else {
$('#div-cookies').show();
}
}
function acceptCookies() {
localStorage.acceptCookies = 'true';
$('#div-cookies').hide();
}
$(document).ready(function() {
checkAcceptCookies();
});
</script>
A que es sencillo, ya tú te lo puedes adaptar como quieras. Fíjate que este mismo código no usa Cookies para saber que el usuario ya ha aceptado, sino el localStorage del navegador.
Cómo ver la información de cookies, localStorage, etc..
En Firefox o Chrome se hace dándole con el botón derecho a la página, y click en inspeccionar página web. Deberías de ver algo parecido a la image siguiente:
Esta imagen es del navegador que más uso últimanente, el Firefox Developer Edition. ¡Muy recomendable!
Reuniendo todos los códigos fuentes en un único fichero
Recapitulando lo anterior, sólo me queda dejar todos los códigos fuentes anteriores en un sólo fichero único que puedes adaptar a lo que necesites. Está 100% probado en local y funciona. Tampoco necesitas subir este fichero al servidor para que funcione ya que sólo usa HTML, CSS y Javascript.. con lo que grabando esto en un fichero index.html en tu ordenador, le haces doble click para que se abra en el navegador y lo verás:
<html>
<head>
<title>JnjSite.com: Nueva versión del sencillo mensaje de aceptar cookies para tu web</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="div-cookies" style="display: none;">
Necesitamos usar cookies para que funcione todo, si permanece aquí acepta su uso, más información en
<a hreflang="es" href="/info/aviso-legal">Aviso Legal</a>
y la
<a hreflang="es" href="/info/politica-de-privacidad">Política de Privacidad</a>.
<button type="button" class="btn btn-sm btn-primary" onclick="acceptCookies()">
Acepto el uso de cookies
</button>
</div>
<style>
#div-cookies {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
background-color: white;
box-shadow: 0px -5px 15px gray;
padding: 7px;
text-align: center;
z-index: 99;
}
</style>
<script>
function checkAcceptCookies() {
if (localStorage.acceptCookies == 'true') {} else {
$('#div-cookies').show();
}
}
function acceptCookies() {
localStorage.acceptCookies = 'true';
$('#div-cookies').hide();
}
$(document).ready(function() {
checkAcceptCookies();
});
</script>
</body>
</html>
Espero haber podido ayudar.
Un saludo.
Muy bueno el aporte.
¿Es posible modificar este código para utilizarlo en un sitio en tres idiomas: español, inglés y francés?
Gracias por el aporte.
Muchas gracias Medardo!
Es posible, en teoría podrías modificar el contenido del div que contiene el mensaje para traducirlo al vuelo. Para eso puedes usar jQuery, con algo como esto:
jQuery(‘#div-cookies’).html(‘AQUI VA EL CONTENIDO TRADUCIDO’);
La siguiente pregunta es cómo querrías detectar el idioma del visitante, si es por la URL, quizá tiene /es/, /en/, en la URL. Esto también lo puedes consultar programando un poco en Javascript. Lo puedes consultar con la variable Javascript siguiente:
window.location.pathname
También se puede detectar en las cabeceras que envía el navegador al servidor web. Es decir, cada navegador suele enviar una cabecera que se llama Accept-Language, que identifica el lenguaje del visitante. En teoría, el valor del lenguaje del navegador lo tienes en la variable de Javascript siguiente:
navigator.language
Saludos.
He implementado tu código sobre la politica de cookies y me ha funcionado a la perfeciión. No soy programador experto, pero con todos los demás que encontré no conseguí hacerlos funcionar. Probablemente será por lo bien que lo has explicado y su sencillez.
He visto que el que implementas en esta página añade funciones mucho mejor adaptadas a la normativa actual, lo de AJUSTES DE COOKIES que permite desactivar las no necesarias.
Me harías un gran favor si publicaras el código correspondiente, bien explicado como tú sabes… jeje
Muchas gracias por adelantado y por favor sigue ilustrándonos a los aprendices.
Un abrazo.
Raúl
Hola Raúl!
Muchas gracias por tu comentario. Los comentarios como el tuyo son los que me animan a seguir compartiendo mis granitos de arena.. 😉
A ver si podemos actualizar este script para el mensaje de cookies pronto. El otro mensaje que veías aquí en jnjsite.com, era un plugin de WordPress incompatible con la versión de PHP del servidor. Lo he tenido que quitar y he puesto el del post. Lo único que le faltaría sería añadirle un popup en donde mostrar información o elegir qué cookies para que sea parecido.
Un paso más allá sería entonces, el programar después de lo anterior, qué cookies o scripts usamos y cuáles no con los visitantes según lo elegido.
Un saludo!
Hola,
Un placer leeros. Todo está muy bien explicado.
Finalmente, habéis podido realizar el código de las cookies actualizado 2020, donde se puede elegir que cookies son aceptadas y o no?
Gracias de antemano.
Hola Miriam!
Muchas gracias por tu comentario.
No tengo ningún código fuente que pueda compartirte, pero podrías empezar con jQuery con las funciones getScript o loadScript. Julio ha dejado también unos códigos fuentes en estos comentarios que igual sirven para construir lo que necesites para tu web.
Saludos.
Excelente artículo, he añadido tu código en mi página y funciona a la perfección. Muchísimas gracias!!
No hay de qué Cristina, muchas gracias por tu comentario!
Hola amigo, lo instalé en un sitio de bootstrap y funcionó perfectamente, muchas gracias, saludos.
Hola Sergio, bien 👍 gracias por dejar un comentario!
buenas,
Me ha gustado tu idea de hacerlo con variables, tras dar mil y una vueltas buscando un codigo para hacerlo y que no se saltase la ley grabando una cookie antes de que el usuario las aceptase.
Estoy fabricándome un sitio y he decidido emplear de base tu código con algunas modificaciones .para adaptarlo a mi sitio espero que te guste, aparte de los style que incorpora uso otros para estilo y tamaño de fuentes acordes con mi web
aun me queda pulirlo pero casi lo tengo completo.
Espero te guste
<!– el dialogo que se muestra lo forma un que se oculta o muestra segun el caso–>
#cookies-info {
position: fixed;
bottom: 0px;
left: 10%;
width: 80%;
background-color:honeydew;
color:black;
box-shadow: 0px -5px 15px gray;
padding: 7px;
margin: 10px 12px 10px 12px;
z-index: 99999999;
}
.div-info {
align-content: center;
text-align: justify;
width: 98%;
padding: 0px 2% 0px 2%;
}
Antes de continuar
Esta página web utiliza cookies para brindarte la mejor experiencia online. Haznos saber si estás de acuerdo haciendo clic en la opción «Sí, acepto» a continuación. Si deseas obtener más información sobre las cookies que utilizamos y sobre nuestra Política de privacidad.
Mas Información Sobre nuestra Política de Privacidad.
Información sobre las cookies
En caso de no desear cookies, pulse en el botón «No, Acepto» y desactivaremos las cookies que no sean esenciales para el funcionamiento de la pagina.
Para evitar el resto de cookies que pudiera haber, ya sean nuestras o de terceros debera de configurar su navegador para evitar que acepte cookies, Se mostrara una ventana con información de como proceder para configurar los principales navegadores,
En este caso NO nos hacemos responsables de los errores que pudieran ocurrir al visitar el sitio web. Puesto que algunas de las cookies esenciales se desactivaran junto a las que sirven para comprobar que no se trate de un bot, tampoco podra comentar en el blog, ni contactar con nosotros por medio del formulario de contacto de la web, si podra hacerlo mediante su programa de correo electronico
Sí, Acepto
No, Acepto
/*las funciones toggleIfrm1 y toggleIfrm2 alternn los iframes con información sobre Politica de privacidad apDiv1 y cookies apDiv2 */
/* toggleIfrm1 comprueba si esta abierto el iframe apDiv2 si esta abierto lo cierra lo cierra, a continuación abre el iframe apDiv1 */
function toggleIfrm1(id) {
if (document.getElementById(‘apDiv2’).style.display==»block»){
document.getElementById(‘apDiv2’).style.display=»none»;
}
if(document.getElementById(id).style.display==»block») {
document.getElementById(id).style.display=»none»;
} else {
document.getElementById(id).style.display=»block»;
}
}
/* toggleIfrm2 comprueba si esta abierto el iframe apDiv1 si esta abierto lo cierra lo cierra, a continuación abre el iframe apDiv2 */
function toggleIfrm2(id) {
if (document.getElementById(‘apDiv1’).style.display==»block»){
document.getElementById(‘apDiv1’).style.display=»none»;
}
if(document.getElementById(id).style.display==»block») {
document.getElementById(id).style.display=»none»;
} else {
document.getElementById(id).style.display=»block»;
}
}
/* Acepta las cookies guarda la variable accepCookies con el valor true, ejecuta la funcion YEScookies que activa las cookies y cierra el Div cookies-info */
function acceptCookies() {
localStorage.acceptCookies = ‘true’;
YEScokies ();
$(‘#cookies-info’).hide();
}
function YEScokies (){
/* aqui van las funciones para activar las cookies */
}
/* No acepta las cookies guarda la variable NOaccepCookies con el valor true, muestra la pagina Config-navegadores, ejecuta la funcion NOcokies que desactivara los div de cookies, y cierra el Div cookies-info, */
function NOacceptCookies() {
localStorage.NOacceptCookies = ‘true’;
window.open(‘./Config-navegadores.html’, ‘popup’);
NOcokies ();
$(‘#cookies-info’).hide();
}
function NOcokies (){
/* aqui van las funciones para desactivar las cookies */
}
/* Comprueba si visito anteriormente el sitio mirando el estado de las variables acceptCookies y NOacceptCookies,
*Si la variable acceptCookies muestra true ejecuta la funcion YEScokies activando las cookies de la pagina
* Si la variable NOacceptCookies muestra true ejecuta la funcion NOcokies desactivando las cookies de la pagina
* Si ninguna de las dos variables es true muestra el Div cookies-info, */
function checkAcceptCookies() {
if (localStorage.NOacceptCookies == ‘true’) { NOcokies (); }
else if (localStorage.acceptCookies == ‘true’) { YEScokies (); }
else { $(‘#cookies-info’).show(); }
}
/* Cuando se carga la pagina lanza la funcion */
$(document).ready(function() {
checkAcceptCookies();
});
en el comentario que puse antes no se ve el codigo html , lo mando modificado a ver si asi se ve
<!– el dialogo que se muestra lo forma un que se oculta o muestra segun el caso–>
<!–
#cookies-info {
position: fixed;
bottom: 0px;
left: 10%;
width: 80%;
background-color:honeydew;
color:black;
box-shadow: 0px -5px 15px gray;
padding: 7px;
margin: 10px 12px 10px 12px;
z-index: 99999999;
}
.div-info {
align-content: center;
text-align: justify;
width: 98%;
padding: 0px 2% 0px 2%;
}
Antes de continuar
Esta página web utiliza cookies para brindarte la mejor experiencia online. Haznos saber si estás de acuerdo haciendo clic en la opción «Sí, acepto» a continuación. Si deseas obtener más información sobre las cookies que utilizamos y sobre nuestra Política de privacidad.
Mas Información Sobre nuestra Política de Privacidad.
Información sobre las cookies
<!–
En caso de no desear cookies, pulse en el botón «No, Acepto» y desactivaremos las cookies que no sean esenciales para el funcionamiento de la pagina.
Para evitar el resto de cookies que pudiera haber, ya sean nuestras o de terceros debera de configurar su navegador para evitar que acepte cookies, Se mostrara una ventana con información de como proceder para configurar los principales navegadores,
En este caso NO nos hacemos responsables de los errores que pudieran ocurrir al visitar el sitio web. Puesto que algunas de las cookies esenciales se desactivaran junto a las que sirven para comprobar que no se trate de un bot, tampoco podra comentar en el blog, ni contactar con nosotros por medio del formulario de contacto de la web, si podra hacerlo mediante su programa de correo electronico
<!– Sí, Acepto
No, Acepto
/*las funciones toggleIfrm1 y toggleIfrm2 alternn los iframes con información sobre Politica de privacidad apDiv1 y cookies apDiv2 */
/* toggleIfrm1 comprueba si esta abierto el iframe apDiv2 si esta abierto lo cierra lo cierra, a continuación abre el iframe apDiv1 */
function toggleIfrm1(id) {
if (document.getElementById(‘apDiv2’).style.display==»block»){
document.getElementById(‘apDiv2’).style.display=»none»;
}
if(document.getElementById(id).style.display==»block») {
document.getElementById(id).style.display=»none»;
} else {
document.getElementById(id).style.display=»block»;
}
}
/* toggleIfrm2 comprueba si esta abierto el iframe apDiv1 si esta abierto lo cierra lo cierra, a continuación abre el iframe apDiv2 */
function toggleIfrm2(id) {
if (document.getElementById(‘apDiv1’).style.display==»block»){
document.getElementById(‘apDiv1’).style.display=»none»;
}
if(document.getElementById(id).style.display==»block») {
document.getElementById(id).style.display=»none»;
} else {
document.getElementById(id).style.display=»block»;
}
}
/* Acepta las cookies guarda la variable accepCookies con el valor true, ejecuta la funcion YEScookies que activa las cookies y cierra el Div cookies-info */
function acceptCookies() {
localStorage.acceptCookies = ‘true’;
YEScokies ();
$(‘#cookies-info’).hide();
}
function YEScokies (){
/* aqui van las funciones para activar las cookies */
}
/* No acepta las cookies guarda la variable NOaccepCookies con el valor true, muestra la pagina Config-navegadores, ejecuta la funcion NOcokies que desactivara los div de cookies, y cierra el Div cookies-info, */
function NOacceptCookies() {
localStorage.NOacceptCookies = ‘true’;
window.open(‘./Config-navegadores.html’, ‘popup’);
NOcokies ();
$(‘#cookies-info’).hide();
}
function NOcokies (){
/* aqui van las funciones para desactivar las cookies */
}
/* Comprueba si visito anteriormente el sitio mirando el estado de las variables acceptCookies y NOacceptCookies,
*Si la variable acceptCookies muestra true ejecuta la funcion YEScokies activando las cookies de la pagina
* Si la variable NOacceptCookies muestra true ejecuta la funcion NOcokies desactivando las cookies de la pagina
* Si ninguna de las dos variables es true muestra el Div cookies-info, */
function checkAcceptCookies() {
if (localStorage.NOacceptCookies == ‘true’) { NOcokies (); }
else if (localStorage.acceptCookies == ‘true’) { YEScokies (); }
else { $(‘#cookies-info’).show(); }
}
/* Cuando se carga la pagina lanza la funcion */
$(document).ready(function() {
checkAcceptCookies();
});
Hola Julio!
Pinta bien lo que estas haciendo. Habrá que controlar los códigos que envían cookies tanto en JavaScript (no cargando las librerías si el visitante no acepta), como también en el servidor con PHP/Java/etc (no enviando cookies si el visitante no ha aceptado todavía).
Lamento que no se puedan ver bien los comentarios con códigos fuentes por motivos de seguridad aquí en WordPress. Te recomiendo mirar esta web para compartir: https://codepen.io/
Un saludo y gracias por comentar!
GRANDE, GRANDE, GRANDE. Si todos lo explicasen como tú, el tonto del lugar, sería un extraordinario creador de webs.
Gracias por el comentario Diego!! 💪😎👍
Muchas gracias por tus aportes
De nada, muchas gracias por dejar un comentario.
Un saludo.
Hola, Tengo el siguiente código para la cookies que me funciona muy bien, le puedo insertar hasta imagenes. El problema que tengo con el código, es que cada vez que voy al Home, Me Aparece. ¿Quisiera ver que variable le pongo al script para que solo vuelva aparecer cuando borre las cookies?
El Código:
Solicitamos tu permiso para obtener datos estadísticos de tu navegación en esta web. Usamos cookies propias y de terceros
para mejorar nuestros servicios.
Si continúas navegando consideramos que aceptas el uso de cookies. Puedes obtener más Más Información o bien conocer cómo cambiar
la configuración… Aceptar
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;
}
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;
}
if(getCookie(‘tiendaaviso’)!=»1″){
document.getElementById(«barraaceptacion»).style.display=»block»;
}
function PonerCookie(){
setCookie(‘tiendaaviso’,’1′,365);
document.getElementById(«barraaceptacion»).style.display=»none»;
}
Gracias
Hola Claudia! Curioso lo que te pasa, parece que no detecta la cookie y siempre te muestra al banner cierto?¿
Yo probaría cambiando el if que lo muestra por algo así a ver qué pasa:
setTimeout(function() {
var cookieContent = getCookie(‘tiendaaviso’);
console.log(cookieContent);
if(cookieContent !=»1″){
document.getElementById(«barraaceptacion»).style.display=»block»;
}
}, 3000);
Otra opción es ponerlo todo en un fichero app.js aparte para poder debugearlo bien en el navegador. Así le pones puntos de ruptura o interrupción al código y vas viendo el valor de las variables mientras que se ejecuta.
Un saludo.
Muchas gracias por enseñarnos tan fácil con este gran aporte.
Quería preguntarle por una cosa
Si quisiera que la ventana de aceptar cookies apareciera a los 2 segundos de abrirse la página que código debería poner, he estado probando setTimeout pero no lo consigo.
Gracias
De nada Javichu, muchas gracias por dejar un comentario!
Si no me equivoco se debería de poder hacer con algo así:
$(document).ready(setTimeout(function() {
checkAcceptCookies();
}, 2000));
Un saludo!
Gracias
Ahora si funciona
Gracias x la ayuda
De nada Javichu 👍
Buenos días Jnj
Quería preguntarle cual es el código que hay que añadir para que cuando salga la ventana de aceptar cookies o rechazarlos, se ponga la web de otro color e inactiva hasta que no se acepta los cookies??
Gracias
Javichu
Hola Javichu!
Comparto un código esqueleto que tengo por aquí para hacer algo así: https://jnjsite.com/esqueleto-para-mensaje-de-cookies/
Muchas Gracias por tu explicación y aportación. Así da gusto. Saludos.
De nada Miguel. Muchas gracias por dejar un comentario.
Saludos!
Muchas gracias x tu gran ayuda, voy a probarlo para ver q tal va. Un gran abrazo Jnj
Buen trabajo!
Gracias! Un saludo Juan Javier
Gran trabajo JNJ y gracias por compartir….
Yo he dejado la caja y el script en el HTML
Necesitamos usar cookies para que funcione todo, si permaneces aquí acepta su uso, más información en: <a href=»aviso-legal.html» rel=»nofollow ugc»>Aviso Legal</a> y la <a href=»politica-privacidad.html» rel=»nofollow ugc»>Política de Privacidad</a>.
Acepto el uso de cookies
function checkAcceptCookies() {
if (localStorage.acceptCookies == ‘true’) {
} else {
$(‘#div-cookies’).show();
}
}
function acceptCookies() {
localStorage.acceptCookies = ‘true’;
$(‘#div-cookies’).hide();
}
$(document).ready(function() {
checkAcceptCookies();
});
Y la configuración en el CSS
#div-cookies {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
background-color: white;
box-shadow: 0px -5px 15px gray;
padding: 7px;
text-align: center;
z-index: 99;
font-size: 16px;
}
Lo curioso de todo esto es que sólo me funciona correctamente en «Modo Incognito» (Chrome) o «Nav. Privada» (iPhone)
Sabes cual puede ser el motivo?
Gracias de antemano
Hola David.
Muchas gracias por el comentario. Podrías ver en inspeccionar página web, en el ‘Almacenamiento’, en la sección de ‘Almacenamiento en caché’, a ver si la variable acceptCookies se genera correctamente.
Un saludo.
Buenas! Lo implemente pero en teléfonos móviles se ve muy pequeño, como se podría hacer para que sea responsive? Gracias!
Buenos días Juansar!
Para hacerlo responsive puedes jugar con los estilos CSS. Prueba con @media el tamaño de la fuente, de la caja, para todos los diferentes tamaños de pantalla, así lo convertirás en responsive.
Saludos.