Guia de criação de in-page HTML5

Configurar um carregamento discreto em HTML5 (opcional)

O que é o carregamento discreto?

O carregamento discreto retarda o carregamento de materiais do criativo (como imagens), até que a página pai tenha concluído o carregamento.

3-part polite load image: a) website partly loaded b) website fully loaded c) full ad appears including video
blue letter A Página 20% carregada: O conteúdo inicial é exibido.
green letter b Página 50% carregada: O conteúdo inicial permanece, nenhuma outra ação ocorre.
red letter c Página 100% carregada: O conteúdo e as ações adicionais aparecem.

O Studio não exige que seus arquivos usem o carregamento discreto, mas as especificações do editor podem exigi-lo.

Ao usar esse recurso, é possível gerar seu criativo com uma imagem de pré-carregamento inicial, aguardar o carregamento da página e carregar materiais adicionais (como imagens, animações ou vídeos).

Configurar o carregamento discreto no Google Web Designer

Ao projetar criativos no Google Web Designer, não é necessário adicionar código. Ao publicar um arquivo, seja localmente ou diretamente no Studio, marque a caixa de seleção "Carregamento discreto" na seção "Configurações" da caixa de diálogo de publicação:

Publish dialog in Google Web Designer with Polite Loading checked

Usar uma imagem de pré-carregamento

Caso queira exibir uma imagem inicial durante o carregamento da página, use o gerenciador handleAdInitializedSaiba mais

Configurar o carregamento discreto com JavaScript

Adicione o código a seguir ao seu arquivo JavaScript depois do código de inicialização do Enabler. Esse código verifica se a página está carregada usando o método isPageLoaded do Enabler, que retorna verdadeiro ou falso. Caso retorne verdadeiro, ele chama uma função personalizada que carrega seu criativo. Neste exemplo, a função personalizada é chamada politeInit. Caso retorne falso, ele detecta o evento PAGE_LOADED do Enabler antes de chamar politeInit.

Faça o download de um exemplo de criativo de carregamento discreto. Em seguida, abra DCRM_HTML5_inPage_Polite_300x600.html para ver o código obrigatório do Enabler.

Snippet de código de carregamento discreto 

if (Enabler.isInitialized()) {
  init();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}

// É exibido quando o Enabler estiver pronto.
function init() {
  if (Enabler.isPageLoaded()) {
    politeInit();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
  }
};

// É exibido quando a página estiver completamente carregada.
function politeInit(){
  // Adicione seu código para ocultar a animação ou a imagem de carregamento e carregar 

  // os materiais do criativo ou começar a animação do criativo.
};

Usar uma imagem de pré-carregamento

Caso queira exibir uma imagem inicial durante o carregamento da página, é possível usar uma imagem de pré-carregamento e ocultá-la quando o eventoPAGE_LOADED for recebido. Nos arquivos de exemplo, a imagem de carregamento é chamada "loading.gif" e o código do elemento div é "loading_image_dc".

Isso foi útil?

Como podemos melhorá-lo?

Precisa de mais ajuda?

Siga as próximas etapas:

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