Considerações Gerais
Observações

HTML5


Aceitamos HTML5 para todos os formatos, exceto: Galeria de Fotos, Mídia Box, BG, Informe Publicitário e PPI.

O banner deverá ser compatível com o SafeFrame do DFP/IAB.

Tipos de criativos em HTML5



3rd party tag ou Doubleclick Tag

  • O conteúdo entregue pela tag (HTML, CSS, Imagens e Javascript) deve respeitar o limite de peso de cada formato.

  • Consultar o pós-venda se o Terceiro está homologado. É obrigatorio que os parâmetros de impressões e cliques contabilizem corretamente no DFP.


HTML5 Simples (Single-page)

  • Um único arquivo HTML com todos os arquivos (CSS, Javascript, etc), ja embutidos no código.
    EX: Os criativos convertidos pelo Google Swiffy seguem esse modelo.

  • O conteúdo do arquivo carregado no browser deverá respeitar o limite de peso de cada formato


HTML5 Completo
Arquivo .zip, com todos arquivos necessários para execução da peça HTML5 localizados na pasta raiz (.html, bibliotecas javascript,  imagens e CSS), sem subdiretórios(pastas dentro de pastas).
Não pode chamar imagens no css ou js externo. O DFP não lê essas imagens.

Geral


Frameworks como jQuery,Dojo, EXT JS, etc, não devem ser utilizados pois  o risco da pagina já conter algum desses recurso é grande, podendo causar problemas à pagina e ao funcionamento do banner.

CSS jamais deverá ter associações às tags gerais, como <body>, <div>, <span>, <p> etc. Deve-se sempre utilizar css sobre id ou classe.
No momento, o DFP não é compatível com criativos que usam tags SVG em arquivos HTML. Em vez disso, inclua arquivos svg independentes e referencie-os no HTML.
Além disso, no momento as macros do DFP não são compatíveis com o uso em arquivos HTML nem em URLs de destino.

Função de Clique


Ele precisa sempre abrir em outra aba/janela. Deve conter o atributo: target="_blank" na ou o método window.open (ou similar) do javascript.
Certifique-se de que o criativo use a variável "clickTag" como o destino dos cliques.

Exemplo de implementação da click tag

Na tag head:
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>

Na area de clique do criativo:
O criativo precisa usar a variável  clickTag como URL de clique:
<a href="javascript:window.open(window.clickTag)">



Google Web Designer


Todo banner que for gerado no google web designer deve, na criação, ser usada a opção Ambiente: "DoubleClick".



Configure as dimensões do criativo no seu arquivo HTML com a meta tag de tamanho: <meta name="ad.size" content="width=[x],height=[y]">.

Ao inserir a clickTag deve-se usar eventos de Saída.

Observações:

  • R7 se reserva ao direito de reprovar peças que consumirem muito processamento da CPU ou possam prejudicar a experiência do usuário. Também serão reprovadas peças que não estiverem de acordo com as especificações técnicas acima.

  • Caso o criativo esteja diferente dos citados acima, é necessária uma homologação previa.

  • Precisamos de imagens backup em gif ou jpeg para todos os formatos em html5

  • Peças em HTML5 precisam chegar com 24 horas de antecedência para teste.  Não nos responsabilizamos pela perfeita veiculação após esse período de validação.

Atualizado em: 19/07/2016