PrivacyEngine SDK

JavaScript SDK para integración del banner de cookies y consentimiento en sitios web de terceros.

Características

• Banner de cookies compatible con la Ley 21.719 de Chile
• Aislamiento de estilos mediante Shadow DOM
• Integración con Google Consent Mode v2 — actualiza gtag('consent', 'update', ...) cuando el usuario acepta o rechaza
• Registro de consentimiento en ledger SHA-256
• Interceptor de formularios para leads
• API pública para gestión de consentimiento

Instalación

Opción 1: Script tag (CDN)

<script src="https://cdn.privacyengine.cl/pe.js" data-client-id="TU_CLIENT_ID" async></script>

Opción 2: npm

npm install @privacyengine/sdk

import PrivacyEngine from '@privacyengine/sdk';

Opción 3: Descargar

Descarga pe.js directamente y aloja en tu servidor.

Configuración

Atributos del script

| Atributo | Descripción | Requerido | |----------|-------------|-----------| | data-client-id | Identificador único del cliente | Sí | | data-api-host | URL base del API (ej: https://privacyengine.cl) | No |

Ejemplo completo

<script
  src="/pe.js"
  data-client-id="privacyengine-cl"
  data-api-host="https://privacyengine.cl"
  async
></script>

API Pública

Una vez cargado, el SDK expone window.PrivacyEngine:

// Obtener estado actual de consentimiento
PrivacyEngine.getConsent();
// → { essential: true, analytics: false, marketing: false }

// Forzar mostrar banner
PrivacyEngine.showBanner();

// Escuchar cambios de consentimiento
PrivacyEngine.onConsentChange((type, granted) => {
  console.log(`Consentimiento ${type}: ${granted ? 'Concedido' : 'Denegado'}`);
});

Eventos

El SDK dispara eventos personalizados en el document:

| Evento | Descripción | |--------|-------------| | pe_consent_analytics | Consentimiento de cookies analíticas concedido | | pe_consent_marketing | Consentimiento de cookies de marketing concedido |

document.addEventListener('pe_consent_marketing', (e) => {
  console.log('Marketing consent granted:', e.detail);
  // Iniciar pixel de Meta, etc.
});

Formularios de Lead

Para capturar leads con consentimiento, añade el atributo data-pe-form="lead" a tus formularios:

<form data-pe-form="lead" action="/submit" method="POST">
  <input type="email" name="email" placeholder="Tu email" required>
  <button type="submit">Enviar</button>
</form>

El SDK automáticamente:

1. Añade checkboxes de consentimiento legal
2. Valida que se acepte la política de privacidad
3. Registra el email para el ledger de auditoría

CSS Personalizado

El banner usa Shadow DOM, por lo que los estilos de tu página no lo afectan. Para personalizar, puedes recompilar el SDK con tus estilos en src/pe.js.

Cookies

El SDK crea las siguientes cookies:

| Cookie | Descripción | Duración | |--------|-------------|----------| | pe_consent | Preferencia de consentimiento (JSON) | 365 días |

Compatibilidad

• Chrome 56+
• Firefox 52+
• Safari 10.1+
• Edge 79+
• IE 11 (con polyfills)

Licencia

MIT License - Copyright 2024 PrivacyEngine

Soporte

Para soporte técnico: [email protected]