Integraciones

Consentimiento de cookies para SvelteKit

La etiqueta va en src/app.html, antes de %sveltekit.head%, para que sea la primera del <head> en todas las páginas, renderizadas en servidor o no. SvelteKit lee la clave de una variable de entorno pública al renderizar.

Configúralo con tu agente de IA

Conecta el servidor MCP de Croombit a tu editor o agente de código y pega esto. Crea el sitio, las categorías de cookies y el banner, y edita tu código.

Con Croombit: crea un sitio para este proyecto y mantén las categorías de cookies que trae. Escribe el texto del banner y publícalo. Crea una clave publicable de TEST para localhost:3000. Es una app SvelteKit: añade cmp.js a src/app.html antes de %sveltekit.head%, con la clave de %sveltekit.env.PUBLIC_CROOMBIT_KEY%, y arranca nuestro SDK de analítica solo cuando el evento croombit:consent conceda ANALYTICS.

El agente trabaja en TEST. Pasar a LIVE son dos pasos en la consola: verificar tu dominio y cambiar a una clave LIVE; consulta pasar a LIVE.

O a mano

1. Añade la etiqueta a app.html

Pon la clave en .env como PUBLIC_CROOMBIT_KEY. %sveltekit.env.PUBLIC_…% se sustituye al renderizar la página.

<!-- src/app.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://croombit.com/cmp.js"
            data-tc-api-key="%sveltekit.env.PUBLIC_CROOMBIT_KEY%"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

2. Retén los rastreadores

Etiquetas en app.html o en <svelte:head>: type="text/plain" más data-tc-consent. Las que tu código inserta en tiempo de ejecución desde hosts conocidos se retienen solas.

<script type="text/plain" data-tc-consent="analytics" async
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
<script type="text/plain" data-tc-consent="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXX');
</script>

3. Arranca los SDK de npm tras el consentimiento

Un SDK de analítica o de grabación de sesiones que importas no es una etiqueta script, así que arráncalo cuando se acepte su categoría:

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';

  // Start an SDK you install from npm only once its category is granted.
  onMount(() => {
    const on = (e) => {
      if (e.detail?.categories?.ANALYTICS) startAnalytics();
    };
    window.addEventListener('croombit:consent', on);
    return () => window.removeEventListener('croombit:consent', on);
  });
</script>

<slot />

4. Un enlace "Configurar cookies"

<a href="#" data-tc-open-preferences>Configurar cookies</a>

Preguntas

¿La navegación en cliente vuelve a mostrar el banner?

No. La decisión se guarda una vez y vale para todas las rutas; SvelteKit nunca sustituye el elemento donde vive el banner.

¿Funciona con adapter-static?

Sí. Al prerenderizar, %sveltekit.env.PUBLIC_…% se rellena en el build, así que compila con la clave que vas a desplegar.