HTML5 Creative Specification für Advertising Creative

In diesem Dokument werden die Anforderungen und die API-Unterstützung für HTML5-Kreative in Creative beschrieben. Die -API unterstützt die Entwicklung von HTML5-Kreativen, deren Attribute zum Zeitpunkt der kreativen Bereitstellung konfiguriert werden können.

Umfang

Creative unterstützt HTML5-Banner mit nicht-Rich-Media-Kreativen, die innerhalb festgelegter Seitengrenzen angezeigt werden. Sie können die folgenden HTML5-Kreativtypen verwenden:

  • HTML5: unterstützt bis zu 5 Landingpage-URLs, die während der Erstellung und des Traffics von Kreativen konfiguriert werden können.

  • Flexible HTML5: Unterstützt bis zu 5 Landingpage-URLs, die während der kreativen Erstellung und des Traffics konfiguriert werden können. Außerdem können kreative Attribute während der kreativen Erstellung und des Traffics geändert werden.

Anforderungen

Anforderungen an Ordner und Komprimierung

  • Das Kreativ-Tool muss in einer ZIP-Datei (.ZIP-Format) verpackt sein. Verschachtelte ZIP-Dateien werden nicht unterstützt. Daher sollten Sie im äußeren komprimierten Ordner keinen komprimierten Ordner einschließen.

  • Die ZIP-Datei muss mindestens eine HTML-Datei enthalten - die HTML-Hauptanzeigedatei -, die einen Verweis auf die Creative JavaScript-Bibliothek enthält. Die HTML-Hauptdatei kann sich entweder im Stammordner oder in einem Unterordner befinden.

  • Die HTML-Hauptdatei kann beliebig benannt werden, sofern sie keine Sonderzeichen enthält. index.html wird jedoch empfohlen.

  • Alle unterstützenden Assets, die zum Rendern des endgültigen Kreativinhalts benötigt werden, müssen sich entweder im selben Ordner wie die HTML-Anzeigedatei oder in Unterordnern im Hauptordner befinden.

  • Schließen Sie keine Dateien in das Kreativ-Tool ein, auf die der Kreative nicht verweist.

Einschließen der Advertising Creative JavaScript-Datei

Die HTML-Hauptdatei - und keine anderen Dateien - müssen einen Verweis auf die JavaScript-AMOLibrary.js enthalten. Rufen Sie die Datei in der ersten Zeile des <head> Abschnitts mit der folgenden Adresse auf:

https://ads.everesttech.net/ads/static/local/AMOLibrary.js

Diese Datei enthält Funktionen, mit denen sichergestellt wird, dass das lokale Testen von Exit-Ereignissen problemlos erfolgt.

HTML5 Creative-Anforderungen

Unterstützung für Clickthrough-URLs in statischem HTML5

amo.registerClick(clkVar, clkUrl)

Registriert die Clickthrough-URLs und die zugehörigen Parameter, die zum Verweisen auf jede URL verwendet werden (als clickTag bezeichnet). Diese API informiert den Creative-Anzeigen-Server darüber, wo Klick-Tracking hinzugefügt werden soll. Mit dieser API können Sie bis zu fünf Klick-Tag-Variablen mit jeweils einer entsprechenden Landingpage-URL registrieren.

NOTE
Die statischen URLs, die Sie in das HTML5-Kreativ-Repository aufnehmen, werden nur zu lokalen Testzwecken verwendet und werden überschrieben. Wenn Sie ein HTML5-Kreativprojekt hochladen, definieren Sie die standardmäßige Landingpage für jede clickTag. Wenn Sie einem Werbeerlebnis ein hochgeladenes HTML5-Creative-Erlebnis zuweisen, können Sie optional die standardmäßige Landingpage für jede clickTag-Variable überschreiben und den URLs beim Speichern des Erlebnisses Creative Klick-Tracking hinzufügen.
Parameter
  • clkVar - Der Name der Click-Variablen (normalerweise „clickTag„), in doppelte Anführungszeichen gesetzt.

  • clkUrl - Die Landingpage-URL für diese Klick-Variable, eingeschlossen in doppelten Anführungszeichen.

Nutzung

Rufen Sie amo.registerClick() im Abschnitt <head> der HTML-Hauptdatei auf.

Beispiel

amo.registerClick("clickTag","http://www.example.com")

amo.onAdClick(clk, event)

Trigger des Exit-Ereignisses, das den Benutzer zur für die clickTag konfigurierten Landingpage weiterleitet. Während des lokalen Tests warnt diese Funktion Entwickler, ob die URL, die an die Funktion übergeben wird, registriert wurde.

Parameter
  • clkTag - Der Name der Klickvariablen, die Sie verwenden, um die Landingpage-URL mithilfe der amo.registerClick() zuzuweisen, eingeschlossen in einfachen Anführungszeichen.

  • event - (Optional) Das JavaScript-Klick-Ereignisobjekt. Dadurch werden die Koordinaten der Klicks aufgezeichnet, die zur weiteren Analyse der kreativen Leistung verwendet werden können.

Nutzung

Rufen Sie amo.onAdClick() im Abschnitt <body> der HTML-Hauptdatei auf.

Beispiele

amo.onAdClick('clickTag') ODER amo.onAdClick('clickTag',clickEvt)

Flexible kreative HTML5-Anforderungen

Unterstützung für Clickthrough-URLs im flexiblen HTML5

amo.registerClick(clkVar, clkUrl)

Registriert die Clickthrough-URLs und die zugehörigen Parameter, die zum Verweisen auf jede URL verwendet werden (als clickTag bezeichnet). Diese API informiert den Creative-Anzeigen-Server darüber, wo Klick-Tracking hinzugefügt werden soll. Mit dieser API können Sie bis zu fünf Klick-Tag-Variablen mit jeweils einer entsprechenden Landingpage-URL registrieren.

NOTE
Die statischen URLs, die Sie in das HTML5-Kreativ-Repository aufnehmen, werden nur zu lokalen Testzwecken verwendet und werden überschrieben. Wenn Sie ein HTML5-Kreativprojekt hochladen, definieren Sie die standardmäßige Landingpage für jede clickTag. Wenn Sie einem Werbeerlebnis ein hochgeladenes HTML5-Creative-Erlebnis zuweisen, können Sie optional die standardmäßige Landingpage für jede clickTag-Variable überschreiben und den URLs beim Speichern des Erlebnisses Creative Klick-Tracking hinzufügen.
Parameter
  • clkVar - Der Name der Click-Variablen (normalerweise „clickTag„), in doppelte Anführungszeichen gesetzt.

  • clkUrl - Die Landingpage-URL für diese Klick-Variable, eingeschlossen in doppelten Anführungszeichen.

Nutzung

Rufen Sie amo.registerClick() im Abschnitt <head> der HTML-Hauptdatei auf.

Beispiel

amo.registerClick("clickTag","http://www.example.com")

amo.onAdClick(clk, event)

Trigger des Exit-Ereignisses, das den Benutzer zur für die clickTag konfigurierten Landingpage weiterleitet. Während des lokalen Tests warnt diese Funktion Entwickler, ob die URL, die an die Funktion übergeben wird, registriert wurde.

Parameter
  • clkTag - Der Name der Klickvariablen, die Sie verwenden, um die Landingpage-URL mithilfe der amo.registerClick() zuzuweisen, eingeschlossen in einfachen Anführungszeichen.

  • event - (Optional) Das JavaScript-Klick-Ereignisobjekt. Dadurch werden die Koordinaten der Klicks aufgezeichnet, die zur weiteren Analyse der kreativen Leistung verwendet werden können.

Nutzung

Rufen Sie amo.onAdClick() im Abschnitt <body> der HTML-Hauptdatei auf.

Beispiele

amo.onAdClick('clickTag') ODER amo.onAdClick('clickTag',clickEvt)

Unterstützung für kreative Attribute im flexiblen HTML5

amo.registerAttribute(key, type, value)

Definiert Attribute der Kreativen, die beim Erstellen von Kreativen oder Erlebnissen geändert werden können. Sie können bis zu 20 kreative Attribute definieren, die zum Zeitpunkt der Kreativ- oder Erlebniserstellung konfiguriert werden können.

NOTE
Die in dieser Methode definierten Werte werden nur für die lokale Entwicklung verwendet und nicht in der Live-Schaltung von Anzeigen verwendet.
Parameter
  • key - Der alphanumerische Name des Attributs. Sie muss mit einem Buchstaben beginnen.

  • type - Der Typ des Attributs (TEXT oder IMAGE).

  • value - Der Wert des Attributs für Tests. Bei Attributen des Typs IMAGE muss der Wert der relative Pfad zur Bilddatei sein.

Nutzung

Rufen Sie amo.registerAttribute() auf, um ein kreatives Attribut, einen Typ und einen Wert während des Tests im lokalen Modus zu registrieren. Alle Bilddateien, die als Beispielwerte verwendet werden, sollten zusammen mit dem hochgeladenen Paket in die ZIP-Datei gepackt werden.

amo.attributes

Ein JSON-Objekt zum Abfragen der Namen und Werte der Variablen des kreativen Attributs. Die Objektschlüssel sind die Attributnamen und die Werte sind die Werte dieser Attribute.

Im lokalen Testmodus sind die Schlüssel-Wert-Paare die Paare, die von der amo.registerAttribute-API registriert werden. Für die Produktion müssen die Namen und Werte der kreativen Attributvariablen zum Zeitpunkt der kreativen Erstellung und des Handels konfiguriert werden.

Creative-Inhaltsanforderungen

Die meisten der in Advertising DSP verfügbaren Anzeigeaustauschprogramme haben die folgenden kreativen Anforderungen:

  • Alle Anzeigenbilder müssen von einem festen Rahmen umgeben sein.

  • Das Erweitern von Anzeigen ist nicht zulässig.

  • Die Landingpage muss in einem neuen Fenster geöffnet werden.

  • Die Landingpage-Domain und ihre Subdomains dürfen nicht länger als 35 Zeichen sein. Hinweis: Die endgültigen Landingpage-URLs werden in der DSP und nicht in den HTML5-Assets selbst definiert.

  • Alle Haftungsausschlüsse in Bezug auf das Angebot einer Anzeige müssen in der Anzeige selbst enthalten sein und nicht nur auf der Landingpage.

Beispielinhalt als JSON-Objekt und -Array

Beispielinhalt als JSON-Objekt

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
}

Beispielinhalt als JSON-Array

[{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
},

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-mobile-720x520.png",
"product_url": "http://adobe.com/"
}

]

Beispiel für HTML5 Creative

Beispiel für Ordnerstruktur (nach der Dekomprimierung)

  • index.html

  • /assets (Ordner)

    • bg.jpg (JPG-, PNG-, SVG- oder GIF-Bild)

Beispiel einer HTML-Datei (index.html) für HTML5-Kreative

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>

Beispiel einer HTML-Datei (index.html) für statische HTML5-Kreative

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  amo.registerClick("clickTag2","http://www.example2.com");
  amo.registerClick("clickTag3","http://www.example3.com");
  amo.registerClick("clickTag4","http://www.example4.com");
  amo.registerClick("clickTag5","http://www.example5.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>
recommendation-more-help
81c37de9-89dd-4749-9a04-e9f8c86dd51a