Implementación del consentimiento de cookies

Aprende cómo implementar el consentimiento de cookies e integrarlo con Zenovay Analytics para cumplimiento de privacidad.

Uso de cookies de Zenovay

Modo	Almacenamiento en el cliente	Consentimiento requerido
Modo sin cookies	Ninguno (IDs window-scoped en memoria)	Generalmente no
Modo por defecto	Una única cookie first-party para reconocer visitantes recurrentes	Puede ser necesario

Zenovay siempre es sin cookies en el servidor: no se almacena ninguna dirección IP o datos personales. La tabla anterior se refiere solo a lo que el script de seguimiento escribe en el navegador del visitante. El modo sin cookies evita que el script escriba cookies o entradas localStorage.

Cuándo se requiere consentimiento

El consentimiento típicamente se requiere cuando:

Se utilizan cookies persistentes
Seguimiento entre sesiones
Identificación de visitantes recurrentes
Recopilación de datos personales

El consentimiento puede no ser requerido cuando:

Se utiliza modo sin cookies (sin cookies)
Funcionalidad estrictamente necesaria
Estadísticas agregadas anónimas

Modo sin cookies (sin cookies)

Puedes ejecutar el script de seguimiento de Zenovay en modo sin cookies, que no escribe nada en el navegador del visitante. Hay dos formas de habilitarlo.

Opción 1: atributo de script. Añade data-cookieless="true" a tu etiqueta de script:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  data-cookieless="true"
  src="https://api.zenovay.com/z.js"
></script>

Opción 2: configuración del sitio web. Abre el panel de tu sitio web, ve a Configuración, y activa el botón sin cookies (aparece en las pestañas General y Avanzado). La pestaña General también regenera el snippet anterior con data-cookieless="true" ya añadido.

Modo sin cookies:

No utiliza cookies ni localStorage (solo IDs window-scoped en memoria)
No crea identificadores persistentes
Conforme legalmente antes del consentimiento según ePrivacy para el script de seguimiento de Zenovay en sí
Datos ligeramente menos precisos sobre visitantes recurrentes (espera ~10-15% menos uniques)

Otras herramientas que cargas (Meta Pixel, Google Analytics y similares) siguen estableciendo sus propias cookies y pueden requerir consentimiento independientemente de esta configuración.

Carga condicional

Verificación básica de consentimiento

// Verificar consentimiento antes de cargar
function loadZenovayIfConsented() {
  const consent = localStorage.getItem('analytics_consent');

  if (consent === 'granted') {
    loadZenovay();
  } else if (consent === 'denied') {
    // No cargar análisis
  } else {
    showConsentBanner();
  }
}

function loadZenovay() {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.defer = true;
  document.head.appendChild(script);
}

// Ejecutar al cargar la página
loadZenovayIfConsented();

<div id="cookie-banner" style="display: none;">
  <div class="cookie-content">
    <p>Usamos análisis para mejorar tu experiencia.</p>
    <button onclick="acceptCookies()">Aceptar</button>
    <button onclick="declineCookies()">Rechazar</button>
    <a href="/privacy">Más información</a>
  </div>
</div>

<script>
function showConsentBanner() {
  document.getElementById('cookie-banner').style.display = 'block';
}

function acceptCookies() {
  localStorage.setItem('analytics_consent', 'granted');
  document.getElementById('cookie-banner').style.display = 'none';
  loadZenovay();
}

function declineCookies() {
  localStorage.setItem('analytics_consent', 'denied');
  document.getElementById('cookie-banner').style.display = 'none';
  // Opcionalmente cargar en modo sin cookies
  loadZenovayCookieless();
}

function loadZenovayCookieless() {
  // data-cookieless="true" le indica al seguimiento que use solo
  // IDs window-scoped en memoria - sin cookies, sin localStorage.
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.setAttribute('data-cookieless', 'true');
  script.defer = true;
  document.head.appendChild(script);
}
</script>

Plataformas de consentimiento populares

Integración de Cookiebot

// Esperar consentimiento de Cookiebot
window.addEventListener('CookiebotOnAccept', function() {
  if (Cookiebot.consent.statistics) {
    loadZenovay();
  }
});

// Manejar cambios de consentimiento
window.addEventListener('CookiebotOnDecline', function() {
  // Consentimiento retirado - detener seguimiento
  if (window.zenovay) {
    window.zenovay('disable');
  }
});

Configuración de Cookiebot:

Añade Zenovay a la categoría "Estadísticas"
Establece el nombre de la cookie: zenovay_session
Establece el proveedor: zenovay.com
Establece el tipo: HTTP
Establece la caducidad: Sesión o 1 año

Integración de OneTrust

// Callback de consentimiento de OneTrust
function OptanonWrapper() {
  if (OnetrustActiveGroups.includes('C0002')) {
    // Cookies de rendimiento consentidas
    loadZenovay();
  } else {
    // Cargar en modo sin cookies
    loadZenovayCookieless();
  }
}

Categorías de OneTrust:

C0001: Estrictamente necesario
C0002: Rendimiento (Zenovay)
C0003: Funcional
C0004: Orientación

Integración de Osano

// Callback de consentimiento de Osano
window.Osano.cm.addEventListener('osano-cm-consent-changed', function(event) {
  if (event.ANALYTICS === 'ACCEPT') {
    loadZenovay();
  }
});

Integración de Termly

// Callback de consentimiento de Termly
window.addEventListener('termly-consent-preferences-updated', function(e) {
  if (e.detail.analytics) {
    loadZenovay();
  }
});

Modo de consentimiento de Google

Integración

// Inicializar el modo de consentimiento de Google
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('consent', 'default', {
  'analytics_storage': 'denied'
});

// Actualizar al dar consentimiento
function updateConsent(granted) {
  gtag('consent', 'update', {
    'analytics_storage': granted ? 'granted' : 'denied'
  });

  if (granted) {
    loadZenovay();
  }
}

Con Zenovay

Utiliza el enfoque de carga condicional mostrado arriba para cargar Zenovay solo después de que se haya otorgado el consentimiento a través del Modo de consentimiento de Google:

// Cargar Zenovay solo después de otorgar consentimiento de análisis
function updateConsent(granted) {
  gtag('consent', 'update', {
    'analytics_storage': granted ? 'granted' : 'denied'
  });

  if (granted) {
    const script = document.createElement('script');
    script.src = 'https://api.zenovay.com/z.js';
    script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
    script.defer = true;
    document.head.appendChild(script);
  }
}

Implementación de React

Contexto de consentimiento

// ConsentContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const ConsentContext = createContext();

export function ConsentProvider({ children }) {
  const [consent, setConsent] = useState(() => {
    return localStorage.getItem('analytics_consent') || 'pending';
  });

  const grantConsent = () => {
    localStorage.setItem('analytics_consent', 'granted');
    setConsent('granted');
  };

  const denyConsent = () => {
    localStorage.setItem('analytics_consent', 'denied');
    setConsent('denied');
  };

  return (
    <ConsentContext.Provider value={{ consent, grantConsent, denyConsent }}>
      {children}
    </ConsentContext.Provider>
  );
}

export const useConsent = () => useContext(ConsentContext);

// CookieBanner.js
import { useConsent } from './ConsentContext';

export function CookieBanner() {
  const { consent, grantConsent, denyConsent } = useConsent();

  if (consent !== 'pending') return null;

  return (
    <div className="cookie-banner">
      <p>Usamos cookies para analizar el tráfico del sitio web.</p>
      <button onClick={grantConsent}>Aceptar</button>
      <button onClick={denyConsent}>Rechazar</button>
    </div>
  );
}

Análisis condicionales

// Analytics.js
import { useEffect } from 'react';
import { useConsent } from './ConsentContext';

export function Analytics({ websiteId }) {
  const { consent } = useConsent();

  useEffect(() => {
    if (consent === 'granted') {
      const script = document.createElement('script');
      script.src = 'https://api.zenovay.com/z.js';
      script.setAttribute('data-tracking-code', websiteId);
      script.defer = true;
      document.head.appendChild(script);
    } else if (consent === 'denied') {
      // No cargar análisis cuando se rechaza el consentimiento.
      // Si aún deseas un seguimiento mínimo, carga el script con
      // data-cookieless="true" en su lugar (sin cookies, sin localStorage).
    }
  }, [consent, websiteId]);

  return null;
}

Implementación de Vue.js

<!-- CookieConsent.vue -->
<template>
  <div v-if="showBanner" class="cookie-banner">
    <p>Usamos cookies para análisis.</p>
    <button @click="accept">Aceptar</button>
    <button @click="decline">Rechazar</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const showBanner = ref(false);

onMounted(() => {
  const consent = localStorage.getItem('analytics_consent');
  if (!consent) {
    showBanner.value = true;
  } else if (consent === 'granted') {
    loadZenovay();
  }
});

function accept() {
  localStorage.setItem('analytics_consent', 'granted');
  showBanner.value = false;
  loadZenovay();
}

function decline() {
  localStorage.setItem('analytics_consent', 'denied');
  showBanner.value = false;
  loadZenovayCookieless();
}

function loadZenovay() {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  document.head.appendChild(script);
}

function loadZenovayCookieless() {
  // data-cookieless="true" le indica al seguimiento que use solo
  // IDs window-scoped en memoria - sin cookies, sin localStorage.
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.setAttribute('data-cookieless', 'true');
  document.head.appendChild(script);
}
</script>

Página de preferencias de consentimiento

Permite que los usuarios cambien sus preferencias:

<div class="cookie-preferences">
  <h2>Preferencias de cookies</h2>

  <div class="cookie-option">
    <label>
      <input type="checkbox" id="necessary" checked disabled>
      Cookies necesarias (requeridas)
    </label>
    <p>Esenciales para el funcionamiento del sitio web.</p>
  </div>

  <div class="cookie-option">
    <label>
      <input type="checkbox" id="analytics">
      Cookies de análisis
    </label>
    <p>Nos ayudan a entender cómo los visitantes usan nuestro sitio.</p>
  </div>

  <button onclick="savePreferences()">Guardar preferencias</button>
</div>

<script>
// Cargar preferencias actuales
document.getElementById('analytics').checked =
  localStorage.getItem('analytics_consent') === 'granted';

function savePreferences() {
  const analytics = document.getElementById('analytics').checked;
  localStorage.setItem('analytics_consent', analytics ? 'granted' : 'denied');

  // Recargar para aplicar los cambios
  location.reload();
}
</script>

Registro de consentimiento

Rastrear el consentimiento para cumplimiento:

function logConsent(type, granted) {
  fetch('/api/consent-log', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      type: type,
      granted: granted,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent
    })
  });
}

function acceptCookies() {
  logConsent('analytics', true);
  localStorage.setItem('analytics_consent', 'granted');
  loadZenovay();
}

Mejores prácticas

Lenguaje claro: Explica qué hacen las cookies
Opciones equitativas: Aceptar y rechazar igualmente prominentes
Sin patrones oscuros: No engañes a los usuarios para que acepten
Control granular: Permite que los usuarios elijan categorías
Revocación fácil: Permite cambiar las preferencias

Técnico

No cargar antes del consentimiento: Carga el seguimiento solo después del consentimiento
Respeta la revocación: Detén el seguimiento cuando se revoque el consentimiento
Recuerda las preferencias: No preguntes repetidamente
Prueba completamente: Verifica que el flujo de consentimiento funciona

Cumplimiento

Documenta el consentimiento: Registra cuándo se otorga/revoca el consentimiento
Revisión regular: Actualiza a medida que cambian las regulaciones
Pista de auditoría: Mantén registros para cumplimiento

Solución de problemas

El seguimiento sigue activo después de rechazar

Verifica:

El script no está codificado en HTML
La verificación de consentimiento se ejecuta antes de cualquier seguimiento
No hay problemas de caché

Verifica:

localStorage no está bloqueado
La cookie no expira inmediatamente
Mismo dominio para todas las páginas

La plataforma de consentimiento no se dispara

Asegúrate:

El código de integración es correcto
La plataforma está completamente cargada antes de la verificación
Los nombres de callbacks coinciden