Tabla de contenido
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.
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.