Anleitung zur Erstellung von HTML5-Floating-Creatives

HTML5-Enabler hinzufügen

Der Enabler ist die zentrale Codebibliothek von Studio. Er ist so etwas wie das Gehirn Ihres Creatives. Sämtliche Komponenten und API-Aufrufe müssen den Enabler durchlaufen. Die Enabler-Bibliothek ist eine für alle Rich Media-Creatives erforderliche Komponente. Durch das Hinzufügen des Enablers stellen Sie automatisch sicher, dass Ihr Creative:

  • die Standard-Tracking-Funktion für Messwerte wie Anzeigedauer, Anzahl der Impressionen, interaktive Zeit und weitere Standardmesswerte enthält
  • komplexere Merkmale wie Video- und Maximierungsfunktionen bewältigen kann.
Wenn Sie eine Anzeige mithilfe von Google Web Designer erstellen, wird der Enabler automatisch beim Auswählen der Umgebung „Display & Video 360“ hinzugefügt. Es ist nicht nötig, den nachstehenden Code hinzuzufügen.

Enabler hinzufügen

Fügen Sie ins <head>-Tag Ihrer HTML-Datei ein Skript-Tag ein, das auf den Enabler verweist:

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

Dieses liefert ein Singleton-Objekt im globalen Namespace mit dem Namen Enabler. Wenn Sie damit Methoden aufrufen möchten, führen Sie Aufrufe für Enabler.isInitialized(), Enabler.exit(), und so weiter aus.

Größe des Creatives festlegen

Im Gegensatz zu Bildern oder Videos haben HTML-Dokumente keine eigene Größe. Damit Ihre Anzeige in der richtigen Größe ausgeliefert wird, fügen Sie der HTML-Datei im Abschnitt „head“ ein Meta-Tag für die Anzeigengröße hinzu.

Kopieren Sie das Beispiel-Meta-Tag unten und ändern Sie die Breite und Höhe entsprechend der Creative-Größe.

Beispiel-Meta-Tag für die Anzeigengröße 300 × 250

<meta name="ad.size" content="width=300,height=250">

Optional: Flags für Expandable-Anzeigen einrichten

Es gibt verschiedene Methoden, mit denen sich das Verhalten von Expandable-Anzeigen steuern lässt. Wenn Sie eine davon verwenden möchten, fügen Sie sie vor dem Enabler-Initialisierungscode unten ein. Die folgenden Methoden stehen zur Auswahl:

  • Enabler.setExpandablePixelOffsets(left:number, top:number, optisch_expandedWidth:number, opt_expandedHeight:number)
    Legt für die Maximierung von Anzeigen den Versatz im Anzeigenbereich fest.
  • Enabler.setIsMultiDirectional(value:Boolesch)
    Die Anzeige lässt sich in mehr als eine Richtung maximieren.

  • Enabler.setStartExpanded(startExpanded:Boolean)
    Wenn die Anzeige geladen wird, wird die Erweiterung bereits geöffnet. Sie müssen also nicht warten, bis sie maximiert wird.

    Im Studio HTML5 SDK finden Sie weitere Informationen zu diesen Methoden.

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“ erfolgt der Aufruf zum Start der Funktion, in diesem Beispiel enablerInitHandler(). Bei „false“ wird ein Fallback-Aufruf ausgeführt, der auf das INIT-Ereignis des Enablers wartet.

// If true, start function. If false, listen for INIT.
window.onload = function() {
  if (Enabler.isInitialized()) {
    enablerInitHandler();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
  // Start polite loading, or start animation,
  // load in your image assets, call Enabler methods,
  // and/or include other Studio modules.
}

Sobald der Enabler initialisiert ist, können Sie die Animation starten, Ihre Bild-Assets laden, Tracking-Methoden aufrufen oder weitere Studio-Module einbinden.

Enabler aktualisieren

Wenn eine neue Version des Enablers veröffentlicht wird, sehen Sie auf der Benutzeroberfläche von Studio eine Warnmeldung mit dem Hinweis, dass die Enabler-Version Ihres Creatives veraltet ist.

War das hilfreich?

Wie können wir die Seite verbessern?

Benötigen Sie weitere Hilfe?

Mögliche weitere Schritte:

Suche
Suche löschen
Suche schließen
Hauptmenü
15965855162730422819
true
Suchen in der Hilfe
true
true
true
true
true
74220
false
false