Transkript

1 Technische Spezifikationen HTML 5 Ads (Stand 2016) Allgemeine Angaben Bei der Anlieferung von Werbemitteln sollten grundsätzlich Kundennamen, Kampagnennamen und Buchungszeitraum angegeben werden. Bei Layern ist ein deutlicher Close-Button zwingend. Fake-Closebuttons sind nicht erlaubt. Der Layer sollte sich nach spätestens 15 Sekunden von selbst schließen. Gestreamte Inhalte können direkt starten. Für den User wäre eine Start-Stopp-Funktion des gestreamten Inhalts optimal. Jedoch sollte der Ton nicht direkt starten, sondern erst auf Userinteraktion beginnen. WICHTIG Bitte die Werbemittel bis spätestens drei Werktage vor Kampagnenstart an banner@adcommunications.de senden. Für weitere Fragen steht Ihnen Ihr Ansprechpartner Name: Pavo Ivkovic Position: Produkt- und Trafficmanagement Telefon: Fax: p.ivkovic@adcommunications.de zur Verfügung. [1]

2 Werbeformate Wir arbeiten mit den bewehrten Standards des OVK und halten die Richtlinien des BVDW zur Erstellung von HTML5-Werbemitteln sinnvoll, wodurch wir eine standardisierte Nutzung der Werbemittel ermöglichen. Werbeform Formate (Pixel) Adbundle 120x600, 300x250, 728x90 Banderole Ad 770x250 Billboard 700x250 bis 900x250 Expandable Billboard Breite 700 bis 900, Höhe 250 bis 500 Fireplace Seitenspezifischx90px & 2x 160x600px Fireplace mit Video Seitenspezifischx90px & 2x 160x600px Floor Ad Bis 1200x200 Fullsize-Banner 468x60 Halfpage Ad 300x600 Interstitial fullscreen Interstitial mit Video fullscreen Super Banner 728x90 Layer 800x600 Medium Rectangle 300x250 Pop Up/Pop Under 800x600 Expandable Pushdown Ad 728x90 zu 728x300 Sidekick Ad 200x600 zu max Viewport Sitebar Ad mind. 1px zu max Viewport Skyscraper/Wideskyscraper 120/160x600 Expandable Skyscraper 120/160x600 Tandem Ad 160x600 & 400x400 Triple Ad 728x90 & 160x600 & 300x250 Wallpaper 728x90px & 120/160/200x600 Expandable Wallpaper 728x90 & 160x600 zu 600x600 [2]

3 Anlieferung Die Anlieferung des HTML5 Werbemittels erfolgt als Zip-Datei, die alle Elemente des Werbemittels enthält, ausgenommen extern geladene Libraries, Videos oder Fonts. In der Zip Datei muss eine index.html Datei als Startpunkt enthalten sein und alle eingebundenen Skripte sowie alle in der Zip-Datei enthaltenen Elemente müssen relativ verlinkt sein. Alternativ kann ein Redirect angeliefert werden. Auch hier gelten alle o.g. Anforderungen, z.b. Dateigröße, Fileanzahl. In this article: HTML5 creative specifications - how HTML5 creatives are structured - how HTML5 creatives have to be zipped to work in Smart AdServer - which file formats can be used in HTML5 creatives - how the pricing works Inside the HTML5 creative. Here is a list of items you will find in most HTML5 creatives. - a main html file, typically named "index.html" - the assets: image files (e. g. png), video files (e. g. mp4) etc. - a css file - a javascript file Keep in mind: If the HTML5 creative is served in a secure context, the HTML5 creative must load libraries (javascript file, css file, etc.) and any other resources with https. Check all the URLs inside the HTML5 creative and make sure that libraries and resources are called with https. Otherwise, browsers will issue a security warning and ad delivery will fail. HTML5 ZIP file Before you upload an HTML5 creative in Smart AdServer's user interface, please bundle it into a ZIP file following these rules: - Name the main html file "index.html" (without the quote characters) - Place the index.html file into the root of the ZIP file (do not place it in a sub-folder) - Place the assets into sub-folders or into the root of the ZIP file; if you choose sub-folders, do not compress them - Only use assets used by the HTML5 creative (do not use "orphan" assets) - Keep the ZIP file as light as possible (read about best practices here). [3]

4 File formats supported in Smart AdServer: File format HTML, CSS, Javascript Image Flash Video/Audio/Playlist Other File name extension html, css, js jpg, jpeg, png, gif swf, flv mp4, m4v, wmv, m4a, avi, webm, 3gp, ogg, mp3, aac, ogv, m3u8 txt, zip, xml For HTML5 video assets, the most common formats are H.264/MP4 and VP8/WebM. At a minimum, HTML5 video should be transcoded into these two formats. For more information about video formats, read the IAB's recommendation (page 15). Maximum file size: For the maximum file size of the compressed ZIP file (including index.html, css, js, assets), there are two types of limits: - the maximum size the user interface allows you to upload; the limit is 30 MB for all Smart AdServer customers; when you try to upload a heavier ZIP file in an insertion, the user interface will reject the file [4]

5 Click counting in HTML5 creatives This article covers how Smart AdServer's latest technology allows you to count clicks in HTML5 creatives. This solution follows the. Click counting library In the creative's main file (index.html), insert the following script within the <head> section: <script src="//ns.sascdn.com/diff/templates/js/banner/sasclicktag-3.0.js"> ClickTag variable <!DOCTYPE html> <html> <head> <title>html5 multi clicktag</title> <script src="//ns.sascdn.com/diff/templates/js/banner/sasclicktag-3.0.js"> <meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1.0"> <style> body{width:300px;height:600px;margin:0;padding:0; #main-container{width:300px;height:600px;cursor:pointer; #click-area1{background-color:red;height:150px;display:block; #click-area2{background-color:blue;height:150px;display:block; #click-area3{background-color:yellow;height:150px;display:block; #click-area4{background-color:black;height:150px;display:block; </style> </head> <body> var clicktag0 = " var clicktag1 = " var clicktag2 = " var clicktag3 = " <div id="main-container"> <a id="click-area1"></a> <a id="click-area2"></a> <a id="click-area3"></a> <a id="click-area4"></a> </div> var clickarea1 = document.getelementbyid("click-area1"); [5]

6 clickarea1.onclick = function(){ window.open(clicktag0, "blank") var clickarea2 = document.getelementbyid("click-area2"); clickarea2.onclick = function(){ window.open(clicktag1, "blank") var clickarea3 = document.getelementbyid("click-area3"); clickarea3.onclick = function(){ window.open(clicktag2, "blank") var clickarea4 = document.getelementbyid("click-area4"); clickarea4.onclick = function(){ window.open(clicktag3, "blank") </body> </html> [6]

7 Single clickthrough URL In the creative's html file (index.html), declare the variable "clicktag" and assign the clickthrough URL. <script> var clicktag = " Multiple clickthrough URLs If the creative has multiple clickable items, the clicktags have to be enumerated (counted): clicktag0, clicktag1, clicktag2... <script> var clicktag0 = " var clicktag1 = " var clicktag2 = " Click destination When assigning a hyperlink to a clickable item on the creative (text, button, image etc.), you can choose from these options. Option 1: <a id="clickarea"></a> var clickarea = document.getelementbyid("clickarea"); clickarea.onclick = function(){ window.open(clicktag, "blank"); Option 2: <a id="clickarea" target="_blank"></a> var clickarea = document.getelementbyid("clickarea"); clickarea.href = clicktag; When using Option 2, it is necessary to wait for the initialization of the click counting library. The library must first replace the javascript clicktag variables before the ad can be rendered. [7]

8 To know when the initialization is completed, register the "init" function, which will callback when the click counting library has finished its task: script function init(){ /* this is a custom function which starts building the ad */ sas.clicktag.register(function(){ init(); ); /script IAB specifications In the IAB's specification, you will find the clicktag variable used as follows: <a href="javascript:window.open(window.clicktag, '_blank')"</a> We do not recommend using this method as it will cause writing the "object window" string in the ad container after click. Overriding the clickthrough URL While the creative developer has defined the clickthrough URL(s) as values for the clicktag variable, there is also a simple way to change these clickthrough URL using Smart AdServer user interface. This adds flexibility: the campaign manager (who receives the creative with its clickthrough URLs) can replace (override) these URLs without having to involve the creative developer who provided the creative. Read more about how to use this feature here. [8]

9 HTML5 creative samples Sample 1: Single clicktag and window.open method <!DOCTYPE html> <html> <head> <title>html5 single clicktag</title> <script src="//ns.sascdn.com/diff/templates/js/banner/sasclicktag-3.0.js"> <meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1.0"> <style> body{width:300px;height:600px;margin:0;padding:0; #main-container{width:300px;height:600px;cursor:pointer; #click-area1{background-color:red;height:600px;display:block; #click-area2{background-color:blue;height:150px;display:block; #click-area3{background-color:yellow;height:150px;display:block; #click-area4{background-color:black;height:150px;display:block; </style> </head> <body> var clicktag = " <div id="main-container"> <a id="click-area1"></a> </div> var clickarea1 = document.getelementbyid("click-area1"); clickarea1.onclick = function(){ window.open(clicktag, "blank") </body> </html> [9]

10 Sample 2: Multiple clicktags and window.open method <!DOCTYPE html> <html> <head> <title>html5 multi clicktag</title> <script src="//ns.sascdn.com/diff/templates/js/banner/sasclicktag-3.0.js"> <meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1.0"> <style> body{width:300px;height:600px;margin:0;padding:0; #main-container{width:300px;height:600px;cursor:pointer; #click-area1{background-color:red;height:150px;display:block; #click-area2{background-color:blue;height:150px;display:block; #click-area3{background-color:yellow;height:150px;display:block; #click-area4{background-color:black;height:150px;display:block; </style> </head> <body> var clicktag0 = " var clicktag1 = " var clicktag2 = " var clicktag3 = " <div id="main-container"> <a id="click-area1"></a> <a id="click-area2"></a> <a id="click-area3"></a> <a id="click-area4"></a> </div> var clickarea1 = document.getelementbyid("click-area1"); clickarea1.onclick = function(){ window.open(clicktag0, "blank") var clickarea2 = document.getelementbyid("click-area2"); clickarea2.onclick = function(){ window.open(clicktag1, "blank") [10]

11 var clickarea3 = document.getelementbyid("click-area3"); clickarea3.onclick = function(){ window.open(clicktag2, "blank") var clickarea4 = document.getelementbyid("click-area4"); clickarea4.onclick = function(){ window.open(clicktag3, "blank") </body> </html> [11]

12 Sample 3: Single clicktag and registered callback <!DOCTYPE html> <html> <head> <title>html5 single clicktag with callback test</title> <meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1.0"> <script src="//ns.sascdn.com/diff/templates/js/banner/sasclicktag-3.0.js"> <style> body{width:300px;height:600px;margin:0;padding:0; #main-container{width:300px;height:600px;cursor:pointer; #click-area1{background-color:red;height:600px;display:block; #click-area2{background-color:blue;height:150px;display:block; #click-area3{background-color:yellow;height:150px;display:block; #click-area4{background-color:black;height:150px;display:block; </style> </head> <body> var clicktag = " <div id="main-container"> <a id="click-area1" target="_blank"></a> </div> <script> function customerfunc(){ var clickarea1 = document.getelementbyid("click-area1"); clickarea1.href = clicktag; sas.clicktag.register(function(){ customerfunc(); ); </body> </html> [12]

13 Sample 4: Converted with Swiffy With the tool Swiffy, Flash creatives can be converted to HTML5 creatives. Here are 2 sample files for download: - Original Swiffy output (download here) - Swiffy output with Smart AdServer's click counting (download here) Sample 2. has been amended as follows: The click counting library has been added in the <head>: <script src="//ns.sascdn.com/diff/templates/js/banner/sasclicktag-3.0.js"> In the <body>, stage.start(); has been replaced with this: var clicktag = " sas.clicktag.register(function(){ stage.setflashvars("clicktag="+encodeuricomponent(clicktag)); stage.setflashvars("clicktag="+encodeuricomponent(clicktag)); stage.setflashvars("clicktag="+encodeuricomponent(clicktag)); stage.start(); ); About the click target Keep in mind: For Swiffy-converted creatives, the click target (e. g. target "blank", to open in a new window) cannot be changed after conversion. If you wish to apply a specific click target, this has to be done before conversion with Swiffy. [13]