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.
- Recuerda 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.
- Es compatible con WordPress, Drupal u otros CMSs.
- Solo JavaScript Vainilla, siendo compatible con cualquier Frameworks.
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">¿Aceptas 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>
<!-- No borrar, aquí se generarán todas las etiquetas <script> si acepta el usuario -->
<div id="nuevosScripts"></div>
CSS
Tan solo es un ejemplo. Lo colorea negro, fija en la parte inferior y centra el contenido. Es hackeable.
.cookies {
position: fixed;
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;
color: white;
width: 5rem;
text-align: center;
}
JavaScript
Lo más importante de este código lo encontramos en la sección de configuración, será donde sea integrado las rutas y códigos a ejecutar si el usuario afirma que esta conforme.
Pongamos el caso que quiero utilizar Google Tag Manager. Google me daría un código similar al siguiente.
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-1');
</script>
En mi configuración será despiezado de la siguiente manera.
//-----------------------------------------------------
// Configuración
//-----------------------------------------------------
const urlsScriptsCookies = ['https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1'];
function contenidoScriptsCookies () {
// Google Tag Manager
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-1');
// Fin Google Tag Manager
}
Y del resto se ocupará el código.
¿Qué ocurre detrás del decorado? Dependiendo que lo seleccionado por el visitante efectuará diferentes acciones.
- Pulsa Si: Crea los
<script>con cada ruta indicada enurlsScriptsCookies, lanza todo el código dentro decontenidoScriptsCookiesy guarda en unLocalStoragede su selección. - Pulsa No: No genera nada, el usuario esta a salvo de Cookies externas. No obstante guarda, como el caso anterior, la opción marcada en un
LocalStorage.
En ambos casos no vuelve a aparecer el cartel a no ser que sea limpiado el LocalStorage, por supuesto.
El código completo de JavaScript.
<script defer>
let cookies = () => {
//======================================================================
// COOKIES
//======================================================================
//-----------------------------------------------------
// Configuración
//-----------------------------------------------------
const urlsScriptsCookies = ['https://analytics.google.com', 'https://facebook.com'];
function contenidoScriptsCookies () {
//////////// ¿Google Analítics? /////////////
//////////// ¿Facebook Pixel? /////////////
//////////// ¿Admob? /////////////
//////////// etc /////////////
}
//-----------------------------------------------------
// Variables
//-----------------------------------------------------
const seccionCookie = document.querySelector('section.cookies');
const cookieSi = document.querySelector('.cookies__boton--si');
const cookieNo = document.querySelector('.cookies__boton--no');
const nuevosScripts = document.querySelector('#nuevosScripts');
//-----------------------------------------------------
// 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() {
// Crea los <script>
urlsScriptsCookies.forEach((url) => {
const nuevoScript = document.createElement('script');
nuevoScript.setAttribute('src', url);
nuevosScripts.appendChild(nuevoScript);
});
// Lanza los códigos
contenidoScriptsCookies();
}
/**
* 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>
Completo
Todo unido quedaría de la siguiente forma.
<style>
.cookies {
position: fixed;
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;
color: white;
width: 5rem;
text-align: center;
}
</style>
<section class="cookies">
<h2 class="cookies__titulo">¿Aceptas 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>
<!-- No borrar, aquí se generarán todas las etiquetas <script> si acepta el usuario -->
<div id="nuevosScripts"></div>
<script defer>
let cookies = () => {
//======================================================================
// COOKIES
//======================================================================
//-----------------------------------------------------
// Configuración
//-----------------------------------------------------
const urlsScriptsCookies = ['https://analytics.google.com', 'https://facebook.com'];
function contenidoScriptsCookies () {
//////////// ¿Google Analítics? /////////////
//////////// ¿Facebook Pixel? /////////////
//////////// ¿Admob? /////////////
//////////// etc /////////////
}
//-----------------------------------------------------
// Variables
//-----------------------------------------------------
const seccionCookie = document.querySelector('section.cookies');
const cookieSi = document.querySelector('.cookies__boton--si');
const cookieNo = document.querySelector('.cookies__boton--no');
const nuevosScripts = document.querySelector('#nuevosScripts');
//-----------------------------------------------------
// 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() {
// Crea los <script>
urlsScriptsCookies.forEach((url) => {
const nuevoScript = document.createElement('script');
nuevoScript.setAttribute('src', url);
nuevosScripts.appendChild(nuevoScript);
});
// Lanza los códigos
contenidoScriptsCookies();
}
/**
* 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>
{{ comments.length }} comentarios