Zur Maximierung Ihres Creatives erstellen Sie ein Objekt, das die Maximierung bei der Interaktion mit dem Nutzer steuert. Sie können eine Maximierung bei Klick oder Mouseover festlegen. Das Beispiel in diesem Artikel zeigt, wie Sie festlegen, dass das Creative maximiert wird, wenn auf einen beliebigen Bereich des minimierten Steuerfelds geklickt wird.
Schaltfläche erstellen
Erstellen Sie in der HTML ein <div>-Element und weisen Sie ihm eine ID zu, beispielsweise "expand-button".
Fügen Sie das neue div-Element mit der ID "expand-button" hinzu.
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Hier Content für minimierte Anzeige einfügen -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Hier Content für maximierte Anzeige einfügen -->
</div>
</div>
</body>Schaltflächenstil einrichten
Richten Sie den Stil des Objekts ein, das Sie mit der CSS erstellt haben, und verwenden Sie dabei die ID "expand-button".
BeispielcodeLegen Sie für die Schaltfläche mithilfe der CSS dieselbe Größe fest wie für das minimierte Steuerfeld und machen Sie es unsichtbar.
#expand-button {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
cursor: pointer;
}Maximierungscode hinzufügen
Die Maximierung einer Anzeige ist ein asynchroner Vorgang, der exakt in dieser Reihenfolge abläuft:
- Die Maximierung wird mit dem Creative über die Methode
requestExpandangefordert. - In dieser Anfrage wird das Ereignis
EXPAND_STARTgesendet, um dem Creative mitzuteilen, dass die Maximierungsanimation wiedergegeben werden soll (falls vorhanden). - Wenn die Maximierungsanimation vollständig wiedergegeben wurde, wird mit dem Creative über die Methode
finishExpandeine Anforderung für den Abschluss der Maximierung gesendet. - In dieser Anfrage wird das Ereignis
EXPAND_FINISHgesendet, um dem Creative mitzuteilen, dass jetzt weitere Funktionen oder Animationen im maximierten 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() {
// 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>
Optional: Creative beim ersten Ladevorgang automatisch maximieren
Einige Publisher stimmen der automatischen Maximierung von Creatives zu, wenn die Anzeige das erste Mal auf einer Seite geladen wird. Sie können diese Funktion mit der setStartExpanded-Methode des Enablers einrichten.
expandStartHandler ein. Diese Methode kann vor dem Enabler-Ereignis INIT aufgerufen werden.Enabler.setStartExpanded(true);