Anzeige auf einer Seite positionieren und Maximierungsrichtung festlegen
Anhand der zwei grundlegenden Funktionen eines Expanding-Creatives kann die Website das Objekt in Ihrer Datei ermitteln, das das minimierte Steuerfeld darstellt, und die Maximierungsrichtung erkennen. Da das Hauptobjekt Ihrer Datei größer ist als der Bereich des minimierten Steuerfelds und die Maximierung in jede Richtung erfolgen kann, ist es wichtig, dass der minimierte Bereich festgelegt wird, damit Ihre Anzeige auf der Seite korrekt dargestellt wird.
Wenn Ihre Anzeige auf einer Website erscheint, positioniert die Seite die Anzeige auf der Grundlage des von Ihnen festgelegten linken und oberen Pixelversatzes und passt die Größe Ihres Creatives an die Anzeigenfläche an. Anschließend wird die Maximierungsrichtung festgelegt. Richten Sie dazu Ihre Dateien entsprechend ein:
- In HTML erstellen Sie drei Steuerfelder:
- Hauptfeld: Enthält sowohl minimierte als auch maximierte Steuerfelder.
- 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, mit denen die Anzeigenposition und die Maximierungsrichtung festgelegt werden.
- Verwenden Sie im JavaScript die Enabler-Methode
setExpandingPixelOffsets, um das minimierte Feld auf das Placement der Anzeige auszurichten. Im Beispiel unten beträgt der Wert für den linken Offset 200 Pixel.
300 x 250 = minimiert
500 x 300 = maximiert
Um sicherzustellen, dass Ihre Anzeige bei der Bereitstellung in einer App richtig maximiert wird, müssen Sie Ihr Creative so einrichten, dass es entweder nach unten oder in den Vollbildmodus maximiert wird. Weitere Informationen dazu, wie Sie die Maximierung in den Vollbildmodus aktivieren
Erstellen Sie in der HTML-Datei drei Objekte mit <div>-Tags und weisen Sie ihnen anschließend eigene IDs zu.
Code-Snippet
<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.
- Das Hauptfenster muss dieselben Abmessungen wie das maximierte Steuerfeld haben und muss immer bei 0,0 positioniert werden.
- Die Position des minimierten Steuerfelds hängt von der Maximierungsrichtung ab:
- Nach rechts oder rechts/unten maximieren
- links = 0px
- oben = 0px
- Nach links oder links/unten maximieren
- links = Maximierte Steuerfeldbreite [minus] minimierte Steuerfeldbreite, z. B. 500 px - 300 px = 200 px
- oben = 0px
- Nach rechts/oben maximier
- links = 0px
- oben = Maximierte Steuerfeldhöhe [minus] minimierte Steuerfeldhöhe, z. B. 300 px - 250 px = 50 px
- Nach links/oben maximieren
- links = Maximierte Steuerfeldbreite [minus] minimierte Steuerfeldbreite, z. B. 500 px - 300 px = 200 px
- oben = Maximierte Steuerfeldhöhe [minus] minimierte Steuerfeldhöhe, z. B. 300 px - 250 px = 50 px
- Nach rechts oder rechts/unten maximieren
- Positionieren Sie das maximierte Steuerfeld immer bei 0,0.
#main-panel {
position: absolute;
left: 0px;
top: 0px;
width: 500px;
height: 300px;
}
#collapsed-panel {
position: absolute;
left: 200px;
top: 0px;
width: 300px;
height: 250px;
}
#expanded-panel {
position: absolute;
left: 0px;
top: 0px;
width: 500px;
height: 300px;
}
Legen Sie Pixel-Offsets für das minimierte Feld der Anzeige und die Größe des maximierten Felds fest. So lässt sich in Studio sowohl die Anzeigenposition auf der Webseite als auch die Maximierungsrichtung bestimmen. Verwenden Sie hierzu die Methode setExpandingPixelOffsets.
Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);
- Wie beim Festlegen des Stils für das minimierte Feld hängen die Werte für die Parameter
leftundtopvon der Maximierungsrichtung ab:- Nach rechts oder rechts/unten maximieren
- links = 0px
- oben = 0px
- Nach links oder links/unten maximieren
- links = Maximierte Steuerfeldbreite [minus] minimierte Steuerfeldbreite, z. B. 500 px - 300 px = 200 px
- oben = 0px
- Nach rechts/oben maximieren
- links = 0px
- oben = Maximierte Steuerfeldhöhe [minus] minimierte Steuerfeldhöhe, z. B. 300 px - 250 px = 50 px
- Nach links/oben maximieren
- links = Maximierte Steuerfeldbreite [minus] minimierte Steuerfeldbreite, z. B. 500 px - 300 px = 200 px
- oben = Maximierte Steuerfeldhöhe [minus] minimierte Steuerfeldhöhe, z. B. 300 px - 250 px = 50 px
- Nach rechts oder rechts/unten maximieren
- Legen Sie die Werte für
opt_expandedWidthundopt_expandedHeightentsprechend den Abmessungen des maximierten Steuerfelds fest.
// Kann vor dem INIT-Ereignis des Enablers aufgerufen werden.
Enabler.setExpandingPixelOffsets(
200, // linker Offset der maximierten Anzeige
100, // oberer Offset der maximierten Anzeige
700, // Breite der maximierten Anzeige
450); // Höhe der maximierten Anzeige