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);