Sencillo mensaje de aceptar cookies para tu web

2014-12-23 - Categorías: General
Por la ley llamada LGPD, y ahora también hecho reglamento RGPD, los desarrolladores nos vemos obligados a mostrar un mensaje de si el usuario acepta que usemos cookies. Todo esto se debe en parte por el miedo por las cookies, quizá por el desconocimiento de lo que son o para qué sirven.

Las cookies son simples ficheros de texto en plano que no contienen absolutamente ningún programa. No se ejecutan ni pueden infiltrarse en un ordenador, pero ya puestos a hacer leyes no nos queda otra que obedecer.

Éstas cookies, o galletas en castellano, se usan para hacer carritos de compra en tiendas online, almacenando los productos que estas comprando. A veces se usan para asegurar una sesión, evitando gracias a ellas que otros usuarios suplanten la identidad de otros. Más que un peligro para el usuario, que no lo son, son una gran ayuda para todos. Dejemos el tema de momento aquí… 🙂

Vamos con el código

Con un par de funciones Javascript y un sencillo código HTML con estilo CSS podemos apañarnos:

<script>
/* ésto comprueba la localStorage si ya tiene la variable guardada */
function compruebaAceptaCookies() {
  if(localStorage.aceptaCookies != 'true'){
    cajacookies.style.display = 'block';
  }
}

/* aquí guardamos la variable de que se ha
aceptado el uso de cookies así no mostraremos
el mensaje de nuevo */
function aceptarCookies() {
  localStorage.aceptaCookies = 'true';
  cajacookies.style.display = 'none';
}

/* ésto se ejecuta cuando la web está cargada */
$(document).ready(function () {
  compruebaAceptaCookies();
});
</script>

Ésto de aquí arriba lo ponemos donde queramos. Necesitaremos jQuery ya incluido en la cabecera de la web. Me remito a la página oficial para incluirlo si es que no lo tienes ya http://jquery.com/ puedes poner uno de los CDN para hacerlo más fácil desde la web https://code.jquery.com/ por ejemplo añadiendo en el HEAD lo siguiente:

<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>

Ahora la caja donde se muestra el mensaje, la puedes poner donde quieras porque luego le daremos estilo y la pondremos fija arriba:

<div id="cajacookies">
<p><button onclick="aceptarCookies()" class="pull-right"><i class="fa fa-times"></i> Aceptar y cerrar éste mensaje</button>
Éste sitio web usa cookies, si permanece aquí acepta su uso.
Puede leer más sobre el uso de cookies en nuestra <a href="politica.html">política de privacidad</a>.
</p>
</div>

Si buscamos por internet hay muchos ejemplos de estilo de cajas. Yo he necesitado darle estilo para un fondo negro. Aquí está el código:

#cajacookies {
  display: none;
  box-shadow: 0px 0px 5px 5px #808080;
  background-color: white;
  color: black;
  padding: 10px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
}

#cajacookies button {
  color: black;
}

Ya sólo queda poner los 3 códigos en cada sitio y tendremos una caja con el típico mensaje de aceptar el mensaje de cookies. Cópialo, pégalo, modifícalo, úsalo cuanto quieras. El aspecto aproximado del mensaje debe ser algo parecido a lo siguiente:

Saludos 🙂

21 respuestas a “Sencillo mensaje de aceptar cookies para tu web”

  1. bolivar dice:

    gracias por el aporte

    • Jnj dice:

      No hay de que, un saludo Bolivar!

      • Andres dice:

        Genio, gracias, me salvaste la vida… solo una duda, a mi me aparece arriba en el top de la web el mensaje, que deberia cambiar para que aparezca abajo como en tu web, gracias, disculpas por mi ignorancia.

        • Jnj dice:

          Hola Andrés!
          Gracias por tu comentario! Con cambiar donde pone ‘top: 0px;’ por ‘bottom: 0px;’ en los estilos CSS, debería de ponerse la caja del mensaje abajo.
          Un saludo.

  2. Núria Güell Verdaguer dice:

    Esto hay que ponerlo en cada una de las páginas de la web no?

  3. Gianni dice:

    Hola, me pasa que al clicar en aceptar el mensaje no se cierra… como podría corregir esto?

  4. Aracely dice:

    Muchas gracias por tu aporte

  5. Abraham dice:

    Hola buenos días, tengo una duda/problema 🙁

    Tengo el mensaje de las cookies en mi web y me funciona perfectamente, lo único que una vez que la aceptas, si sigues navegando por la web y estás en otro apartado, en el momento que le das a volver, te aparecen las cookies unos segundos de nuevo y al momento desaparecen, un tanto molesto para el usuario!

    No sé si me he explicado bien, si me podéis echar un cable os lo agradecería 🙂

    Mi web es https://as-abraham.com/

    Un saludo

    • Jnj dice:

      Buenas tardes Abraham!
      El problema es que el script carga con el display por defecto en la caja, que es ‘block’ si no me equivoco. Si lo cambias en el CSS el display de la caja a ‘none’:

      #cajacookies {
      display: none;
      ..
      }

      ..entonces al cargar la web no se vería el mensaje de cookies. Lo que faltaría luego sería en el JavaScript cambiar la función compruebaAceptaCookies() así:

      function compruebaAceptaCookies() {
      if(localStorage.aceptaCookies != ‘true’){
      cajacookies.style.display = ‘block’;
      }
      }

      ..así lo que conseguimos es que por defecto no se vea, y si no se han aceptado, cuando haya cargado la web, se muestre el mensaje si es necesario.
      Espero que sirva. Gracias por dejar un mensaje.
      Saludos.

      • Abraham dice:

        Hola buenos días,

        Antes de nada 1 millón de gracias por la rápida respuesta, con los nervios de intentar resolverlo he encendido el ordenador, he probado lo que me comentabas y…nada! :(, no sé si hay algún paso que me estoy saltando o cual puede ser el problema, a ver si me explico:

        En la cabecera de mi pag. index tengo lo siguiente:

        ¿Aceptas nuestras Cookies?
        Usamos cookies para mejorar tu experiencia en la web.

        No
        Si

        y en mi css:

        .cookies {
        position: fixed;
        z-index: 99999999999;
        bottom: 0;
        left: 0;
        right: 0;
        background: black;
        color: white;
        font-family: arial;
        text-align: center;
        }

        .cookies__boton {
        background: initial;
        border: 2px solid white;
        padding: 1rem;
        font-size: 1rem;
        margin-top: 1rem;
        color: white;
        width: 5rem;
        text-align: center;
        cursor: pointer;

        }

        ¿Me tengo que crear un id #cajacookies {
        display: none;
        ..
        }?, por qué yo no tengo ese id en mi html.

        Cuando me comentas cambiar la funcion: compruebaAceptaCookies(), la voy a cambiar pero veo que no tengo esa función en mi JavaScript, SOCORRO!, jejeje es broma ya te digo que muchísimas gracias por tú tiempo

        Un saludo

        • Jnj dice:

          👍 buenas tardes Abraham.
          Si no me equivoco, te falta añadir en la clase esto:

          .cookies {
          display: none;
          ..
          }

          Y en el JavaScript que tienes, tienes una función nombrada iniciar(), tienes que cambiarla por esto:

          function iniciar() {
          // Comprueba si en el pasado el usuario ha marcado una opción
          if (localStorage.getItem(‘cookie’) !== null) {
          if(localStorage.getItem(‘cookie’) === ‘true’) {
          // Aceptó
          aceptarCookies();
          } else {
          // No aceptó
          denegarCookies();
          }
          } else {
          $(‘.cookies’).css(‘display’, ‘block’);
          }
          }

          Saludos.

          • Abraham dice:

            Hola buenos días,
            lo dejo por imposible!!!, le pongo display:none a .cookies y directamente ni me aparece el mensaje y al borrar la función del script que me comentas y sustituirla por la que me pasas y no hace nada aparentemente, asi que mucho me temo que se va a quedar asi, junto con algún error más que hay x ahí!

            Muchas gracias por tú tiempo

            Un saludo

  6. Code dice:

    Hola buenas tardes, el mensaje para “aceptar el uso de cookies” solo almacena de manera local en el navegador que ya fue aceptado ¿cierto? No hay alguna cookie que se tenga que cambiar o alguna norma a nivel código que se tenga que cumplir?

    • Jnj dice:

      Buenos días Code.

      El mensaje de las cookies, no usa cookies, almacena el hecho de aceptar en una variable del Local Storage.

      Por otro lado, sólo en el caso de que se haya aceptado, se podría usar códigos fuentes en tu web que usen Cookies para cumplir con la Ley.

      Y además, si no me equivoco, por Ley, hay que poner una política de privacidad y/o aviso legal informando de todas las Cookies que uses en la web. Igualmente si no usas Cookies, hay que poner este aviso legal y/o política de privacidad en donde lo indique.

      Saludos.

Responder a Gianni Cancelar la respuesta

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

 

© 2021 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.