Generador de banner de consentimiento de cookies
Diseña un banner de cookies para tu sitio: escribe el mensaje, elige la posición y los colores, añade botones de Aceptar, Rechazar y Personalizar, y copia un único fragmento autónomo sin librerías externas. Recuerda la elección de cada visitante y solo ejecuta los scripts que acepta.
Última actualización:
Cómo usar Generador de banner de consentimiento de cookies
- Escribe el texto del banner y enlaza a tu política de privacidad o de cookies.
- Elige los botones y categorías que necesitas: Rechazar todo y Personalizar se recomiendan para el RGPD.
- Elige una posición y colores, y revisa la vista previa en vivo y los indicadores de contraste.
- Define cómo se guarda la elección (cookie o localStorage, número de días) y si se envían señales de Google Consent Mode.
- Copia el código, pégalo antes de </body> y cambia los scripts no esenciales a type="text/plain" con una categoría data-consent para que esperen al consentimiento.
Categorías de cookies explicadas
| Categoría | Ejemplos típicos | ¿Requiere consentimiento (UE/Reino Unido)? | Valor de data-consent |
|---|---|---|---|
| Necesarias | Cookies de sesión e inicio de sesión, carrito de compra, balanceo de carga, seguridad, la propia cookie de consentimiento | No, pero inclúyelas en tu política de cookies | (no se bloquean) |
| Preferencias | Idioma, región, modo oscuro, artículos vistos recientemente | Sí, salvo que sean estrictamente necesarias para una función que pidió el usuario | preferences |
| Analíticas | Google Analytics, Matomo con cookies, Hotjar, Microsoft Clarity | Sí en la mayoría de países de la UE (algunos permiten la medición propia estrictamente anónima) | analytics |
| Marketing | Google Ads, Meta Pixel, TikTok Pixel, LinkedIn Insight, cookies de redes publicitarias y de retargeting | Sí | marketing |
Bloquear un script hasta el consentimiento
Cambia el tipo del script a text/plain y añade la categoría. El navegador lo ignora hasta que el banner lo sustituye por un script real tras el consentimiento:
| Antes | Después |
|---|---|
<script src="https://example-analytics.com/a.js"></script> | <script type="text/plain" data-consent="analytics" src="https://example-analytics.com/a.js"></script> |
<script>fbq('init', '123');</script> | <script type="text/plain" data-consent="marketing">fbq('init', '123');</script> |
Con las etiquetas de Google puedes, en cambio, mantener la carga de la etiqueta y usar Consent Mode: el bloque predeterminado pone cada señal en denied, y las etiquetas de Google evitan entonces establecer cookies analíticas y publicitarias hasta que el banner envía granted.
Un banner conforme en la práctica
- Sin casillas premarcadas. Las categorías opcionales empiezan desmarcadas; el consentimiento debe ser una elección activa.
- Opciones equivalentes. Aceptar y Rechazar en la primera capa, del mismo tamaño y sin ocultar ninguno.
- Nada antes del consentimiento. Compruébalo con las herramientas de desarrollo del navegador (Application > Cookies): tras una carga nueva, solo deben existir cookies necesarias.
- Fácil de cambiar. Un enlace permanente de Configuración de cookies que llame a
CookieConsent.open(). - Explicado. Enlaza a una política que enumere cada cookie, su finalidad y su duración; el Generador de política de privacidad incluye una sección de cookies.
Preguntas frecuentes
¿Necesito un banner de consentimiento de cookies?
Si visitantes de la UE, el EEE o el Reino Unido usan tu sitio y estableces cookies no esenciales, como cookies analíticas o publicitarias, las normas ePrivacy y el RGPD exigen un consentimiento previo e informado. En EE. UU. no hay una ley general de consentimiento de cookies, pero leyes estatales de privacidad como la CCPA exigen ofrecer la exclusión de la venta o cesión de datos para anuncios dirigidos, algo que puede ofrecer un banner con botón de Rechazar.
¿Este banner bloquea las cookies antes del consentimiento?
Bloquea los scripts que marques. Cambia un script de seguimiento de <script> a <script type="text/plain" data-consent="analytics"> (o marketing, preferences) y el banner solo lo ejecutará después de que el visitante acepte esa categoría. Los scripts que no marques se ejecutan con normalidad, así que marca todos los no esenciales.
¿Qué es Google Consent Mode v2?
Consent Mode es la API de Google que indica a las etiquetas de Google si un visitante aceptó las cookies analíticas y publicitarias, mediante cuatro señales: analytics_storage, ad_storage, ad_user_data y ad_personalization. Desde marzo de 2024 Google lo exige a los anunciantes que usan anuncios personalizados con visitantes del EEE. Con la opción activada, el código pone todas las señales en denied por defecto y las actualiza cuando el visitante elige.
¿Dónde se guarda la elección del visitante?
En una cookie propia (o en localStorage si lo eliges) en el navegador del propio visitante, como un pequeño valor JSON con la fecha y el sí/no de cada categoría. No se envía nada a FreeToolCabin ni a ningún otro servidor. El banner vuelve a aparecer cuando la elección guardada caduca tras el número de días que definas.
¿Cuánto tiempo se debe recordar el consentimiento?
No hay un límite legal único, pero muchos reguladores de la UE consideran razonable volver a preguntar tras unos 6 a 13 meses; el regulador francés CNIL recomienda 6 meses. El valor predeterminado aquí es de 180 días. Si añades nuevas categorías de cookies, cambia "version": 1 a 2 en el código para que se vuelva a preguntar a todos.
¿Por qué Rechazar debe ser tan visible como Aceptar?
Los reguladores y tribunales europeos afirman que rechazar las cookies debe ser tan fácil como aceptarlas. Se han impuesto multas en varios países a banners con solo un botón de Aceptar o con la opción de Rechazar escondida en una segunda capa. El generador muestra una advertencia cuando el botón Rechazar está desactivado.
¿Cómo cambian los visitantes su elección de cookies más adelante?
Añade en el pie de página un enlace de Configuración de cookies que llame a CookieConsent.open(). Vuelve a abrir el banner con las elecciones actuales del visitante, para que pueda retirar el consentimiento tan fácilmente como lo dio, tal como exige el RGPD.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.