Per espandere la creatività, sviluppa un oggetto che controlla l'espansione su interazione dell'utente. Puoi impostare la creatività in modo che si espanda al clic o al mouseover da parte dell'utente. L'esempio riportato in questo articolo illustra come impostare l'espansione al clic in un punto qualsiasi del riquadro compresso.
Creazione di un pulsante
Crea un tag <div> nel file HTML e assegna un ID (ad esempio, "pulsante-espansione").
Aggiungi un nuovo tag div con l'ID "pulsante-espansione".
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Add collapsed content here. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Add expanded content here. -->
</div>
</div>
</body>
Definizione del pulsante
Definisci l'oggetto creato con il linguaggio CSS utilizzando l'ID corrispondente ("pulsante-espansione").
Esempio di codiceUtilizzando il linguaggio CSS, fai corrispondere le dimensioni dell'oggetto a quelle del riquadro compresso e impostalo su invisibile.
#expand-button {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
cursor: pointer;
.Aggiunta del codice di espansione
L'espansione di un annuncio è un processo asincrono che segue questo esatto ordine:
- La creatività richiede l'espansione utilizzando il metodo
requestExpand. - Tale richiesta invia l'evento
EXPAND_START, che consente alla creatività di richiedere l'animazione di espansione (se presente). - La creatività richiede il completamento dell'espansione utilizzando il metodo
finishExpand. - Tale richiesta invia l'evento
EXPAND_FINISH, che consente alla creatività di richiedere eventuali animazioni o funzionalità aggiuntive nel riquadro espanso.
<head>
<script type="text/javascript">
var isExpanded = false;
function expandStartHandler() {
// Perform expand animation.
// Optionally, should you want the direction to expand in call:
// Enabler.getExpandDirection(); //
// When animation finished must call
Enabler.finishExpand();
}
function expandFinishHandler() {
// Convenience callback for setting
// final state when expanded.
isExpanded = true;
}
function collapseStartHandler() {
// Perform collapse animation.
// When animation finished must call
Enabler.finishCollapse();
}
function collapseFinishHandler() {
// Convenience callback for setting
// final state when collapsed.
isExpanded = false;
}
function actionClickHandler() {
isExpanded ? Enabler.requestCollapse() : Enabler.requestExpand();
}
Enabler.addEventListener(
studio.events.StudioEvent.EXPAND_START,
expandStartHandler);
Enabler.addEventListener(
studio.events.StudioEvent.EXPAND_FINISH,
expandFinishHandler);
Enabler.addEventListener(
studio.events.StudioEvent.COLLAPSE_START,
collapseStartHandler);
Enabler.addEventListener(
studio.events.StudioEvent.COLLAPSE_FINISH,
collapseFinishHandler);
actionBtn.addEventListener(
'click',
actionClickHandler,
false);
</script>
...
</head>
Facoltativo. Espansione automatica della creatività al primo caricamento
Alcuni publishers configurano le creatività in modo che si espandano automaticamente la prima volta che l'annuncio viene caricato in una pagina. A tal fine, utilizza il metodo setStartExpanded di Enabler.
expandStartHandler nel codice di espansione di esempio sopra riportato. Questo metodo può essere richiamato prima dell'evento INIT di Enabler.Enabler.setStartExpanded(true);