Upload
trinhkien
View
214
Download
0
Embed Size (px)
Citation preview
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 HTML5 ............................................................................................................................ 2
2. Especificações para envio de Arquivo Zip .......................................................................................... 3
Estrutura ........................................................................................................................................................ 3
Assets aceitos .............................................................................................................................................. 3
Peso do Criativo........................................................................................................................................... 3
3. Macros de Click ....................................................................................................................................... 4
4. Pixels Contadores ................................................................................................................................... 5
5. Boas Práticas........................................................................................................................................... 5
I. HTML .................................................................................................................................................... 5
II. Javascript ............................................................................................................................................. 6
III. Animações ........................................................................................................................................... 6
IV. Imagens ................................................................................................................................................ 6
V. Vídeos .................................................................................................................................................. 6
VI. Fontes ................................................................................................................................................... 6
6. 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
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
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
Tags do DCM também são aceitas. Mais informações sobre veiculação dessas tags
nesse link.
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.
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
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
• Imagens (.jpg, .png e .gif)
• Cascading Style Sheet (.css)
• Javascript (.js)
Peso do Criativo
• 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
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
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
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Uso do Tap Area: https://support.google.com/webdesigner/answer/3220698
Uso de Custom Action: https://support.google.com/webdesigner/answer/6000802
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:
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
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:
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
6. Formatos
Retângulo
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Superbanner
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Bigbanner
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Halfpage
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Billboard
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
DHTML
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Intervenção
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Welcome Ad
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
Mobile Banner
Em caso de dúvidas, entre em contato com a Publicidade Online. [email protected]
InRead