uabiConsent v1.1 Gestión de cookies integrada con Analytics y Adsense

Introducción

En los últimos años, la evolución de las normas internacionales de protección de la privacidad, como el GDPR y la LGPD, ha reforzado la necesidad de que empresas y desarrolladores adopten prácticas que garanticen transparencia, consentimiento explícito y respeto a los derechos de los usuarios.

Cumplir con estas regulaciones no es solo una obligación legal, sino también un diferencial competitivo que fortalece la confianza del público.

Las herramientas que ayudan en la gestión de consentimientos de cookies para garantizar el cumplimiento legal se han vuelto indispensables. Fue en este escenario que surgió el uabiConsent, una solución de código abierto y completamente gratuita.

Desarrollado en JavaScript puro, esta solución prescinde del uso de bibliotecas adicionales, garantizando ligereza y simplicidad en la implementación, al mismo tiempo que ofrece alta personalización y soporte para múltiples idiomas.

Descarga

Para descargar el uabiConsent, haz clic en el botón Download o accede directamente al repositorio en GitHub:

Download GitHub

Carga

Incluye el CSS y el JavaScript en tu sitio agregando el siguiente código al HTML:

HTML

<link rel='stylesheet' href='/ruta/al/css/uabi-consent-1.1.min.css'>
<script src='/ruta/al/js/uabi-consent-1.1.min.js'></script>

La mejor ubicación para la llamada del CSS es dentro de la etiqueta <head> del HTML, mientras que la llamada del JavaScript debe insertarse justo antes del cierre de la etiqueta </body>.

Traducciones

El archivo de traducción uabi-consent-1.1.lang.json debe copiarse en el mismo directorio que el archivo JavaScript principal. Este archivo contiene traducciones disponibles en Portugués, Inglés y Español.

Si es necesario, las traducciones pueden modificarse directamente en el archivo JSON. También es posible agregar soporte para nuevos idiomas siguiendo el patrón estructural ya proporcionado.

Inicialización

Después de cargar el JavaScript principal, inserta el siguiente código para inicializar el uabiConsent:

JavaScript

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

Explicación:

name: El valor configurado en esta opción se utilizará como prefijo para los nombres de los diferentes tipos de cookies (más información sobre los tipos en la siguiente sección). Por ejemplo, usando la configuración anterior, la cookie relacionada con el rendimiento se almacenará con el nombre uabiConsent-performanceCookies. Modifícalo según tu preferencia o utiliza el valor predeterminado.
lang: Define el idioma de la interfaz. Idiomas soportados: 'es' (Español), 'pt' (Portugués) y 'en' (Inglés).
initialConsent: Define el consentimiento inicial antes de que el usuario haga una elección:
- 'granted': Las cookies se almacenarán sin el consentimiento explícito del usuario.
- 'denied': Las cookies solo se almacenarán después de que el usuario dé su consentimiento explícito.
expire: Tiempo de expiración de las cookies en días.
privacyPolicyUrl: URL de la política de privacidad del sitio. Esta opción es obligatoria para el funcionamiento del script. Consulta la dirección proporcionada en el ejemplo como referencia.
showDecline: Muestra true u oculta false el botón para rechazar todas las cookies.
showSettings: Muestra true u oculta false el botón para personalizar los tipos de cookies individualmente.
consoleLog: Muestra en la consola del navegador el valor definido para cada tipo de cookie. Esta opción es útil para pruebas y depuración, pero se recomienda desactivarla en el entorno de producción.

El ejemplo anterior configura el cuadro de diálogo en español, mostrando todos los botones (Aceptar, Rechazar y Personalizar). El script considera que, inicialmente, el usuario no ha dado su consentimiento, garantizando que ninguna cookie, excepto las estrictamente necesarias, se almacene hasta que el usuario haga una elección explícita.

Tipos de Cookies

El uabiConsent ofrece cuatro tipos de cookies personalizables para satisfacer las necesidades del sitio y garantizar el cumplimiento de las regulaciones de privacidad. A continuación, se detalla cada tipo:

Cookies Estrictamente Necesarias:
- Son esenciales para el funcionamiento básico del sitio y no pueden desactivarse.
- Generalmente se crean en respuesta a acciones del usuario, como configurar preferencias de privacidad, iniciar sesión o completar formularios.
- No almacenan información personal identificable.
Cookies de rendimiento
- Se utilizan para medir y mejorar la experiencia del usuario y el rendimiento del sitio.
- Recopilan datos sobre el número de visitas, fuentes de tráfico y cómo los visitantes interactúan con el sitio (por ejemplo, páginas más visitadas).
- Herramientas como Google Analytics entran en esta categoría.
- Toda la información recopilada por estas cookies es agregada y, por lo tanto, anónima.
Cookies funcionales
- Proporcionan funcionalidades mejoradas y personalizaciones en el sitio.
- Pueden ser definidas por el propio sitio o por terceros.
- Ejemplos incluyen la capacidad de recordar preferencias del usuario, como tema, idioma o región.
Cookies de segmentación
- Se utilizan para hacer los anuncios publicitarios más relevantes según los intereses del usuario.
- Pueden ser definidas por el sitio o por terceros, como Google Adsense.
- Cuando se aceptan, permiten mostrar anuncios personalizados basados en las preferencias del usuario.
- Cuando se rechazan, los anuncios se mostrarán sin personalización.

Referencia

Este sistema de clasificación de cookies y los textos utilizados tanto en esta página como en el script están inspirados en el sistema de gestión de cookies disponible en el sitio Stack Overflow.

Nota Importante

Cuando el script está configurado para considerar el consentimiento inicial como 'denied' (rechazado), el comportamiento de las herramientas integradas sigue las siguientes reglas:

El Google Analytics se cargará con señales para no almacenar cookies.
El Google Adsense mostrará anuncios sin personalizaciones basadas en las preferencias del usuario.

Al aceptar o rechazar las cookies haciendo clic en los botones correspondientes, se enviarán automáticamente las señales adecuadas para que tanto Analytics como Adsense ajusten sus operaciones según las preferencias del usuario.

Cambiar el Consentimiento

Después de que el usuario acepte, rechace o personalice sus preferencias de cookies, el cuadro de diálogo se cerrará. Para permitir que el usuario vuelva a abrir el cuadro de diálogo y cambie su configuración posteriormente, simplemente crea un enlace con la clase 'uabi-consent-show-dialog'.

Mira el ejemplo a continuación:

HTML

<a href='#' class='uabi-consent-show-dialog'>Cookies</a>

Al hacer clic en el enlace anterior, el cuadro de diálogo de consentimiento se mostrará nuevamente, permitiendo al usuario ajustar sus preferencias de cookies.

Cómo integrar con Google Analytics y Adsense

A continuación, se muestra un ejemplo de cómo configurar Google Analytics y Google Adsense para que se carguen automáticamente mediante el uabiConsent:

JavaScript

myUabiConsent = new uabiConsent({
   name: 'uabiConsent-',
   lang: 'es',
   initialConsent: 'denied',
   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'
});

Funcionamiento de los Anuncios de Adsense

Los anuncios automáticos de Google Adsense se mostrarán utilizando solo la inicialización anterior. Sin embargo, para anuncios manuales, aquellos en los que decides dónde colocarlos en el sitio, es necesario incluir el elemento <ins> en el código HTML. Mira el ejemplo a continuación:

HTML

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

Google Analytics se habilita/deshabilita en las configuraciones en la opción Cookie de rendimiento, mientras que Adsense se gestiona en Cookies de segmentación.

No se requiere ninguna configuración adicional para el funcionamiento de las herramientas. Se cargan automáticamente según las preferencias del usuario definidas en el uabiConsent.

Importante: Evitar Conflictos

Si la carga de Google Analytics o Google Adsense se realiza mediante otro método (como scripts insertados directamente en el HTML), será necesario eliminarlo para evitar conflictos con el funcionamiento integrado del uabiConsent.

Consentimiento Implícito

El consentimiento implícito ocurre cuando se considera que el usuario ha aceptado los términos o condiciones del sitio simplemente al navegar o utilizarlo, sin la posibilidad de rechazarlo explícitamente (opt-out). Esta práctica es común en países donde las regulaciones de privacidad aún no exigen consentimiento explícito para recopilar o procesar datos.

Para garantizar el cumplimiento de las normas globales y respetar la privacidad de los usuarios, se recomienda siempre ofrecer opciones claras y permitir que los usuarios puedan gestionar sus preferencias.

El uabiConsent permite configurar el consentimiento implícito, como se muestra en el siguiente ejemplo:

JavaScript

myUabiConsent = new uabiConsent({
   name: 'uabiConsent-',
   lang: 'es',
   initialConsent: 'granted',
   privacyPolicyUrl: 'https://telazul.drusian.com.br/es/articulo/politica-de-privacidad',
   showDecline: false,
   showSettings: false
});

La opción initialConsent: 'granted' define que el consentimiento se otorga automáticamente al cargar el sitio.
Las configuraciones showDecline: false y showSettings: false deshabilitan los botones de rechazo y personalización, respectivamente, implementando así el consentimiento implícito.
El script mostrará un mensaje informando que, al navegar en el sitio, el usuario acepta el uso de cookies según la política de privacidad, proporcionando un enlace para su consulta.

Al combinar initialConsent: 'granted' con showSettings: true, el consentimiento inicial se garantizará automáticamente antes de que el usuario interactúe con las configuraciones. Sin embargo, al acceder a la pantalla de personalización manual, todas las opciones estarán habilitadas por defecto.

Importante: En países con legislaciones de privacidad más estrictas, como el GDRP y la LGPD, las opciones de personalización deben estar deshabilitadas por defecto, permitiendo que el usuario las habilite manualmente.

Múltiples idiomas

El uabiConsent ofrece soporte para múltiples idiomas, permitiendo que el script se configure dinámicamente según el idioma del sitio. A continuación, se muestra cómo inicializarlo en un sitio que utiliza múltiples idiomas basados en la URL.

Funcionamiento General

Obtención del Idioma de la URL: La función getSiteLang() extrae el idioma del sitio a partir de la URL en el navegador. Este enfoque asume que la estructura de la URL sigue el formato: https://dominio.com/idioma/. Por ejemplo:
- https://dominio.com/es/ → Idioma: Español (es)
- https://dominio.com/en/ → Idioma: Inglés (en)
- https://dominio.com/pt/ → Idioma: Portugués (pt)
Definición de la Política de Privacidad: Según el idioma extraído, el código define la URL de la política de privacidad. Esto garantiza que los usuarios accedan a la versión correcta de la política de privacidad en su idioma.
Inicialización del Script: El script del uabiConsent se inicializa con las configuraciones adecuadas, incluyendo el idioma detectado y la URL de la política de privacidad correspondiente.

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 myUabiLang = getSiteLang();

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

// Inicializando el script
myUabiConsent = new uabiConsent({
   name: 'uabiConsent-',     // Prefijo para las cookies
   lang: myUabiLang,         // Idioma detectado
   initialConsent: 'denied', // Consentimiento inicial rechazado
   privacyPolicyUrl: myUabiPrivacyPolicy // URL de la política de privacidad
});

Verificando si el Usuario ha Consentido

Para Google Analytics y Google Adsense, el script ya envía automáticamente las señales correspondientes a la aceptación o rechazo de las cookies, sin necesidad de configuración adicional.

Sin embargo, para recuperar el valor de las cookies de consentimiento y grabar nuevas cookies basadas en las elecciones del usuario, o para integrar el script con otras herramientas, es necesario utilizar la función getCookie(). Esta función permite verificar el estado de un tipo específico de cookie y tomar decisiones basadas en el consentimiento del usuario.

JavaScript

if (getCookie(myUabiConsent.opt.name + 'functionalCookies') === 'granted') {
   // Código a ejecutar si el usuario ha consentido el uso de cookies funcionales
}

La condición anterior verifica si el valor de la cookie 'functionalCookies' es 'granted' (consentido). Si es positivo, se ejecutará el código dentro del bloque. Para verificar otros tipos de cookies, simplemente reemplaza 'functionalCookies' por:

'performanceCookies' (cookies de rendimiento),
'targetingCookies' (cookies de segmentación).

Para facilitar la depuración y pruebas, puedes iniciar el uabiConsent con la opción consoleLog: true. Esto mostrará en la consola del navegador el valor de las cookies de consentimiento, permitiéndote validar su comportamiento. Recuerda deshabilitar esta opción en entornos de producción.

Funcionalidades

El uabiConsent proporciona un cuadro de diálogo para solicitar permiso al usuario para almacenar cookies con diferentes propósitos. A continuación, se detallan sus principales funcionalidades:

1. Dos Tipos de Consentimiento:
  - Consentimiento Explícito: El usuario elige si y a qué cookies desea dar su consentimiento. Ofrece control granular sobre las preferencias.
  - Consentimiento Implícito: Informa al usuario que las cookies se almacenarán automáticamente, haciendo que el uso del sitio esté condicionado al consentimiento.
2. Política de Privacidad:
  - Permite definir la URL de la política de privacidad del sitio, garantizando cumplimiento legal y transparencia.
3. Soporte Multilingüe:
  - Soporta tres idiomas: Español, Inglés y Portugués.
  - Es posible agregar nuevos idiomas, ampliando el alcance global del script.
4. Personalización de Textos:
  - Todos los textos de los mensajes y botones son personalizables en todos los idiomas.
  - Utiliza textos diferentes para el mensaje principal y el botón de consentimiento, dependiendo de si el consentimiento es explícito o implícito. Ambos son totalmente configurables.
5. Configuraciones Iniciales:
  - Permite definir el consentimiento inicial, es decir, si el consentimiento se considerará otorgado (granted) o rechazado (denied) antes de que el usuario haga una elección.
6. Control de Botones:
  - Permite definir si los botones Rechazar Cookies y Personalizar Cookies se mostrarán en la interfaz.
7. Enlace para Configuraciones:
  - Facilita la creación de un enlace para reabrir el cuadro de diálogo de configuración de cookies, permitiendo al usuario cambiar sus preferencias en cualquier momento.
8. Registros en la Consola:
  - Ofrece una opción para registrar los valores de las cookies en la consola del navegador, útil para depuración y pruebas. Se recomienda desactivar esta funcionalidad en entornos de producción.
9. Integración Automática con Herramientas:
  - Se integra automáticamente con Google Analytics y Google Adsense utilizando señales. Solo es necesario proporcionar los IDs correspondientes, y las herramientas se cargarán según las elecciones del usuario.
10. Personalización Visual:
  - Permite la personalización completa del cuadro de diálogo mediante el archivo SASS (.scss) incluido con el script. Esto permite ajustar el diseño para satisfacer las necesidades visuales del sitio.

Tablón de Anuncios

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.

Algunos de los contenidos de este sitio web, incluidos textos, imágenes, gráficos y otros materiales, pueden ser generados o mejorados mediante herramientas de inteligencia artificial (IA). Para obtener más detalles sobre nuestro uso de IA, consulte nuestro Término de uso.