Si vas a diseñar una página web donde posiblemente entrarán navegantes europeos, y quieres usar Cookies, no te quedará otra que avisar a tus usuarios si no quieres infringir el artículo 22 de la Ley 34/2002. Es más, deberán darte su consentimiento de ante mano. Para cumplir esta agradable ley habrá que remangarse y programar alguna lógica. Lamentablemente no siempre disponemos de un Back-End (en el caso de disponer de PHP visita mi otro artículo) donde nos apoyemos si es puramente HTML/CSS o Javascript (VueJS, ReactJS, Angular, vainilla…), lo que nos va a empujar a recurrir al ingenio. O lo que es lo mismo, usar el potencial de Javascript para guardar la decisión del visitante y evitar que vuelva a mostrarse el cartel o aviso.
He preparado un ejemplo sencillo en Javascript vainilla, o ES6, totalmente comentado y minimalista con las siguientes características.
- Recordar la opción pulsada.
- Oculta el cartel de Cookies si ha sido pulsado.
- Ejecuta un código si ha pulsado el botón afirmativo o si ya había confirmado en el pasado.
- Compatible con CMS como WordPress o Drupal.
- Compatible con cualquier Frameworks Web.
HTML
Las etiquetas son maleables a tu diseño, las puedes aumentar o reducir a necesidad. No obstante debes evitar cambiar las clases que usa el script: cookies, cookies__boton--no y cookies__boton--si.
<section class="cookies">
<h2 class="cookies__titulo">¿Quieres nuestras Cookies?</h2>
<p class="cookies__texto">Usamos cookies para mejorar tu experiencia en la web.</p>
<div class="cookies__botones">
<!-- Botón de negación -->
<button class="cookies__boton cookies__boton--no">No</button>
<!-- Botón de afirmación -->
<button class="cookies__boton cookies__boton--si">Si</button>
</div>
</section> Javascript
Ahora llegamos al código para nuestro Front-End. En Javascript puro se recoge las etiquetas anteriores, y guarda en un localstorage si ha sido pulsado en si o no.
document.addEventListener('DOMContentLoaded', () => {
let cookies = () => {
//======================================================================
// COOKIES
//======================================================================
//-----------------------------------------------------
// Variables
//-----------------------------------------------------
let seccionCookie = document.querySelector('.cookies');
let cookieSi = document.querySelector('.cookies__boton--si');
let cookieNo = document.querySelector('.cookies__boton--no');
//-----------------------------------------------------
// Funciones
//-----------------------------------------------------
/**
* Método que oculta la sección de Cookie para siempre
*/
function ocultarCookie() {
// Borra la sección de cookies en el HTML
seccionCookie.remove();
}
/**
* Método que marca las cookies como aceptadas
*/
function aceptarCookies() {
// Oculta el HTML de cookies
ocultarCookie();
// Guarda que ha aceptado
localStorage.setItem('cookie', true);
// Tu codigo a ejecutar si aceptan las cookies
ejecutarSiAcepta();
}
/**
* Método que marca las cookies como denegadas
*/
function denegarCookies() {
// Oculta el HTML de cookies
ocultarCookie();
// Guarda que ha aceptado
localStorage.setItem('cookie', false);
}
/**
* Método que ejecuta tu código si aceptan las cookies
*/
function ejecutarSiAcepta() {
/////////////////// Tu código ////////////////
//////////// ¿Google Analítics? /////////////
}
/**
* Método que inicia la lógica
*/
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();
}
}
}
//-----------------------------------------------------
// Eventos
//-----------------------------------------------------
cookieSi.addEventListener('click',aceptarCookies, false);
cookieNo.addEventListener('click',denegarCookies, false);
return {
iniciar: iniciar
}
}
// Activa el código. Comenta si quieres desactivarlo.
cookies().iniciar();
});Completo
Todo unido quedaría de la siguiente forma.
<section class="cookies">
<h2 class="cookies__titulo">¿Quieres nuestras Cookies?</h2>
<p class="cookies__texto">Usamos cookies para mejorar tu experiencia en la web.</p>
<div class="cookies__botones">
<button class="cookies__boton cookies__boton--no">No</button>
<button class="cookies__boton cookies__boton--si">Si</button>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
let cookies = () => {
//======================================================================
// COOKIES
//======================================================================
//-----------------------------------------------------
// Variables
//-----------------------------------------------------
let seccionCookie = document.querySelector('section.cookies');
let cookieSi = document.querySelector('.cookies__boton--si');
let cookieNo = document.querySelector('.cookies__boton--no');
//-----------------------------------------------------
// Funciones
//-----------------------------------------------------
/**
* Método que oculta la sección de Cookie para siempre
*/
function ocultarCookie() {
// Borra la sección de cookies en el HTML
seccionCookie.remove();
}
/**
* Método que marca las cookies como aceptadas
*/
function aceptarCookies() {
// Oculta el HTML de cookies
ocultarCookie();
// Guarda que ha aceptado
localStorage.setItem('cookie', true);
// Tu codigo a ejecutar si aceptan las cookies
ejecutarSiAcepta();
}
/**
* Método que marca las cookies como denegadas
*/
function denegarCookies() {
// Oculta el HTML de cookies
ocultarCookie();
// Guarda que ha aceptado
localStorage.setItem('cookie', false);
}
/**
* Método que ejecuta tu código si aceptan las cookies
*/
function ejecutarSiAcepta() {
/////////////////// Tu código ////////////////
//////////// ¿Google Analítics? /////////////
}
/**
* Método que inicia la lógica
*/
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();
}
}
}
//-----------------------------------------------------
// Eventos
//-----------------------------------------------------
cookieSi.addEventListener('click',aceptarCookies, false);
cookieNo.addEventListener('click',denegarCookies, false);
return {
iniciar: iniciar
}
}
// Activa el código. Comenta si quieres desactivarlo.
cookies().iniciar();
});
</script>