Una creatividad HTML5 que se muestra a pantalla completa es un anuncio expandible con dos tamaños, uno inicial contraído y otro dinámico a pantalla completa. Las creatividades HTML5 expandibles a pantalla completa se pueden usar en ordenadores, móviles y elementos en aplicaciones.
El tamaño contraído más pequeño de una creatividad HTML5 expandible a pantalla completa encaja en una ubicación del anuncio estándar en sitios web para ordenadores o móviles, o en aplicaciones móviles. Por su parte, el tamaño más grande se expande más allá del tamaño contraído para rellenar, de forma opcional, un área más pequeña de la ventana del navegador de un ordenador o de la pantalla de un dispositivo móvil, según las dimensiones que haya especificado. Además, siempre aparece centrado. El anuncio se muestra cuando el usuario hace clic en un botón para ampliar a pantalla completa.
En este artículo se explica cómo generar una creatividad expandible a pantalla completa con el SDK de HTML5 de Studio.
Add the Enabler and wait for it to initialize
The Enabler is the core code library of Studio, and is required for all rich media creatives. Add the following script tag to the <head> tag of your HTML file:
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
Wait for Enabler initialization
Nothing in the ad should auto-execute until the Enabler has initialized. This ensures that everything is properly loaded and Enabler methods can be accessed before a user interacts with the ad.
In your JavaScript, verify that the Enabler has initialized using the Enabler’s isInitialized method, which returns true or false. If true, make the call to start your function, in this example, enablerInitHandler(). If false, make a fallback call that listens for the Enabler’s INIT event.
Once the Enabler has initialized, start animation, load image assets, or call tracking methods.
// 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() {
// Add your code to start ad animation, load images, call Enabler methods or
// use polite loading.
}
Polite loading delays the loading of creative assets until the publisher page is loaded. To set up polite loading, wait for the Enabler to initialize, then call the Enabler's isPageLoaded method. Replace the enablerInitHandler function above with the following code:
function enablerInitHandler() {
if (Enabler.isPageLoaded()) {
politeLoadHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.PAGE_LOADED,
politeLoadHandler);
}
}
function politeLoadHandler() {
// Add your code to start ad animation or load images.
}
If your creative includes autoplaying animation, you may want to wait until the viewer has scrolled the ad into view before playing that animation. To check visibility, call the Enabler's isVisible method.
Replace the politeLoadHandler function with the following code:
function politeLoadHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Add your code to start ad animation or load images.
}
Replace the enablerInitHandler function with the following code:
function enablerInitHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Add your code to start ad animation or load images.
}
Expandir a pantalla completa y contraer
Las creatividades que se expanden a pantalla completa lo hacen en todas direcciones hasta rellenar la totalidad del espacio de la pantalla en la que se muestran. El proceso de expansión incluye los pasos que se indican a continuación. Haga clic en cada uno de ellos para obtener más información y un código de ejemplo.
Para determinar si esta opción está disponible, ejecute el código Enabler.queryFullscreenSupport().
Código de ejemplo para comprobar si la opción de expansión a pantalla completa es compatible
// Cree una variable en la que almacenar la compatibilidad con la opción de expansión a pantalla completa.
var fullscreenSupported = false;
// Añada un procesador para registrar el resultado.
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_SUPPORT,
function(event) {
fullscreenSupported = event.supported;
});
Enabler.queryFullscreenSupport();
// Muestre un botón de expansión a pantalla completa oculto una vez confirmada la compatibilidad con esta opción.
if (fullscreenSupported) {
// La siguiente línea de código asume que tiene un botón llamado 'fullscreenButton'.
fullscreenButton.style.display = 'block';
}
La creatividad se expandirá automáticamente hasta alcanzar el máximo tamaño posible. Si lo desea, puede comprobar las dimensiones de la pantalla y definir un tamaño de expansión personalizado. Para obtener el tamaño de la pantalla, llame a Enabler.queryFullscreenDimensions().
Código de ejemplo para comprobar el tamaño de la pantalla antes de la expansión
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS,
function(event) {
Enabler.requestFullscreenExpand();
});
fullscreenButton.addEventListener('click',
function(event) {
Enabler.queryFullscreenDimenions();
}, false);
Para realizar la expansión hasta alcanzar las dimensiones máximas de la pantalla, llame a Enabler.requestFullscreenExpand(). Después, procese el evento FULLSCREEN_EXPAND_START. Si desea animar la expansión, llame al método de animación personalizada en este gestor de eventos.
Código de ejemplo para realizar la expansión y ocupar la pantalla completa
Enabler.requestFullscreenExpand();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Opcional) Añada código para iniciar la animación personalizada de la expansión.
// Si no desea mostrar la animación, llame a Enabler.finishFullscreenExpand();.
Enabler.finishFullscreenExpand();
});
En el caso de que desee realizar la expansión a un tamaño personalizado (por ejemplo, 1280x1024), pase al método la anchura y altura deseadas:
Código de ejemplo para realizar la expansión a un tamaño personalizado
Enabler.requestFullscreenExpand(1280, 1024);
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Opcional) Añada código para iniciar la animación personalizada de la expansión.
// Si no desea mostrar la animación, llame a Enabler.finishFullscreenExpand();.
Enabler.finishFullscreenExpand();
});
Una vez completada la expansión, llame a Enabler.finishFullscreenExpand(). Después, procese el evento FULLSCREEN_EXPAND_FINISH.
Si utiliza una animación de expansión, llame a este método una vez completada la animación. En caso contrario, invóquelo en el gestor para el evento FULLSCREEN_EXPAND_START. Consulte el ejemplo anterior.
Código de ejemplo para finalizar la expansión
Enabler.finishFullscreenExpand();
// Cree una variable para mantener un registro del estado de la expansión.
var isFullscreen = false;
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
function(event) {
isFullscreen = true;
});
Para contraer el anuncio, primero, necesita tener un botón de cierre cuando la creatividad se encuentre expandida a pantalla completa. Para iniciar la contracción, llame a Enabler.requestFullscreenCollapse(). Después, procese el evento FULLSCREEN_COLLAPSE_START. Si desea animar la contracción, invoque el método de animación personalizada en este gestor de eventos.
Código de ejemplo para iniciar la contracción
Enabler.requestFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
function(event) {
// (Opcional) Añada código para iniciar la animación personalizada de la contracción.
// Si no desea mostrar la animación, llame a Enabler.finishFullscreenCollapse();.
Enabler.finishFullscreenCollapse();
});
Una vez completada la contracción, llame a Enabler.finishFullscreenCollapse(). Después, procese el evento FULLSCREEN_COLLAPSE_FINISH.
Si utiliza una animación de la contracción, llame a este método una vez completada la animación. En caso contrario, invóquelo en el gestor para el evento FULLSCREEN_COLLAPSE_START. Consulte el ejemplo anterior
Código de ejemplo para finalizar la contracción
Enabler.finishFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
function(event) {
// Defina la variable creada en el paso "Complete la expansión".
isFullscreen = false;
});