docs · para desarrolladores

Instalar el snippet

Una etiqueta script pone el banner en tu sitio y retiene cada rastreador no esencial hasta que el visitante decide. Hay dos reglas, y eso es todo el trabajo.

La etiqueta

Copia la etiqueta desde Configuración del sitio → Instalar en el panel. Lleva la clave pública de tu sitio y el entorno que debe cargar:

<script src="https://app.cookiecrumbs.eu/runtime/cc.js"
        data-cc-site="pk_live_…"
        data-cc-env="production"></script>

Cada sitio tiene dos claves: la clave de producción para visitantes reales y la clave de preview, que carga lo publicado en vista previa para que puedas probar en una página de staging sin tocar a nadie.

Regla uno: la etiqueta va primero

Coloca la etiqueta como primer script dentro de <head>, antes de cualquier otro script. Todo lo que se ejecute antes puede poner una cookie mientras el visitante aún decide, y el runtime no puede deshacerlo. El runtime instala su interceptor de forma síncrona, antes incluso de descargar tu configuración, así que nada no esencial se ejecuta antes de que exista una decisión.

Regla dos: los scripts sujetos a consentimiento se vuelven inactivos

Los scripts que necesitan consentimiento se marcan para que el banner pueda liberarlos cuando se conceda su categoría:

<script type="text/plain"
        data-cc-category="analytics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>

Un script type="text/plain" no hace nada por sí solo. Cuando el visitante concede la categoría, el runtime vuelve a crear el script en el orden del documento y se ejecuta con normalidad. Los scripts inline funcionan igual: dales type="text/plain" y un data-cc-category.

Scripts sin etiquetar: la lista de bloqueo

No tienes que etiquetarlo todo. Los rastreadores registrados en tu panel llevan patrones de host, que se compilan en un mapa de bloqueo al publicar. Cualquier <script src> o <iframe src> sin etiquetar cuyo host coincida se neutraliza in situ (los scripts pasan a text/plain, los iframes se retienen con su origen aparcado en data-cc-src) y se libera cuando se concede su categoría. Los iframes bloqueados muestran un texto de marcador, editable por idioma en Banner → Textos.

Sistemas de gestión de contenidos

WordPress: Apariencia → Editor de archivos del tema → header.php, antes de wp_head(), o usa un plugin de scripts de cabecera.
Shopify: Tienda online → Temas → Editar código → layout/theme.liquid, primera línea dentro de <head>.
Webflow: Configuración del proyecto → Custom code → Head code.

La advertencia sobre gestores de etiquetas

No cargues la etiqueta de CookieCrumbs a través de un gestor de etiquetas. La etiqueta debe ejecutarse antes que el gestor; una etiqueta de consentimiento disparada desde dentro del gestor llega demasiado tarde para retener nada. Pégala directamente en la página, por encima del gestor, y deja que Consent Mode lleve las decisiones a tus etiquetas (consulta la guía de Consent Mode).

La comprobación de instalación

La comprobación de instalación del panel carga tu página en un navegador real, acepta una vez e informa de lo que realmente vio. Nada se da por supuesto. Comprueba:

el snippet está presente en la página y colocado antes que otras etiquetas,
los valores por defecto de Consent Mode están fijados antes de que se ejecute cualquier etiqueta de Google,
el banner se renderizó, y la clave pública de la página pertenece a este sitio,
se escribe una cookie de consentimiento tras aceptar,
__tcfapi no se proporciona: CookieCrumbs no implementa el IAB TCF hoy.

Cada comprobación fallida viene con una frase de veredicto que nombra el siguiente paso, por ejemplo: «El snippet está, pero otras etiquetas se ejecutan antes. Mueve la etiqueta por encima de cualquier otro script del head y vuelve a ejecutar la comprobación.» Una decisión de consentimiento real de un visitante también cuenta como prueba de que la instalación funciona.

¿Prefieres un paquete?

Si tu sitio está hecho con Next.js, React, Astro, Nuxt o SvelteKit, los SDK para frameworks colocan la etiqueta por ti, y npx cookiecrumbs init detecta tu framework y escribe la configuración.