Como preparar um banner HTML5 para o ad server

Um banner pode ficar perfeito na sua tela e mesmo assim ser recusado pelo ad server. Quase sempre o motivo é o mesmo: um detalhe técnico que ninguém conferiu. Este guia percorre, em ordem, o que vale verificar antes de enviar um banner HTML5.

Antes de começar

Pergunte a quem publica (ou leia a documentação da plataforma de destino) três coisas: quais tamanhos ela aceita, quanto pode pesar cada peça e se permite recursos externos. Esses três dados definem todo o resto, e cada plataforma tem os seus.

O pacote: um .zip com um index.html na raiz

O banner é entregue como um arquivo .zip. Dentro dele, o index.html deve estar na raiz (não dentro de uma pasta), e os recursos, como imagens ou fontes, ficam junto dele ou em subpastas. Um erro muito comum é compactar a pasta inteira em vez do seu conteúdo: o ad server abre o .zip, não encontra o index.html na raiz e o recusa.

Se você tiver vários tamanhos ou idiomas, cada combinação é uma peça diferente, com seu próprio .zip. O BannerMotion as empacota assim por padrão («Um .zip por peça») e também pode reunir os idiomas em pastas («Um .zip por tamanho»).

O tamanho declarado

O banner informa seu tamanho com uma etiqueta meta no <head>. A plataforma a lê para saber como exibi-lo e para conferir se ela coincide com o espaço que você comprou.

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

O tamanho da etiqueta, o do contêiner do banner e o do espaço comprado devem coincidir pixel por pixel. Um banner de 300×250 dentro de um espaço de 300×600 é um erro de produção, não da plataforma.

O clickTag: o link de destino

O link de destino não fica fixo dentro do banner. O banner lê uma variável chamada clickTag, que a plataforma define, e a usa quando alguém clica. Assim, o ad server pode contar cada clique antes de redirecionar para a sua 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>

Três detalhes que costumam passar despercebidos: a variável deve se chamar exatamente clickTag (as maiúsculas importam); o endereço que você deixa no arquivo é de teste, porque muitas plataformas o substituem ao veicular o anúncio; e o banner deve ter uma única ação de clique, cobrindo toda a peça. Algumas plataformas usam a própria biblioteca ou outro nome: consulte o guia delas.

O peso máximo do .zip

Cada plataforma define um máximo para o .zip. Meça sempre o .zip final, não a pasta sem compactar, e deixe uma margem: é mais fácil reduzir antes de enviar do que corrigir uma recusa. Algumas plataformas ainda distinguem o carregamento inicial do carregamento total (a chamada polite load).

O BannerMotion mede o peso de cada peça ao exportar e o compara com um limite configurável; esse limite não substitui o real da sua plataforma. Os banners não incluem bibliotecas de terceiros, o que ajuda a manter o peso baixo. [PLACEHOLDER: peso típico medido de uma peça, quando houver medição publicável.]

O que mais pesa, do maior para o menor: vídeos, imagens (sobretudo em resolução dupla para telas retina), fontes com muitos estilos e bibliotecas. Para reduzir: use texto e formas vetoriais (SVG) em vez de imagens sempre que possível, reúna ícones pequenos em um sprite, comprima as fotos e carregue apenas os pesos de fonte que usar.

Sem recursos externos

Tudo o que o banner precisa deve estar dentro do .zip: imagens, fontes e bibliotecas. Muitas plataformas bloqueiam ou penalizam arquivos solicitados a outro servidor (uma fonte de um CDN, uma biblioteca hospedada fora), porque não podem garantir que estejam disponíveis nem que sejam seguros. No BannerMotion, o pacote é autocontido: não faz requisições a outros domínios.

Animação, duração e repetições

As plataformas costumam limitar quanto dura a animação e quantas vezes ela se repete (muitas vezes cerca de 30 segundos no máximo e um número reduzido de ciclos). O valor exato depende de cada plataforma. O exportador do BannerMotion parte de um máximo de 30 segundos de duração em seu preset genérico.

Duas boas práticas que não dependem de ninguém: que a mensagem e o botão estejam completos no último quadro (porque esse quadro fica na tela), e que os movimentos usem curvas de easing suaves sobre poucos keyframes bem escolhidos, em vez de muitos movimentos nervosos.

Imagem de respaldo

Algumas plataformas pedem uma imagem de respaldo (JPG, PNG ou GIF) do mesmo tamanho, exibida se o navegador não executar o HTML5. O habitual é usar o último quadro da animação. Confirme se sua plataforma a exige, se ela vai dentro do pacote ou à parte, e com qual peso máximo. No BannerMotion, o respaldo estático aparece como «Em breve» na tela de exportação.

Testar antes de enviar

Descompacte seu .zip em uma pasta nova e abra o index.html no navegador. Confira se a animação é reproduzida por completo, se o texto não é cortado, se o clique abre o endereço esperado e se nenhum erro aparece no console do navegador. Repita no menor e no maior tamanho da campanha.

Um banner que não pode ser testado não está pronto.

Lista de revisão

• O .zip tem o index.html na raiz.
• A etiqueta ad.size coincide com o tamanho do banner e com o espaço comprado.
• O clique usa clickTag e há uma única ação de clique.
• O .zip pesa menos que o limite da plataforma (o BannerMotion avisa com o limite que você configurar).
• Não há recursos externos: nada é solicitado a outro domínio.
• Duração e repetições dentro do que a plataforma permite.
• O último quadro tem a mensagem completa e o botão.
• Testado no navegador, no menor e no maior tamanho.

Ao enviar: o que é o trafficking

Enviar o banner e atribuí-lo à sua campanha, às datas e aos espaços é o trabalho do trafficking. Quando o pacote chega bem preparado, essa etapa se resume a enviar, testar na prévia da plataforma e atribuir. Depois de publicar, confirme nos relatórios do ad server que os cliques estão sendo contados.

O BannerMotion exporta cada peça com o tamanho declarado, o clickTag incluído e o peso validado, e avisa se algo estiver faltando. O envio direto para ad servers está no plano do produto: por enquanto, você baixa o pacote e o envia manualmente.