HTML5 HOCKEYSTICK EXPANDABLE BANNER v1.0

HTML5 HOCKEYSTICK EXPANDABLE BANNER v1.0

INHALT 1. VORAUSSETZUNGEN... 3 2. BESCHREIBUNG... 3 3. BANNER... 3 4. PANELS... 4 5. FALLBACK... 4 4. ANLEGEN DES HTML5 HOCKEYSTICK ADS... 4 2

1. VORAUSSETZUNGEN Vor Beginn der Umsetzung des Werbemittels sollte geprüft werden, ob dies die aktuellste Version des Dokuments ist. Nachfolgend der Link zu den aktuellsten Specs: http://origin.demo.eyeblaster.com/deutschland/creative_specs/dg/index.html?link=html5_h ockeystick 2. BESCHREIBUNG Ein HTML5 Hockystick besteht aus einem Loader (Banner) sowie den eigentlich sichtbaren Ad- Inhalten (Leaderboard und Sky), welche als Panels angelegt werden. Das Format wird in gekippter L-Form, in der Regel um die obere, rechte Ecke des Seitencontents positioniert. Alternativ wird dieses Format auch häufig von Vermarktern oder Mediaagenturen als Wallpaper bezeichnet. Der HTML5 Hockystick wird bei Sizmek im AdFormat HTML5 Expandable Banner als ONE-Tag-Lösung erstellt. Dies bedeutet, dass der Vermarkter das komplette Event in einem Redirect Tag erhält. Das Ad besteht aus einer index.html Datei für den Banner, 2 weiteren HTML-Dateien für die Panels Leaderboard und Sky sowie diversen Ad-Assets, welche in einer bestehenden Ordnerstruktur in einem Template zum Download angeboten werden (mehr dazu in den nachfolgenden Kapiteln). 3. BANNER Der Banner ist frei von sichbaren Elementen. Die index.html Datei im obersten Ordner des Templates wird als Loader des Ads verwendet. Neben der Initialisierung enthält sie bereits den notwendigen Javascript Code, um die Panels für das Leaderboard und den Sky automatisch zu expandieren:... function expandleaderboard(){ var paramobj = { panelname: "leaderboard" }; EB.expand(paramObj); } function expandsky(){ var paramobj = { panelname: "sky" }; EB.expand(paramObj); }... 3

Aufgrund der Tatsache, dass die Panels erst mit dem Upload des Werbemittels auf der Sizmek Platform angelegt werden, ist ein lokaler Test des Werbemittels, über den Aufruf der index.html Datei im Browser, nicht möglich. Dort wird dann nichts angezeigt, da der obige Code lokal keine Panels unter diesem Namen vorfindet. 4. PANELS Im Unterordner asset befinden sich je ein Ordner für die Panels Leaderboard und Sky. Es ist zu beachten, dass die HTML Dateien für die Panels zwingend in Unterordnern enthalten sein müssen, da mehrere HTML Dateien im Hauptverzeichnis nicht zulässig sind. In den in den Ordnern enthaltenen HTML Dateien ist bereits der notwendige Code zur Initialisierung und Verlinkung integriert. Es besteht die Möglichkeit die Animation in den Panels zu synchronisieren. Eine HTML5 Local Connection stellen wir gern auf Anfrage an creative_de@sizmek.com bereit. 5. FALLBACK Für den Hockeystick muss ein Fallback Image für das Leaderboard im Workspace Ordner hinterlegt werden. Die Abmessungen des Fallback Images sollten mit denen des Leaderboard Panels übereinstimmen. Ein weiteres Fallback für den Skyscraper kann leider nicht angegeben werden. 4. ANLEGEN DES HTML5 HOCKEYSTICK ADS Nachdem das Werbemittel erstellt wurde, muss es auf die Sizmek Platform geladen werden. Dazu muß zunächst der Workspace in einer zip-datei zusammengefasst werden. Anschliessend wird das Werbemittel auf platform.mediamind.com unter Manage -> Ads -> New Button -> Create New Ad erstellt. Im Folgenden sind folgende Einstellungen zu erledigen: 1. Vergeben eines eindeutigen Ad Namens. Dieser darf keine Sonder- oder Leerzeichen enthalten. Der im weiteren Verlauf bearbeitende Campaignmanager sollte anhand des Namens leicht erkennen können, um welches Ad es sich hierbei handelt. 2. Als Ad Format wird das Format HTML5 Expandable Banner ausgewählt. 3. Im Bereich Creative wird als Workspace Folder die zip-datei angegeben, welche über Select -> New -> Creative Asset -> Add -> Upload in einen beliebigen Ordner auf die Platform geladen werden kann. Eine geeignete Ordnerstruktur zum späteren Auffinden des Workspaces läßt sich ebenfalls über New -> Create New Folder erstellen. Das System erkennt automatisch die HTML Datei im obersten Ordner des Workspaces und verwendet diese als Startdatei. 4. Auswahl des Fallback Images aus dem Workspace als Default Image 5. Im Bereich Panels List werden über den Add Panel Button die beiden HTML-Dateien für Leaderboard und Sky aus dem Workspace angegeben. 4

6. Angabe der Panelnamen diese müssen mit denen im Code (Vergleich Kapitel 3) vorhandenen Panelnamen übereinstimmen, damit die Funktion EB.expand() funktionieren kann. 7. Für jedes Panel müssen folgende Einstellungen getätigt werden: a. Der Haken in der Checkbox Auto Expand on Mouse Over darf nicht gesetzt sein. b. Der Haken in der Checkbox Delayed Expansion darf nicht gesetzt sein. c. Die Einstellung Auto Retract When muss auf Never gestellt werden. d. Als Position Type muß Banner relative angegeben werden. e. Die Position in horizontaler und vertikaler Richtung kann über X und Y gesetzt werden. 8. Der Haken bei Show Single Panel at a Time darf nicht gesetzt sein. 9. Der Haken bei Auto Expand Default Panel when Ad is Loaded darf nicht gesetzt sein. Über den Save Button wird das Ad angelegt. 5