RGPD y cookies en tu web: banner, consentimiento y analítica bien resueltos

Cada vez que revisamos una web nueva en el estudio hacemos la misma prueba: abrimos una ventana privada, desplegamos las herramientas de desarrollo del navegador y miramos la pestaña de red antes de tocar el banner de cookies. En muchos casos, cuando la persona todavía no ha decidido nada, ya han cargado Google Analytics, el píxel de Meta y un par de scripts de terceros que nadie recuerda haber instalado. El banner está ahí, bonito y en su sitio, pero en la práctica funciona como un cartel decorativo.

Arreglarlo no requiere un abogado en cada reunión ni renunciar a medir. Requiere entender tres cosas: qué dice la norma, cómo se diseña un aviso honesto y cómo se conecta ese aviso con el código para que los scripts esperen su turno. En esta guía lo contamos desde el lado del desarrollo, que es donde se decide si una web cumple o solo lo aparenta.

Una aclaración antes de empezar: esto es una guía técnica y de diseño, con las referencias normativas que manejamos a diario. Para un tratamiento de datos complejo (salud, menores, perfiles publicitarios avanzados) la conversación debe incluir a tu delegado de protección de datos o a tu asesoría legal.

01Qué dice la ley sobre cookies, en limpio

En España conviven dos normas que se complementan. La primera es el artículo 22.2 de la LSSI (Ley 34/2002 de servicios de la sociedad de la información), que traslada la directiva europea ePrivacy: para almacenar o leer información en el dispositivo del usuario hace falta su consentimiento, salvo que sea estrictamente necesario para prestar el servicio que ha pedido. La segunda es el RGPD (Reglamento General de Protección de Datos), que define qué es un consentimiento válido: libre, específico, informado e inequívoco, expresado mediante una acción afirmativa clara.

La autoridad que concreta todo esto es la Agencia Española de Protección de Datos. Su Guía sobre el uso de las cookies, actualizada en 2023 para alinearse con las directrices del Comité Europeo de Protección de Datos, es el documento que conviene tener a mano. De ella salen los criterios prácticos que usamos en cada proyecto:

• →Seguir navegando o hacer scroll no equivale a aceptar.
• →Las casillas premarcadas no son consentimiento.
• →La opción de rechazar tiene que estar en la primera capa del aviso, con la misma visibilidad que la de aceptar.
• →Retirar el consentimiento tiene que ser tan fácil como darlo, desde un enlace o botón accesible en todo momento.
• →La elección se puede conservar como máximo 24 meses; pasado ese tiempo, o si cambian las finalidades, se vuelve a preguntar.

Fíjate en que la ley no habla solo de cookies. Habla de cualquier tecnología que guarde o lea datos en el dispositivo: localStorage, píxeles de seguimiento, huellas digitales del navegador o SDK de terceros. Por eso preferimos hablar de «consentimiento para el seguimiento» más que de «cookies».

02Qué cookies necesitan permiso y cuáles no

La clasificación útil para decidir es por finalidad. La duración (de sesión o persistente) y el origen (propias o de terceros) completan la ficha, pero lo que determina si hay que pedir permiso es para qué sirve cada una.

La analítica merece un comentario. Hay países, como Francia, donde la autoridad exime cierta medición de audiencia propia bajo condiciones estrictas. En España la AEPD sigue sin considerarla exenta, así que en nuestros proyectos tratamos cualquier herramienta de medición que guarde identificadores en el navegador como no necesaria. Más abajo verás que eso tiene solución elegante.

Con los incrustados suele haber sorpresas. Un vídeo de YouTube incrustado de forma estándar deja cookies en cuanto se carga la página. La versión youtube-nocookie.com reduce ese seguimiento y, mejor todavía, una fachada de vídeo (una imagen con botón de reproducir que solo carga el reproductor real al hacer clic) resuelve privacidad y rendimiento a la vez. Lo mismo sirve para los mapas: una imagen estática con enlace a Google Maps suele bastar en una página de contacto.

03Un banner de cookies que respeta y se entiende

El banner es una pieza de interfaz como cualquier otra, y se diseña con el mismo cuidado que un formulario. Su trabajo es que la persona entienda qué se le pregunta y decida en dos segundos, con las dos opciones igual de a mano.

Primera capa: lo esencial, en una frase

La primera capa es el aviso que aparece al entrar. Debe incluir quién es el responsable (basta con el nombre de la marca), para qué se usan las cookies no necesarias en pocas palabras, si hay terceros, y tres acciones: aceptar, rechazar y configurar. Un texto que funciona bien:

Lo que da confianza aquí es la simetría: «Aceptar» y «Rechazar» con el mismo tamaño, el mismo peso visual y el mismo color, o al menos un contraste equivalente. Destacar una opción con un botón relleno y esconder la otra en un enlace gris es exactamente el tipo de diseño que la AEPD señala, y también lo que en diseño llamamos un patrón oscuro. Si te interesa el tema, en la guía sobre patrones oscuros y ética en el diseño explicamos por qué la confianza ganada así se pierde en cuanto el usuario lo nota.

Segunda capa: el panel de configuración

Al pulsar «Configurar» se abre un panel con las categorías (necesarias, analíticas, publicidad, contenido de terceros), cada una con su interruptor desactivado por defecto salvo la de necesarias, una línea que explique su finalidad y, desplegable, la lista de cookies concretas con su proveedor y duración. Dos botones al final: «Guardar selección» y «Aceptar todas».

Detalles de diseño que marcan la diferencia

• →En móvil, un panel inferior que ocupe como mucho un tercio de la pantalla deja ver la web y se cierra con un toque.
• →El banner se tiene que poder manejar con teclado y lector de pantalla: foco dentro del panel al abrirse, orden de tabulación lógico y botones con texto real. Aplica los mismos criterios de contraste que al resto de la web (4,5:1 para texto normal según WCAG 2.2).
• →Que no tape el contenido principal mientras la página carga evita saltos de diseño y cuida el CLS, una de las métricas de Core Web Vitals.
• →Un enlace permanente «Configurar cookies» en el pie de página permite cambiar de opinión cuando se quiera.
• →El tono del texto es el de la marca, sin jerga legal en la primera capa. La jerga va, bien ordenada, en la política.

04Bloquear antes de consentir: donde de verdad se cumple

Esta es la parte que más se descuida y la que decide todo. Un banner cumple cuando los scripts no necesarios no se ejecutan hasta que la persona acepta su categoría. Hay tres formas habituales de conseguirlo.

1. Bloqueo por atributo. Los scripts de terceros se insertan con un tipo que el navegador no ejecuta y una categoría. Cuando el usuario acepta, la herramienta de consentimiento los reactiva.

<!-- Se ejecuta solo si el usuario acepta la categoría «analytics» -->
<script type="text/plain" data-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<!-- Fachada de vídeo: el iframe real se crea al hacer clic -->
<button class="video-facade" data-video-id="abc123" data-category="third-party">Ver vídeo (carga contenido de YouTube)</button>

2. Gestión desde Google Tag Manager. Todas las etiquetas cuelgan de activadores condicionados al estado del consentimiento. Es la vía más ordenada cuando hay muchas etiquetas de marketing, siempre que el contenedor esté limpio y documentado.

3. Plataforma de gestión del consentimiento (CMP). Herramientas como Cookiebot, CookieYes, Usercentrics, OneTrust, Complianz (para WordPress) o la opción de código abierto Klaro escanean la web, generan el listado de cookies, bloquean scripts y guardan el registro de cada consentimiento. Para webs con publicidad programática conviene que la CMP esté certificada en el marco TCF 2.2 de IAB Europe.

Sea cual sea la vía, la comprobación es la misma y la hacemos en cada entrega:

1. 01Abre la web en una ventana privada y no toques el banner.
2. 02En las herramientas de desarrollo, revisa la pestaña Red filtrando por dominios de terceros (google-analytics, facebook, doubleclick, hotjar, clarity).
3. 03Revisa en Aplicación las cookies y el localStorage creados: solo deberían aparecer las técnicas y, como mucho, la que guarda la elección.
4. 04Pulsa «Rechazar», recarga y repite las comprobaciones 2 y 3.
5. 05Acepta solo la analítica y verifica que se cargan esos scripts y no los publicitarios.
6. 06Retira el consentimiento desde el pie de página y comprueba que deja de enviarse información.

05Analítica con consentimiento: Consent Mode v2 y alternativas sin cookies

La duda que más escuchamos es «si la gente rechaza, me quedo ciego». No del todo. Hay dos caminos, y se pueden combinar.

Google Consent Mode v2

Consent Mode es un mecanismo de Google por el que la web comunica a sus etiquetas el estado del consentimiento. Desde marzo de 2024 es necesario en el Espacio Económico Europeo para seguir usando funciones de medición y personalización de anuncios de Google. Trabaja con cuatro señales: analytics_storage, ad_storage, ad_user_data y ad_personalization.

Se configura un estado por defecto denegado antes de cargar cualquier etiqueta, y la CMP lo actualiza cuando el usuario decide:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    analytics_storage: 'denied',
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    wait_for_update: 500
  });
  // Cuando el usuario acepta la analítica, la CMP ejecuta:
  // gtag('consent', 'update', { analytics_storage: 'granted' });
</script>

Hay dos modalidades. En el modo básico, las etiquetas de Google no se cargan en absoluto hasta que hay consentimiento. En el modo avanzado, se cargan siempre pero, si el usuario rechaza, envían solo pings sin cookies ni identificadores, que Google usa para modelar las conversiones perdidas. El avanzado da más datos y el básico es el más conservador; en webs con datos sensibles o público muy sensible a la privacidad nos inclinamos por el básico.

Analítica sin cookies

La otra vía es medir con herramientas diseñadas para no guardar identificadores en el dispositivo: Plausible, Fathom o Matomo configurado sin cookies, preferiblemente alojadas en la Unión Europea. Dan visitas, páginas, fuentes de tráfico y objetivos con datos agregados. No sustituyen a una analítica de producto completa, pero para una web corporativa o un negocio local cubren lo que de verdad se consulta cada mes.

Antes de decidir qué herramienta usar, merece la pena definir qué quieres medir. Lo contamos en la guía para medir una web con GA4 y objetivos: con tres o cuatro conversiones bien definidas sacas más partido que con cincuenta eventos.

06Política de cookies, registro y mantenimiento

El banner resume; la política de cookies explica. Una política completa incluye qué son las cookies, la tabla de cookies que usa la web (nombre, proveedor, finalidad, duración, si es propia o de terceros), cómo se aceptan, rechazan y retiran, las transferencias internacionales si las hay y un enlace a la política de privacidad general. Escrita en lenguaje claro y con la tabla al día, deja de ser un trámite y pasa a ser un documento que de verdad informa.

El RGPD pide además poder demostrar el consentimiento. Las CMP guardan un registro con un identificador anónimo, la fecha, las categorías aceptadas y la versión del banner. Si la herramienta es propia, conviene guardar lo mismo en el servidor.

Y luego está el mantenimiento, que es donde las webs se desajustan con el tiempo. Cada vez que alguien añade un píxel nuevo, un chat o un widget de reseñas, la tabla de cookies y el bloqueo deben actualizarse. Nosotros lo incluimos en la revisión trimestral de las webs que mantenemos: escaneo de cookies, prueba en ventana privada y repaso del contenedor de etiquetas. Encaja de forma natural en una checklist de SEO técnico, porque ambas revisiones miran lo mismo: qué carga la web y por qué.

Lo que también entra en el capítulo de privacidad

• →Formularios. Una casilla de aceptación de la política de privacidad, sin premarcar, y otra separada si quieres enviar comunicaciones comerciales.
• →Fuentes tipográficas. Cargar Google Fonts desde sus servidores envía la IP del visitante a Google. Alojarlas en tu propio servidor es sencillo y además suele ser más rápido.
• →Chats y herramientas de soporte. Muchos dejan cookies desde la primera carga; se pueden cargar al hacer clic en el botón de chat.

07Ejemplo resuelto: la web de una clínica que quería seguir midiendo

Una clínica de fisioterapia de la Costa del Sol con la que trabajamos tenía un banner que solo ofrecía «Aceptar» y cargaba Analytics, el píxel de Meta y un mapa de Google en todas las páginas. Lo resolvimos en cinco movimientos:

1. 01Inventario de todo lo que cargaba la web, con un escaneo y una revisión manual del contenedor de etiquetas.
2. 02Eliminación de lo que ya no se usaba: un píxel de una campaña antigua y un script de mapas de calor olvidado.
3. 03Sustitución del mapa interactivo por una imagen con enlace y del vídeo de YouTube por una fachada.
4. 04Instalación de una CMP con tres botones simétricos, Consent Mode v2 en modo básico y bloqueo del píxel de Meta hasta el consentimiento de publicidad.
5. 05Política de cookies reescrita en lenguaje claro y prueba completa en ventana privada antes de publicar.

El resultado fue una web más ligera, con menos peticiones de terceros y una analítica que, aunque recoge menos sesiones que antes, refleja a las personas que han aceptado y permite seguir las citas reservadas como conversión principal. La clínica gana en tranquilidad y sus pacientes en respeto, que en un sector de salud es parte de la marca.

08La privacidad como parte de la experiencia

Un buen banner de cookies dice mucho de una marca: que pregunta antes de actuar, que explica sin enredar y que acepta un «no» con naturalidad. Esa misma actitud es la que buscamos en todo el desarrollo, y por eso en SIMA la configuración de cookies, consentimiento y analítica forma parte de cada proyecto de desarrollo web y de las revisiones periódicas de mantenimiento web. Si quieres que revisemos cómo carga tu web antes de que alguien acepte nada, escríbenos y lo miramos contigo.