Documentação Advertising Guia do Criative

Especificação criativa do HTML5 para Advertising Creative

Last update: Wed Mar 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Tópicos:

Criado para:

Usuário

Este documento descreve os requisitos e o suporte à API para criações do HTML5 no Creative. A API oferece suporte ao desenvolvimento de criações do HTML5 cujos atributos podem ser configurados no momento da entrega criativa.

Escopo

O Creative oferece suporte a banners HTML5 com criações de mídia não-avançada que aparecem dentro de bordas definidas em uma página. Você pode usar os seguintes tipos de criação HTML5:

HTML5: oferece suporte a até 5 URLs de página de aterrissagem que podem ser configuradas durante a criação criativa e o tráfico.
HTML flexível5: oferece suporte a até cinco URLs de página de aterrissagem que podem ser configuradas durante a criação criativa e o tráfico, além de permitir que atributos criativos sejam modificados durante a criação criativa e o tráfico.

Requisitos

Requisitos de pasta e compactação

O criativo deve ser empacotado em um arquivo ZIP (formato .ZIP). Arquivos ZIP aninhados não são suportados, portanto, não inclua uma pasta compactada dentro da pasta compactada externa.
O arquivo ZIP deve conter pelo menos um arquivo HTML — o arquivo de exibição principal do HTML — que inclui uma referência à biblioteca JavaScript Creative. O arquivo principal do HTML pode estar na pasta raiz ou em uma subpasta.
O arquivo HTML principal pode ser nomeado como qualquer coisa, desde que não inclua caracteres especiais, embora index.html seja recomendado.
Todos os ativos de suporte necessários para renderizar o criativo final devem estar na mesma pasta que o arquivo de exibição do HTML ou em subpastas na pasta principal.
Não inclua nenhum arquivo no criativo ao qual o criativo não faça referência.

Inclusão do arquivo JavaScript do Advertising Creative

O arquivo HTML principal — e nenhum outro arquivo — deve conter uma referência ao arquivo JavaScript AMOLibrary.js. Chame o arquivo na primeira linha da seção <head> usando este endereço:

https://ads.everesttech.net/ads/static/local/AMOLibrary.js

Esse arquivo contém funções para garantir que o teste local de eventos de saída ocorra sem problemas.

Requisitos criativos do HTML5

Suporte para URLs de click-through no HTML5 estático

`amo.registerClick(clkVar, clkUrl)`

Registra as URLs de click-through e o parâmetro associado usado para fazer referência a cada URL (conhecido como clickTag). Esta API informa ao servidor de publicidade Creative onde adicionar o rastreamento de cliques. Você pode usar essa API para registrar até cinco variáveis de tag de clique, cada uma com um URL de página inicial correspondente.

NOTE

Os URLs estáticos incluídos no criativo do HTML5 são usados apenas para fins de teste local e serão substituídos. Ao carregar um criativo do HTML5, você define a página de aterrissagem padrão para cada variável clickTag. Ao atribuir uma criação carregada do HTML5 a uma experiência de anúncio, você pode, opcionalmente, substituir a página de aterrissagem padrão para cada variável do clickTag e o Creative adiciona o rastreamento de cliques às URLs ao salvar a experiência.

Parâmetros

clkVar — O nome da variável click (geralmente "clickTag"), entre aspas duplas.
clkUrl — O URL da página de aterrissagem para esta variável de clique, entre aspas duplas.

Uso

Chame amo.registerClick() na seção <head> do arquivo HTML principal.

Exemplo

amo.registerClick("clickTag","http://www.example.com")

`amo.onAdClick(clk, event)`

Aciona o evento de saída, que redireciona o usuário para a página de aterrissagem configurada para clickTag. Durante os testes locais, essa função alerta os desenvolvedores se o URL que está sendo passado para a função foi registrado.

Parâmetros

clkTag — O nome da variável de clique usada para atribuir o URL da página de aterrissagem usando a função amo.registerClick(), entre aspas simples.
event — (Opcional) O objeto de evento "click" do JavaScript. Isso registra as coordenadas de cliques, que podem ser usadas para analisar ainda mais o desempenho criativo.

Uso

Chame amo.onAdClick() na seção <body> do arquivo HTML principal.

Exemplos

amo.onAdClick('clickTag') OU amo.onAdClick('clickTag',clickEvt)

Requisitos criativos flexíveis do HTML5

Suporte para URLs click-through no HTML5 flexível

`amo.registerClick(clkVar, clkUrl)`

NOTE

Parâmetros

clkVar — O nome da variável click (geralmente "clickTag"), entre aspas duplas.
clkUrl — O URL da página de aterrissagem para esta variável de clique, entre aspas duplas.

Uso

Chame amo.registerClick() na seção <head> do arquivo HTML principal.

Exemplo

amo.registerClick("clickTag","http://www.example.com")

`amo.onAdClick(clk, event)`

Parâmetros

clkTag — O nome da variável de clique usada para atribuir o URL da página de aterrissagem usando a função amo.registerClick(), entre aspas simples.
event — (Opcional) O objeto de evento "click" do JavaScript. Isso registra as coordenadas de cliques, que podem ser usadas para analisar ainda mais o desempenho criativo.

Uso

Chame amo.onAdClick() na seção <body> do arquivo HTML principal.

Exemplos

amo.onAdClick('clickTag') OU amo.onAdClick('clickTag',clickEvt)

Suporte para atributos criativos no HTML flexível5

`amo.registerAttribute(key, type, value)`

Define os atributos das criações que podem ser alteradas no momento da criação ou criação da experiência. É possível definir até 20 atributos criativos que podem ser configurados no momento da criação ou da criação da experiência.

NOTE

Os valores definidos neste método são usados apenas para desenvolvimento local e não são usados em veiculação de anúncios ao vivo.

Parâmetros

key — O nome alfanumérico do atributo. Deve começar com um caractere alfabético.
type — O tipo de atributo (TEXT ou IMAGE).
value — O valor do atributo para teste. Para atributos do tipo IMAGE, o valor deve ser o caminho relativo para o arquivo de imagem.

Uso

Chame amo.registerAttribute() para registrar um atributo criativo, tipo e valor durante o teste no modo local. Todos os arquivos de imagem usados como valores de amostra devem ser empacotados no arquivo ZIP juntamente com o pacote carregado.

`amo.attributes`

Um objeto JSON para consultar os nomes e valores da variável do atributo criativo. As chaves de objeto são os nomes de atributos e os valores são os valores desses atributos.

No modo de teste local, os pares de valores chave são os pares registrados pela API amo.registerAttribute. Para produção, os nomes e valores das variáveis do atributo criativo devem ser configurados no momento da criação criativa e do tráfico.

Requisitos de conteúdo do Creative

A maioria das trocas de exibição disponíveis no Advertising DSP tem os seguintes requisitos criativos:

Todas as imagens de anúncios devem ter uma borda sólida.
Não são permitidos anúncios em expansão.
A landing page deve abrir em uma nova janela.
O domínio da página de aterrissagem e seus subdomínios não podem ter mais de 35 caracteres. Observação: as URLs da página de aterrissagem final são definidas na DSP e não nos próprios ativos do HTML5.
Qualquer isenção de responsabilidade da oferta de um anúncio deve ser incluída no próprio anúncio e não apenas na landing page.

Exemplo de conteúdo como um objeto e uma matriz JSON

Exemplo de conteúdo como um objeto JSON

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
}

Exemplo de conteúdo como uma matriz JSON

[{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
},

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-mobile-720x520.png",
"product_url": "http://adobe.com/"
}

]

Exemplo de criação do HTML5

Exemplo de estrutura de pasta (após a descompactação)

index.html
/assets (pasta)
- bg.jpg (imagem do JPG, PNG, SVG ou GIF)

Exemplo de arquivo do HTML (index.html) para criações simples do HTML5

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>

Exemplo de arquivo do HTML (index.html) para criações estáticas do HTML5

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  amo.registerClick("clickTag2","http://www.example2.com");
  amo.registerClick("clickTag3","http://www.example3.com");
  amo.registerClick("clickTag4","http://www.example4.com");
  amo.registerClick("clickTag5","http://www.example5.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>

recommendation-more-help

81c37de9-89dd-4749-9a04-e9f8c86dd51a