Cómo instalar el banner de cookies en una web HTML o en cualquier CMS

Esta guía sirve para webs hechas a mano, generadores de sitios estáticos y cualquier CMS que no tenga guía propia. La idea es la misma en todos: el fragmento va antes del cierre de </body>, en todas las páginas, con jQuery cargado antes. Si usas WordPress, Shopify, PrestaShop o Wix, tienes guía específica.

Antes de empezar

• Ten a mano el token de la web: lo ves en el panel, en la ficha de la web.
• Quita cualquier otro banner o script de cookies. Dos banners se pisan.
• Localiza las etiquetas de analítica o publicidad pegadas en el HTML. El banner no bloquea lo que está pegado directamente en el código: hay que quitarlo o moverlo al banner.

Paso 1: comprueba si la web carga jQuery

El cargador del banner necesita jQuery con el atajo $.

1. Abre la web en el navegador y abre la consola de las herramientas de desarrollo.
2. Escribe typeof jQuery y pulsa Intro.
3. Si responde "function", ya está cargado: no añadas otra copia. Si responde "undefined", sigue con el paso 2.

Paso 2: añade jQuery a la web

Lo ideal es alojarlo en tu propio servidor.

1. Descarga desde jquery.com la versión comprimida de la rama 3.x, jquery-3.7.1.min.js. La 4.0 eliminó funciones antiguas que algunos scripts todavía usan.
2. Súbelo a tu servidor, por ejemplo a la carpeta /js/, con el nombre jquery.min.js.
3. Cárgalo antes del fragmento del banner, como en el paso 3.

Si jQuery ya se carga en otra parte de la página, da igual dónde, siempre que se ejecute antes del evento DOMContentLoaded. Un script normal o con defer cumple. Uno con async no lo garantiza.

Si no puedes subir archivos ni tocar la carga de scripts, hay una variante del cargador que ya incluye jQuery: cambia cookie-loader.nojq.min.js por cookie-loader.js en la URL. Úsala solo en ese caso. Pesa unos 530 KB sin minificar.

Paso 3: pega el fragmento antes de cerrar body

Cambia TU_TOKEN por el token de la web. Si la web ya carga jQuery, omite la primera línea.

<script src="/js/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.jQuery && typeof window.$ !== 'function') { window.$ = window.jQuery; }
  var s = document.createElement('script');
  s.async = true;
  s.id = 'cookies-token';
  s.src = 'https://cookies.sslcamaltec.com.es/cookies/cookie-loader.nojq.min.js?tokencookies=TU_TOKEN';
  document.body.appendChild(s);
});
</script>
</body>

Paso 4: cubre todas las plantillas y páginas

El banner tiene que estar en todas las páginas, también en las legales.

1. Si la web usa un pie común, como un include de PHP, una plantilla base o un parcial, pega el fragmento ahí una sola vez.
2. Si cada página es un archivo HTML independiente, pégalo en cada una.
3. Revisa los casos que suelen olvidarse: páginas de aterrizaje, el blog, la página de error 404 y cualquier plantilla con un diseño distinto.

Paso 5: caché y optimizadores

1. Vacía la caché del servidor, del CMS y de la CDN si la usas.
2. Si tienes un optimizador que combina o minifica JavaScript, excluye el fragmento del banner y las URL que contengan cookies.sslcamaltec.com.es.
3. Si el optimizador retrasa el JavaScript hasta que el visitante interactúa, excluye también el banner. Si no, no aparecerá hasta que alguien mueva el ratón.
4. Si el optimizador añade async a jQuery, exclúyelo o cámbialo a defer.

Paso 6: si la web usa Content Security Policy

Si la web envía una cabecera Content-Security-Policy, autoriza el dominio del banner en cinco directivas: script-src, connect-src, style-src, img-src y font-src. Añádelo a los valores que ya tengas, por ejemplo:

Content-Security-Policy: script-src 'self' https://cookies.sslcamaltec.com.es; connect-src 'self' https://cookies.sslcamaltec.com.es; style-src 'self' https://cookies.sslcamaltec.com.es; img-src 'self' https://cookies.sslcamaltec.com.es; font-src 'self' https://cookies.sslcamaltec.com.es

El fragmento es un script en línea. Si tu política no permite scripts en línea, muévelo a un archivo de tu servidor, como /js/banner-cookies.js, o autorízalo con un nonce o un hash. Si usas Google Tag Manager, los dominios de las herramientas que cargue el contenedor también tienen que estar permitidos.

Paso 7: Google Tag Manager y etiquetas pegadas

Quita del HTML el código de Google Analytics, del píxel de Meta y de cualquier herramienta que use cookies. Si usas Google Tag Manager, quita también su fragmento y pon el ID del contenedor en el panel, como explica la guía de Google Tag Manager.

Cómo comprobar que funciona

1. Abre la web en una ventana privada y recorre varias plantillas distintas.
2. Antes de elegir, revisa las cookies y las peticiones. No debe haber _ga ni peticiones a google-analytics.com, googletagmanager.com o facebook.com.
3. Pulsa «Rechazar» y recarga. Sigue sin haber nada de analítica ni de publicidad.
4. Tras la primera elección debe aparecer el icono para reabrir la configuración.
5. Si quieres un informe, pide la auditoría gratuita.

Problemas frecuentes

Si la web usa Consent Mode, sigue con configurar Consent Mode. El resto de guías están en la ayuda.

Preguntas frecuentes

¿Puedo cargar jQuery con defer?

Sí. Los scripts con defer se ejecutan antes del evento DOMContentLoaded, que es lo que espera el fragmento. Con async no hay esa garantía.

¿Y si la web ya carga jQuery?

Entonces no añadas otra copia. Basta con que jQuery esté cargado antes de que se dispare DOMContentLoaded. El fragmento se encarga del atajo $ si no existe.

¿Qué hago si mi CSP no permite scripts en línea?

Mueve el fragmento a un archivo JavaScript de tu propio servidor y cárgalo con una etiqueta script normal, o autoriza el bloque en línea con un nonce o un hash.

Fuentes

1. Content-Security-Policy (MDN)
2. El elemento script: defer y async (MDN)
3. Descargar jQuery (jquery.com)
4. jQuery 4.0.0 (Blog oficial de jQuery)