Banner de Consentimiento (CMP SDK)

El SDK CMP muestra un banner de consentimiento de cookies en tu sitio web, registra las preferencias del usuario con hash encadenado SHA-256 (inmutable), y soporta multiples plantillas visuales.

Instalacion rapida

Agrega este snippet antes del cierre de </body>:

<script src="https://api.dpolab.com/sdk/cmp-sdk.js"></script>
<script>
  DPOLab.init({
    widgetKey: 'TU_WIDGET_KEY',
    apiUrl: 'https://api.dpolab.com',
  });
</script>

Obtén tu widgetKey desde el dashboard de DPOLab: CMP → Plantillas → tu plantilla → pestaña Integración.

Configuracion completa

DPOLab.init({
  // ── Requeridos ──
  widgetKey: 'abc-123-xyz',                    // Identifica tu plantilla de consentimiento
  apiUrl: 'https://api.dpolab.com',   // URL de la API de DPOLab
 
  // ── Opcionales ──
  appUrl: 'https://app.dpolab.com',   // URL de la app (para Centro de Privacidad)
  position: 'bottom',                          // Posicion del banner (ver tabla abajo)
  language: 'es',                              // Idioma: 'es' | 'en'
  sandbox: false,                              // Modo prueba: no valida dominio, marca registros como sandbox
 
  // ── Bloqueo de scripts ──
  blocking: true,                              // Bloquea scripts con data-dpolab-consent hasta obtener consentimiento
  gtmConsent: true,                            // Integra con Google Tag Manager Consent Mode v2
  gtmPurposeMapping: {                         // Mapeo custom de propositos a categorias GTM
    analytics: ['analytics_storage'],
    marketing: ['ad_storage', 'ad_personalization'],
  },
 
  // ── Cookie auditor ──
  cookieAudit: false,                          // Audita cookies del sitio y reporta al dashboard
 
  // ── Boton flotante ──
  floatingButton: true,                        // Muestra icono flotante para reabrir preferencias despues de aceptar
  floatingPosition: 'bottom-left',             // Posicion: 'bottom-left' | 'bottom-right'
 
  // ── Callback ──
  onConsentChange: function(consent) {         // Se ejecuta cada vez que cambia el consentimiento
    console.log('Consentimiento:', consent);
    // consent = { analytics: true, marketing: false, essential: true }
  }
});

Parametros de `DPOLab.init()`

Parametro	Tipo	Requerido	Default	Descripcion
`widgetKey`	string	Si	—	Clave unica de tu plantilla de consentimiento
`apiUrl`	string	Si	—	URL de la API de DPOLab
`appUrl`	string	No	—	URL de la app (para Centro de Privacidad y portal)
`position`	string	No	`'bottom'`	Posicion del banner en la pagina
`language`	string	No	`'es'`	Idioma del banner
`sandbox`	boolean	No	`false`	Modo prueba (no valida dominio, no cuenta en estadisticas)
`blocking`	boolean	No	`false`	Bloquea scripts hasta obtener consentimiento
`gtmConsent`	boolean	No	`false`	Activa Google Tag Manager Consent Mode v2
`gtmPurposeMapping`	object	No	—	Mapeo custom de propositos DPOLab a categorias GTM
`cookieAudit`	boolean	No	`false`	Audita cookies del sitio y reporta al dashboard
`floatingButton`	boolean	No	`false`	Muestra boton flotante para reabrir preferencias
`floatingPosition`	string	No	`'bottom-left'`	Posicion del boton flotante
`onConsentChange`	function	No	—	Callback `(consent: Record<string, boolean>) => void`

Posiciones del banner

Valor	Descripcion
`bottom`	Barra inferior completa (default)
`top`	Barra superior completa
`bottom-left`	Modal esquina inferior izquierda
`bottom-right`	Modal esquina inferior derecha
`center`	Modal centrado con overlay

Boton flotante

Cuando floatingButton: true, despues de que el usuario acepta o rechaza las cookies, aparece un icono de escudo en la esquina de la pantalla. Al hacer clic, reabre el panel de preferencias para que pueda cambiar su decision.

DPOLab.init({
  widgetKey: 'TU_WIDGET_KEY',
  apiUrl: 'https://api.dpolab.com',
  floatingButton: true,              // Activa el boton flotante
  floatingPosition: 'bottom-left',   // 'bottom-left' o 'bottom-right'
});

El boton:

Solo aparece cuando ya hay consentimiento guardado (no antes del banner)
Se oculta mientras el panel de preferencias esta abierto
Reaparece al cerrar las preferencias
Tooltip "Gestionar privacidad" al hover

El boton flotante cumple con GDPR Art. 7.3 y Ley 21.719: retirar el consentimiento debe ser tan facil como darlo.

Bloqueo de scripts

Puedes bloquear scripts de terceros hasta que el usuario de consentimiento. Cambia type a text/plain y agrega data-dpolab-consent con el slug del proposito:

<!-- Google Analytics — bloqueado hasta aceptar "analytics" -->
<script type="text/plain" data-dpolab-consent="analytics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>
 
<!-- Facebook Pixel — bloqueado hasta aceptar "marketing" -->
<script type="text/plain" data-dpolab-consent="marketing"
  src="https://connect.facebook.net/en_US/fbevents.js"></script>

type="text/plain" evita que el navegador ejecute el script. Cuando el usuario acepta la categoria, el SDK lo activa automaticamente.

⚠️

El atributo data-dpolab-consent debe coincidir EXACTO con el slug del proposito declarado en el aviso. Letra a letra: si el aviso define el proposito analytics_ga4 y tu script dice data-dpolab-consent="analytics", el script queda bloqueado aunque el visitante acepte "todo". Los slugs disponibles los ves en el detalle del aviso → seccion Propositos.

⚠️

Requiere blocking: true en DPOLab.init(). Sin esta opcion, los scripts se ejecutan normalmente.

Google Tag Manager Consent Mode v2

DPOLab.init({
  widgetKey: 'TU_WIDGET_KEY',
  apiUrl: 'https://api.dpolab.com',
  gtmConsent: true,    // Activa Consent Mode v2
  gtmPurposeMapping: { // Opcional: mapeo custom
    analytics: ['analytics_storage'],
    marketing: ['ad_storage', 'ad_personalization', 'ad_user_data'],
  },
});

El SDK envia automaticamente gtag('consent', 'update', {...}) cuando el usuario cambia sus preferencias.

Plantillas visuales

Plantilla	Descripcion
`navy_dark`	Barra oscura navy con acento teal y emoji
`minimal_gray`	Barra gris sobria con botones outline uppercase

Se configuran desde CMP → Plantillas → Editar → Apariencia.

API publica

// Obtener consentimiento actual
const consent = DPOLab.getConsent();
// { analytics: true, marketing: false }
 
// Escuchar cambios de consentimiento
DPOLab.onConsentChange(function(consent) {
  if (consent.analytics) {
    // Activar Google Analytics
  }
});
 
// Reabrir panel de preferencias (para botones "Gestionar cookies" en footer)
DPOLab.showPreferences();
 
// Abrir el Centro de Privacidad en nueva pestaña
DPOLab.openPrivacyPortal();
 
// Verificar consentimiento de un proposito especifico
const accepted = DPOLab.isConsentGiven('analytics');
 
// Validar consentimiento (muestra error visual si no aceptado)
const isValid = DPOLab.validateConsent('analytics');

Aislamiento de estilos (Shadow DOM)

El banner se renderiza dentro de un Shadow DOM, lo que significa que:

Los estilos CSS de tu pagina no afectan al banner
El banner no afecta los estilos de tu pagina
No hay conflictos con CSS resets, frameworks (Bootstrap, Tailwind), etc.

Almacenamiento

El consentimiento se guarda en:

localStorage: dpolab_consent_{widgetKey} — persistencia entre sesiones
Cookie: dpolab_consent_{widgetKey} — expira en 365 dias, SameSite=Lax

Modo sandbox

sandbox: true en init() cambia el comportamiento del SDK para que puedas iterar antes de poner el banner en produccion:

Salta el origin check: funciona desde cualquier dominio (Codepen, JSFiddle, localhost, staging) sin necesidad de registrarlo en Dashboard → Settings → Dominios.
No persiste la decision: el banner reaparece en cada refresh. No lee localStorage ni cookie, asi que cada carga es como ver el banner por primera vez. Util para iterar copy y diseno sin tener que limpiar storage manualmente.
Los consentimientos no entran en analitica de produccion: el origen del record se marca como SANDBOX y queda visible en el dashboard pero no afecta tasa de aceptacion ni KPIs.

// Snippet sandbox que copias desde el dashboard
DPOLab.init({
  widgetKey: 'TU_WIDGET_KEY',
  apiUrl: 'https://api.dpolab.com',
  sandbox: true,  // ← unica diferencia con produccion
});

⚠️

Recuerda quitar sandbox: true antes de pasar a produccion. Si te queda en prod, los visitantes veran el banner cada vez que recarguen la pagina (no se persiste la decision) y los consentimientos no contaran en tus metricas.

Registro inmutable

Cada decision de consentimiento genera un registro con:

Timestamp
IP hasheada (SHA-256, nunca IP raw)
User agent
Version del aviso
Origen (Banner, Checkbox, Preferencias, Centro de Privacidad)
Nivel de verificacion de identidad (IDV)
Hash encadenado SHA-256 (cada registro incluye el hash del anterior)

Esto garantiza la inmutabilidad de la cadena de consentimientos — si un registro se modifica, todos los hashes subsiguientes se rompen.

Para verificar la integridad de la cadena en cualquier momento: CMP → Plantillas → tu aviso → tab Detalle → botón "Verificar ahora". El reporte indica chainIntact: true si todos los hashes coinciden y chainIntact: false con detalle de las posiciones rotas si algun record fue alterado.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Sitio Web</title>
 
  <!-- Scripts bloqueados hasta consentimiento -->
  <script type="text/plain" data-dpolab-consent="analytics"
    src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
  <script type="text/plain" data-dpolab-consent="marketing"
    src="https://connect.facebook.net/en_US/fbevents.js"></script>
</head>
<body>
  <h1>Mi Sitio Web</h1>
 
  <footer>
    <button onclick="DPOLab.showPreferences()">Gestionar cookies</button>
  </footer>
 
  <!-- SDK al final del body -->
  <script src="https://api.dpolab.com/sdk/cmp-sdk.js"></script>
  <script>
    DPOLab.init({
      widgetKey: 'TU_WIDGET_KEY',
      apiUrl: 'https://api.dpolab.com',
      appUrl: 'https://app.dpolab.com',
      blocking: true,
      gtmConsent: true,
      floatingButton: true,
    });
  </script>
</body>
</html>

Compatibilidad

Chrome 80+, Firefox 78+, Safari 14+, Edge 80+
Shadow DOM para aislamiento de estilos
Bundle: ~19 KB gzipped (~70 KB raw)
Responsive: se adapta a mobile automaticamente

Ver tambien

Checkbox de Consentimiento — Checkbox para formularios
Formulario ARCO — Widget de solicitudes de derechos
Centro de Privacidad — Portal publico de gestion de datos

Guia de integracion (end-to-end)Checkbox de Consentimiento