Integraciones

Consentimiento de cookies para React

En una SPA el banner va en index.html, no en un componente: tiene que ejecutarse antes que nada y sobrevivir a cada re-render. Tus componentes pueden reaccionar igualmente a la elección del visitante con un único evento del navegador.

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 React con Vite: añade la etiqueta de cmp.js la primera en el <head> de index.html, leyendo la clave de VITE_CROOMBIT_KEY, e inicializa 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 index.html

La primera en <head>. Vite sustituye los marcadores %VITE_…% de index.html por tus variables de entorno al compilar; con Create React App es public/index.html y %REACT_APP_CROOMBIT_KEY%.

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

2. Retén los rastreadores

Etiquetas en index.html: cámbialas a type="text/plain" con data-tc-consent. Las que tu código inserta 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>

3. Reacciona a la decisión

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

import { useEffect, useState } from 'react';

// Fires after every decision — e.g. to start an analytics SDK you load from npm.
export function useConsent() {
  const [categories, setCategories] = useState<Record<string, boolean>>({});
  useEffect(() => {
    const on = (e: Event) => setCategories((e as CustomEvent).detail?.categories ?? {});
    window.addEventListener('croombit:consent', on);
    return () => window.removeEventListener('croombit:consent', on);
  }, []);
  return categories; // { ANALYTICS: true, MARKETING: false, … }
}

4. Un enlace «Configurar cookies»

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

Preguntas

¿Hay un componente de React?

El banner es independiente del framework a propósito: una etiqueta, renderizada fuera de React. Para una interfaz totalmente propia, el SDK de JavaScript te da los propósitos, el estado actual y la llamada para registrar una decisión.

¿Funciona con React Router o TanStack Router?

Sí. La decisión vale para todas las rutas; no hay que ejecutar nada al navegar.