Guía: banner de cookies

Desde una etiqueta de script hasta una integración completamente personalizada — tres opciones, elige la que encaje.

Opción 1 — Una etiqueta de script (30 segundos)

Añade una etiqueta antes de </body>. El banner aparece automáticamente, registra cada elección y rellena la tabla de declaración de cookies con tu último escáner.

<script src="https://croombit.com/cmp.js"
        data-tc-api-key="pk_live_…"></script>

• data-tc-locale="es" — fuerza un idioma en lugar de detectar el del navegador
• data-tc-auto-show="false" — carga en silencio y llama a window.croombit.show() tú mismo
• Permite al visitante revisar o cambiar su elección más adelante: añade data-tc-open-preferences a cualquier enlace o botón (ver más abajo)

Permite cambiar la elección

Cuando el visitante ya ha decidido, el banner deja de mostrarse. Pon un enlace en el footer o en la página de cuenta y se reabre el mismo panel con sus elecciones actuales ya marcadas: cambia lo que quiera y guarda. Cada guardado es un registro nuevo, con fecha, en el vault.

<a href="#" data-tc-open-preferences>Configurar cookies</a>
<!-- o, desde tu propio código: -->
<button onclick="window.croombit.showPreferences()">Configurar cookies</button>

Cerrar el panel sin guardar deja la elección existente intacta. Los scripts que ya se están ejecutando siguen hasta la próxima carga de página; las etiquetas de Google reaccionan al instante mediante Consent Mode.

Opción 2 — Google Tag Manager (sin código)

1. En GTM: Etiquetas → Nueva → Descubrir más tipos de etiquetas en la Galería de plantillas de la comunidad → busca Croombit CMP.
2. Introduce tu clave publicable y elige un diseño (barra, caja, modal o pantalla completa).
3. Establece el disparador en Inicialización del consentimiento — Todas las páginas.
4. Publica el contenedor.

Opción 3 — Integración personalizada (control total)

Úsala cuando necesites encajar con un sistema de diseño existente o controlar el banner desde tu propio framework de UI. Usa el SDK — unas 30 líneas.

• Publica los propósitos que vas a preguntar, por ejemplo analytics, marketing (consulta Cláusulas de consentimiento).
• Crea una clave publicable (pk_…) y añade tu dominio a su lista de orígenes permitidos.

Paso 1 — Crea el cliente

import { CroombitClient } from '@croombit/sdk';

const tc = new CroombitClient({ apiKey: 'pk_live_…' });

// Identifica al visitante anónimo por una cookie propia que pones tú.
const visitor = 'cookie_id:' + getOrCreateVisitorCookie();

Paso 2 — Genera el banner a partir de tus propósitos

No fijes el texto a mano: obtén la redacción publicada exacta para que el registro coincida con lo que se mostró.

const { purposes } = await tc.getPurposes({ locale: navigator.language });

for (const p of purposes) {
  //  p.key            -> "analytics"
  //  p.text.title     -> "Analítica de uso"
  //  p.text.body      -> "Nos ayuda a ver qué funciones se usan…"
  //  p.defaultState   -> "denied"  (reglas por región — respétalo siempre)
  renderToggle(p);
}

Paso 3 — Guarda la elección

async function onSave(choices /* { analytics: true, marketing: false, … } */) {
  await tc.recordConsentBatch(
    Object.entries(choices).map(([purpose, ok]) => ({
      subject: visitor,
      purpose,
      state: ok ? 'GRANTED' : 'DENIED',
      locale: navigator.language,
      channel: 'cookie_banner',
    })),
    { idempotencyKey: crypto.randomUUID() },
  );
  tc.notifyConsentChanged();
}

Paso 4 — Condiciona tus etiquetas

tc.gate(visitor, ['analytics'], () => {
  loadGoogleAnalytics();
});