Guía: un banner de cookies, de principio a fin

Genera el banner a partir de tus propósitos publicados, registra la respuesta y carga solo las etiquetas que la persona ha permitido.

Esto recorre un banner de cookies real en el navegador: leer los propósitos, mostrarlos, guardar la elección y condicionar tus scripts de analítica y marketing a ella. Unas 30 líneas de código de conexión.

Antes de empezar

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

1. Crea el cliente

import { TripticonsentClient } from '@tripticonsent/sdk';

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

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

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.text.linkUrl   -> enlace a tu política (puede ser null)
  //  p.defaultState   -> "denied"  (respétalo — lo fijan las reglas por región)
  renderToggle(p);
}

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() },   // una por envío
  );
  tc.notifyConsentChanged();   // avisa a los gates abiertos para que re-comprueben
}

4. Condiciona tus etiquetas

tc.gate ejecuta el cargador ahora si el consentimiento ya está concedido, y de nuevo más tarde si la persona cambia de opinión.

tc.gate(visitor, ['analytics'], () => {
  // solo se ejecuta cuando analytics está GRANTED
  loadGoogleAnalytics();
});