Inicio Apuntes FPApuntes DAWConsentimiento de cookies usando HTML, CSS y JavaScript

Consentimiento de cookies usando HTML, CSS y JavaScript

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Como estoy pensando en cambiar el consentimiento de cookies, recordé de que en su día publiqué un ejercicio relacionado con las Cookies en PHP y como recuperar preferencias de usuario. Pues mientras sigo recuperándome de mis cosas, hoy vamos a ver cómo se puede crear un cuadro de consentimiento de cookies usando HTML, CSS y en este caso JavaScript.

Una cookie es un pequeño archivo de texto con pequeños fragmentos de datos que el servidor web almacena en el navegador del cliente. Estas cookies ayudan a garantizar que el usuario consiga una mejor experiencia a la hora de navegar por el sitio web. En casos como el de Wordpress, los creadores de contenido podemos utilizar un buen puñado de plugins para que el visitante acepte el uso de cookies en su navegador. Pero si te pones a ver este tipo de servicios, te puedes dar cuenta de que en realidad son bastante sencillos de llevar a cabo. Por eso, en las siguientes líneas vamos a ver cómo se pueden configurar las cookies en el navegador del usuario. Para ello utilizaremos un cuadro de consentimiento de cookies y Javascript.

Hoy en día, en todas las páginas web que puedas visitar te vas a encontrar un cuadro de consentimiento de cookies, parecido o similar al siguiente. Este cuadro de cookies no se ocultará incluso si vuelve a cargar la página hasta que acepte las cookies para el navegador. Una vez aceptadas las cookies, el cuadro dejará de mantenerse en pantalla hasta que elimine manualmente la cookie de este sitio de su navegador o no haya caducado.

consentimiento de cookies

En caso de que bloquees este sitio para que no configure cookies en tu navegador o este cuadro de consentimiento no pueda configurar la cookie en el navegador, aparecerá un cuadro de alerta mostrando un aviso de error. Las cookies en este ejemplo de consentimiento expirarán automáticamente después de un mes. Pero el tiempo de duración se puede cambiar al gusto.

¿Cómo crear un cuadro de consentimiento de cookies con Javascript?

Para realizar este ejemplo, tan solo necesitaremos crear dos archivos. El primero será un archivo HTML en el que vamos a añadir el Javascript necesario. El segundo será el CSS en el que aplicaremos las reglas de estilo.

Archivo index.html

Como decíamos, el primer archivo será un archivo HTML con el nombre de index.html en el que vamos a añadir el Javascript necesario para manejar las cookies.

<!DOCTYPE html>

<html lang="es" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Consentimiento de Cookies</title>
  <!-- Se carga el archivo .css -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <img src="cookie.png" alt="Consentimiento Cookies">
    <div class="content">
      <header>Consentimiento de Cookies</header>
      <p>Esta web utiliza cookies para ofrecer una mejor experiencia al usuario.</p>
      <div class="buttons">
        <button class="item">Lo entiendo</button>
        <a href="https://entreunosyceros.net/politica-de-cookies" class="item">Saber más</a>
      </div>
    </div>
  </div>
  <!-- Script para manejar el consentimiento de cookies -->
  <script>
    const cookieBox = document.querySelector(".wrapper"),
      acceptBtn = cookieBox.querySelector("button");

    acceptBtn.onclick = () => {
      // Configuramos la cookie por 1 mes, después de un mes caducará automáticamente
      document.cookie = "CookieBy=entreunosyceros; max-age=" + 60 * 60 * 24 * 30;
      if (document.cookie) { // Si la cookie está configurada
        cookieBox.classList.add("hide"); // Escondemos la caja de las cookies
      } else { // Si la cookie no se puede configurar, se muestra el siguiente error
        alert("¡No se puede configurar la cookie! Por favor, desbloquea este sitio desde la configuración de cookies de tu navegador.");
      }
    }
    let checkCookie = document.cookie.indexOf("CookieBy=entreunosyceros"); //comprobamos la cookie
    //si la cookie está configurada, ocultamos el cuadro de cookies; de lo contrario, se mostrará
    checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
  </script>

</body>

</html>

Archivo style.css

En segundo lugar vamos a crear el archivo CSS con el nombre de style.css. Dentro pegaremos las siguientes reglas para darle un toque bonito a nuestra caja de cookies.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Comic Sans', sans-serif;
}

body {
  background: #FCBA7F;
}

.wrapper {
  max-width: 100%;
  background: #fff;
  padding: 25px 25px 30px 25px;
  border-radius: 15px;
  box-shadow: 7px 7px 14px -5px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.wrapper.hide {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

::selection {
  color: #fff;
  background: #fcaf6d;
}

.wrapper img {
  max-width: 90px;
}

.content header {
  font-size: 25px;
  font-weight: 600;
}

.content {
  margin-top: 10px;
}

.content p {
  color: #858585;
  margin: 10px 50px 20px 50px;
}

.content .buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttons button {
  padding: 10px 20px;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  background: #FCBA7F;
  cursor: pointer;
  transition: all 0.3s ease;
}

.buttons button:hover {
  transform: scale(0.9);
  color: #f8553f;
}

.buttons .item {
  margin: 0 10px;
}

.buttons a {
  color: #fcaf6d;
  text-decoration: none;
}

.buttons a:hover {
  color: #f8553f;
}

Y con esto tenemos creado un cuadro de consentimiento de cookies utilizando HTML, CSS y JavaScript. Si quieres ver este ejemplo en funcionamiento, puedes echar un vistazo al siguiente enlace.

Hoy en día, todos los sitios web usan una cookie con la que poder mostrar anuncios e información relevante al usuario. Por lo que si tienes un sitio web, posiblemente necesites implementar algo así. Esto no es más que un ejemplo rápido y sencillo, que supongo que se puede mejorar en muchas cosas.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.