Empezar gratisPanel
Documentación

Instalar el script

Cookiemark funciona con una etiqueta script. Esta página te explica dónde va esa etiqueta, por qué importa su posición y cómo añadirla en las plataformas que más usan nuestros clientes.

Añade tu sitio y copia la línea

  1. Inicia sesión, abre Sitios y pulsa Añadir sitio. Introduce la dirección que usan tus visitantes, como shop.example.com.
  2. Abre el sitio. La pestaña Instalación muestra la línea de ese sitio, con su propia clave de sitio en la dirección.
  3. Pega la línea en tu sitio, como se describe más abajo para tu plataforma.
  4. Elige el diseño y los textos y pulsa Publicar. El banner aparece en la siguiente página que se cargue.

La línea tiene este aspecto, con tu propia clave en lugar de YOUR-SITE-KEY:

<script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>

Puedes añadir la línea antes de publicar nada. Hasta la primera publicación, el script se carga, no encuentra nada publicado y no muestra nada. Por eso puedes ponerla sin problema hoy en un sitio en producción y terminar el diseño mañana.

Por qué la línea va al principio del head

El script hace dos cosas que tienen que ocurrir antes de que se ejecute cualquier otro script. Le dice a Google que todavía no se permite nada y empieza a vigilar la página en busca de rastreadores que tiene que retener. Un script que se ejecuta antes ya ha hecho su trabajo cuando llega Cookiemark.

Por eso, pega la línea como primer script del <head> de cada página. Ponla por encima de Google Tag Manager, las herramientas de analítica, los píxeles y los widgets de chat.

<head>
  <meta charset="utf-8">
  <script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>
  <!-- Google Tag Manager, analytics and every other script come after this line -->
  ...
</head>

Deja la etiqueta tal como está. No añadas async ni defer, porque los dos dejan que otros scripts se ejecuten primero. El script es pequeño: unos 19 KB comprimido, más tus propios ajustes.

Mantén las herramientas de optimización lejos de él

Las herramientas que retrasan, aplazan o combinan scripts cambian el orden que has fijado. Excluye de ellas el script de Cookiemark. Busca un ajuste llamado «excluir del retraso», «excluir de la combinación» o algo parecido. Las más habituales son WP Rocket, LiteSpeed Cache, Autoptimize y Cloudflare Rocket Loader.

Cuando publicas un cambio

Al guardar en el panel, tu cambio se queda como borrador. Los visitantes lo ven cuando pulsas Publicar. Cada publicación crea una versión nueva y, en ese mismo momento, vaciamos la caché del CDN de tu script. Los visitantes reciben la nueva versión en un minuto aproximadamente, porque los navegadores guardan el script durante 60 segundos.

HTML puro

Pega la línea justo después de la etiqueta de apertura <head>, en todas las páginas. Si tus páginas comparten un archivo de cabecera o una plantilla, pégala ahí una vez. Revisa después algunas páginas, porque en los sitios hechos a mano suele haber páginas que usan otra plantilla.

WordPress

Usa nuestro plugin. Coloca el script al principio del head, mantiene WP Rocket, LiteSpeed, Autoptimize y Cloudflare Rocket Loader lejos de él, vacía la caché de páginas cuando guardas y comunica la elección del visitante a los plugins que usan la WP Consent API.

  1. Descarga el plugin desde la pestaña Instalación de tu sitio en Cookiemark.
  2. En WordPress, abre Plugins, Añadir nuevo plugin, Subir plugin y elige el archivo.
  3. Abre Ajustes, Cookiemark y pulsa Connect with Cookiemark.
  4. Inicia sesión en Cookiemark si te lo pide, elige el sitio o añádelo como sitio nuevo, y volverás a WordPress.
  5. Publica el sitio en Cookiemark. A partir de ahí, el banner aparece en todas las páginas.

Al conectar, la dirección de WordPress también se añade a los dominios del sitio y se rellena la ruta con la que el plugin instala la cookie de consentimiento desde tu propio servidor, para que Safari conserve la elección durante todo su plazo. Si no puedes usar el botón, pega en su lugar la línea de la pestaña Instalación en el campo Site key del plugin.

¿Prefieres no añadir un plugin? Entonces añade la línea a mano:

  • En tu tema. Abre el header.php de un tema hijo y pega la línea justo después de <head>, por encima de wp_head(). Edita un tema hijo, porque una actualización del tema sobrescribe los cambios en el tema padre.
  • Con un plugin. También sirve un plugin que inserte código en el head. Dale al fragmento la prioridad más alta que ofrezca, para que quede por encima de los scripts que otros plugins añaden con wp_head().

Después, vacía la caché de páginas de tu plugin de caché, de tu hosting y de tu CDN. Si no, los visitantes siguen recibiendo páginas de antes del cambio. Excluye el script de los plugins de optimización, como se explica más arriba.

Shopify

  1. En el panel de administración de Shopify, abre Tienda online y luego Temas.
  2. Junto a tu tema actual, abre el menú y elige Editar código.
  3. Abre layout/theme.liquid y pega la línea justo después de <head>.
  4. Guarda y abre tu tienda en una ventana privada para comprobar que aparece el banner.

Hay dos limitaciones. La pantalla de pago de Shopify no usa tu tema, así que el script no se ejecuta ahí. Y Cookiemark todavía no transmite la elección del visitante a la Customer Privacy API de Shopify.

Webflow

  1. Abre tu proyecto y ve a Site settings y luego a Custom code.
  2. Pega la línea al principio de Head code, por encima de todo lo demás que haya en ese campo.
  3. Guarda y publica el sitio desde Webflow.

Webflow solo añade código personalizado a un sitio publicado con un plan de sitio de pago. Si también añades código al head de páginas concretas, comprueba en el código fuente de la página que la línea de Cookiemark sigue estando al principio.

Wix

  1. En el panel de tu sitio, abre Configuración y luego Código personalizado.
  2. Elige Añadir código personalizado y pega la línea.
  3. Aplícalo a todas las páginas, colócalo en Head y haz que se cargue en cada página nueva.

Wix exige un plan Premium con un dominio conectado para usar código personalizado. Además, Wix carga sus propios scripts antes que los tuyos y ese orden no se puede cambiar. Cookiemark puede mostrar el banner y retener los scripts que añades tú, pero no lo que Wix carga primero. Desactiva el banner de cookies del propio Wix, para que los visitantes vean un solo banner.

Squarespace

  1. Abre Configuración, luego Avanzado o Herramientas para desarrolladores y después Inyección de código.
  2. Pega la línea al principio del campo Encabezado y guarda.

La inyección de código no está incluida en todos los planes de Squarespace, así que comprueba antes el tuyo. Desactiva el banner de cookies que ofrece el propio Squarespace, para que los visitantes no vean dos.

Google Tag Manager

No cargues Cookiemark a través de Tag Manager. Una etiqueta de tu contenedor se ejecuta cuando el contenedor ya ha arrancado, y eso es demasiado tarde para fijar los valores de consentimiento predeterminados de Google o para retener nada. Pega la línea en el head y elige una de estas dos formas para el propio contenedor.

  • Deja que Cookiemark cargue el contenedor. Introduce el ID de tu contenedor en la pestaña Google y GTM y quita tu propio fragmento de Tag Manager. Así Cookiemark carga el contenedor justo después de los valores de consentimiento predeterminados, y el orden no puede fallar.
  • Conserva tu propio fragmento. Deja vacío el ID del contenedor y mantén tu fragmento por debajo de la línea de Cookiemark.

Nunca hagas las dos cosas. Un contenedor que se carga dos veces activa cada etiqueta dos veces. Google Tag Manager trata los activadores y los eventos de tu contenedor.

Comprueba que funciona

  1. Abre tu sitio en una ventana privada para empezar sin ninguna elección guardada. Debería aparecer el banner.
  2. Mira el código fuente de la página y busca cdn.cookiemark.com. Debería ser el primer script del head.
  3. Lanza un análisis desde la pestaña Análisis. Te avisa de las páginas que no tienen el script y de una caché que sigue sirviendo una copia antigua de tus páginas.

Cuando un análisis encuentra tu script en el sitio, el dominio recibe la etiqueta Verificado. Los análisis programados solo se ejecutan en sitios con un dominio verificado.

Más de un dominio

El registro de consentimientos solo acepta elecciones procedentes de los dominios de tu sitio y de sus subdominios. Si el mismo banner funciona en otro dominio, añádelo en Ajustes, Dominios. Para recordar una sola elección en todos los subdominios, introduce tu dominio principal en Compartir la elección entre subdominios, en esa misma pestaña.