Sobre criativos que usam HTML5
Os criativos HTML5 podem ser de display ou rich media. Saiba mais sobre cada tipo abaixo.
Criativos de display
Criativos de display: esses criativos não são rich media e podem usar imagem ou HTML5. Os criativos de exibição oferecem:
- relatórios de click tag em saídas individuais;
- carregamento discreto;
- suporte aos recursos HTML5 responsivos.
Criativos rich media
Criativos rich media são criativos HTML5 que podem incluir vídeos em banner, expandir para tamanhos maiores ou incluir elementos interativos, como jogos. Os criativos rich media oferecem:
- relatórios de várias saídas, contadores e timers para ver dados sobre interações;
- expansão para um tamanho maior ou para a tela cheia;
- suporte para áudio e vídeo em banner;
- carregamento discreto.
Preparar e fazer upload de materiais do criativo de display HTML5
Para configurar criativos de display com HTML5, faça upload do criativo HTML5 para o Campaign Manager 360 na forma de um arquivo ZIP. O arquivo ZIP precisa conter um documento HTML e os arquivos referenciados pelo HTML.
-
Crie uma pasta.
-
Adicione seu arquivo HTML e os recursos referenciados pelo arquivo. Não inclua outros arquivos. É possível organizar os recursos em subpastas, mas não compactá-las.
O que incluir no seu arquivo ZIPTipos de arquivos compatíveis e limites do arquivo ZIPO que incluir
-
Arquivo HTML: é o recurso principal do seu criativo de display HTML5. Esse é o ponto inicial para seu criativo. Ele precisa ser um documento HTML completo com pelo menos uma click tag e que possa ser carregado em um iframe. O Campaign Manager 360 veicula o iframe com os recursos. Veja detalhes abaixo para receber ajuda sobre click tags.
-
Outros arquivos: inclua os arquivos referenciados pelo arquivo HTML. Não inclua arquivos que não estejam referenciados.
O que não incluir
-
Sem .zips dentro de .zips: não inclua arquivos ZIP dentro do seu arquivo ZIP HTML5. Entretanto, se você tiver vários arquivos ZIP HTML5 para vários criativos HTML5, compacte esses arquivos em conjunto e faça o upload em lote deles para o Campaign Manager 360.
-
Sem arquivos não referenciados: como mencionado acima, inclua somente arquivos referenciados pelo arquivo HTML.
-
Sem armazenamento local ou por sessão: o Campaign Manager 360 não aceita recursos em HTML5 que usem armazenamento local ou por sessão.
-
Sem "%" no nome: não inclua o símbolo de porcentagem (%) nos nomes de arquivos no recurso.
-
Sem recurso de backup.
-
(Opcional) O coordenador de publicidade pode fazer upload de uma imagem de backup separada para o Campaign Manager 360. Uma imagem de backup vai ser aplicada se o Campaign Manager 360 não puder usar os recursos principais quando eles não forem compatíveis. Não inclua uma imagem de backup no seu arquivo ZIP HTML5.
-
Amostra do arquivo ZIP HTML5 Ajuda com arquivos .adz-
Tipos de arquivos compatíveis: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, EOT, OTF, TTF, WOFF e WOFF2
-
Número máximo de arquivos por .zip: 100
-
Tamanho máximo: 10 MB.
O Campaign Manager 360 também aceita criativos HTML5 na forma de arquivos .adz. Basta usar o arquivo .adz exatamente como se fosse um arquivo ZIP. Para seus propósitos, não há diferença entre .adz e .zip.
-
-
Compacte a pasta em um arquivo ZIP. Precisa de ajuda para compactar pastas? Consulte as Centrais de Ajuda do Windows ou da Apple.
-
O coordenador de publicidade faz upload desse arquivo ZIP no Campaign Manager 360.
Saiba mais sobre a programação:
Problemas de upload
-
Seu arquivo pode não estar em formato .zip ou .adz. Comprima seu arquivo HTML (e os arquivos que ele referencia) em um único ZIP e tente novamente.
-
Se você achar que tem um arquivo .zip, verifique a extensão de arquivo para ter certeza: clique com o botão direito no arquivo e confira as propriedades para confirmar se a extensão é
.zip. -
Se você ainda não puder selecionar seu arquivo, talvez seja necessário entrar em contato com o suporte.
Se você estiver com problemas para fazer upload do arquivo, talvez este não tenha recursos HTML5 válidos ou contenha mais de cem arquivos (o máximo). Outro problema pode estar no fato de que o recurso HTML5 usa APIs JavaScript para armazenamento local ou por sessões. Para ajudar a proteger a privacidade do usuário, o Campaign Manager 360 não permite essas APIs.
Para ajudar a proteger a privacidade do usuário, o Campaign Manager 360 não aceita recursos HTML5 que usem armazenamento local ou armazenamento por sessão. Caso seu upload seja rejeitado por esse motivo, trabalhe com seu desenvolvedor para remover as APIs proibidas. Em seguida, tente fazer o upload do recurso novamente. Especificamente, não é possível fazer upload de recursos HTML5 com as seguintes APIs JavaScript:
- indexedDB
- localStorage
- openDatabase
- sessionStorage
Caso suas metas de publicidade dependam dessas APIs, tente usar as configurações do Campaign Manager 360. Por exemplo, alguns anunciantes usam essas APIs para segmentação de anúncios e limites de frequência, mas isso não é necessário. É possível usar o Campaign Manager 360 para configurar vários tipos de segmentação e definir limites de frequência. Solicite suporte para implementar soluções alternativas. Não importa como o recurso é configurado, você só deve tentar capturar dados que atendam aos requisitos de privacidade descritos no seu contrato com o Google Marketing Platform.
O que é armazenamento local e por sessão? Existem dois tipos de armazenamento na Web HTML5. São formas de armazenar dados em um navegador. O armazenamento local guarda um arquivo em um navegador em diferentes sessões de navegação. Ele permanece no navegador de forma permanente, a menos que o usuário limpe o cache do navegador ou apague o arquivo manualmente. O armazenamento por sessão só armazena dados no navegador durante uma sessão de navegação em particular. Depois de você fechar e reiniciar o navegador, todos os dados armazenados na sessão serão apagados.
Por que esse tipo de armazenamento não é permitido? É bem provável que o arquivo armazenado inclua o código destinado a capturar informações de identificação pessoal (PII, na sigla em inglês), rastreie a atividade do navegador entre sessões ou envie outros dados a terceiros que possam violar os termos do seu contrato com a Google Marketing Platform. Esse tipo de coleta de dados certamente não é a única utilização do armazenamento local e por sessão, mas é um uso possível, já que o arquivo pode incluir qualquer tipo de código.
Diretrizes para desenvolvedores
Recursos
Como definir o tamanho de um criativo
Diretrizes de dimensãoDiferentemente de imagens ou vídeos, os documentos HTML não têm dimensões próprias. Por essa razão, use a meta tag de tamanho para indicar o tamanho desejado para o criativo. A metatag de tamanho é um parâmetro opcional no seu documento HTML. Essa é a melhor maneira de garantir que o criativo vai ser renderizado nas dimensões corretas. Insira as dimensões conforme o exemplo abaixo:
meta name="ad.size" content="width=300,height=250">Click tags
As tags de clique definem as páginas de destino para cada saída nos seus criativos com recursos HTML5. Uma saída é qualquer área que, ao ser clicada, direciona o navegador para uma página de destino. Cada click tag define a página de destino para uma saída diferente.
Quando uma saída recebe um clique, o criativo chama o Campaign Manager 360 para a página de destino associada a ela. É possível definir essa página de destino no seu criativo ou anúncio, dependendo das suas necessidades.
O Campaign Manager 360 detecta as click tags quando você faz upload dos recursos. Você pode mudar a página de destino que a click tag usa a qualquer momento, mesmo depois de exportar as tags. Isso ocorre porque a tag de clique é uma variável padrão, um marcador para a página de destino, em vez de um valor codificado.
Há algumas práticas recomendadas para configurar suas tags de clique, uma vez que o nível do anúncio modifica as configurações no nível do criativo nos criativos de exibição:
- Verifique se o criativo usa a variável da tag de clique como o destino do clique.
- A click tag deve ser de fácil leitura para o servidor de anúncios, ou seja, sem minificação nem ofuscação, mas é possível usar redutores no resto do código e em outros arquivos.
- Não recomendamos URLs codificados no recurso, porque isso impede que o Campaign Manager 360 rastreie os cliques e que os coordenadores de publicidade atualizem o URL. Após o upload, o Campaign Manager 360 exibirá um aviso caso haja URLs codificados no recurso.
Veja um exemplo de uma click tag inserida em um documento HTML:
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[The rest of your creative code goes here.] </html>
Verifique se o criativo usa a variável de click tag como URL da página de destino:
<img src="images/dclk.png" border=0>
</a>
O componente Área de toque do Google Web Designer é totalmente compatível com o Campaign Manager 360. Não é necessário usar código personalizado.
Para adicionar uma click tag usando uma área de toque, faça o seguinte:
- Verifique se o anúncio tem um botão ou outro elemento de call-to-action claramente visível para o usuário clicar ou tocar.
- Arraste o componente Área de toque da pasta "Interação" do painel "Componentes" para o cenário e posicione-o sobre a call-to-action.
- Clique no botão de novo evento
no painel "Eventos".
- Na caixa de diálogo do evento, selecione as seguintes opções:
Destino O componente Área de toque ( gwd-taparea_1)Evento Área de toque > Toque/clique Ação Anúncio do Google > Anúncio de saída
Observação: uma ação semelhante, Anúncio de saída (substitui o URL), não permite que você modifique o URL fora do criativo, como no Studio ou no Campaign Manager 360, e só deve ser usada para anúncios dinâmicos.
Receptor gwd-adConfiguração - Código de métricas: é um rótulo (por exemplo, "CTA") que facilita a compreensão dos relatórios.
- URL: é o URL de saída.
- Recolher na saída: marque essa opção para recolher os anúncios expansíveis fechados pelo usuário.
- Pausar mídia na saída: marque essa opção para que a reprodução de áudio e vídeo seja interrompida quando o usuário fechar o anúncio.
- Página recolhida ao sair: é a página exibida quando o usuário fecha anúncios expansíveis.
no painel "Eventos".
Arquivos de exemplo
Amostra de documento HTMLVeja um exemplo de um documento HTML completo para um criativo HTML5. A tag de clique e a meta tag de tamanho são exibidas em negrito.
Por este criativo ser tão simples, não é necessário ter outros recursos. Se ele fosse seu criativo HTML5, você o compactaria em um arquivo ZIP ou .adz e o enviaria para seu coordenador de publicidade do Campaign Manager 360.
Documento
<head>
<title>sample html page</title>
<meta name="ad.size" content="width=300,height=250">
<style>
html, body {background-color: blue;}
p { color:white; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var clickTag = "http://www.google.org";
function resizeWindow()
{
$('p').css({ 'width':'100%', 'text-align':'center' });
var h1 = $('h1').height();
var h = h1/2;
var WinHeight = $(window).height();
var w = WinHeight/2;
var m = w - h;
var WinWidth=$(window).width();
$('p').css("margin-top",m + "px");
$("p").text("Size="+WinWidth+"x"+WinHeight);
}
$(document).ready(function () {
resizeWindow();
});
$(window).resize(function () {
resizeWindow();
});
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)"><p>Page loading...</p></a> </body> </html>
Os arquivos HTML5 são usados para mudar os URLs dinamicamente e registrar cliques com os servidores de anúncios do Campaign Manager 360.
Simples
Chama a click tag pelo clique.
Com parâmetro
Chama clickTag quando o botão recebe um clique. Esse exemplo demonstra a passagem de um parâmetro para o URL de destino (por exemplo, um CEP).
Com um exemplo de sinal #
Codificado para interromper a chamada de rastreamento ao Campaign Manager 360 e ao URL da página de destino do botão. Isso precisa ser feito para qualquer criativo que redirecione cliques para um URL de destino que contenha uma cerquilha (#).
HTML5 file with a number sign in a click tag URL
Várias tags de cliques
Contém várias click tags.
HTML5 file with multiple click tags
Carregador
Arquivo .zip que contém dois arquivos .zip, o arquivo pai e o arquivo filho. O pai carrega o arquivo filho.
Este é um exemplo de arquivo HTML5 usado para registrar as interações do usuário em criativos que não são Rich Media.
Pixel de rastreamento 1 x 1
Chama um pixel de rastreamento 1 x 1 do Campaign Manager 360 ao ser carregado.
