Um criativo HTML5 de expansão para tela cheia é um anúncio expansível com dois tamanhos, um tamanho inicial recolhido e um tamanho dinâmico de tela cheia. Os criativos HTML5 de expansão para tela cheia podem ser usados em computadores, dispositivos móveis e aplicativos.
O tamanho menor (recolhido) de um criativo HTML5 de expansão para tela cheia se ajusta a canais de anúncio padrão de websites para computadores, dispositivos móveis ou aplicativos para dispositivos móveis. O tamanho maior se expande além do tamanho recolhido e preenche uma parte delimitada da janela do navegador para computador ou da tela de um dispositivo móvel, sempre centralizado. O anúncio é expandido quando o usuário clica em um botão de tela cheia.
Este artigo explica como fazer um criativo HTML5 expandir para tela cheia usando o SDK HTML5 do Studio (em inglês).
Adicionar o Enabler e aguardar a inicialização
O Enabler é a principal biblioteca de códigos do Studio e é necessário para todos os criativos Rich Media. Adicione a seguinte tag de script à tag <head> do arquivo HTML:
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
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.
Em seu JavaScript, verifique se o Enabler foi inicializado usando o método isInitialized dele, que retorna verdadeiro ou falso. Se for verdadeiro, faça a chamada para iniciar sua função, neste exemplo, enablerInitHandler(). Se for falso, faça uma chamada de substituição com um listener do evento INIT do Enabler.
Após a inicialização do Enabler, inicie a animação, carregue materiais de imagem ou chame os métodos de rastreamento.
// Se for verdadeiro, inicie a função. Se for falso, use um listener de INIT.
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
// Adicione seu código para iniciar a animação do anúncio, carregar imagens, chamar métodos do Enabler ou
// usar o carregamento discreto.
}
O carregamento discreto faz com que o material do criativo só seja carregado após a conclusão do carregamento da página do editor. Para configurar o carregamento discreto, aguarde a inicialização do Enabler e chame o método do Enabler isPageLoaded. Substitua a função enablerInitHandler acima pelo seguinte código:
function enablerInitHandler() {
if (Enabler.isPageLoaded()) {
politeLoadHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.PAGE_LOADED,
politeLoadHandler);
}
}
function politeLoadHandler() {
// Adicione seu código para iniciar a animação do anúncio ou carregar imagens.
}
Caso o criativo inclua uma animação de reprodução automática, é possível esperar que o usuário role a tela até o anúncio antes de iniciar a animação. Para verificar a visibilidade, chame o método do Enabler isVisible.
Substitua a função politeLoadHandler pelo seguinte código:
function politeLoadHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Adicione seu código para iniciar a animação do anúncio ou carregar imagens.
}
Substitua a função enablerInitHandler pelo seguinte código:
function enablerInitHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Adicione seu código para iniciar a animação do anúncio ou carregar imagens.
}
Expandir para tela cheia e recolher
Os criativos de expansão para tela cheia se expandem em todas as direções para preencher a tela na qual são exibidos. O processo de expansão inclui as seguintes etapas. Clique em cada uma delas para ver mais detalhes e códigos de exemplo.
Para determinar se a tela cheia está disponível, chame Enabler.queryFullscreenSupport().
Código de exemplo para verificar a compatibilidade com tela cheia
// Crie uma variável para salvar a compatibilidade com tela cheia.
var fullscreenSupported = false;
// Adicione um listener de eventos para relatar o resultado.
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_SUPPORT,
function(event) {
fullscreenSupported = event.supported;
});
Enabler.queryFullscreenSupport();
// Exiba um botão oculto de tela cheia após a confirmação da compatibilidade com tela cheia.
if (fullscreenSupported) {
// A linha de código abaixo pressupõe que há um botão chamado "fullscreenButton".
fullscreenButton.style.display = 'block';
}
O criativo se expandirá automaticamente para o maior tamanho possível. Outra opção é verificar as dimensões da tela e definir a expansão para um tamanho personalizado. Para saber o tamanho da tela, chame Enabler.queryFullscreenDimensions().
Código de exemplo para verificar o tamanho da tela antes da expansão
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS,
function(event) {
Enabler.requestFullscreenExpand();
});
fullscreenButton.addEventListener('click',
function(event) {
Enabler.queryFullscreenDimenions();
}, false);
Para que o criativo se expanda até as dimensões máximas da tela, chame Enabler.requestFullscreenExpand(). Depois, use um listener do evento FULLSCREEN_EXPAND_START. Se você quiser usar uma animação de expansão, chame seu método de animação personalizado no manipulador de eventos.
Código de exemplo de expansão para preencher toda a tela
Enabler.requestFullscreenExpand();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Opcional) Adicione o código para iniciar sua animação de expansão personalizada.
// Como alternativa, chame Enabler.finishFullscreenExpand(); se não houver animação.
Enabler.finishFullscreenExpand();
});
Caso você queira usar um tamanho personalizado de expansão (por exemplo, 1.280 x 1.024), transmita a largura e a altura desejadas para o método:
Código de exemplo para expansão de tamanho personalizado
Enabler.requestFullscreenExpand(1280, 1024);
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Opcional) Adicione o código para iniciar sua animação de expansão personalizada.
// Como alternativa, chame Enabler.finishFullscreenExpand(); se não houver animação.
Enabler.finishFullscreenExpand();
});
Quando a expansão estiver concluída, chame Enabler.finishFullscreenExpand(). Em seguida, use um listener do evento FULLSCREEN_EXPAND_FINISH.
Caso use uma animação de expansão, chame o método quando a animação estiver concluída. Se não houver animação, chame o método no manipulador do evento FULLSCREEN_EXPAND_START. Veja o exemplo acima.
Código de exemplo para concluir a expansão
Enabler.finishFullscreenExpand();
// Crie uma variável para acompanhar o estado da expansão.
var isFullscreen = false;
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
function(event) {
isFullscreen = true;
});
Para recolher, é necessário um botão de fechar na exibição em tela cheia do criativo. Para iniciar o recolhimento, chame Enabler.requestFullscreenCollapse(). Depois, use um listener do evento FULLSCREEN_COLLAPSE_START. Se você quiser usar uma animação de recolhimento, chame seu método de animação personalizado no manipulador de eventos.
Código de exemplo para iniciar o recolhimento
Enabler.requestFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
function(event) {
// (Opcional) Adicione o código para iniciar sua animação de recolhimento personalizada.
// Como alternativa, chame Enabler.finishFullscreenCollapse(); se não houver animação.
Enabler.finishFullscreenCollapse();
});
Quando o recolhimento estiver concluído, chame Enabler.finishFullscreenCollapse(). Em seguida, use um listener do evento FULLSCREEN_COLLAPSE_FINISH.
Caso use uma animação de recolhimento, chame o método quando a animação estiver concluída. Se não houver animação, chame o método no manipulador do evento FULLSCREEN_COLLAPSE_START. Veja o exemplo acima.
Código de exemplo para concluir o recolhimento
Enabler.finishFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
function(event) {
// Defina a variável criada na etapa "Concluir a expansão".
isFullscreen = false;
});