Saltar al contenido

Idioma

Menú de la documentación

Inicio rápido

Instala Cookiesh en minutos con HTML, Next.js o Google Tag Manager y comprueba que los scripts de terceros siguen bloqueados hasta que el visitante consiente.

Última actualización: 29 de octubre de 2026

Cookiesh funciona con una sola etiqueta script. Cárgala antes que cualquier otra etiqueta de la página y asigna una categoría a los scripts que necesitan consentimiento: Cookiesh muestra el banner adecuado según la región de cada visitante, bloquea esos scripts hasta que el visitante los acepta y registra su elección. La mayoría de los sitios están en marcha en menos de cinco minutos.

Antes de empezar

Necesitas una cuenta de Cookiesh y un sitio web. En el panel, abre Domains → Add domain, introduce tu dominio y copia el Site ID. Tiene este aspecto: ck_live_8f2a91.

Cookiesh clasifica todo en cuatro categorías de consentimiento:

Categoría Por defecto Uso habitual
necessary Siempre activa Sesiones, seguridad, balanceo de carga y la propia cookie de consentimiento
preferences Desactivada Idioma, tema y otros ajustes que se recuerdan
analytics Desactivada Analítica de producto y de tráfico
marketing Desactivada Publicidad, retargeting y píxeles de redes sociales

Ejecuta tu primer escaneo de cookies desde el panel antes de publicar. Así Cookiesh sabrá qué scripts y cookies pertenecen a cada categoría y podrá rellenar tu banner de antemano.

Instalación con HTML

Añade el cargador como primer script dentro de <head>, para que se ejecute antes que cualquier cosa que instale cookies:

<head>
  <script
    src="https://sdk.cookiesh.eu/v1/cookiesh.js"
    data-site-id="ck_live_8f2a91"
    async
  ></script>
  <!-- el resto de etiquetas, a continuación -->
</head>

Después, cambia cualquier script que necesite consentimiento de type="text/javascript" a type="text/plain" y añade una categoría con data-cookiesh. Cookiesh restaura el tipo original y ejecuta el script en cuanto el visitante permite esa categoría:

<script
  type="text/plain"
  data-cookiesh="analytics"
  src="https://analytics.example.com/script.js"
></script>

<script type="text/plain" data-cookiesh="marketing">
  // Los scripts en línea funcionan igual.
  initAdPixel();
</script>

También puedes bloquear iframes, como vídeos y mapas incrustados. Usa data-cookiesh-src en lugar de src y Cookiesh los cargará tras el consentimiento.

Instalación con Next.js

Instala el SDK de React:

npm install @cookiesh/react

Carga el script en el layout raíz con la estrategia beforeInteractive, para que se ejecute antes que los demás scripts, y envuelve la aplicación en CookieshProvider:

// app/layout.tsx
import Script from 'next/script';
import { CookieshProvider } from '@cookiesh/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://sdk.cookiesh.eu/v1/cookiesh.js"
          data-site-id={process.env.NEXT_PUBLIC_COOKIESH_SITE_ID}
          strategy="beforeInteractive"
        />
        <CookieshProvider>{children}</CookieshProvider>
      </body>
    </html>
  );
}

Renderiza el código que depende del consentimiento solo cuando la categoría esté permitida. useConsent() vuelve a renderizar cada vez que el visitante cambia su elección:

// app/analytics.tsx
'use client';

import Script from 'next/script';
import { useConsent } from '@cookiesh/react';

export function Analytics() {
  const { analytics } = useConsent();
  if (!analytics) return null;

  return <Script src="https://analytics.example.com/script.js" strategy="afterInteractive" />;
}

En productos con inicio de sesión, pasa userId a CookieshProvider para sincronizar la elección del visitante entre dispositivos.

Instalación con Google Tag Manager

La plantilla de la comunidad de Cookiesh establece los valores por defecto de Google Consent Mode v2 antes de que se active cualquier etiqueta y los actualiza cuando el visitante elige.

  1. En tu contenedor de GTM, abre Templates → Tag templates → Search gallery y añade Cookiesh CMP.
  2. Crea una etiqueta nueva a partir de la plantilla y pega tu Site ID.
  3. Configura como activador Consent Initialization – All Pages.
  4. Elige un estado de consentimiento por defecto para cada región. Usa denied para el EEE, el Reino Unido y Suiza.
  5. En cada etiqueta de Google, abre Advanced settings → Consent settings. Deja activadas las comprobaciones de consentimiento integradas y exige consentimiento adicional para las etiquetas que no son de Google.
  6. Publica el contenedor.

Si cargas gtag.js sin GTM, define tú mismo los valores por defecto, antes de la etiqueta de Google:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 500,
  });
</script>

Cookiesh envía la llamada gtag('consent', 'update', …) correspondiente en cuanto el visitante toma una decisión, y de nuevo en cada página vista posterior.

Comprueba la instalación

  1. Abre tu sitio en una ventana privada. Debería aparecer el banner, y las herramientas para desarrolladores del navegador no deberían mostrar todavía ninguna cookie de analítica ni de marketing.
  2. Ejecuta Cookiesh.debug() en la consola. Muestra la región detectada, el banner activo, cada script bloqueado y el estado actual del consentimiento.
  3. Acepta solo la analítica y recarga la página. Los scripts de analítica se ejecutan, pero los de marketing siguen bloqueados.
  4. En Google Tag Assistant, comprueba que la pestaña Consent muestra los eventos de valores por defecto y de actualización en el orden correcto.

Próximos pasos