Integraciones

Consentimiento de cookies para Vue y Nuxt

Con Nuxt, la etiqueta va en nuxt.config con la máxima prioridad, para que se renderice la primera en el <head> de todas las páginas. Con Vue y Vite, va en index.html.

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 con las categorías de cookies Analítica (ANALYTICS) y Publicidad (MARKETING), desactivadas por defecto, publícalas y publica el banner. Crea una clave publicable de TEST para localhost:3000. Es una app Nuxt: añade cmp.js a app.head.script en nuxt.config.ts con tagPriority "critical", leyendo la clave de NUXT_PUBLIC_CROOMBIT_KEY, y añade un enlace "Configurar cookies" al componente del pie.

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

Nuxt: nuxt.config

tagPriority: 'critical' la coloca por delante de cualquier otra etiqueta del <head>, incluidas las que añaden los módulos.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://croombit.com/cmp.js',
          'data-tc-api-key': process.env.NUXT_PUBLIC_CROOMBIT_KEY,
          tagPriority: 'critical', // first in <head>, before any tracker
        },
      ],
    },
  },
});

Vue + Vite: index.html

<!-- index.html (Vite + Vue) -->
<head>
  <script src="https://croombit.com/cmp.js"
          data-tc-api-key="%VITE_CROOMBIT_KEY%"></script>
</head>

Retén los rastreadores

Etiquetas en tu HTML o en la configuración del head: type="text/plain" más data-tc-consent. Las insertadas en tiempo de ejecución desde proveedores conocidos se retienen automáticamente.

<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>

Un enlace «Configurar cookies»

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

Lo gestiona un único listener delegado, así que también funciona un enlace que un componente renderice más tarde.

Preguntas

¿Funciona con el renderizado en servidor de Nuxt?

Sí. La etiqueta está en el <head> renderizado en servidor, así que se ejecuta antes de la hidratación y de cualquier rastreador.

¿Cómo arranco un SDK de npm solo tras el consentimiento?

Escucha el evento croombit:consent en window: su detail.categories indica qué concedió el visitante.