Bei einem HTML5-Expandable-Creative handelt es sich um eine Expandable-Anzeige mit zwei Größen: die ursprünglich minimierte Form und die dynamische Vollbildversion. Ein HTML5-Expandable-Creative kann auf Desktop-Computern, auf Mobilgeräten und in Apps ausgeliefert werden.
Im minimierten Zustand ist ein HTML5-Expandable-Creative klein genug für ein standardmäßiges Anzeigen-Placement auf einer Desktop- oder mobilen Website oder in einer mobilen App. Die Maximierung des Creatives erfolgt außerhalb des Bereichs, den es im minimierten Zustand einnimmt. Das Creative kann also entweder einen Teil des Browserfensters auf einem Desktop-Computer oder den Bildschirm eines Mobilgeräts ausfüllen und ist dabei immer zentriert. Die Anzeige wird maximiert, wenn ein Nutzer auf eine Schaltfläche für den Vollbildmodus klickt.
In diesem Artikel wird beschrieben, wie HTML5-Creatives mit dem HTML5 SDK von Studio in den Vollbildmodus maximiert werden.
Enabler hinzufügen und auf dessen Initialisierung warten
Der Enabler ist die zentrale Codebibliothek von Studio und für alle Rich Media-Creatives erforderlich. Fügen Sie dem <head>-Tag Ihrer HTML-Datei folgendes Skript-Tag hinzu:
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
Auf die Initialisierung des Enablers warten
In der Anzeige sollte vor der Initialisierung des Enablers keine Aktion automatisch ausgeführt werden. Damit wird sichergestellt, dass alles korrekt geladen ist und auf die Enabler-Methoden zugegriffen werden kann, bevor ein Nutzer mit der Anzeige interagiert.
Überprüfen Sie im JavaScript-Code mithilfe der Methode isInitialized des Enablers, ob dieser initialisiert wurde. Die Methode gibt "true" oder "false" zurück. Bei "true" tätigen Sie den Aufruf zum Start der Funktion, in diesem Beispiel enablerInitHandler(). Führen Sie bei "false" einen Fallback-Aufruf aus, der auf das INIT-Ereignis des Enablers wartet.
Sobald der Enabler initialisiert ist, können Sie eine Animation starten, Bildassets laden oder Tracking-Methoden aufrufen.
// Bei "true" Funktion starten. Bei "false", auf INIT warten.
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
// Code hinzufügen, um eine Anzeigenanimation zu starten, Bilder zu laden, Enabler-Methoden aufzurufen oder
// Polite Load zu verwenden.
}
Mit Polite Load wird das Laden von Creative-Assets so lange verzögert, bis die Seite des Publishers geladen wurde. Warten Sie mit dem Einrichten von Polite Load, bis der Enabler initialisiert wurde, und rufen Sie dann die Methode isPageLoaded des Enablers auf. Ersetzen Sie die Funktion enablerInitHandler oben durch folgenden Code:
function enablerInitHandler() {
if (Enabler.isPageLoaded()) {
politeLoadHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.PAGE_LOADED,
politeLoadHandler);
}
}
function politeLoadHandler() {
// Code hinzufügen, um eine Anzeigenanimation zu starten oder Bilder zu laden.
}
Falls Ihr Creative eine Animation enthält, die automatisch wiedergegeben wird, möchten Sie vermutlich, dass gewartet wird, bis der Betrachter soweit gescrollt hat, dass er die Anzeige sieht, bevor die Animation gestartet wird. Rufen Sie die Methode isVisible des Enablers auf, damit die Sichtbarkeit überprüft wird.
Ersetzen Sie die Funktion politeLoadHandler durch folgenden Code:
function politeLoadHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Code hinzufügen, um eine Anzeigenanimation zu starten oder Bilder zu laden.
}
Ersetzen Sie die Funktion enablerInitHandler durch folgenden Code:
function enablerInitHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// Code hinzufügen, um eine Anzeigenanimation zu starten oder Bilder zu laden.
}
In den Vollbildmodus maximieren und Vollbildansicht minimieren
Expandable-Creatives werden in alle Richtungen maximiert, sodass sie den Bildschirm unabhängig von dessen Größe komplett ausfüllen. Der Maximierungsvorgang setzt sich aus folgenden Schritten zusammen. Klicken Sie auf den jeweiligen Schritt, damit weitere Details und ein Beispielcode angezeigt werden.
Rufen Sie Enabler.queryFullscreenSupport() auf, um zu ermitteln, ob eine Maximierung in den Vollbildmodus möglich ist.
Beispielcode zur Überprüfung, ob die Maximierung in den Vollbildmodus unterstützt wird
// Variable erstellen, um die Vollbildunterstützung zu speichern.
var fullscreenSupported = false;
// Listener hinzufügen, damit das Ergebnis ausgegeben wird.
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_SUPPORT,
function(event) {
fullscreenSupported = event.supported;
});
Enabler.queryFullscreenSupport();
// Ausgeblendete Schaltfläche für den Vollbildmodus einblenden, nachdem die Vollbildunterstützung bestätigt wurde.
if (fullscreenSupported) {
// Bei der Codezeile unten entspricht der Name der Schaltfläche "fullscreenButton".
fullscreenButton.style.display = 'block';
}
Das Creative wird automatisch auf die maximal mögliche Größe erweitert. Sie haben die Möglichkeit, die Größe des Bildschirms zu überprüfen und dann eine benutzerdefinierte Größe festzulegen, auf die das Creative maximiert werden soll. Mithilfe von Enabler.queryFullscreenDimensions() erfahren Sie, wie groß der Bildschirm ist.
Beispielcode zur Überprüfung der Bildschirmgröße vor der Maximierung
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS,
function(event) {
Enabler.requestFullscreenExpand();
});
fullscreenButton.addEventListener('click',
function(event) {
Enabler.queryFullscreenDimenions();
}, false);
Rufen Sie zur Maximierung auf die gesamte Bildschirmgröße Enabler.requestFullscreenExpand() auf. Warten Sie dann auf das Ereignis FULLSCREEN_EXPAND_START. Falls die Maximierung animiert werden soll, rufen Sie Ihre benutzerdefinierte Animationsmethode in diesem Ereignis-Handler auf.
Beispielcode für die Maximierung in den Vollbildmodus
Enabler.requestFullscreenExpand();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Optional) Code hinzufügen, um die benutzerdefinierte Maximierungsanimation zu starten.
// Stattdessen Enabler.finishFullscreenExpand(); aufrufen, falls keine Animation eingesetzt wird.
Enabler.finishFullscreenExpand();
});
Wenn Sie möchten, dass das maximierte Creative eine benutzerdefinierte Größe wie etwa 1.280 x 1.024 hat, geben Sie stattdessen die gewünschten Werte für Breite und Höhe an:
Beispielcode zur Maximierung auf eine benutzerdefinierte Größe
Enabler.requestFullscreenExpand(1280, 1024);
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// (Optional) Code hinzufügen, um die benutzerdefinierte Maximierungsanimation zu starten.
// Stattdessen Enabler.finishFullscreenExpand(); aufrufen, falls keine Animation eingesetzt wird.
Enabler.finishFullscreenExpand();
});
Wenn die Maximierung abgeschlossen ist, rufen Sie Enabler.finishFullscreenExpand() auf. Warten Sie dann auf das Ereignis FULLSCREEN_EXPAND_FINISH.
Falls Sie eine Maximierungsanimation verwenden, rufen Sie diese Methode nach abgeschlossener Animation auf. Wird keine Animation genutzt, rufen Sie diese Methode im Handler für das Ereignis FULLSCREEN_EXPAND_START auf. Siehe Beispiel oben
Beispielcode für das Beenden der Maximierung
Enabler.finishFullscreenExpand();
// Variable erstellen, um den Maximierungszustand nachzuverfolgen.
var isFullscreen = false;
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
function(event) {
isFullscreen = true;
});
Damit sich das Creative minimieren lässt, benötigen Sie zunächst im maximierten Creative eine Schaltfläche zum Schließen. Rufen Sie zum Starten der Minimierung Enabler.requestFullscreenCollapse() auf. Warten Sie dann auf das Ereignis FULLSCREEN_COLLAPSE_START. Falls die Minimierung animiert werden soll, rufen Sie Ihre benutzerdefinierte Animationsmethode in diesem Ereignis-Handler auf.
Beispielcode für das Starten der Minimierung
Enabler.requestFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
function(event) {
// (Optional) Code hinzufügen, um die benutzerdefinierte Minimierungsanimation zu starten.
// Stattdessen Enabler.finishFullscreenCollapse(); aufrufen, falls keine Animation eingesetzt wird.
Enabler.finishFullscreenCollapse();
});
Wenn die Minimierung abgeschlossen ist, rufen Sie Enabler.finishFullscreenCollapse() auf. Warten Sie dann auf das Ereignis FULLSCREEN_COLLAPSE_FINISH.
Falls Sie eine Minimierungsanimation verwenden, rufen Sie diese Methode nach abgeschlossener Animation auf. Wird keine Animation genutzt, rufen Sie diese Methode im Handler für das Ereignis FULLSCREEN_COLLAPSE_START auf. Siehe Beispiel oben
Beispielcode für das Beenden der Minimierung
Enabler.finishFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
function(event) {
// Im Schritt "Maximierung abschließen" erstellte Variable angeben.
isFullscreen = false;
});