Guia para Criativos

ABRIL

Versão 1.8

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

Mobile Banner ............................................................................................................................................13

InRead .........................................................................................................................................................14

Em caso de dúvidas, entre em contato com a Publicidade Online. publicidadeon-line@abril.com.br

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. publicidadeon-line@abril.com.br

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. publicidadeon-line@abril.com.br

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. publicidadeon-line@abril.com.br

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. publicidadeon-line@abril.com.br

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. publicidadeon-line@abril.com.br

Em caso de dúvidas, entre em contato com a Publicidade Online. publicidadeon-line@abril.com.br

6. Formatos

Retângulo

Em caso de dúvidas, entre em contato com a Publicidade Online. publicidadeon-line@abril.com.br

Superbanner

Em caso de dúvidas, entre em contato com a Publicidade Online. publicidadeon-line@abril.com.br

Bigbanner

Em caso de dúvidas, entre em contato com a Publicidade Online. publicidadeon-line@abril.com.br

Halfpage

Em caso de dúvidas, entre em contato com a Publicidade Online. publicidadeon-line@abril.com.br

Billboard

Em caso de dúvidas, entre em contato com a Publicidade Online. publicidadeon-line@abril.com.br

Mobile Banner

Em caso de dúvidas, entre em contato com a Publicidade Online. publicidadeon-line@abril.com.br

InRead