Cómo preparar un banner HTML5 para el ad server

Un banner puede verse perfecto en tu pantalla y aun así ser rechazado por el ad server. Casi siempre el motivo es el mismo: un detalle técnico que nadie revisó. Esta guía repasa, en orden, lo que conviene comprobar antes de subir un banner HTML5.

Antes de empezar

Pregunta a quien publica (o lee la documentación de la plataforma de destino) tres cosas: qué tamaños acepta, cuánto puede pesar cada pieza y si permite recursos externos. Esos tres datos definen todo lo demás, y cada plataforma tiene los suyos.

El paquete: un .zip con un index.html en la raíz

El banner se entrega como un archivo .zip. Dentro, el index.html debe estar en la raíz (no dentro de una carpeta) y los recursos, como imágenes o fuentes, junto a él o en subcarpetas. Un error muy común es comprimir la carpeta entera en lugar de su contenido: el ad server abre el .zip, no encuentra el index.html en la raíz y lo rechaza.

Si tienes varios tamaños o idiomas, cada combinación es una pieza distinta con su propio .zip. BannerMotion los empaqueta así por defecto («Un .zip por pieza») y también puede juntar los idiomas en carpetas («Un .zip por tamaño»).

El tamaño declarado

El banner dice cuánto mide con una etiqueta meta en el <head>. La plataforma la lee para saber cómo mostrarlo y para comprobar que coincide con el espacio que compraste.

<meta name="ad.size" content="width=300,height=250">

El tamaño de la etiqueta, el del contenedor del banner y el del espacio comprado deben coincidir al píxel. Un banner de 300×250 dentro de un espacio de 300×600 es un error de producción, no de la plataforma.

El clickTag: el enlace de destino

El enlace de destino no se escribe fijo dentro del banner. El banner lee una variable llamada clickTag, que la plataforma define, y la usa cuando alguien hace clic. Así el ad server puede contar cada clic antes de redirigir a tu página.

<script>
  var clickTag = "https://tu-sitio.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

Tres detalles que se pasan por alto: la variable se escribe exactamente clickTag (importan las mayúsculas); la dirección que dejas en el archivo es de prueba, porque muchas plataformas la reemplazan al servir el anuncio; y el banner debe tener una sola acción de clic, que cubra toda la pieza. Algunas plataformas usan su propia librería o un nombre distinto: revisa su guía.

El peso máximo del .zip

Cada plataforma pone un máximo para el .zip. Mide siempre el .zip final, no la carpeta sin comprimir, y deja un margen: es más fácil reducir antes de subir que corregir un rechazo. Algunas plataformas distinguen además entre la carga inicial y la carga total (la llamada polite load).

BannerMotion mide el peso de cada pieza al exportar y lo compara con un límite configurable; ese límite no sustituye al real de tu plataforma. Los banners no incluyen librerías de terceros, lo que ayuda a mantener el peso bajo. [PLACEHOLDER: peso típico medido de una pieza, cuando haya medición publicable.]

Qué suma peso, de más a menos: videos, imágenes (sobre todo a doble resolución para pantallas retina), fuentes con muchos estilos y librerías. Para bajarlo: usa texto y formas vectoriales (SVG) en lugar de imágenes cuando se pueda, reúne iconos pequeños en un sprite, comprime las fotos y carga solo los pesos de fuente que uses.

Sin recursos externos

Todo lo que el banner necesita debe ir dentro del .zip: imágenes, fuentes y librerías. Muchas plataformas bloquean o penalizan los archivos que se piden a otro servidor (una fuente de un CDN, una librería alojada fuera), porque no pueden garantizar que estén disponibles ni que sean seguros. En BannerMotion el paquete es autocontenido: no hace peticiones a otros dominios.

Animación, duración y repeticiones

Las plataformas suelen limitar cuánto dura la animación y cuántas veces se repite (a menudo unos 30 segundos como máximo y un número reducido de ciclos). El valor exacto es de cada plataforma. El exportador de BannerMotion parte de un máximo de 30 segundos de duración en su preset genérico.

Dos buenas prácticas que no dependen de nadie: que el mensaje y el botón estén completos en el último cuadro (porque ese cuadro se queda en pantalla), y que los movimientos usen curvas (easing) suaves sobre pocos keyframes bien elegidos en lugar de muchos movimientos nerviosos.

Imagen de respaldo

Algunas plataformas piden una imagen de respaldo (JPG, PNG o GIF) del mismo tamaño, que se muestra si el navegador no ejecuta el HTML5. Lo habitual es usar el último cuadro de la animación. Confirma si tu plataforma la exige, si va dentro del paquete o aparte, y con qué peso máximo. En BannerMotion, el respaldo estático aparece como «Próximamente» en la pantalla de exportación.

Probar antes de subir

Descomprime tu .zip en una carpeta nueva y abre el index.html en el navegador. Comprueba que la animación se reproduce completa, que el texto no se corta, que el clic abre la dirección que esperas y que no aparece ningún error en la consola del navegador. Repite en el tamaño más pequeño y en el más grande de la campaña.

Un banner que no se puede probar no está terminado.

Lista de revisión

• El .zip tiene el index.html en la raíz.
• La etiqueta ad.size coincide con el tamaño del banner y con el espacio comprado.
• El clic usa clickTag y hay una sola acción de clic.
• El .zip pesa menos que el límite de la plataforma (BannerMotion te avisa con el límite que configures).
• No hay recursos externos: nada se pide a otro dominio.
• Duración y repeticiones dentro de lo que permite la plataforma.
• El último cuadro tiene el mensaje completo y el botón.
• Probado en el navegador, en el tamaño más pequeño y en el más grande.

Al subirlo: qué es el trafficking

Subir el banner y asignarlo a su campaña, fechas y espacios es el trabajo del trafficking. Cuando el paquete llega bien preparado, ese paso se reduce a subir, probar en la vista previa de la plataforma y asignar. Después de publicar, confirma en los informes del ad server que los clics se están contando.

BannerMotion exporta cada pieza con el tamaño declarado, el clickTag incluido y el peso validado, y avisa si falta algo. El envío directo a ad servers está en el plan de producto: por ahora descargas el paquete y lo subes a mano.