Cómo crear un aviso de cookies con Nelio Popups

Publicada en WordPress.

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.

Ventana de configuración de cookies
Ventana de configuración de cookies.

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:

Creando un aviso de cookies con el editor de Nelio Popups
Visualizando los bloques que conforman un aviso de cookies con Nelio Popups.

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:

Ajustes adicionales del aviso de cookies
Ajustes adicionales del aviso de cookies.

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:

Anclaje HTML del boton de aceptación de cookies
Anclaje HTML del botón de aceptación de cookies.

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.

Edición del popup de cookies con el código HTML incluido
Edición del popup de cookies con el código HTML incluido.

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.

Muestra el aviso de cookies sólo en caso de que no exista la cookie de aceptación de cookies
Muestra el aviso de cookies sólo en caso de que no exista la cookie de aceptación de cookies.

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.

Captura de pantalla de la inspección de cookies de la página
Captura de pantalla de la inspección de cookies de la página.

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.

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

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.