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.htmlwird 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.
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 deramo.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.
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 deramo.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.
Parameter
-
key- Der alphanumerische Name des Attributs. Sie muss mit einem Buchstaben beginnen. -
type- Der Typ des Attributs (TEXToderIMAGE). -
value- Der Wert des Attributs für Tests. Bei Attributen des TypsIMAGEmuss 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>