Anleitung zum Erstellen von HTML5-In-Page-Creatives

Polite Load in HTML5 einrichten (optional)

Was ist Polite Load?

Mit Polite Load wird das Laden weiterer Creative-Assets wie Bilder so lange verzögert, bis die Seite vollständig geladen wurde.

3-part polite load image: a) website partly loaded b) website fully loaded c) full ad appears including video
blue letter A Die Seite ist zu 20% geladen: Erste Inhalte werden angezeigt.
green letter b Die Seite ist zu 50 % geladen: Erste Inhalte bleiben, es erfolgen keine weiteren Aktionen.
red letter c Die Seite ist zu 100% geladen: Weitere Inhalte und Aktionen werden angezeigt.

In Studio ist es nicht erforderlich, Polite Load in Dateien zu verwenden, möglicherweise ist dies aber aufgrund der Spezifikationen des Publishers notwendig.

Wenn Sie diese Funktion verwenden, können Sie Ihr Creative mit einem anfänglichen Preload-Bild gestalten und warten, bis die Seite vollständig geladen ist. Danach können weitere Assets wie Bilder, Animationen oder Videos geladen werden.

Polite Load in Google Web Designer einrichten

Wenn Sie Creatives in Google Web Designer erstellen, müssen Sie keinen Code hinzufügen. Klicken Sie einfach im Bereich "Einstellungen" im Dialogfeld für Veröffentlichungen das Kästchen "Polite Load" an, wenn Sie die Datei lokal oder in Studio veröffentlichen:

Publish dialog in Google Web Designer with Polite Loading checked

Preload-Bild verwenden

Wenn Sie ein anfängliches Bild ausliefern möchten, während auf das Laden der Seite gewartet wird, können Sie den Handler handleAdInitialized verwenden. Weitere Informationen

Polite Load mit JavaScript einrichten

Fügen Sie den folgenden Code in Ihre JavaScript-Datei nach dem Code für die Enabler-Initialisierung ein.Mit diesem Code wird geprüft, ob die Seite geladen ist. Hierzu wird die Enabler-Methode isPageLoaded verwendet, die "true" oder "false" zurückgibt. Rufen Sie bei "true" eine benutzerdefinierte Funktion auf, die das Creative lädt, in diesem BeispielpoliteInit). Warten Sie bei "false" auf das Enabler-Ereignis PAGE_LOADED, bevor Sie politeInit aufrufen.

Laden Sie das Beispiel-Creative für Polite Load herunter und öffnen Sie dann DCRM_HTML5_inPage_Polite_300x600.html, um den erforderlichen Enabler-Code zu sehen.

Polite Load-Code-Snippet

if (Enabler.isInitialized()) {
  init();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}

// Wird ausgeführt, wenn der Enabler aktiviert ist
function init() {
  if (Enabler.isPageLoaded()) {
    politeInit();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
  }
};

// Wird ausgeführt, wenn die Seite vollständig geladen ist
function politeInit(){
  // Code hinzufügen, um geladene Bilder oder Animationen auszublenden und
 // Creative-Assets zu laden oder mit der Creative-Animation zu beginnen
};

Preload-Bild verwenden

Wenn Sie ein erstes Bild ausliefern möchten, während auf das Laden der Seite gewartet wird, können Sie das Preload-Bild laden und dann ausblenden, wenn das PAGE_LOADED-Ereignis empfangen wird. In den Beispieldateien hat das geladene BIld den Namen "loading.gif" und die dazugehörige Div-Element-ID ist "loading_image_dc".

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ü
9292721940573344349
true
Suchen in der Hilfe
true
true
true
true
true
74220
false
false