Guia de criação de in-page HTML5

Adicionar o Enabler HTML5

O Enabler é a principal biblioteca de códigos do Studio. Pense nele como o cérebro do criativo. Todos os componentes e chamadas de API precisam passar pelo Enabler. A biblioteca Enabler é necessária para todos os criativos rich media. Ao adicionar o Enabler, você garante automaticamente que o criativo:

  • inclui funcionalidades de rastreamento padrão para métricas, como tempo de exibição, número de impressões, tempo de interação e outras métricas padrão;
  • pode gerenciar recursos mais complexos, como vídeo e expansão.
Ao criar um anúncio com o Google Web Designer, o Enabler é incluído automaticamente quando você seleciona o ambiente Display & Video 360. Não é necessário adicionar nenhum dos códigos abaixo.

Adicionar o Enabler

Para a tag <head> do arquivo HTML, adicione uma tag de script que vincule ao Enabler:

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

Isso fornece um objeto singleton no namespace global chamado Enabler. Para chamar métodos nele, chame Enabler.isInitialized(), Enabler.exit() e assim por diante.

Definir o tamanho do criativo

Ao contrário de imagens ou vídeos, os documentos HTML não têm dimensões próprias. Para exibir o anúncio no tamanho certo, adicione uma metatag com as dimensões dele à seção de cabeçalho do arquivo HTML.

Copie o exemplo de metatag abaixo e altere a largura e a altura de acordo com o tamanho do seu criativo.

Exemplo de metatag de tamanho do anúncio para um criativo de 300 x 250

<meta name="ad.size" content="width=300,height=250">

(Opcional) Configurar sinalizadores de expansão

Existem alguns métodos opcionais que podem ser usados para definir comportamentos de anúncios de expansão. Se você precisar usar algum deles, coloque o método antes do código de inicialização do Enabler abaixo. Veja quais são os métodos:

  • Enabler.setExpandablePixelOffsets(left:number, top:number, opt_expandedWidth:number, opt_expandedHeight:number)
    Define os deslocamentos de cenário para anúncios de expansão.
  • Enabler.setIsMultiDirectional(value:Boolean)
    Permite que o anúncio se expanda em mais de uma direção.

  • Enabler.setStartExpanded(startExpanded:Boolean)
    Quando o anúncio é carregado, o carregamento ocorre com a expansão aberta, em vez de esperar que alguém o expanda.

    Saiba mais sobre esses métodos no SDK de HTML5 do Studio.

Aguardar a inicialização do Enabler

Nada no anúncio deve ser executado automaticamente até que o Enabler seja inicializado. Isso garante que todos os elementos estejam corretamente carregados e os métodos do Enabler possam ser acessados antes que um usuário interaja com o anúncio.

No seu JavaScript, confira se o Enabler foi inicializado usando o método isInitialized, que retorna verdadeiro ou falso. Se for verdadeiro, faça a chamada para iniciar sua função. Neste exemplo, use EnablerInitHandler(). Caso seja falso, faça uma chamada de substituição para detectar o evento INIT do Enabler.

// If true, start function. If false, listen for INIT.
window.onload = function() {
  if (Enabler.isInitialized()) {
    enablerInitHandler();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
  // Start polite loading, or start animation,
  // load in your image assets, call Enabler methods,
  // and/or include other Studio modules.
}

Depois que o Enabler for inicializado, inicie a animação, carregue seus recursos de imagem e chame os métodos de rastreamento ou inclua outros módulos do Studio.

Atualizar o Enabler

Quando uma nova versão do Enabler for lançada, será exibido um aviso na interface do usuário do Studio informando que a versão do Enabler usada pelo criativo está desatualizada. Para fazer upgrade para a versão mais recente do Enabler, faça um novo upload do material HTML principal do criativo.

Isso foi útil?

Como podemos melhorá-lo?

Precisa de mais ajuda?

Siga as próximas etapas:

Pesquisa
Limpar pesquisa
Fechar pesquisa
Menu principal
8467560843577397433
true
Pesquisar na Central de Ajuda
true
true
true
true
true
74220
false
false