Requisitos que tiene que cumplir un creativo HTML5 para funcionar tal cual, sin retoques, en los tres destinos por los que pasa. Los tres siguen el estándar IAB HTML5, así que un solo ZIP sirve para los tres: no hay versión por plataforma y no hace falta saber de antemano en qué DSP se va a traficar.
El paquete
Un ZIP por medida
No un ZIP con todas las medidas adentro: cada pieza es un creativo independiente en el DSP.
index.html en la raíz del ZIP
No dentro de una carpeta. Es requisito explícito de Xandr y de Basis, y es el archivo que esta herramienta busca como entrada. Si al abrir el ZIP lo primero que ves es una carpeta, está mal armado.
Documento HTML completo y válido
Con <html>, <head> y
<body>. Un fragmento no sirve.
Todos los assets dentro del ZIP, con rutas relativas
imagenes/foto.jpg, nunca una ruta absoluta, ni
file://, ni una URL externa. Eso incluye fuentes de Google Fonts, librerías de
CDN y pixeles de terceros: lo que no viene en el ZIP no carga.
Es la causa número uno del banner que aparece en blanco o sin tipografía en el sitio del publisher.
Nombres de archivo sin espacios, sin acentos y sin ñ
Con guiones: logo-suma.png. Los espacios y los acentos
rompen la carga en varios ad servers, y el error aparece recién en producción.
El ZIP se llama como la medida
300x250.zip, 728x90.zip. El set queda ordenado
solo, acá y en el correo.
El clic
La URL de destino no va escrita dentro del banner. El creativo
tiene que leer el clickTag que le inyecta el DSP. Xandr lo pasa como parámetro en
la URL del creativo —index.html?clickTag=<url>— y pone ahí su propio click
tracker. Si el banner no lo lee, se sirve igual, pero no registra clics y no lleva al
landing.
Declarar clickTag en el <head>, con la URL
del cliente como respaldo
La primera línea es el respaldo: si nadie inyecta nada, el banner igual funciona. La función deja que el DSP la reemplace.
<script>
var clickTag = "https://www.cliente.cl/landing";
(function () {
var m = /[?&]clickTag=([^&]+)/.exec(window.location.search);
if (m) clickTag = decodeURIComponent(m[1]);
})();
</script>El clic abre la variable, nunca una URL literal
window.open(clickTag, '_blank');En Google Web Designer: acción personalizada, no «Salir del anuncio»
Publicar con entorno Non-Google Ad (genérico) y armar el clic con
una acción personalizada que llame a window.open(clickTag, '_blank').
La acción de menú Salir del anuncio / Exit ad, escribiendo la URL
en el campo, genera un
gwd.actions.gwdGenericad.exit("gwd-ad","https://…") con el destino
hardcodeado. Es exactamente lo que no sirve, y esta herramienta lo marca en rojo.
✕ URL escrita en el exit ·
✓ var clickTag + acción personalizada
Nada de window.top, top.location ni
parent.location
El creativo corre dentro de un iframe de otro dominio: esas llamadas
fallan y el clic se pierde. window.open es lo correcto.
La medida
Medida fija, una por documento y por ZIP
El tamaño de página tiene que ser la medida real de la pieza. Nada de creativos fluidos al 100%: en el sitio del publisher el espacio es exacto y una pieza elástica se ve descuadrada.
El contenido cabe exacto, sin scroll
Si algún elemento se sale del lienzo, aparece barra de scroll dentro del banner.
Agregar el meta de medida a mano
Google Web Designer en entorno genérico no lo escribe. Es una línea en
el <head> y elimina toda ambigüedad, acá y en el ad server. Sin él, la
medida se lee del tamaño de página de GWD, que también sirve.
<meta name="ad.size" content="width=300,height=250">Peso y animación
Máximo 150 KB por pieza
Es el límite de Google Ads y DV360, el más estricto de los que usamos, así que se aplica a todo. Casi todo el peso sale de las imágenes: comprimirlas antes de armar la pieza.
Animación de hasta 30 segundos
Máximo 3 loops, nunca loop infinito
El loop infinito se rechaza en la mayoría de los publishers y consume batería en móvil.
Lo que no debe llevar
- La URL de destino fija en el código
window.top,top.location,document.writealert,confirm,prompt- Peticiones a recursos externos de cualquier tipo. Si algo externo fuera inevitable: https obligatorio — los sitios donde se sirve el banner son https y un recurso http se bloquea sin aviso
- Cookies y
localStorage
Autoverificación antes de entregar
Tres chequeos, dos minutos. Hacerlos ahorra una ronda completa de correcciones.
Abrir el
index.htmlpublicado en un editor de texto.Debe aparecer
var clickTag. No debe aparecer la URL del cliente dentro de unexit(…).Abrir
index.html?clickTag=https://example.comen el navegador y hacer clic en la pieza.Tiene que irse a example.com. Si se va al sitio del cliente, el clickTag no está funcionando.
Subir el ZIP acá y revisar el QA.
Que no queden alertas en rojo. Con las rojas resueltas, la pieza está lista para mandarle el link al cliente y para traficar.