Technische Spezifikationen Display Technische Spezifikationen Display 1
inhalt anlieferung der Werbemittel Maximale Dateigrößen der standardformate in der Übersicht Technische Spezifikationen Smart Adserver Layer Ad - Spezifikationen HTML5 - Spezifikationen Flash - Spezifikationen Redirect - Spezifikationen 2
ANLIEFERUNG DER WERBEMITTEL Die Werbemittel bitte immer an die Adresse media@derwesten.de schicken. Betreffzeile: Advertiser Kampagnenname Informationen in der Mail: Kundenname Kampagnenname Buchungszeitraum Belegte Sites Werbeformate Ansprechpartner für Rückfragen 3rd Party Redirects, Zählpixel und Click-Commands bitte nur in einer.txt-datei als Anhang senden und nicht als Text einfügen zusätzlich benötigte Informationen bei Flash-Werbemitteln: Angabe der Flashversion Information über Actionscripte GIF oder JPG als Fallback im Format der gebuchten Werbeform Sniffer Code (falls vorhanden) Platzierung auf der Site Klick-URL wichtige Information zur Anlieferung von HTML5-Werbemitteln: Die Anlieferung erfolgt als Zip-Datei für jedes Bannerelement. Jede Zip-Datei enthält alle Objekte des Werbemittels oder des Bannerelements, ausgenommen extern geladene Libraries, Videos oder Fonts. In der Zip-Datei/-en muss eine index.html-datei als Startpunkt enthalten sein und alle eingebundenen Skripte sowie alle in der Zip-Datei/-en enthaltenen Objekte müssen relativ verlinkt sein. Die Mindestanlieferungszeit vor Kampagnenstart beträgt bei Standardwerbemitteln 3 und bei Sonderformaten 5 Werktage. Wir weisen darauf hin, dass als Abrechnungsgrundlage von Kampagnen stets die Zahlen aus unserem AdServer-System dienen und nicht durch etwaige Klauseln in einer Email geändert werden können. 3
Maximale DateigröSSen der Standardformate Format GröSSe max. (Pixel) GröSSe expanded max. (Pixel) gewicht GIF, JPG, REDIRECT, SWF *, HTML5 Superbanner 728x90 728x360 40 KB bis 100 KB Skyscraper 200x600 480x600 40 KB bis 100 KB Wallpaper Setzt sich aus Superbanner und Skyscraper (sticky) zusammen. Es gelten die jeweiligen Vorgaben. Medium Rectangle 300x250 600x500 40 KB bis 100 KB Billboard 950x250 40 KB bis 100 KB layer Ad 400x400 40 KB bis 100 KB banderole ad 770x250 40 KB bis 100 KB *) Bei SWF-Dateien bitte grundsätzlich eine Fallback-Grafik (JPG oder GIF) mitliefern. Weitere Informationen finden Sie auf der Seite http://www.derwesten.de/werbung/werbeformate/online-display 4
LAYER AD SPEZIFIKaTionen Video und Audio: Sound und Video sind erlaubt. Der Sound darf allerdings nur user-initiiert (onmouseover/ onclick) starten, nicht automatisch mit einer Animation. Ein Looping ist nicht gestattet. Bitte außerdem darauf achten, dass das Werbemittel (bei onclick-variante) ein gut sichtbares Symbol enthält, mit dem der Sound bei angemessener Lautstärke an und ausgeschaltet werden kann (z.b. Lautsprecher-Symbol). Positionierung: Bei Redirects bitte immer Positionierungsvariablen mitliefern. Besonderheiten: FC 1/d wmode=transparent Transparente Flächen dürfen nicht 100% transparent sein und können alternativ mit einem leichten Grauschleier hinterlegt werden. Sie dürfen nicht mit Schaltflächen versehen sein und müssen durchklickbar sein Es muss ein gut erkennbarer Close-Button ( X, Schließen, schliessen ) immer oben rechts vorhanden sein Muss automatisch nach 10 Sekunden schließen Kein Fake-Content gestattet Schließen-Befehl: Flash < Version 8 : on (release) { geturl("javascript: pub_ist_hd()"); } Flash >= Version 8 : on (release) { flash.external.externalinterface.call("pub_ist_hd"); } 5
HTML5 - SPEZIFIKATIONEN 1. Bannerformate Die folgenden Standards finden auf alle Formate mit fester Größe Anwendung, d.h. fester Höhe und Breite, analog den IAB-Werbemittelstandards für Standardwerbeformen, ausgenommen Werbemittel die den Inhalt der Webseiten überlagern, proportional oder frei skalieren. 2. Dateigröße HTML5 Werbemittel bestehen wie Webseiten aus mehreren Elementen, die nicht analog zu Flash in einem File zusammengeführt und komprimiert werden können. Diese sind: HTML Files CSS Libraries (Javascript, JQuery, etc.) Bilder Videos Damit der Aufbau der Webseite und des Werbemittels nicht unnötig verzögert wird, ist bei der Kreation zu beachten, dass die einzelnen Elemente des HTML5 Werbemittels sowohl hinsichtlich ihrer Anzahl als auch Dateigröße so klein wie möglich gehalten werden, um die Serverprozesse/Anfragen (Serverrequests) zu minimieren. Dazu sind Kompilierungsmethoden des Codes und Code-Optimierungen in einer Datei anzuwenden. Folgende Limits müssen eingehalten werden: HTML5-Werbemittel als *.zip-archiv inkl. Code und Bilder: bis 100 KB Redirect und Videos: max. 4 MB Dies ist durch Komprimierung und Optimierungsverfahren als auch durch sparsame Anwendung von Animationen und Einbindung externer Elemente wie Fonts und Bibliotheken einzuhalten, welche auch zu der Dateigröße dazu gerechnet werden. Unterverzeichnis-Strukturen sind zu vermeiden. 6
HTML5 - SPEZIFIKATIONEN 3. Klicktag Die Schreibweise für Klicktags lautet: clicktag Die Schreibweise für Multi-Klicktags lautet: clicktag, clicktag1, clicktag2 <n> Die Folgenden Codezeilen sind in das HTML5-Werbemittel zur Übergabe der Klicktags zu integrieren. Die Funktion liefert alle GET Parameter zurück, die an die Datei übergeben werden: <script> var geturiparams = function() { var query_string = {}; var query = window.location.search.substring(1); var parmsarray = query.split('&'); if(parmsarray.length <= 0) return query_string; for(var i = 0; i < parmsarray.length; i++) { var pair = parmsarray[i].split('='); var val = decodeuricomponent(pair[1]); if (val!= '' && pair[0]!= '') query_string[pair[0]] = val; } return query_string; }(); </script> Beispiel HTML und Zuweisung der Links: 2 HTML Links ohne zugewiesene Links: <a href="#clicktag" id="clicktag">iab clicktag</a> <a href="#clicktag2" id=" clicktag2">iab clicktag</a> 7
HTML5 - SPEZIFIKATIONEN Mit diesen Javascript Zeilen lassen sich dann die Klicktags den HTML Elementen zuweisen: <script> document.getelementbyid('clicktag').setattribute('href', geturiparams.clicktag); document.getelementbyid('clicktag').setattribute('target', geturiparams.target); document.getelementbyid('clicktag2').setattribute('href', geturiparams.clicktag2); document.getelementbyid('clicktag2').setattribute('target', geturiparams.target2); </script> Funktionstest der clicktag-get-parameter für Übergabe an das Werbemittel Die Werbemittel sollen von der Kreativagentur auf funktionierende clicktag-übergabe getestet werden, damit unnötige Feedbackschleifen ausgeschlossen werden können. Test: html5werbemittel.html?clicktag=%landingpage% %LANDINGPAGE% ist mit einer Testzielseite zu ersetzen und muss URL-encoded übergeben werden (encodeuricomponent-funktion) 4. Backupimage, Browserkompatibilität Sollte ein Browser ein spezielles Feature oder eine verwendete Library nicht unterstützen, welches im Werbemittel Anwendung findet, so soll ein im Werbemittel definiertes Fallback JPG/GIF ausgespielt werden. Wenn das Werbemittel zum Beispiel nicht von IE 9 unterstützt wird ist von der Agentur vorzusehen, dass in diesem Browser das Fallback angezeigt wird. Die Werbemittel sind seitens der Kreativagentur auf allen gängigen Browsern zu testen und etwaige auszuschließende Browser dem Vermarkter mitzuteilen. 5. Grafikkomprimierung Grafiken sind hinsichtlich der Dateigröße zu optimieren. Die Verwendung von PNG-Crusher und der Einsatz von skalierbaren Vektorgrafiken wird empfohlen. 8
HTML5 - SPEZIFIKATIONEN 6. Video Videos in HTML5 Werbemitteln werden über den Tag <video></video> eingebunden. Ads mit Videos sind mit einem Previewbild (poster) zu versehen, das Video startet sobald es geladen ist bzw. durch User Interaktion auf den meisten mobilen Endgeräten. Zu beachten ist, dass auf Videos auf mobilen Endgeräten keine clicktags gelegt werden können. Der clicktag muss auf einer Fläche außerhalb des Videos hinterlegt werden. Das Video muss hinsichtlich Qualität und Dateigröße optimiert werden und ist in einer geeigneten Serverumgebung zu streamen. max. Video-Dateigröße = 4 MB Das Video ist sowohl in H264/mp4 als auch in VP8/WebM zur Verfügung zu stellen. Codebeispiel: <video controls height='640' width='360'> <source src='yourvideo.mp4' type='video/mp4' /> <source src='yourvideo.webm' type='video/webm' /> 7. Animation </video> Bei Animationen ist darauf Acht zu geben, dass diese den Client CPU nicht unnötig belasten. Mehrere parallel laufende Animationen und überlappende transparente Grafiken sind zu vermeiden. Der Einsatz von CSS3 oder Javascript Animationen ist mit Bedacht auf die CPU und GPU Auslastung zu wählen. 8. Anlieferung Die Anlieferung des HTML5-Werbemittels erfolgt als Zip-Datei für jedes Bannerelement. Z.B. ein Wallpaper besteht aus 2 Bannerelementen, 2 Zip-Dateien wären nötig. Jede Zip-Datei enthält alle Objekte des Werbemittels oder des Bannerelements, ausgenommen extern geladene Libraries, Videos oder Fonts. In der Zip-Datei/-en muss eine index.html-datei als Startpunkt enthalten sein und alle eingebundenen Skripte sowie alle in der Zip-Datei/-en enthaltenen Objekte müssen relativ verlinkt sein. Alternativ kann ein Redirect angeliefert werden. Auch hier gelten alle o.g. Anforderungen, z.b. Dateigröße, Fileanzahl. 9
flash spezifikationen (Achtung: Flash Elemente werden von einigen Browsern standardmäßig nicht unterstützt.) Technologie Wir empfehlen alle Flash Versionen größer gleich 8. Bei Flash Version 10 ist zu beachten, dass es zu Problemen im IE7 kommen kann, wenn der Pop-Up-Blocker aktiviert ist. Es bedarf immer einer Anlieferung eines Fallbacks (jpg, gif), damit bei nicht aktiviertem Flash-Plugin dem User trotzdem ein Werbemittel angezeigt wird. Alle Werbemittel (außer Layer Ads) müssen wmode=opaque eingestellt sein. Bitte keine URLs fest in das Flash-Werbemittel einbauen. Transparente Elemente müssen durchklickbar sein. Klickbarkeit ActionScript 2 Klickbare Flächen müssen als Button definiert werden. Genutzt wird das Actionscript geturl: on (release) { geturl(_root.clicktag, _root.target); } ActionScript 3 (Flash 9 und 10) Multi-Klickbarkeit var clicktag:string=root.loaderinfo.parameters.clicktag; var target:string=root.loaderinfo.parameters.target; // Funktion ausgeführt als Antwort auf das Ereignis function onclic(pevt:event):void { var redirect:urlrequest = new URLRequest( clicktag ); navigatetourl (redirect, target); } Button_btn.addEventListener(MouseEvent.CLICK, onclic); // Button_btn ist ein Beispiel für einen vorhandenen Schaltflächennamen im Werbemittel Bei Bannern, die mehrere Schaltflächen definiert haben, gilt die Abfolge clicktag1, clicktag2, clicktag3 beginnend mit clicktag1. Maximal 5 Schaltflächen sind erlaubt 10
REDIRECT - SPEZIFIKATIONEN Alle auszuliefernden Skripte, auch nachträglich geladene (3rd-Party-)Skipte, müssen HTTPS fähig sein. Bitte achten Sie daher darauf, dass die Redirects auch in verschlüsselten Bereichen (https://) ausgeliefert werden können. Redirects, Zählpixel und Click-Commands bitte nur als.txt Datei versenden um Konflikte mit dem Sicherheits-System zu vermeiden. Redirects müssen positionierbar sein. Der Wmode muss auf opaque gesetzt sein (wmode=opaque) Ausnahme: Layer Ads (wmode=transparent). Tandem Ads (auch Wallpaper) bitte immer in zwei Teilen anliefern, wobei beide Teile positionierbar sein müssen. Hierzu bitte immer die Positionierungsvariablen mitliefern. Die Verlinkung muss ein neues Fenster öffnen. Es muss eine Klickzählung durch Einsetzen unseres Click-Makros gewährleistet sein. Das Streuen von Cookies ist nicht erlaubt. Redirects müssen einen Timestamp-Parameter enthalten (Cachebuster). Es gelten auch für Redirects unsere Spezifikationen für die Werbemittel. 11