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.
Página 20% carregada: O conteúdo inicial é exibido. | |
Página 50% carregada: O conteúdo inicial permanece, nenhuma outra ação ocorre. | |
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:
Usar uma imagem de pré-carregamento
Caso queira exibir uma imagem inicial durante o carregamento da página, use o gerenciador handleAdInitialized
. Saiba 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.
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".