Online. Te c h n i c a l s p e c i f i c a t i o n s

Transcription

1 Online Te c h n i c a l s p e c i f i c a t i o n s

2 Contents General information 3 Delivery of the creatives 4 Delivery of advertising 5 Flash Click-Tracking (AS2) 6 Flash Click-Tracking (AS3) 7 Flash Expanding Elements 8 HTML5 9 SSL capability 14 Sound 15 In-Page Ad Formats 16 Super Banner 17 Skyscraper / Wide Skyscraper 18 Medium Rectangle (Spot) 19 Ad Bundle 20 (Video) Wallpaper (Expanding) 21 Flash Layer 22 Pop Up / Pop Under 23 (Video) Billboard Ad 24 Half Page Ad (Spot) 25 Banderole Ad (Spot) 26 Maxi Ad (Spot) 27 Baseboard Ad 28 Sitebar Ad 29 (Video) Floor Ad 30 Pushdown Ad 31 Sidekick Ad 32 (Video) Pre-/Interstitial 33 Fireplace / Video Takeover 34 Video Takeover XXL 37 Out-Stream Ad Formats 38 In-Text Roll 39 In-Stream Ad Formats 41 Pre-Roll / Post-Roll 42 Contact 44 2

3 General information

4 General information for delivery of the creatives For the delivery of the creatives please only use the following address : trafficde@hi-media.com All creatives have to comply with the technical specifications, otherwise they cannot be used and the campaign s launch can be delayed. Please deliver the standard creatives at least three business days* prior to the campaign`s launch. Please deliver special creatives at least five business days* prior to the campaign s launch to ensure a smooth delivery. In order to assign the creatives, please provide the following information at the time of delivery: o Agency/client o Campaign name o Campaign period o Booked placement o Target URL o Contact person for any queries o Creatives-/design name * Monday to Friday 4

5 General information for delivery of advertising HiMedia basically delivers tags over (friendly) iframes. Several redirects, especially for expandable ad formats must be able to represent the advertising material out of the iframe without any problems. Transparent areas in the creatives must be non-clickable, either may they trigger actions (e.g. expand). It s not allowed to use Javascript frameworks such as e.g. jquery or vanilla JS in creatives. The target URL must be fully functional by campaign start and have to link to a functional website. Creatives which mislead the user are prohibited. In case of late delivery of advertising materials or unscheduled pausing, HiMedia reserves the right to extend the number of days of the delayed delivering days respectively for the time of pausing in order to meet the contractually agreed targets. If an unscheduled break is necessary during the campaign period, it should be notified in due time (at least one business day* in advance). Otherwise, a timely break cannot be guaranteed. * Monday to Friday 5

6 General information for Flash click tracking (AS2) Flash click tracking (AS2) For the transfer of the URL a clicktag method is used. If multiple URLs are required, they have to be numbered (e.g. clicktag2, clicktag3). Actionscript 2.0 (AS2) On the top level flash or movieclip the following code must be integrated: on (release) { geturl(_root.clicktag, '_blank'); } Alternatively, the click can be on a button instance too: click_btn_name.onrelease = function(){ geturl(_root.clicktag, '_blank'); } 6

7 General information for Flash click tracking (AS3) Flash click tracking (AS3) For the transfer of the URL the clicktag method is used. If multiple URLs are required, they have to be numbered (e.g. clicktag2, clicktag3). Actionscript 3.0 (AS3) The click area (button) requires an instance name (here: click_btn) and following ActionScript: import flash.events.mouseevent; import flash.net.urlrequest; import flash.net.navigatetourl; click_btn.addeventlistener(mouseevent.mouse_up, onclick); function onclick(e:mouseevent):void { var click_url:string = root.loaderinfo.parameters.clicktag; if(click_url) { navigatetourl(new URLRequest(click_url), '_blank'); } } 7

8 General information for Flash Expanding Elements Flash expanding elements To open and close the ExternalInterface class is used. The functionality replaces the fscommand() method. Note: fscommand() is not supported. Always the function exec is called. Start frame At the beginning of the advertising a defined closed state needs to be established. Beginning of the script: import flash.external.externalinterface; ExternalInterface.call(_root.exec, "collapse"); Expand Example Expand: ExternalInterface.call(_root.exec, "expand"); Collapse Example Collapse: ExternalInterface.call(_root.exec, "collapse"); 8

9 General information for HTML5 Format / File size The formats and sizes (incl. libraries and images) are based on the IAB standards as well as the sizes specified by HiMedia. As websites, HTML5 creatives consist of several elements, which cannot be merged and compressed into a single file analog to flash. These are HTML Files, CSS, Libraries (Javascript, JQuery, etc.), photos and videos. To avoid a delay of the construction of the website and the creatives, it has to be pointed out that during the creation process individual elements of HTML5 creatives are kept as small as possible in terms of quantity and file size to minimize the server processes/requests. For this compilation methods of codes and code optimizations in a file are applied. This is implemented by compression and optimization techniques as well as by frugal use of animation and integration of external elements such as fonts and libraries, which will be added to the file size. Under-directory-structures are to be avoided. Delivery of creatives The delivery of HTML5 creatives must be carried out as a redirect. For special forms of advertising (such as Wallpaper or Fireplace) delivery of each element must be carried out as an iframe URL. The lead time is 5 business days*. * Monday to Friday 9

10 General information for HTML5 Clicktag The notation of click tags is: clicktag The notation of multi-click tag is: clicktag1, clicktag2 <n> The following lines of code are integrated into the HTML5 creative for transferring the click tags: The function returns all GET parameters which are passed to the file: <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> 10

11 General information for HTML5 Example HTML and allocation of links: Two HTML links without assigned links: <a href="#clicktag" id="clicktag">iab clicktag</a> <a href="#clicktag2" id=" clicktag2">iab clicktag</a> With these javascript lines the click tagging is allocated to the HTML elements: <script> document.getelementbyid('clicktag').setattribute('href', geturiparams.clicktag); document.getelementbyid('clicktag2').setattribute('href', geturiparams.clicktag2); </script> Functional testing of clicktag GET parameters for handing over to the creatives The creatives should be tested for functioning clicktag handover by the creative agency so that unnecessary feedback loops can be excluded. Test: html5werbemittel.html?clicktag=%landingpage% %LANDINGPAGE% has to be replaced with a test landing page and has to be transferred URL-encoded (encode URIComponent function). 11

12 General information for HTML5 Backup image, browser compatibility If a browser (e.g. Internet Explorer or Chrome) does not support a special feature or a used library that apply to the creatives, a Fallback JPG/GIF in the creative has to be played. If the creative is not supported by e.g. IE 9, the agency has to provide the display of the fallback in this browser. Image compression Graphics have to be optimized in terms of file size. The use of PNG crusher and the use of scalable vector graphics is recommended. Animation For animations, make sure that these do not burden the CPU client unnecessarily. Several parallel animations and overlapping transparent graphics must be avoided. The use of CSS3 animations or Javascript is to choose wisely on the CPU and GPU utilization. 12

13 General information for HTML5 Video Videos in HTML5 creatives are integrated via the tag <video></video>. Ads with videos are provided with a preview image (poster), the video starts as soon as it is loaded or by user interaction on most mobile devices. It should be noted that no click tags can be placed on videos on mobile devices. The video has to be optimized regarding the quality and file size and is to stream in an appropriate server environment. The max. video file size is = 2,5 MB. The video is also submitted in H264/mp4 and in VP8/WebM. Code example: <video controls height='640' width='360'> <source src='yourvideo.mp4' type='video/mp4' /> <source src='yourvideo.webm' type='video/webm' /> </video> 13

14 General information for SSL capability Mandatory We would like to advice you that all campaign components (script-, iframe-, redirect-tags, agency counting pixel or other external hosted resources) should be delivered HTTPS compatible in order to exclude site-overlapping display and measurement errors related to the violation of security adjustments of different browser. Therefore it has to be ascertained that all resources are hosted on SSL certified servers. Please proof whether your used system provides a standardized option for the creative hosting. With this action the Online-Vermarkterkreis (OVK) wants to cope with the developments of the Internet Engineering Task Force (IETF) and its increasing importance of HTTPS compatible advertising resources. 14

15 General information for Sound The sound of the creatives is not allowed to start automatically. The start of the sound via MouseOver is not allowed either. The sound of the creative may only start through active user interaction (e.g. click on the loudspeaker sign). The sound of the creative must have clearly visible control elements and has to be adjustable by visible control elements with regard to ON/OFF control and volume. In order not to desturb users of a mobile campaign unnecessarily, the volume of the creative must be reasonable. Therefore, please consider the loudness standard EBU R

16 In-Page Ad Formats

17 Super Banner Dimensions (px): 728x90 File size: max. 40 KB File format: GIF/JPG/PNG/Flash Expandable*: yes, up to 728x300 Redirect: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. * Only as redirect possible 17

18 Skyscraper / Wide Skyscraper Dimensions (px): 120x600 / 160x600 File size: max. 40 KB File format: GIF/JPG/PNG/Flash Expandable*: yes, up to 420x600 Redirect: yes Sticky*: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. * Only as redirect possible 18

19 Medium Rectangle (Spot) Dimensions (px): 300x250 File size: max. 40 KB File format: GIF/JPG/PNG/Flash Expandable*: on request Redirect: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Notice: Streaming: Video must be hosted externally. * Only as redirect possible 19

20 Ad Bundle The Ad Bundle does not represent an own ad format, but it is defined by its fixed combination booking. An Ad Bundle booking consists out of three of the following ad formats: o Super Banner o Skyscraper o Wide Skyscraper o Medium Rectangle 20

21 (Video) Wallpaper (Expanding) A wallpaper consists of the following elements: o Super Banner (728x90) o o Skyscraper / Wide Skyscraper (120x600/160x600) Background color or background image File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect*: yes HTML5*: yes, only Redirect Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. The Video Wallpaper Expanding (VWE) is only as a redirect** possible. At MouseOver the VWE unfolds into a rectangle, which is limited in terms of dimensions of a Super Banner and Skyscraper. * Adform and Sizmek/Mediamind: Single-Tag is possible; other rich media providers: 2x iframe URL (one URL for each element) ** Only via Adform and Sizmek/Mediamind 21

22 Flash Layer Dimension (px): individual File size: max. 40 KB File format: Flash Redirect: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. A close button is mandatory. * Only as redirect possible 22

23 Pop Up / Pop Under Dimensions (px): 640x480, 800x600 File size: max. 40 KB File format: GIF/JPG/PNG/Flash/HTML Redirect: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. File format HTML: Please deliver an URL that can be displayed in a Pop Up / Pop Under. * nur als Redirect möglich 23

24 (Video) Billboard Ad Dimensions (px): 800x250*, 850x250, 940x250, 950x250, 960x250, 970x250**, 980x250, 990x250, 1000x250, 1005x250 File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes HTML5***: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. * Minimum requirement to be able to deliver the Billboard Ad throughout HiMedia network. ** Billboard Ad according to IAB definition. *** Only as redirect possible 24

25 Half Page Ad (Spot) Dimensions (px): 300x600 File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. * Only as redirect possible 25

26 Banderole Ad (Spot) Dimensions (px): 770x250 File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. * Only as redirect possible 26

27 Maxi Ad (Spot) Dimensions (px): 640x840 File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. * Only as redirect possible 27

28 Baseboard Ad Dimensions (px): 728x90 up to max. page width x 90 File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes Sticky: yes HTML5*: yes Note: A background color is required. * Only as redirect possible 28

29 Sitebar Ad Dimensions (px): mind. 1 / max. viewport x mind. 1 / max. viewport File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes, solely Sticky: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. The Sitebar Ad stretches laterally of the content and hereby uses the available space. A concrete size for the advertising medium does not exist. The Fallback advertising material serves as an orientation for the aspect ratio. The following sizes apply to the fallback of the creative: 120x600, 160x600 or 200x600 Pixel as well as the formats GIF, JPG or PNG and are not-scaling. * Only as redirect possible 29

30 (Video) Floor Ad Dimensions (px): 728 to page width x 200 / 728 to page width x 400 (expanded) File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes Sticky: yes (at the bottom of the browser) HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. The animation starts on MouseOver, the sound via click. A close button is mandatory. In order to provide a smoother transition to the underlying page, the lower three-quarters (150 pixels when trigger Ad) with a background color and a gradient into the transparent area are allowed to be filled. The top quarter (when trigger Ad 50 pixels) may be filled only with masked objects. Transparent areas should not be click- or expanded-sensitive. Optionally, a video in the Floor Ad can be integrated. * Only as redirect possible 30

31 Pushdown Ad Dimensions (px): 728 to page width x 90 / 728 to page width x 300 (expanded) File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes, solely HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. The Pushdown Ad is only possible as a redirect. At the automatic pushdown the large format opens when visiting a page, pushes the whole side down and thus creates more space for advertising. This area can be re-opened by the user by MouseOver at any time. * Only as redirect possible 31

32 Sidekick Ad Dimensions (px): 160x600 File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes, solely HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. The Sidekick Ad is only possible as a redirect. At user interaction the Sidekick Ad is pushed by the Skyscraper-position and initial-adsize with expanded adsize into focus and displaces the website accordingly from the pane. A click on the obligatory close button and on the user action MouseOut" reduces the Sidekick Ad back to initial size. * Only as redirect possible 32

33 (Video) Pre-/Interstitial Dimensions (px): 800x600, 640x480, Other on request File size: max. 80 KB File format: GIF/JPG/PNG/Flash Redirect: yes HTML5*: yes Streaming: yes, max. 30 sec. (polite download) Note: Streaming: Video must be hosted externally. A close button must be clearly visible. We reserve the right to place an own close button next to the creative. * Only as redirect possible 33

34 Fireplace / Video Takeover Implementation: The Fire place consists of a header and two skyscrapers. Your special advantage: Our technical solution is only a one-off creation effort, because the ad format adapts dynamically to the individual sites. Alternatively a background image can be also delivered. In this case the dynamic adjustment eliminates. The advertising message in the header must only be as large as the smallest width of the page (currently: 820 pixels). For Skyscrapers only the inner part (150 pixels) should be used for advertising messages. The height of the skyscraper may vary, but the width should be 350 pixels. Only this ensures that Skyscraper cover the protruding part of the header also on smaller sites When designing make sure that there are no transitions between the header and the Skyscrapers that can be seen. 34

35 150x1100 Fireplace / Video Takeover Skyscraper Header Skyscraper 1300x x130 Website 150x x x

36 Video Takeover Fireplace Fireplace / Video Takeover Dimensions (px): 1300x130 (header), 350x1100 (skyscraper) File size: max. 130 KB (all elements) File format: GIF/JPG/PNG/Flash Redirect*: yes Sticky: yes HTML5*: yes, only redirect Streaming: yes, max. 30 sec. (polite download) Note: Video Takeover: the video embedding in the header is smooth but it is to host externally. The corresponding path to the video has to be deposited in the static creative. The player has to be deposited in the creative. * Adform and Sizmek/Mediamind: Single Tag in agreement; other rich media provider: 3x iframe URL (one URL for each element) 36

37 Video Takeover XXL Dimensions (px): 960x540, others on request File size: max. 3 MB File format: MP4 Frame rate: 25 fps Aspect ratio: 16:9 Video-Codec: H.264 Redirect: yes (extern URL) HTML5: no (see notes) Note: Please deliver the video in encoded form. Please note the loudness standard EBU R128. The Video Takeover XXL is rolled out by an HTML5- enabled template. 37

38 Out-Stream Ad Formats

39 In-Text Roll Physical delivery of video ads in raw format (encoding is used): We recommend the delivery of a MOV file. Considering the end device and the available internet connection the ad server carries out a re-encoding of the video in order to ensure an optimal user experience. The maximum file size may not exceed 200 MB. Physical delivery of video ads in encoded form: Please deliver an MP4 file which complies to our quality standards (see page 40). Delivery as redirect (3rd-Party): Please provide the tags on the basis of VAST 2 standards. For more information about VAST 2 please click here: The delivery of tags based on the VAST 1 standards is also possible, but we can not guarantee that all functions are supported correctly. 39

40 In-Text Roll Quality standards For delivery of Out-Stream Video Ads two quality levels are available. High-Quality: Dimensions (px): 960x540, 1024x576, 1280x720 Frame rate: 25 fps Aspect ratio: 16:9 Video codec: H.264 Video bit rate: kbps Audio codec: AAC-LC Audio bit rate: 128 kbps Total bit rate: max kbps Low-Quality: Resolution: 512x288, 640x360 Frame rate: 25 fps Aspect ratio: 16:9 Video codec: H.264 Video bit rate: kbps Audio codec: AAC-LC Audio bit rate: 128 Total bit rate: max kbps Sound: Please note the loudness standard EBU R

41 In-Stream Ad Formats

42 Pre-Roll / Post-Roll Physical delivery of video ads in raw format (encoding is used): We recommend the delivery of a MOV file. Considering the end device and the available internet connection the ad server carries out a re-encoding of the video in order to ensure an optimal user experience. The maximum file size may not exceed 200 MB. Physical delivery of video ads in encoded form: Please deliver an MP4 file which complies to our quality standards (see page 43). Delivery as redirect (3rd-Party): Please provide the tags on the basis of VAST 2 standards. For more information about VAST 2 please click here: The delivery of tags based on the VAST 1 standards is also possible, but we can not guarantee that all functions are supported correctly. 42

43 Pre-Roll / Post-Roll Quality standards For delivery of In-Stream Video Ads two quality levels are available. High-Quality: Dimensions (px): 960x540, 1024x576, 1280x720 Frame rate: 25 fps Aspect ratio: 16:9 Video codec: H.264 Video bit rate: kbps Audio codec: AAC-LC Audio bit rate: 128 kbps Total bit rate: max kbps Low-Quality: Resolution: 512x288, 640x360 Frame rate: 25 fps Aspect ratio: 16:9 Video codec: H.264 Video bit rate: kbps Audio codec: AAC-LC Audio bit rate: 128 Total bit rate: max kbps Sound: Please note the loudness standard EBU R

44 Ad Operations ( 0 ) t r a f f i c d h i - m e d i a. c o m