Si estás leyendo esta entrada, te habrás encontrado ahora o anteriormente esta ventana emergente para que aceptes las cookies de esta web y puedas seguir leyendo.
Aunque no nos gusta esta experiencia de usuario al llegar a nuestra web, ha sido la manera de adaptarnos a la Guía sobre el uso de cookies para cumplir con las nuevas directrices del Comité Europeo de Protección de Datos publicada por la AEPD en julio del 2020.
En esta entrada compartiré primero cómo podemos crear un aviso de cookies como el anterior en nuestra web de forma fácil con nuestro plugin Nelio Popups. A continuación veremos otros ejemplos de avisos de cookies que puedes crear fácilmente con el plugin Nelio Popups.
Crear un aviso de cookies con Nelio Popups
Haz clic en «Añadir nuevo» en el menú de Nelio Popups para crear un nuevo popup. Desde el ya conocido editor de bloques podrás añadir el contenido que quieras en tu popup:
Especifica las propiedades del popup
Desde la barra lateral del editor de Nelio Popups puedes especificar propiedades adicionales del popup tales como su tamaño, posición, márgenes o relleno. También puedes indicar si quieres que se muestre con algún tipo de animación o, como en este caso, mostrar una sobreposición gris detrás del popup mientras se muestra.
Para que el aviso de cookies se muestre a cualquier usuario que visita cualquier página de la web, es necesario indicar también que se muestre «en todas las páginas» en el momento de «visitar la página».
Además, siendo estrictos con el RGPD, no deberías permitir que esta ventana se cerrara ni se pudiera seguir navegando en la web sin antes haber aceptado el aviso. Esto lo puedes conseguir desactivando el cierre del popup al pulsar ESC o al hacer clic fuera y bloqueando el desplazamiento vertical de la página:
Añade el código de creación de cookie
Una vez creado el contenido del popup, debemos añadir la funcionalidad al botón de «Aceptar y continuar» para que se genere la cookie de consentimiento cuando el usuario hace clic en él. Primero, en las propiedades avanzadas del botón, añádele un anclaje HTML único para identificarlo:
Luego, debajo del botón crea un nuevo bloque de tipo HTML con el siguiente código:
<script>
document.getElementById( 'cookie-consent-button' )?.addEventListener( 'click', () => {
COOKIE_NAME = 'cookieConsentAccepted';
date = new Date();
date.setFullYear( date.getFullYear() + 1 );
document.cookie = `${ COOKIE_NAME }=true; expires=${ date.toUTCString() }; path=/`;
window.parent.location.reload();
} );
</script>Donde se indica que al hacer clic en el botón cookie-consent-button se cree una cookie con nombre «cookieConsentAccepted» con fecha de expiración al cabo de un año. Finalmente, también indicamos que se vuelva a cargar la página en la que nos encontrábamos.
Muestra el aviso de cookies sólo cuando no se haya aceptado el consentimiento
Finalmente, sólo nos queda indicar que una vez aceptado el aviso de cookies, ya no hace falta volver a mostrar el aviso en cuestión. Para ello, debemos especificar la condición de que el popup sólo se muestre mientras no exista la cookie que acabamos de ver.
Y ya está, ya tenemos creado el aviso de cookies con Nelio Popups. Recuerda que puedes comprobar su funcionamiento en tu navegador haciendo clic con el botón derecho del ratón e inspeccionando la página: verás que, tras haber dado tu consentimiento, aparece la cookie «cookieConsentAccepted» con valor true en la lista de cookies de la web.
Ejemplos de avisos de cookies
La gran ventaja de usar Nelio Popups para crear este tipo de avisos es que tienes una gran variedad de posibilidades sobre cómo mostrarlos y maquetarlos. Ya hemos visto que el aviso de nuestra web es un popup bien visible en el centro de la página que no permite al usuario continuar navegando por la web sin haber aceptado previamente el aviso de cookies.
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
Caja con dos botones
Si tienes una página en la que el usuario puede seleccionar las distintas opciones de administración de cookies, puedes añadir a tu aviso de cookies un botón adicional que enlace a dicha página.
Como puedes ver en la página anterior, el aviso esta compuesto de los siguientes bloques: un encabezado, un párrafo, una linea de separación y los dos botones.
Si no estás sujeto al RGDP y quieres dar la opción a cerrar el aviso de cookies y que el usuario siga navegando, puedes añadir la opción de cerrar el aviso de cookies con un botón adicional o una cruz. En un caso así, seguramente prefieres mostrar el aviso en una esquina de la página para que no sea tan invasivo.
Banners en la parte superior de la página
Encontrarás más de una web que prefiere mostrar el aviso de cookies como un banner en la parte superior de la página. La ventaja de esta opción es que, aunque el usuario no pueda continuar navegando por el sitio a menos de que dé su consentimiento, permites ver más contenido de la página resultando menos intrusivo.
El banner puede ocupar el ancho completo de la página e incluir más botones o un enlace con información adicional.
Para resaltar más el banner, puedes añadirle un borde de un color más destacado.
Footer en la parte inferior de la página
Alternativamente, los avisos de cookies menos intrusivos son aquellos que se muestran en la parte inferior de la página. De esta forma el usuario lo primero que ve es el contenido y a continuación el aviso.
A continuación puedes ver tres ejemplos distintos de avisos de cookies mostrados al final de la página con un color de fondo para que resalten.
Conclusión
Si tu web tiene visitantes de un país europeo, asegúrate de que estos aceptan tu uso de cookies. Con el plugin de Nelio Popups puedes crear avisos de cookies de forma fácil, con la flexibilidad de mostrarlo donde y con el estilo que más te guste, tal y como has podido ver en los ejemplos anteriores.
Imagen destacada de Kai Pilger en Unsplash.
Deja una respuesta