Per comprimere la creatività, sviluppa un oggetto che controlla la compressione su interazione dell'utente. Puoi impostare la creatività in modo che si comprima al clic o al mouseover da parte dell'utente. L'esempio riportato in questo articolo illustra come impostare la compressione al clic su un pulsante personalizzato.
Creazione di un oggettoCrea un oggetto nel file HTML utilizzando il tag <div>, quindi assegna un ID.
Esempio di HTML
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Aggiungi contenuti compressi qui. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Aggiungi contenuti espansi qui. -->
<div id="collapse-button">CLOSE X</div>
</div>
</div>
</body>
Definisci l'oggetto creato nel file CSS utilizzando l'ID assegnatogli.
Esempio di CSS
#collapse-button {
position: absolute;
width: 75px;
height: 20px;
right: 10px;
top: 10px;
cursor: pointer;
}
Come avviene per l'espansione di un annuncio, anche la compressione è un processo asincrono che segue questo esatto ordine:
- La creatività richiede la compressione utilizzando il metodo
requestCollapse. - Questa richiesta invia l'evento
COLLAPSE_START, che indica alla creatività di eseguire l'animazione di compressione (se presente). - Una volta che l'animazione di compressione viene completata, la creatività richiede di completare la compressione con il metodo
finishCollapse. - Questa richiesta invia l'evento
COLLAPSE_FINISHche indica alla creatività che può ora eseguire funzionalità o animazioni aggiuntive sul riquadro compresso.
<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>
Hide the close button when the creative is served in an app
If the creative will serve in mobile apps, note that mobile app ad SDKs automatically add their own close button over the creative. If you already have a close button in your creative, the creative will have two close buttons. To hide the MRAID close button, use the Enabler method setUseCustomClose.
var hideMRAIDClose = function() {
if (studio.common.Environment.hasType(
studio.common.Environment.Type.IN_APP)) {
// Hide the MRAID close button and use the creative's close button instead.
Enabler.setUseCustomClose(true);
}
};