Consentl para cualquier sitio web

Añada una etiqueta script, la primera en el <head>. El banner, los textos, las regiones, Consent Mode y el bloqueo se configuran en el panel de Consentl.

Cargador el primero en el <head>

Sí

Consentl funciona en cualquier sitio que le permita añadir un <script> al <head>. No hay nada que instalar en su servidor: todo se configura en el panel de control de Consentl (sitio externo) y lo entrega el script del cargador.

Qué hace cada plan

En Free, las etiquetas de Google, Meta Pixel y todas las demás etiquetas se ejecutan en cuanto se carga la página, salvo que las marque manualmente.

1. Añada su sitio y copie la clave

1. Inicie sesión en el panel de control (o cree una cuenta gratuita) y añada su sitio.
2. Añada todos los nombres de host en los que funciona el sitio en el campo Dominios del sitio. www. y el dominio sin www cuentan como el mismo sitio; añada por separado los dominios de staging.
3. Abra la página Configuración inicial del sitio y copie el fragmento de instalación. La clave del sitio que contiene empieza por sk_ y es pública: identifica su sitio, no es una contraseña.

2. Instale el cargador

<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG"></script>

• SITE_KEY: su clave del sitio (sk_ + 24 caracteres).
• LANG: el idioma de la página, el mismo valor que <html lang>: en, de, fr, pt-PT, pt-BR, fr-CA, … Las variantes regionales recurren automáticamente al idioma base (de-AT → de). Omita &l= para utilizar el idioma predeterminado del sitio definido en el panel de control.

Dónde: como primer elemento del <head>, justo después de <meta charset>. Debe ir antes de Google Tag Manager, gtag.js, Meta Pixel, las analíticas, los widgets de chat y las herramientas de pruebas A/B.

Cómo: síncrono: sin async, sin defer, sin type="module". El script es pequeño y se almacena en caché.

Por qué el primero y síncrono:

1. Los valores predeterminados de Google Consent Mode v2 (Pro y superiores) deben establecerse antes de que cualquier etiqueta de Google los lea.
2. El bloqueo impide que las etiquetas se ejecuten hasta que el visitante dé su consentimiento. Los scripts situados por encima del cargador ya se han ejecutado.
3. La elección de un visitante que vuelve se aplica de inmediato: sin parpadeo del banner y sin etiquetas que se activen antes de conocer la elección.

Si su plataforma no permite colocar el script el primero, su guía explica exactamente lo que eso significa.

Qué puede y qué no puede detener el bloqueo

• Las etiquetas cargadas por código (Google Tag Manager, el cargador JavaScript de un píxel, los scripts que añade su aplicación) se retienen antes de solicitarse cuando coinciden con un rastreador conocido (Business) o con una de sus reglas de bloqueo.
• Las etiquetas escritas en el HTML de la página (<script src>, píxeles <img>, <iframe>) las solicita el navegador antes de que ningún script pueda detenerlas: mientras se descarga el cargador, el navegador ya obtiene lo que encuentra más abajo en la página. Consentl sigue impidiendo que se ejecute un script reconocido, pero la solicitud, con la dirección IP del visitante, la dirección de la página y las cookies de terceros que haya, ya se ha enviado; en el caso de un píxel de seguimiento, la solicitud es el propio seguimiento. Marque manualmente todas las etiquetas escritas en el HTML (apartado 6) y elimine los píxeles de seguimiento en <noscript>.
• Los sitios generados en el servidor también pueden insertar el cargador en línea, lo que elimina la espera de la descarga. Las etiquetas escritas en el HTML siguen teniendo que marcarse.

3. Compruebe que funciona

1. Abra el sitio en una ventana privada. Aparece el banner.
2. En las herramientas para desarrolladores del navegador → Console:
   • Consentl.get() devuelve las elecciones actuales;
   • Consentl.region() devuelve el modelo legal aplicado al visitante, por ejemplo { mode: "opt_in", law: "gdpr", gpc: false, known: true }.
3. En Network, antes de aceptar:
   • ninguna solicitud a hosts de seguimiento de las etiquetas cargadas por código, cuando el bloqueo automático está activado (Business); con Consent Mode, solo los pings sin cookies de Google;
   • las etiquetas escritas en el HTML que no ha marcado se solicitan. Márquelas y vuelva a comprobarlo.
4. Mientras el sitio está en modo de prueba, añada ?consentl=preview a una dirección para ver el banner sin almacenar ni registrar una elección. No elige una región: la Vista previa del panel de control muestra el banner de cada región.

Regiones: en cada vista de página, el banner pregunta a Consentl el país del visitante, que se obtiene de su dirección IP. La consulta se hace en memoria y no almacena nada, y el cargador es el mismo para todos los visitantes. Se aplica su regla para ese país:

• No se distingue entre estados de EE. UU.: un visitante de EE. UU. recibe su regla para todo EE. UU. o, si no la hay, su primera regla de un estado de EE. UU. (por ejemplo, California).
• Cuando el país es desconocido, se aplica su regla para las regiones desconocidas (opt-in de forma predeterminada).
• El código está en el campo consentl.region del dataLayer (por ejemplo, DE o US). Para ver el banner de otra región, utilice la Vista previa del panel de control o una VPN.

4. Añada un enlace «Configuración de cookies»

Retirar el consentimiento debe ser tan fácil como darlo. Utilice cualquiera de estas opciones:

<a href="#consentl">Cookie settings</a>
<button type="button" data-consentl-open>Cookie settings</button>

window.Consentl.open("prefs");

Los enlaces cuya dirección termina en #consentl o #consentl-preferences, y cualquier elemento con data-consentl-open, abren las preferencias en lugar de navegar, también en elementos añadidos más tarde. Los demás anclajes que solo empiezan igual (como #consentl-api) no se modifican. El panel de control también puede mostrar un icono flotante de preferencias.

5. Declaración de cookies, solicitudes sobre datos personales y formulario de desistimiento de la UE

<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<div data-consentl-request      data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<div data-consentl-withdrawal   data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="LANG"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>

Incluya blocks.js una vez por página, después de los <div>. La declaración enumera las cookies de la página Cookies del panel de control: el escáner añade lo que encuentra cuando se crea el sitio, cuando hace clic en Escanear ahora y, en Business y superiores, cada mes; usted mismo puede añadir o editar entradas (los detalles se completan a partir de la Open Cookie Database). Las solicitudes sobre datos personales se verifican por correo electrónico y aparecen en el panel de control con su plazo. El formulario de desistimiento de la UE requiere el plan Pro o superior y debe activarse en el panel de control; de lo contrario, su <div> queda vacío.

6. Retenga todo lo que no se reconoce automáticamente

<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<script type="text/plain" data-consentl="analytics">/* inline code */</script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">

• Categorías: preferences, analytics, marketing.
• No se solicita nada hasta que se concede la categoría. Es la única forma de retener una etiqueta escrita en el HTML.
• Añada data-consentl-type="module" a un script marcado que deba ejecutarse como módulo.
• El bloqueo manual funciona en todos los planes. El plan Business añade el bloqueo automático de rastreadores conocidos y reglas de bloqueo («la URL contiene») que usted añade en el panel de control sin tocar el sitio. Las reglas se comparan con la dirección de scripts, iframes e imágenes, y de los scripts en línea que cargan algo. Los datos de página de frameworks como Next.js, Nuxt, Remix o SvelteKit nunca se retienen.
• Una etiqueta retenida se ejecuta una sola vez después del consentimiento, aunque su framework añada una segunda copia mientras se inicia la página (Nuxt lo hace).

Aplicaciones de una sola página

• No hay nada que llamar en los cambios de ruta: el runtime se carga una vez por documento, la elección se guarda en la cookie propia consentl y las etiquetas retenidas se liberan sin recargar.
• Los routers que sustituyen el cuerpo de la página (Astro <ClientRouter />, Turbo, Swup, htmx hx-boost) mantienen en funcionamiento el banner, el icono flotante y los enlaces «Configuración de cookies».
• Mantenga la misma dirección del cargador en todas las páginas y no vuelva a cargarlo al navegar. Si su creador de sitios ofrece «cargar en cada página», elija «cargar una vez».
• Las etiquetas que su aplicación inserta más tarde también se retienen cuando coinciden con un rastreador conocido (Business) o con una regla de bloqueo. Para su propio código, compruebe el consentimiento. consentl:change se dispara en cada vista de página con las elecciones actuales y de nuevo con cada cambio, así que inicie las cosas una sola vez:

let started = false;
const maybeStart = (c) => {
  if (c.analytics && !started) {
    started = true;
    startAnalytics();
  }
};
document.addEventListener("consentl:change", (e) => maybeStart(e.detail));
if (window.Consentl) maybeStart(window.Consentl.get());

• Tras un cambio de idioma sin recarga completa, el banner mantiene su idioma hasta la siguiente carga de página.

Con Google Tag Manager

La plantilla de Consentl para GTM puede encargarse de Google Consent Mode. Si utiliza la plantilla y el fragmento de código, añada &gcm=ext a la dirección del cargador, para que solo la plantilla envíe comandos de Consent Mode:

<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG&gcm=ext"></script>

Bootstrap en línea (en el servidor)

Si sus páginas se generan en un servidor que usted controla, puede imprimir el cargador en línea en lugar de enlazarlo, como hacen los plugins de Consentl para WordPress, Shopware, PrestaShop y Magento:

1. En el servidor, obtenga https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=LANG.
2. Almacene la respuesta en caché por clave del sitio e idioma durante 5 minutos (su Cache-Control); si una obtención posterior falla, siga sirviendo la última copia correcta.
3. Imprima <script> + la respuesta + </script> como primer elemento del <head>. Con una Content Security Policy, añada su nonce (el contenido cambia con su configuración, por lo que un hash no funciona).
4. Si no hay ninguna copia en caché, imprima la etiqueta normal <script src="…">.

// Node, simplified
const cache = new Map(); // url -> { body, until }
async function consentlHead(key, lang) {
  const url = `https://api.consentl.com/v1/loader.js?k=${encodeURIComponent(key)}&l=${encodeURIComponent(lang)}`;
  const hit = cache.get(url);
  if (!hit || hit.until < Date.now()) {
    try {
      const r = await fetch(url);
      if (r.ok) cache.set(url, { body: await r.text(), until: Date.now() + 300_000 });
    } catch {
      /* keep the stale copy */
    }
  }
  const body = cache.get(url)?.body;
  return body ? `<script>${body}</script>` : `<script src="${url}"></script>`;
}

No modifique la respuesta: Consentl la genera para su sitio. Imprímala en la plantilla HTML que escribe su servidor, fuera de cualquier framework del lado del cliente. No sirve para el App Router de Next.js: React enviaría allí el cargador dos veces en cada página; utilice la etiqueta simple como se muestra en Next.js.

API de JavaScript

Eventos en document (las elecciones están en event.detail):

• consentl:change: en cada vista de página, una vez aplicada la regla de la región, y con cada cambio;
• consentl:ready: una vez por vista de página, después del primer consentl:change;
• consentl:ui-error: no se ha podido cargar el banner (tampoco tras un reintento). Los enlaces a #consentl funcionan entonces como enlaces normales, para que pueda mostrar su propia alternativa.

El dataLayer recibe consentl_consent (cada vista de página y cada cambio) y consentl_update (solo cambios), cada uno con consentl.preferences, analytics, marketing, sale, stored y region. Elementos marcados: data-consentl="<category>", type="text/plain", data-src, data-consentl-srcset (imágenes con srcset), data-consentl-type. Añada data-consentl-noicon a un elemento en las páginas que tienen su propio botón «Configuración de cookies», para ocultar allí el icono flotante.

Content Security Policy

Si su sitio envía una cabecera Content-Security-Policy, permita la API de Consentl:

script-src  'self' https://api.consentl.com;
connect-src 'self' https://api.consentl.com;
img-src     'self' https://api.consentl.com data:;
style-src   'self' 'unsafe-inline';

• style-src 'unsafe-inline' es necesario porque el banner añade sus estilos en tiempo de ejecución. Póngase en contacto con el soporte si su política prohíbe los estilos en línea.
• Los scripts que Consentl libera después del consentimiento siguen necesitando sus propios hosts en script-src.
• Con una política estricta basada en nonce, asigne su nonce a la etiqueta del cargador y utilice 'strict-dynamic', para que los scripts que carga y libera se consideren de confianza. Sin 'strict-dynamic', asigne también su nonce a los scripts en línea marcados.
• No se puede utilizar Subresource Integrity (SRI) en el cargador, porque su contenido cambia cuando usted cambia la configuración en el panel de control.

Comprobaciones en el servidor (opcional)

La elección se guarda en la cookie propia consentl: 1.<id>.<timestamp>.<revision>.<flags>.<action>. flags tiene cuatro dígitos para preferences, analytics, marketing y sale (1 = concedido). Sin cookie significa que aún no hay decisión: trátelo como «no concedido». Una cookie con una revisión anterior (después de «Restablecer todos los consentimientos») ya no cuenta. Las páginas que dependen de esta cookie no deben almacenarse en una caché compartida. Siempre que pueda, es preferible el control en el lado del cliente (apartado 6).

Limitaciones

• El banner no puede controlar los scripts que se ejecutan antes del cargador: los scripts situados por encima de él en el <head> y los scripts que una plataforma de alojamiento inyecta fuera de su control.
• Las etiquetas escritas en el HTML de la página se solicitan antes del consentimiento, salvo que las marque.
• Los iframes de terceros insertados (vídeos, mapas) se retienen en su totalidad hasta el consentimiento. Consentl no puede ver lo que ocurre dentro de ellos.
• Consentl no implementa el IAB Transparency & Consent Framework (TCF).

Guías relacionadas

• Google Tag Manager
• Next.js
• React, Vue, Angular (SPA)
• Webflow

¿Se ha atascado? Escriba a support@consentl.com: respondemos en inglés en días laborables.