En esta guía, aprenderás a implementar una petición de consenso de cookies en tu página web utilizando la librería JavaScript cookie-consent-js. Esta librería es fácil de usar y personalizar, lo que la convierte en una excelente opción para cumplir con las regulaciones de privacidad de la Unión Europea (RGPD) y otras leyes similares.
Instalación
Para comenzar, debes descargar la librería cookie-consent-js desde GitHub. Una vez descargado, agrega el archivo JavaScript a tu proyecto y luego agrega una referencia a él en tu archivo HTML.
<head>
...
<link rel="stylesheet" href="css/cookie-consent.css"/>
<script src="js/cookie-consent.js"></script>
Implementación
Una vez que hayas agregado la referencia, es hora de configurar la librería. Esto se hace mediante el uso de un objeto de configuración. A continuación se presenta un ejemplo de cómo configurar la librería:
var cookieConsent = new CookieConsent({contentUrl: "cookie-consent-content", blockAccess: false,position: "right", privacyPolicyUrl: "eula.html", cookieName: "cc-block-tracking"})
Personalización
La librería cookie-consent-js es altamente personalizable. Puedes modificar el diseño y el contenido del cuadro emergente de acuerdo con las necesidades de tu proyecto.
- buttonPrimaryClass: permite especificar la clase CSS para el botón «Aceptar todo» en el cuadro emergente de consenso de cookies.
- buttonSecondaryClass: permite especificar la clase CSS para el botón «Aceptar solo necesario» en el cuadro emergente de consenso de cookies.
- autoShowModal: permite deshabilitar el modo automático de mostrar el cuadro emergente en la página de política de privacidad para hacerla más legible.
- blockAccess: permite bloquear el acceso a la página web hasta que el usuario haya elegido una configuración de cookies.
- position: permite especificar la posición del cuadro emergente (izquierda o derecha) si blockAccess está deshabilitado.
- postSelectionCallback: permite especificar una función callback que se ejecutará después de que el usuario haya realizado una selección.
- lang: permite especificar el idioma en el que se mostrará el cuadro emergente.
- defaultLang: permite especificar el idioma predeterminado en caso de que el idioma especificado en lang no esté disponible como una traducción.
- content: permite especificar los contenidos personalizados para el cuadro emergente, aunque esta propiedad es obsoleta, se recomienda usar contentUrl.
- contentUrl: permite especificar la URL de la carpeta «cookie-consent-content» que contiene los archivos de idiomas.
- privacyPolicyUrl: permite especificar la URL de la política de privacidad.
- cookieName: permite especificar el nombre de la cookie que se creará para almacenar la configuración de cookies del usuario.
- modalId: permite especificar el ID del elemento modal para el cuadro emergente de consenso de cookies.
Para obtener más información sobre cómo personalizar la librería, consulta la documentación en GitHub.
C O D E L A B Y 