Sie können ein Expandable-Creative so einrichten, dass es in mehrere Richtungen maximiert wird, je nachdem, an welcher Position es auf einer Seite ausgeliefert wird. Sie können das Creative so programmieren, dass es seine Position erkennt und seine Maximierungsrichtung ermittelt. Wenn Sie beispielsweise die Funktion zur multidirektionalen Maximierung (MDE) aktiviert haben, kann das Creative nach rechts maximiert werden, wenn es links auf der Seite bereitgestellt wird, und nach links, wenn es rechts auf der Seite erscheint.
- In HTML erstellen Sie drei Steuerfelder:
- Hauptsteuerfeld: Enthält sowohl das maximierte als auch das minimierte Steuerfeld einschließlich der beiden Richtungen
- Minimiertes Steuerfeld: Enthält die Inhalte des minimierten Steuerfelds
- Maximiertes Steuerfeld: Enthält die Inhalte des maximierten Steuerfelds
- Geben Sie im CSS den Stil der drei Objekte an, um die Anzeigenposition und die Maximierungsrichtung festzulegen.
- In JavaScript:
- Legen Sie über die Enabler-Methode
setExpandingPixelOffsetsdie Offset-Werte für das minimierte Steuerfeld fest. Dieser Offset-Wert hat keine Auswirkung auf die lokale Testumgebung. Wenn die Anzeige aber ausgeliefert wird, wird der minimierte Teil der Anzeige bei 0, 0 angezeigt. Mit dieser Methode werden die CSS-EigenschaftenmarginLeftundmarginTopdes relativ positionierten Textkörperelements definiert. - Aktivieren Sie mit der Enabler-Methode
setIsMultiDirectionaldie multidirektionalen Maximierungen. - Verwenden Sie die Enabler-Methode
getExpandDirection, um die Maximierungsrichtung der Anzeige zu bestimmen, und passen Sie die Position und Animation des maximierten Felds entsprechend an.
- Legen Sie über die Enabler-Methode
Beispiel für das Layout des Bereichs |
700 x 350: Hauptsteuerfeld |
Erstellen Sie in der HTML-Datei drei Objekte mit <div>-Tags und weisen Sie dann die IDs zu.
Beispiel-HTML
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Add collapsed content here. -->
</div>
<div id="expanded-panel">
<!-- Add expanded content here. -->
</div>
</div>
</body>
Gestalten Sie die erstellten Objekte im CSS anhand der ihnen zugewiesenen IDs.
- Positionieren Sie das maximierte Steuerfeld immer bei 0, 0 und vergewissern Sie sich, dass die Abmessungen groß genug sind, um das minimierte Steuerfeld sowie alle möglichen Maximierungsrichtungen aufzunehmen. Berechnen Sie die Größe des Hauptsteuerfelds wie folgt:
- Hauptsteuerfeldbreite = Maximierte Steuerfeldbreite + (Maximierte Steuerfeldbreite - Minimierte Steuerfeldbreite)
- Hauptsteuerfeldhöhe = Maximierte Steuerfeldhöhe + (Maximierte Steuerfeldhöhe - Minimierte Steuerfeldhöhe)
- Beispiel
Unter Verwendung des obigen Bilds:- Breite = 500 Pixel + (500 Pixel - 300 Pixel) = 700 Pixel
- Höhe = 300 Pixel + (300 Pixel - 250 Pixel) = 350 Pixel
- Platzieren Sie den minimierten Steuerfeldbereich immer in der Mitte des Hauptsteuerfelds. Berechnen Sie diese Position wie folgt:
- Minimiertes Steuerfeld links = Maximierte Steuerfeldbreite [minus] Minimierte Steuerfeldbreite
- Minimiertes Steuerfeld oben = Maximierte Steuerfeldhöhe [minus] Minimierte Steuerfeldhöhe
- Beispiel
Unter Verwendung des obigen Bilds:- links = 500 Pixel - 300 Pixel = 200 Pixel
- oben = 300 Pixel - 250 Pixel = 50 Pixel
- Die Position des maximierten Steuerfelds hängt von der Maximierungsrichtung ab, muss jedoch dynamisch über JavaScript geändert werden. In diesem Beispiel wurden Klassen für jede mögliche Richtung hinzugefügt, u. a. für die Positionen links und oben. Später wird auf diese Klassen im JavaScript je nach der vom Enabler erkannten Richtung zugegriffen.
#main-panel {
position: absolute;
left: 0px;
top: 0px;
width: 700px;
height: 350px;
}
#collapsed-panel {
position: absolute;
left: 200px;
top: 50px;
width: 300px;
height: 250px;
}
#expanded-panel {
position: absolute;
width: 500px;
height: 300px;
}
.direction-tl {
left: 0px;
top: 0px;
}
.direction-tr {
left: 100px;
top: 0px;
}
.direction-bl {
left: 0px;
top: 200px;
}
.direction-br {
left: 100px;
top: 200px;
}
Legen Sie Pixel-Offsets für das minimierte Steuerfeld der Anzeige und die Größe des maximierten Steuerfelds fest. So kann Studio sowohl die Anzeigenposition auf der Webseite als auch die Maximierungsrichtung bestimmen. Nutzen Sie dafür die Methode setExpandingPixelOffsets nach der Enabler-Initialisierung:
Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);
- Wie bei der Anpassung des minimierten Steuerfelds müssen auch hier die Werte für die Parameter
leftundtopso angegeben werden, dass das minimierte Steuerfeld im Zentrum des Hauptsteuerfelds liegt. Berechnen Sie diese Positionen wie folgt:- links = Breite des maximierten Steuerfelds minus Breite des minimierten Steuerfelds
- oben = Höhe des maximierten Steuerfelds minus Höhe des minimierten Steuerfelds
- Wie die Werte für
opt_expandedWidthundopt_expandedHeightfür die MDE festgelegt werden, unterscheidet sich vom Festlegen der grundlegenden Maximierung. Statt sie so festzulegen, dass die Werte den Abmessungen des erweiterten Steuerfelds entsprechen, legen Sie sie entsprechend den Abmessungen des Hauptsteuerfelds fest. Berechnen Sie diese Werte wie folgt:opt_expandedWidth= Breite des maximierten Steuerfelds + (Breite des maximierten Steuerfelds - Breite des minimierten Steuerfelds)opt_expandedHeight= Höhe des maximierten Steuerfelds + (Höhe des maximierten Steuerfelds - Höhe des minimierten Steuerfelds)
Enabler.setExpandingPixelOffsets(
200, // linker Offset der maximierten Anzeige
100, // oberer Offset der maximierten Anzeige
700, // Breite der maximierten Anzeige
350); // Höhe der maximierten Anzeige
// Angabe, ob der maximierte Zustand als Ausgangspunkt dienen soll. Die Standardeinstellung ist "false" (falsch).
Enabler.setStartExpanded(false);
// Aktivieren Sie die multidirektionale Maximierung in der Richtung,
// die sich basierend auf der Position der Anzeige auf der Seite am besten eignet.
// Die Standardeinstellung ist "false" (falsch).
Enabler.setIsMultiDirectional(true);
if (Enabler.isInitialized) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
function enablerInitHandler() {
// Fügen Sie Code hinzu, um die Elemente des Creatives zu laden,
// nachdem Enabler initialisiert wurde.
}
Sie sollten die Position des maximierten Steuerfelds im Hauptsteuerfeld je nach der Maximierungsrichtung ändern. Legen Sie dazu die Maximierungsrichtung anhand der getExpandedDirection-Enabler-Methode fest und ändern Sie das Creative entsprechend, wenn das EXPAND_START-Ereignis ausgelöst wird. Im obigen CSS-Beispiel sind verschiedene Klassen für jede Maximierungsrichtung festgelegt. Im folgenden Snippet wird dem maximierten Steuerfeldobjekt je nach der Maximierungsrichtung ein className zugewiesen.
function expandAd(e) {
Enabler.requestExpand();
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START,
function() {
document.getElementById('expanded-panel').className = 'direction-' + Enabler.getExpandDirection();
// Fügen Sie Code für die gewünschte Maximierungsanimation hinzu.
Enabler.finishExpand();
});
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH,
function() {
// Fügen Sie Code hinzu, damit das maximierte Steuerfeld erscheint und Elemente geladen werden
// oder die Animation gestartet wird.
});
}
document.getElementById('expand-button').addEventListener('click', expandAd, false);
Beim lokalen Test des MDE-Creatives sehen Sie beim Maximieren der Anzeige alle möglichen Maximierungsrichtungen. Sie erscheinen in folgender Reihenfolge:
- tl: oben links
- tr: oben rechts
- bl: unten links
- br: unten rechts
Wenn Sie die Vorschau in Studio aufrufen, wird nur die Richtung angezeigt, die Studio erkennt. Wenn Sie für die verschiedenen Richtungen Tests durchführen und eine Vorschau sehen möchten, platzieren Sie das Creative auf dem Tab "Vorschau".