Guia para Criativos ABRIL Versão 1.7

Transcrição

1 Guia para Criativos ABRIL Versão 1.7 SUMÁRIO 1. Criativos HTML5 aceitos... 2 I. Tags de terceiro... 2 II. Doubleclick Campaign Manager (DCM) tags... 2 III. Criativos com HTML5 completo (self-contained)... 2 IV. Arquivo Zip HTML Especificações para envio de Arquivo Zip... 3 Estrutura... 3 Assets aceitos... 3 Peso do Criativo Macros de Click Pixels Contadores Boas Práticas... 5 I. HTML... 5 II. Javascript... 6 III. Animações... 6 IV. Imagens... 6 V. Vídeos... 6 VI. Fontes Formatos... 8 Retângulo... 8 Superbanner... 9 Bigbanner...10 Halfpage...11 Billboard...12 DHTML...13 Intervenção...14 Welcome Ad...15 Mobile Banner...16 InRead...17

2 1. Criativos HTML5 aceitos A Abril se dá o direito de avaliar e pausar criativos em caso de não cumprimento das especificações desse guia, por problemas de desempenho ou por problemas que afetam a experiência do usuário I. Tags de terceiro Aceitamos apenas tags de AdServers homologados com criativos produzidos em HTML5. Tags que não sejam de AdServers homologados não serão aceitas. Em caso de dúvida sobre quais AdServers são aceitos, por favor, nos consulte. II. Doubleclick Campaign Manager (DCM) tags nesse link. Tags do DCM também são aceitas. Mais informações sobre veiculação dessas tags III. Criativos com HTML5 completo (self-contained) Único código HTML5, sem assets/arquivos externos. O criativo é hospedado pelo nosso AdServer desde que respeite as especificações de peso. IV. Arquivo Zip HTML5 Arquivo Zip contendo um arquivo HTML principal e assets necessários como imagens, arquivos Cascading Style Sheets (CSS) e arquivos Javascripts. Arquivos de backup (gif ou jpeg) são necessários para todos os criativos.

3 2. Especificações para envio de Arquivo Zip Estrutura Não é permitido o uso de pastas para organizar os assets. Os assets deve estar no mesmo nível do html principal. Assets aceitos Peso do Criativo Imagens (.jpg,.png e.gif) Cascading Style Sheet (.css) Javascript (.js) Criativos comuns o Desktop: 200kb o Mobile (mweb e In-App): 60kb Criativos Polite (Apenas Rich Media) o Desktop: Até 2mb após carregamento da página o Mobile (mweb e In-App): Até 300kb após carregamento da página É considerada a somatória dos pesos de todos os arquivos dentro do zip na contabilização do peso total Fontes

4 Arquivos de fontes, como, por exemplo,.woff não são permitidos. Use as fontes do sistema e caso precise de fontes que não são de sistemas recomendamos o uso do Google Fonts. Mais informações nesse link. 3. Macros de Click Sempre inclua no HTML o seguinte código: A variável clicktag pode ser usada das seguintes maneiras: Múltiplas clicktags também podem ser declaradas: Para criativos feitos em GWD (Google Web Designer), recomendamos o uso de Tap Area com Custom action

5 Uso do Tap Area: Uso de Custom Action: O código para Custom Action pode ser da seguinte maneira: 4. Pixels Contadores Pixels contadores de impressão podem ser enviados separadamente e serão inseridos no final do HTML. 5. Boas Práticas I. HTML Recomendado remover as margens do body do arquivo html:

6 II. Javascript Evite o uso de Loops, Timeouts e Intervals. Não use settimeouts com window.location.reload() para reiniciar as animações do criativo. Não recomendado o uso de bibliotecas como jquery, jquery UI, YUI, Mootols, etc. Caso for realmente necessário, utilize a biblioteca Zepto.js que possui a principais funções de jquery. Sempre que possível use arquivos javascript minificados. Recomendado que javascripts de fontes externas sejam servidos com https. Evite o uso de console.log e post messages III. Animações Utilize transições do CSS para animações evitando o uso de Javascript. IV. Imagens Para evitar o alto número de requests utilize sprites para imagens Alguns sites auxiliam na compressão de imagens como tinypng.com e tinyjpg.com V. Vídeos O carregamento do vídeo deve ser feito a partir do play feito pelo usuário. Use link para servidores externos. Vídeos do Youtube podem ser colocados através de embed. O formato mp4 é o mais recomendado, pois é compatível com a maioria dos navegadores e devices. VI. Fontes É possível fazer apenas o carregamento dos caracteres usados pelo criativo:

7

8 6. Formatos Retângulo

9 Superbanner

10 Bigbanner

11 Halfpage

12 Billboard

13 DHTML

14 Intervenção

15 Welcome Ad

16 Mobile Banner

17 InRead