Una creatività HTML5 che si espande a schermo intero è un annuncio espandibile con due dimensioni: una dimensione compressa iniziale e una dimensione dinamica a schermo intero. Questo tipo di creatività può essere utilizzato su computer desktop, dispositivi mobili e con il formato in-app.
La dimensione compressa minore di una creatività HTML5 che si espande a schermo intero si adatta a un posizionamento standard su un sito web per dispositivi mobili o desktop oppure in un'app per dispositivi mobili. La dimensione maggiore si espande oltre la dimensione compressa per riempire all'occorrenza una parte specifica e di dimensioni minori della finestra del browser del desktop o dello schermo di un dispositivo mobile ed è sempre centrata. L'annuncio si espande quando un utente fa clic su un pulsante per la modalità a schermo intero.
Questo articolo spiega come espandere una creatività HTML5 a schermo intero utilizzando l'SDK HTML5 di Studio.
Aggiunta dell'Enabler e attesa per la relativa inizializzazione
L'Enabler è la library di codice di base di Studio ed è obbligatorio per tutte le creatività rich media. Aggiungi il seguente tag script al tag <head> del tuo file HTML:
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
Attesa per l'inizializzazione dell'Enabler
Nessun elemento dell'annuncio deve venire eseguito in automatico prima dell'inizializzazione dell'Enabler. Ciò garantisce il corretto caricamento di ogni elemento, oltre a consentire l'accesso ai metodi dell'Enabler prima che un utente interagisca con l'annuncio.
Nel file JavaScript, verifica che l'inizializzazione dell'Enabler sia avvenuta tramite il metodo isInitialized, che restituisce una risposta di tipo "true" o "false". Nel primo caso, esegui una chiamata per avviare la funzione, in questo esempio, enablerInitHandler(). Nel secondo caso, esegui una chiamata di fallback per esaminare l'evento INIT dell'Enabler.
Una volta inizializzato l'Enabler, avvia l'animazione, carica asset immagini oppure chiama i metodi di tracciamento.
// 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.
}
Il caricamento "polite" ritarda il caricamento degli asset della creatività fino al momento in cui viene caricata la pagina del publisher. Per impostare il caricamento "polite", attendi l'inizializzazione dell'Enalbler, quindi chiama il suo metodo isPageLoaded. Sostituisci la funzione enablerInitHandler riportata sopra con il seguente codice:
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.
}
Se la tua creatività include un'animazione con riproduzione automatica, puoi avviare l'animazione solo quando l'utente ha fatto scorrere la pagina in modo da rendere ben visibile l'annuncio. Per controllare la visibilità, chiama il metodo dell'Enabler isVisible.
Sostituisci la funzione politeLoadHandler con il seguente codice:
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.
}
Sostituisci la funzione enablerInitHandler con il seguente codice:
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.
}
Espansione a schermo intero e compressione
Le creatività che si espandono a schermo intero si estendono in tutte le direzioni adattandosi completamente allo schermo su cui vengono visualizzate. Il processo di espansione include i passaggi riportati di seguito. Fai clic su ciascun passaggio per conoscere altri dettagli e il codice di esempio.
Per determinare se la modalità a schermo intero è disponibile, chiama Enabler.queryFullscreenSupport().
Codice di esempio per controllare se la modalità a schermo intero è supportata
// Create a variable to save fullscreen support.
var fullscreenSupported = false;
// Add a listener to report the result.
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_SUPPORT,
function(event) {
fullscreenSupported = event.supported;
});
Enabler.queryFullscreenSupport();
// Show a hidden fullscreen button after fullscreen support is confirmed.
if (fullscreenSupported) {
// The line of code below assumes you have a button named 'fullscreenButton'.
fullscreenButton.style.display = 'block';
}
La creatività si espanderà automaticamente alla massima dimensione possibile. Se desideri, puoi selezionare le dimensioni dello schermo e impostare invece l'espansione in una dimensione personalizzata. Per individuare le dimensioni dello schermo, chiama Enabler.queryFullscreenDimensions().
Codice di esempio per controllare le dimensioni dello schermo prima dell'espansione
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS,
function(event) {
Enabler.requestFullscreenExpand();
});
fullscreenButton.addEventListener('click',
function(event) {
Enabler.queryFullscreenDimenions();
}, false);
Per espandere l'annuncio con le dimensioni massime dello schermo, chiama Enabler.requestFullscreenExpand(). Quindi esamina l'evento FULLSCREEN_EXPAND_START. Se desideri l'animazione durante l'espansione, chiama il metodo di animazione personalizzato in questo gestore di eventi.
Codice di esempio per l'espansione sull'intera superficie dello schermo
Enabler.requestFullscreenExpand();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Optional) Add code to start your custom expanding animation.
// If not animating, call Enabler.finishFullscreenExpand(); instead.
Enabler.finishFullscreenExpand();
});
In alternativa, per l'espansione in un formato personalizzato (ad esempio 1280 x 1024), indica la larghezza e l'altezza che desideri nel metodo:
Codice di esempio per espansione a dimensioni personalizzate
Enabler.requestFullscreenExpand(1280, 1024);
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Optional) Add code to start your custom expanding animation.
// If not animating, call Enabler.finishFullscreenExpand(); instead.
Enabler.finishFullscreenExpand();
});
Quando l'espansione è stata completata, chiama Enabler.finishFullscreenExpand(). Quindi analizza l'evento FULLSCREEN_EXPAND_FINISH.
Se utilizzi un'animazione per l'espansione, chiama questo metodo al termine dell'animazione. Se non utilizzi alcuna animazione, chiama questo metodo nel gestore per l'evento FULLSCREEN_EXPAND_START. Fai riferimento agli esempi riportati sopra.
Codice di esempio per terminare l'espansione
Enabler.finishFullscreenExpand();
// Create a variable to keep track of the expansion state.
var isFullscreen = false;
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
function(event) {
isFullscreen = true;
});
Per la compressione devi prima assicurarti che sia presente un pulsante di chiusura nello stato a schermo intero della creatività. Per avviare la compressione chiama Enabler.requestFullscreenCollapse(). Quindi esamina l'evento FULLSCREEN_COLLAPSE_START. Se desideri l'animazione durante la compressione, chiama il metodo di animazione personalizzato in questo gestore di eventi.
Codice di esempio per avviare la compressione
Enabler.requestFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
function(event) {
// (Optional) Add code to start your custom collapsing animation.
// If not animating, call Enabler.finishFullscreenCollapse(); instead.
Enabler.finishFullscreenCollapse();
});
Quando la compressione è stata completata, chiama Enabler.finishFullscreenCollapse(). Quindi esamina l'evento FULLSCREEN_COLLAPSE_FINISH.
Se utilizzi un'animazione per la compressione, chiama questo metodo al termine dell'animazione. Se non utilizzi alcuna animazione, chiama questo metodo nel gestore per l'evento FULLSCREEN_COLLAPSE_START. Fai riferimento agli esempi riportati sopra.
Codice di esempio per terminare la compressione
Enabler.finishFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
function(event) {
// Set the variable created in the "Complete the expansion" step.
isFullscreen = false;
});