Os criativos HTML5 são anúncios gerados com JavaScript, HTML e CSS e veiculados em páginas da Web ou em apps para dispositivos móveis. Eles podem ser de display ou rich media.
- Display: anúncios gráficos para você clicar e acessar o site de um anunciante
- Rich media: anúncios com elementos interativos, como animações, galerias de imagens, jogos ou vídeos incorporados
O Display & Video 360 é compatível com o upload direto de banners de display e rich media. No entanto, se você quiser usar criativos com funcionalidades rich media avançadas, incluindo formatos expansíveis ou intersticiais, use o Studio. É possível programar criativos do Studio no Campaign Manager 360 e sincronizar com a conta do Display & Video 360.
Os criativos HTML5 podem ser atribuídos a itens de linha de display.
Tipos de criativos HTML5 compatíveis
O Display & Video 360 é compatível com os formatos de anúncio HTML5 a seguir. Para conferir exemplos de cada tipo de criativo, acesse a Galeria de Rich Media.
Display
É um criativo HTML5 com um ou mais tamanhos fixos e uma posição fixa em uma página da Web ou em um app para dispositivos móveis.
Recursos de display compatíveis:
- Click tags: são um trecho de código usado para rastrear cliques que abrem a página de destino do anunciante.
- Criativos responsivos: é possível empacotar vários tamanhos diferentes do mesmo banner de display como um criativo responsivo para simplificar a atribuição.
Rich media
Rich media é um termo de publicidade digital para anúncios que possuem recursos avançados como vídeo, áudio ou outros elementos de engajamento. Os anúncios rich media são compatíveis com mais métricas para registrar interações avançadas. Assim, você tem uma visão mais clara de como as pessoas interagem com seu anúncio. Por exemplo, anúncios rich media podem ter contadores e timers para informar quantas vezes ou por quanto tempo as pessoas jogaram um jogo no seu anúncio.
Recursos e formatos de rich media compatíveis:
- Métricas de rich media: contabilize cliques, saídas, interações, tempo de reprodução do vídeo e muito mais com as métricas de rich media.
- Vídeo em banner: anúncios com players de vídeo. É possível incluir vídeos em qualquer formato rich media exceto criativos baseados em dados.
- Expansível em tela cheia: anúncios que podem se expandir para preencher a tela de um dispositivo móvel. Por exemplo, criativos em Espiral 3D.
- Criativos baseados em dados: é possível personalizar a mensagem dos criativos baseados em dados para diferentes segmentos de clientes.
- Criativos de paralaxe: paralaxe é um efeito de animação que pode ser usado em criativos rich media para criar a ilusão de profundidade com camadas de imagens. À medida que o usuário rola a página para cima ou para baixo em um dispositivo móvel, as imagens de primeiro e de segundo plano se movem em velocidades diferentes.
Gerar um criativo HTML5
Criar um banner de display HTML5
Google Web Designer
Editor de HTML5
Se preferir escrever seu próprio código, crie um banner usando qualquer editor de HTML5.
(avançado) Criar um banner HTML5 do zero
- Crie um arquivo HTML válido, incluindo as tags
<html>,<html>,<html>e<html>. - Adicione uma tag
<meta>para indicar o tamanho desejado do criativo:
<meta> - Adicione uma click tag:
-
Adicione esta tag de script e substitua
https://google.compela página de destino do seu anunciante:<script type="text/javascript">
var clickTag = "https://google.com";
</script> - Envolva a tag
<div>do seu contêiner de anúncio ou imagem principal com uma tag<div>para tornar o recurso clicável.<a href="javascript:window.open(window.clickTag)">
<div id="container">
<img src="image.png" />
</div>
</a>
-
Criar um banner rich media
O Enabler do Studio é obrigatório em banners rich media. Use-a para fazer o seguinte:
- Carregue vídeos e imagens com segurança usando
Enabler.getUrl(). - Abra a página de destino do anunciante com
Enabler.exit(). Use saídas em vez de click tags em banners rich media.
Para evitar atrasos causados por reprovações de criativos, siga as diretrizes de rich media na hora de gerar seu criativo.
O que colocar em um arquivo ZIP HTML5
Arquivos ZIP de HTML5 podem incluir até cem arquivos e não têm limite de tamanho. No entanto, para atender aos requisitos do editor, reduza o arquivo Zip o máximo possível.
Nomear o arquivo ZIP
Dê ao seu ZIP HTML5 um nome de arquivo menor que 50 caracteres (incluindo o ".zip"). Se o nome do arquivo for maior, não será possível fazer upload dele.
Tipos de arquivos compatíveis
- HTML/texto: HTML, HTM, CSS, JS
- Imagens: JPG, JPEG, GIF, PNG, SVG
- Fontes: DFONT, EOT, OTF, TTE, TTF, WOFF, WOFF2
O que incluir em arquivos ZIP de HTML5
- Arquivo HTML: é o recurso principal do seu criativo HTML5. O arquivo precisa incluir pelo menos uma saída ou click tag ou de clique e ser capaz de carregar em um iframe. O Display & Video 360 veicula o iframe junto aos seus recursos.
- Outros arquivos: arquivos de imagens, CSS e JavaScript usados no seu arquivo HTML. Os criativos rich media também são compatíveis com os tipos de arquivo a seguir. No entanto, os vídeos precisam estar hospedados em um servidor externo ou o criativo precisa ser criado com o Studio:
.avi, .mov, .mp4, .m4v, .mpeg, .mpg, .oga, .ogg, .ogv, .webm, .wmv
O que não incluir em arquivos ZIP HTML5
- Mais arquivos ZIP: não adicione mais arquivos ZIP ao seu arquivo ZIP HTML5.
- Arquivos não usados: somente adicione arquivos se eles forem usados pelo arquivo HTML. Não adicione arquivos de origem ou criação.
- Armazenamento local ou por sessão: o Display & Video 360 não aceita recursos HTML5 que usam armazenamento local ou por sessão.
- Imagem de backup: não inclua imagens de backup no seu arquivo ZIP HTML5. Faça upload de imagens de backup separadamente, na seção "Imagens de backup".
- Arquivos com nomes longos: os nomes de arquivo de vídeo e áudio precisam ter no máximo 50 caracteres de byte. Os nomes dos arquivos precisam ter até 200 caracteres de byte único. Por exemplo, japonês, chinês e coreano usam caracteres de dois bytes. Nesses idiomas, os limites são 25 e 100.
(Opcional) Imagens de backup
As imagens de backup são opcionais e só são veiculadas quando os recursos do criativo não são compatíveis com o navegador ou a plataforma do visitante. Por exemplo, quando alguém está navegando com o Internet Explorer 8, e seu criativo usa animações CSS.
Faça upload das imagens de backup separadamente do arquivo ZIP do criativo. Se você não fizer upload de um arquivo com essa função, será usada uma imagem em branco gerada pelo sistema.
Fazer upload de um criativo HTML5
Antes de começar, certifique-se de ter colocado os recursos do criativo em um arquivo ZIP. Saiba o que incluir em arquivos ZIP HTML5
-
Abra um anunciante e clique em Criativos no menu à esquerda.
-
Clique em Novo, Fazer upload e HTML5 ou imagem.
-
Insira um nome para o criativo no Display & Video 360.
-
Para adicionar arquivos do criativo, arraste um arquivo ZIP do computador até "Solte o arquivo aqui". Você também pode clicar em Fazer upload e selecionar um arquivo ZIP.
Se o upload de HTML5 for rejeitado, siga estas etapas de solução de problemas. -
Selecione uma ou mais dimensões em veiculação para seu criativo. O Display & Video 360 é compatível com criativos de tamanho único ou criativos HTML5 responsivos com mais de um tamanho.
-
Na seção "Eventos", revise e edite as saídas detectadas no criativo. Para cada saída (ou click tag), é possível editar o URL da página de destino, começando com
http://ouhttp://. Para editar o rótulo ou o URL do relatório, aponte para a linha e clique em Editar.
Observação: depois de salvar o criativo, talvez leve alguns minutos até que a página de destino atualizada apareça na visualização ou no anunciante do Campaign Manager 360 que foi sincronizado. -
Salve o criativo.
O Display & Video 360 analisa seus criativos de forma manual e automática para garantir que eles funcionem. Os criativos também são verificados para confirmar se eles obedecem às políticas de anúncios do Google e das trocas em que podem ser veiculados. É possível verificar o status dos seus criativos na guia Status do criativo.
Configurações avançadas
As configurações a seguir são opcionais.
-
Caso seu anúncio intersticial não se ajuste à tela de dispositivos móveis, o Display & Video 360 o dimensionará para caber. Para evitar o dimensionamento, ative a opção "Não dimensionar a largura para se ajustar ao dispositivo".
-
Adicione uma imagem de backup e um rótulo de relatório. Ao fazer upload de um criativo responsivo, envie uma imagem de backup para cada tamanho.
-
Faça upload de uma imagem de carregamento discreto. Essa imagem será mostrada quando houver atrasos no carregamento dos arquivos do criativo principal ou em conexões de rede mais lentas.
- Se o anunciante do Display & Video 360 estiver vinculado a uma conta do Campaign Manager 360, adicione um anúncio de rastreamento para gerar relatórios no anunciante vinculado ao Campaign Manager 360. Observação: essa opção só está disponível para criativos rich media, em espiral e personalizados baseados em dados.
- Clique em Propriedades de veiculação.
- Pesquise um anúncio de rastreamento do Campaign Manager 360. Para que a sincronização seja concluída, crie um anúncio de rastreamento no Campaign Manager 360 antes de gerar seu criativo no Display & Video 360.
Dica: para facilitar a localização do anúncio de rastreamento certo, atribua somente um anúncio de rastreamento por anúncio e posição no Campaign Manager 360.
-
Clique em Mais detalhes para adicionar uma tag de acompanhamento, um código de integração ou observações.
Compartilhar uma visualização
É possível compartilhar criativos HTML5 com outras pessoas para revisão ou aprovação usando um link de visualização. Qualquer pessoa com quem você compartilhar este link poderá visualizá-lo. Não é necessário fazer login.
Perguntas frequentes
Por que o tamanho do criativo é exibido incorretamente depois de fazer o upload do arquivo?Os problemas comuns que impedem o upload de materiais de criativos incluem os seguintes:
- O nome do arquivo é muito longo: para a maioria dos tipos de arquivo, o tamanho máximo é de 200 caracteres de byte único ou 100 caracteres de dois bytes. Para arquivos de áudio e vídeo, o comprimento máximo é de 50 caracteres de byte único ou 25 caracteres de dois bytes.
- ZIPs dentro de ZIPs: não é permitido incluir um arquivo ZIP compactado dentro de outro.
- O criativo não tem taxa de cliques: todos os criativos precisam incluir pelo menos uma saída que leve à página de destino do anunciante.
- O criativo do Google Web Designer precisa ser atualizado: se o criativo tiver sido criado com o Google Web Designer, o erro "Os metadados no código HTML do Google Web Designer são inválidos" poderá ser exibido. Isso significa que o criativo foi gerado com uma versão antiga do Google Web Designer e precisa ser atualizado. Faça upgrade para a versão mais recente do Google Web Designer, depois abra o criativo e faça a publicação novamente.
Para receber mais ajuda, acesse Resolver problemas com upload de criativos.
