WabiLGPD, un script para implementar la gestión de cookies en tu sitio

La Ley General de Protección de Datos Personales (LGPD en portugués) fue creada para regular la recolección, almacenamiento e intercambio de datos personales, defendiendo los derechos fundamentales de libertad y privacidad.

El script está desarrollado en JavaScript puro, lo que significa que no requiere ninguna biblioteca para funcionar, simplemente incluirlo en el sitio web y úsalo.

Download

Descarga el archivo en formato zip o bz2.

Download Zip Download Bz2

Cargando

Incluya los archivos compilados en su página.

HTML

<link rel='stylesheet' type='text/css' href='/ruta/al/css/wabi-lgpd-1.0.min.css'>
<script src='/ruta/al/js/wabi-lgpd-1.0.min.js'></script>

Traducciones

Recuerde copiar el archivo de idioma wabi-lgpd-1.0.lang.json en el mismo directorio que el javascript principal.

Cambie las traducciones en este archivo según sea necesario.

Uso básico

Ejecute el siguiente código después de que se cargue el javascript principal.

JavaScript

myWabiLGPDObjects = new wabiLGPD({    
   name: 'wabiConsentLGPD',
   lang: 'es',
   initialConsent: false,
   expire: 365,
   privacyPolicyUrl: 'https://telazul.drusian.com.br/es/articulo/politica-de-privacidad',
   showDecline: true,
   showSettings: true
});

El ejemplo anterior carga el cuadro de diálogo en español con todos los botones. El script considera que el usuario no dio inicialmente su consentimiento y por tanto no deben almacenarse cookies más allá de lo estrictamente necesario hasta que el usuario tome una decisión.

La opción de nombre define el nombre que precederá a cada tipo de cookie.

Tipos de cookies

Hay cuatro tipos de cookies disponibles:

• Estrictamente necesarias: son cookies que se utilizan para el funcionamiento del sitio web y no se pueden desactivar. Por lo general, se crean en respuesta a alguna acción realizada por el usuario del sitio web, solicitando algún servicio, como configurar las preferencias de privacidad de este script, iniciar sesión en el sitio web y completar formularios.
• Cookies de rendimiento: son cookies utilizadas para contar el número de visitas y fuentes de tráfico, para medir y mejorar la experiencia del usuario y el rendimiento del sitio web. Son responsables de la información sobre cómo se mueven los visitantes dentro del sitio web, las páginas más y menos visitadas. Aquí cabe Google Analytics, si se aceptan estas cookies se cargará.
• Cookies funcionales: son cookies utilizadas para proporcionar personalización y funcionalidad mejorada. Pueden ser cookies establecidas por terceros.
• Cookies de orientación: son cookies que se utilizan para hacer que la publicidad sea más relevante y pueden ser configuradas por el propio sitio web o por terceros. Se puede utilizar para crear un perfil de interés para mostrarle anuncios más relevantes. Google Adsense entra en esta categoría y la aceptación de este tipo de cookies estará vinculada a la carga o no de los anuncios.

Para más información sobre los tipos de cookies, consulte los mensajes disponibles en esta herramienta, los textos son más completos. Este sistema de 4 tipos de cookies y los textos utilizados tanto en esta página como en el propio script se basaron en el sistema de gestión de cookies disponible en el sitio web de stackoverflow.

Cuando el script está configurado para utilizar el consentimiento inicial como falso, Analytics y Adsense no se cargarán. Al aceptar cookies ambas se iniciarán automáticamente, sin embargo, desactivar las cookies no interrumpirá los servicios inmediatamente, siendo necesario que el usuario actualice la página.

Mostrar configuración de cookies

Agregar un enlace en el sitio web para mostrar el cuadro de diálogo con la configuración de permisos de almacenamiento de cookies es simple, simplemente agregue la clase wabi-lgpd-show-dialog.

Cookies

HTML

<a href='#' class='wabi-lgpd-show-dialog'>Cookies</a>

Google Analytics y Adsense

Cómo configurar Analytics y Adsense para que se carguen dinamicamente con el consentimiento del usuario.

JavaScript

myWabiLGPD = new wabiLGPD({
   name: 'wabiConsentLGPD',
   lang: 'es',
   initialConsent: false,
   expire: 365,
   privacyPolicyUrl: 'https://telazul.drusian.com.br/es/articulo/politica-de-privacidad',
   showDecline: true,
   showSettings: true,
   analytics: true,
   analyticsID: 'G-Mi_ID',
   adsense: true,
   adsenseID: 'ca-pub-Mi_ID'
});

Los anuncios automáticos de Adsense se mostrarán usando únicamente este código, sin embargo para los anuncios manuales, aquellos que tú decides dónde colocar en tu sitio web, solo necesitas incluir el elemento <ins> en el código HTML, ejemplo:

HTML

<ins class='adsbygoogle'
   style='display:block'
   data-ad-client='ID del cliente'
   data-ad-slot='ID de anuncio'
   data-ad-format='auto'
   data-full-width-responsive='true'>
</ins>

Google Analytics es habilitado/deshabilitado en la configuración Cookie de rendimiento, mientras que Adsense en Cookies de orientación.

Consentimiento obligatorio y múltiples idiomas

A continuación se muestra la versión con el cuadro de diálogo básico, simplemente informando al usuario que el sitio utiliza cookies. Se supone que el consentimiento es obligatorio para utilizar el sitio web.

Antes de iniciar el script se creó una función para obtener el idioma del sitio web a partir de la URL del navegador y luego un if para definir la URL de la política de privacidad según el idioma. Estos códigos asumen que la URL del sitio web utiliza el formato más común: https://domain.com/idioma/. Estos códigos son sólo sugerencias, la lógica se puede ajustar a sus necesidades.

JavaScript

// Función para obtener el idioma de la URL
function getSiteLang() {
   const path = window.location.pathname;
   const array = path.split('/');
   return array[1];
}
const myWabiLang = getSiteLang();

// Política de privacidad según idioma
if (myWabiLang == 'pt') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/pt/artigo/politica-de-privacidade';
} else if (myWabiLang == 'en') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/en/article/privacy-policy';
} else if (myWabiLang == 'es') {
   myWabiPrivacyPolicy = 'https://telazul.drusian.com.br/es/articulo/politica-de-privacidad';
}

// Inicializando el consentimiento obligatorio
myWabiLGPDObjects = new wabiLGPD({
   name: 'wabiConsentLGPD',
   lang: myWabiLang,
   initialConsent: true,
   expire: 365,
   privacyPolicyUrl: myWabiPrivacyPolicy,
   showDecline: false,
   showSettings: false
});

Restringir el uso de cookies

Para Analytics y Adsense el script ya establece las restricciones, sin embargo para las Cookies funcionales no existe una acción automática, es necesario realizar las restricciones manualmente. Para comprobar si se otorgó el consentimiento o no, utilice la función getCookie que viene con el script.

JavaScript

if (getCookie(myWabiLGPD.opt.name + 'functionalCookies') == 'true') {
   // Mi código para manipular cookies
}

Esta condición se aplica a todos los demás tipos de cookies, simplemente cambiando 'functionalCookies' por 'performanceCookies'' o 'targetingCookies'.

La variable myWabiLGPD.opt.name contiene el nombre predeterminado definido en la inicialización y precede a cada nombre de un tipo de cookie.

La condición utiliza la comparación == 'true' porque la cookie se almacena en formato de texto. Usar el valor true sin comillas no funcionará.

Características

Este script proporciona un cuadro de diálogo para solicitar permiso al usuario para almacenar cookies para diferentes propósitos. Sus principales características son:

• Dos opciones de consentimiento:
  
  • Consentimiento consensual, donde el usuario elige a qué cookies quiere dar su consentimiento.
  • Consentimiento obligatorio, donde únicamente se informa al usuario que se almacenarán cookies, es decir, el uso del sitio web está condicionado al consentimiento al uso de cookies.
• Le permite configurar la URL para la política de privacidad.
• Soporta 3 idiomas, portugués, inglés y español. Es posible agregar otros.
• Textos de mensajes y botones personalizables en todos los idiomas.
• Utiliza textos diferentes para el mensaje principal y el botón de consentimiento dependiendo de si el consentimiento es obligatorio o consensuado. En ambos casos, los textos son personalizables.
• Podrá elegir el consentimiento inicial, cuando el usuario ingresa al sitio web y antes de elegir una opción, si el consentimiento debe considerarse verdadero o falso.
• Configure si se mostrarán los botones Rechazar cookies y Personalizar cookies.
• Le permite crear un enlace para abrir el cuadro de diálogo con la configuración de cookies.
• Función para registrar valores de cookies en la consola.
• Integración con Google Analytics y Adsense, que este script carga automáticamente con solo proporcionar los ID respectivos. Los scripts se cargan tras el consentimiento inicial o del usuario.
• Permite la personalización del cuadro de diálogo a través del archivo sass (.scss) que se incluye con el script.

Este no es mi idioma original y no lo hablo muy bien. Utilicé mis pocos conocimientos y herramientas de traducción para redactar el texto de este artículo. Disculpe los posibles errores ortográficos o gramaticales, se agradecen sugerencias de correcciones y se pueden enviar al correo electrónico de contacto que se encuentra en el pie de página del sitio. Mi intención es compartir algunos conocimientos y espero que esta traducción sea lo suficientemente buena.