Erstellen Sie zur Minimierung des Creatives ein Objekt, das die Minimierung bei der Interaktion mit dem Nutzer steuert. Sie können eine Minimierung bei Klick oder Mouseover festlegen. Das Beispiel in diesem Artikel zeigt, wie Sie festlegen, dass das Creative minimiert wird, wenn auf eine benutzerdefinierte Schaltfläche geklickt wird.
Objekt erstellenErstellen Sie mit dem <div>-Tag ein Objekt in der HTML-Datei und weisen Sie ihm eine ID zu:
Beispiel-HTML
<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 id="collapse-button">CLOSE X</div>
</div>
</div>
</body>
Gestalten Sie das erstellte Objekt in der CSS-Datei mithilfe der ihm zugewiesenen ID.
Beispiel-CSS
#collapse-button {
position: absolute;
width: 75px;
height: 20px;
right: 10px;
top: 10px;
cursor: pointer;
}
Wie die Maximierung einer Anzeige ist die Minimierung ein asynchroner Vorgang, der exakt in dieser Reihenfolge abläuft:
- Die Minimierung wird mit dem Creative über die Methode
requestCollapseangefordert. - In dieser Anfrage wird das Ereignis
COLLAPSE_STARTgesendet, um dem Creative mitzuteilen, dass die Minimierungsanimation wiedergegeben werden soll (falls vorhanden). - Wenn die Minimierungsanimation vollständig wiedergegeben wurde, wird mit dem Creative über die Methode
finishCollapseeine Anforderung für den Abschluss der Minimierung gesendet. - In dieser Anfrage wird das Ereignis
COLLAPSE_FINISHgesendet, um dem Creative mitzuteilen, dass jetzt weitere Funktionen oder Animationen im minimierten Steuerfeld ausgeführt werden können.
<head>
<script type="text/javascript">
var isExpanded = false;
function expandStartHandler() {
// Maximierungsanimation wiedergeben
// 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() {
// Minimierungsanimation wiedergeben
// 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);
}
};