HTML5

Vídeo

Social Media

Mobile

Web

Considerações Gerais
Observações

HTML5


Aceitamos HTML5 para todos os formatos, exceto: Galeria de Fotos, Mídia Box, Dhtml, 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 ,
, ,

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:


Na area de clique do criativo:
O criativo precisa usar a variável  clickTag como URL de clique:




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: .

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

Observações:

  • R7 se reserva ao direito de reprovar peças que prejudique 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 prévia.

  • As peças precisam chegar com 24 horas de antecedência para teste.  Caso tenha alteração na tag, devemos ser comunicados para nova validação.

Atualizado em: 19/07/2016