Guía de Vista Previa y Validación de Banners HTML5 (2026)

Para probar un banner HTML5 antes de traficarlo necesitas dos cosas: comprobar el ZIP frente a las reglas de la plataforma y una vista previa en directo que se comporte como un servidor de anuncios, es decir, un iframe aislado donde se puedan inspeccionar los clics. AdCheckLab hace ambas cosas en tu navegador. Arrastra el ZIP al validador, elige Google Ads, CM360 o DV360 y lee los resultados junto a la creatividad en funcionamiento. No se sube nada.

1. Por Qué Probar Banners Antes de Traficar

Las plataformas rechazan los ZIP que no cumplen al subirlos, y una pieza aceptada todavía puede quedarse en blanco o enviar los clics a ninguna parte. Cuando una campaña tiene treinta formatos, un clickTag ausente o una imagen demasiado pesada retrasa el lanzamiento de todos ellos.

La vista previa en el navegador permite que diseño, desarrollo y QA revisen la animación, el clic y el peso antes de que los archivos lleguen al equipo de medios. Como el ZIP nunca sale del equipo, sirve también para campañas bajo NDA.

2. Criterios Técnicos Esenciales

Las tres plataformas de Google fijan límites distintos, por eso el validador tiene un modo para cada una:

Los detalles de CM360, incluidos los tipos de archivo y la prohibición del almacenamiento local, están en la guía de especificaciones CM360.

3. Cómo Funciona la Vista Previa Aislada

Los servidores de anuncios entregan los banners HTML5 dentro de iframes aislados para proteger la página del medio. La vista previa de AdCheckLab hace lo mismo: la creatividad se ejecuta en un iframe que permite scripts y nada más, así que no puede leer la página que la rodea, otros ZIP cargados ni el almacenamiento. Para que todo cargue sin servidor, cada archivo referenciado se sustituye por una copia incrustada, incluidas las rutas de imágenes dentro de los scripts de Adobe Animate y CreateJS.

Un banner que depende de localStorage o de cookies puede fallar en la vista previa igual que en un espacio publicitario estricto. Y una referencia a un archivo que falta en el ZIP sigue rota, tal como ocurriría después de subirlo.

4. Comprobación del clickTag

Para comprobar que el clic funciona:

1. Arrastra tu archivo ZIP al Validador HTML5 y elige la plataforma.
2. Revisa el resultado del clickTag: clickTag Variable aparece como superado cuando se encuentra una declaración correcta, e indica el archivo.
3. Haz clic dentro de la vista previa. El clic se intercepta en lugar de abrir una pestaña y aparece el aviso Click Intercepted en el informe de ese banner.
4. Lee el aviso: muestra el valor del clickTag que leyó el banner y la URL que el clic intentó abrir. Si indica que el clickTag no está definido, revisa el enlace del clic en index.html.

Si falta la declaración, el Editor de clickTag la inserta directamente en el ZIP.

5. Solución de Errores Habituales

Falta el archivo principal: el archivo debe llamarse index.html y estar en la raíz del ZIP, no dentro de una carpeta. Si la vista previa sigue en blanco, revisa la sección 6.

Peso excesivo: comprime las imágenes PNG y JPEG con el Banner Compressor, que conserva todos los nombres de archivo, y elimina fotogramas, símbolos y sonidos que no uses en proyectos de Adobe Animate. No conviertas a WebP: Google Ads, CM360 y DV360 no lo admiten dentro del ZIP.

Ortografía de la variable: JavaScript distingue mayúsculas de minúsculas. La declaración y cada uso deben escribirse exactamente clickTag, con la T mayúscula.

GIF demasiado largo: el validador lee el retardo de cada fotograma y el número de repeticiones, y muestra la duración total frente al límite de 30 segundos.

6. Si la Vista Previa Sale en Blanco

Un recuadro blanco donde debería estar el banner casi siempre significa una de dos cosas: el navegador no encontró un archivo que el banner necesita, o un script falló antes de que empezara la animación. Revisa las causas en este orden. La mayoría se descarta en un minuto, y el validador informa de varias junto a la vista previa.

index.html no está donde la vista previa lo espera

Si el ZIP contiene una carpeta con el banner dentro, el archivo principal queda un nivel más abajo y las rutas relativas pueden no resolverse. El validador muestra index.html Nested in Subfolder. Comprime los archivos, no la carpeta.

Una ruta no apunta a nada

• Rutas absolutas: una referencia como /Users/name/project/img/hero.jpg o C:\banner\img\hero.jpg solo funciona en el equipo del diseñador. Usa rutas relativas como img/hero.jpg.
• Mayúsculas y minúsculas: las rutas dentro de un ZIP las distinguen. Logo.png en el código y logo.png en la carpeta funciona en un Mac y falla en un servidor.
• Un archivo que no entró en el ZIP: la referencia es correcta, pero la imagen o el script nunca se empaquetó.

Un script falla antes de que empiece la animación

En el iframe aislado, el código que usa localStorage, sessionStorage o document.cookie puede lanzar un error, y si el código de arranque no lo captura, no se dibuja nada. Abre la consola del navegador para ver el error. CM360 y DV360 rechazan el almacenamiento de todos modos.

Una biblioteca externa no cargó

Si el banner carga GSAP, CreateJS o una fuente desde otro servidor y esa petición falla, todas las animaciones que dependen de ella fallan también. En Google Ads, un host fuera de la lista permitida por Google se rechaza ya al subir el archivo, y el validador muestra Disallowed External References. Incluye el archivo en el ZIP o usa la copia alojada por Google de la lista permitida de Google Ads (en inglés).

Se bloqueó un enlace http inseguro

En una página https, los navegadores bloquean los scripts y hojas de estilo cargados con http:// como contenido mixto. El validador los muestra como Insecure HTTP Connections. Cambia cada uno por https://.

La creatividad espera algo que la vista previa no envía

• Las creatividades de Studio suelen esperar a que el Enabler se inicialice. Si falta el script del Enabler en el head, esperan para siempre.
• El código de carga diferida que espera un evento de la página del medio puede quedarse en el primer fotograma en una vista previa independiente.
• Una animación que empieza fuera de cuadro o con opacidad cero parece vacía si su primera interpolación falla. Busca el primer error en la consola.

Un orden rápido de diagnóstico

1. Arrastra el ZIP al validador y corrige primero cada error que muestre, sobre todo archivo principal, referencias externas y enlaces inseguros.
2. Abre la consola del navegador con la vista previa visible y lee el primer error en rojo.
3. Descomprime el paquete y abre index.html directamente en el navegador. Si funciona ahí pero no en la vista previa, el problema es una restricción del iframe aislado, como el almacenamiento.