TECHNICAL SPECIFICATIONS

Transcription

1 TECHNICAL SPECIFICATIONS 1

2 TABLE OF CONTENT Guidelines for all advertising media HTML5 guidelines Flash specifications Mobile technical specification Video Advertising Expandable Ad Maximum sizes of standard formats Advertising media Templates 2

3 GUIDELINES FOR ALL ADVERTISING MEDIA 3

4 GUIDELINES FOR ALL ADVERTISING MEDIA All advertising media must be supplied in the agreed Ad Size (pixels in height and width). Do not exceed the maximum file sizes. Links must always open up in a new window. To open a new window after the click, use the target="_blank" command. HTML advertising media should be sent as *.TXT and *.HTML files in a *.ZIP file (not as content). The advertising media must be labeled. We recommend a clear naming convention. Example: Format_Language_Subject_Date.swf Send the advertising media, with all needed details, to your contact partner. Remember that a period of 5 days is necessary for the integration of the advertising media on the Ad Server If you have further questions regarding the ad specifications, please contact your Goldbach representive. 4

5 HTML5 GUIDELINES 5

6 HTML5 GUIDELINES HTML5 Flash content cannot be played back directly due to new versions of certain browsers. Displaying the banner requires additional action by the user. The browsers in question are Firefox v44.0, Chrome releases from 1 September 2015 and Safari for a considerable time. This has been accompanied by significant disadvantages for Flash, which is why HTML5 ads are currently preferred. Banner formats The following standards apply to all fixed-size formats, that means: Height and width, in line with IAB advertising standards for regular ads, excluding ads that overlay or that proportionally or freely scale the website content. For example, for a Sitebar ad

7 HTML5 GUIDELINES FILE SIZE Like web pages, HTML5 ads consist of multiple elements, which, unlike Flash, cannot be combined and compressed into a single file. These are: HTML files CSS libraries (Javascript, JQuery, etc.) images Videos The ads should be no larger than: Maximum total file size: 150 KB Maximum initial load: 50 KB To ensure web pages and ads load quickly, use as few individual elements as possible both in terms of the number of files and file size when creating HTML5 ads. This is to minimise the number of server processes/requests. Also compress the code and use code optimization techniques in the files. This should be done using compression and optimization methods as well as sparing use of animations and integration of external elements such as fonts and libraries, as these are also included in the file size. Subdirectory structures should be avoided. 7

8 HTML5 GUIDELINES Backup image, browser compatibility If the browser does not support a certain feature or library used in the ad application, the ad should include a fallback JPG/GIF to be displayed instead. For example, if the ad is not supported by IE 9, the agency should make sure that the fallback image can at least be displayed in this browser. The ads are to be tested by the ad agency in all common browsers, and the marketer is to be informed of any incompatible browsers. Are the fallbacks too big and you don t want to compromise on quality? Then opt for a JPG/PNG file: Image compression Image files are to be compressed. We recommend using PNG crushing software and scalable vector graphics. Animation Make sure that any animations do not place an unnecessary load on the client CPU. Avoid running multiple animations simultaneously and using overlapping transparent graphics. Use CSS3 or Javascript animations sparingly, taking into account the CPU and GPU load. Source: 8

9 HTML5 GUIDELINES Video Videos in HTML5 ads are integrated using the <video> tag. Ads with videos are to include a preview picture (poster). The video starts as soon as it has been loaded or is triggered by user interaction on most mobile devices. Please note that no clicktags can be included in videos played back on mobile devices. The clicktag must be inserted somewhere outside of the video. The quality and file size of the video must be optimized, and the video should be streamed in an appropriate server environment. (Max. video size = 2.5 MB) The video should be provided as H264/MP4 and VP8/WebM. Sample code: <video controls height='640' width='360'> <source src='yourvideo.mp4' type='video/mp4' /> <source src='yourvideo.webm' type='video/webm' /> </video> 9

10 HTML5 GUIDELINES We accept redirects and physical HTML5 ads in line with the DoubleClick Studio specifications. DoubleClick Studio is a tool designed for advertising and creative agencies to upload rich media ads, allowing them to manage and control all settings and functions and guaranteeing a technically professional end product. DoubleClick Studio hosting is subject to surcharges. The CPM surcharges are listed on the following slide. Possible creative/designer tools along with the required DoubleClick Studio outlines/templates: Google Web Designer Google Web Designer Templates Google Web Designer Anleitung Adobe Edge Adobe Edge Templates Adobe Edge Anleitung 10

11 Rich Media HTML5 GUIDELINES HTML5 CPM SURCHARGE Format CPM Surcharge In Page CHF 0.15 Floating, Expanding CHF 0.60 Video CHF

12 FLASH SPECIFICATIONS 12

13 FLASH SPECIFICATIONS DELIVERY OF THE FLASH ADVERTISING MEDIA SWF file and an alternative GIF (mandatory); the GIF will be displayed to all users who do not have a Flash plug-in installed Please specify the URL separately, since it will be transferred directly from the AdServer to the "clicktag" variable in the advertising medium. (AdServer tracking method in Flash: see clicktag Implementation) The Flash movies should be exported in version 8/9. When creating advertising media, comply with the specified weight limits. Sound is allowed in advertising media, but must be disabled in the default setting. Navigation components can allow activation by the user. For Banner, Sky, and Rectangle: wmode=opaque, for DHTML ads (Floating, Expandable, etc.): wmode=transparent 13

14 FLASH SPECIFICATIONS OPTIMIZING THE FLASH ADVERTISEMENT Framerate should be between Fps to keep the cpu usage low. 30+ Fps causes higher Cpu load Avoid Math based Animations (ActionScript driven Animations). Preloading of Symbols/Images Work with Animation-Tweens instead of key-frame series. Simplify Graphic Elements where possible Limit Number of used Bitmaps A complete Guidline for Optimizing your Flashmovies can be found on the official Adobe Support Page: 14

15 FLASH SPECIFICATIONS AS2 CLICKTAG IMPLEMENTATION Function description on the AdServer: To count a click on the AdServer, the clicktag variable in Flash is used instead of the target URL. Thanks to this variable, the target URL can be queried from the AdServer and passed on to the advertising medium. When the button is actuated, a click is logged on the AdServer, and the user is linked to the offer with the target URL. This procedure only affects the link URL action; all other settings (ActionScripts, etc.) are not affected. You can freely create your advertising medium, according to your needs. The clicktag variable also allows the target URL to be changed during a campaign without having to change the advertising medium. Standard Action-Script for the LINK Button: on(release){ geturl(clicktag, "_blank"); } 15

16 FLASH SPECIFICATIONS AS2 CLICKTAG IMPLEMENTATION IMPORTANT: If the variable is to be used within a movie clip in the main Flash animation, the variable must be integrated with a preceding _root.clicktag. Moreover, no ON actions may be defined for the movie clip containing the button. Do always use on(release) on(press) causes the PopUp Blocker to take action in certain Browsers! 16

17 FLASH SPECIFICATIONS AS2 CLICKTAG IMPLEMENTATION 17

18 FLASH SPECIFICATIONS AS2 CLICKTAG IMPLEMENTATION Use of other target URLs that must be included in the tracking: If your advertising medium is to contain several clickable areas with different link URLs, you can expand the clicktag variable for each link URL. Example: Link-URL1 = clicktag1 Link-URL2 = clicktag2 Link-URL3 = clicktag3 etc. Online clicktag tutorial by Macromedia for all Flash versions (AS2): Click here to download a template for this advertising medium. 18

19 FLASH SPECIFICATIONS CLICKTAG-PARAMETER-CODE FOR ACTIONSCRIPT 3 var clicktag:string; if (root.loaderinfo.parameters["clicktag"]) { clicktag = root.loaderinfo.parameters["clicktag"]; }else if(root.loaderinfo.parameters["clicktag"]){ clicktag = root.loaderinfo.parameters["clicktag"]; } btn_inv.removeeventlistener(mouseevent.click, calllink); btn_inv.addeventlistener(mouseevent.click, calllink); function calllink(e:event):void { try{ openurl(clicktag); }catch (e:error){ trace("error occurred!"); } } function openurl(param1:string) : void { var _loc_2:urlrequest = null; var _loc_3:string = null; var _loc_4:string = null; _loc_2 = new URLRequest(param1); _loc_3 = "_blank"; if (!ExternalInterface.available) { navigatetourl(_loc_2, _loc_3); } else { _loc_4 = String(ExternalInterface.call("function() { return navigator.useragent; }")).tolowercase(); if (_loc_4.indexof("firefox")!= -1 _loc_4.indexof("msie")!= -1 && uint(_loc_4.substr(_loc_4.indexof("msie") + 5, 3)) >= 7) { ExternalInterface.call("window.open", _loc_2.url, _loc_3); } else { navigatetourl(_loc_2, _loc_3); } } return; } 19

20 FLASH SPECIFICATIONS OPENING THE LANDING PAGE IN A PREDEFINED WINDOW If you want the landing page to be opened in a predefined window, all variables for the position, and the window size, must be transferred to the browser in the script. For this variant, it is important to open the window with "_self". Example ActionScript on the link button: on (release) { geturl("javascript:window.open('" + _root.clicktag + "','FensterName','left=50,top=50,width=600,height=40 0,toolbar=no,scrollbars=no,resizable=no,menubar=no,st atus=no,directories=no,location=no');void(0);", "_self"); } 20

21 FLASH SPECIFICATIONS OPENING THE LANDING PAGE IN A PREDEFINED WINDOW Documentation: left=50 indicates the window position from the LEFT in pixels width=600 indicates the window width in pixels toolbar=no possible toolbar parameters yes/no resizable=no possible status parameters yes/no status=no Status mögliche Parameter yes/no location=no possible location parameters yes/no top=50 height=400 scrollbars=no menubar=no directories=no indicates the window position from the TOP in pixels indicates the window height in pixels possible scrollbar parameters yes/no possible menu-bar parameters yes/no possibly directory parameters yes/no 21

22 FLASH SPECIFICATIONS EXTENSIONS FOR BT-CUSTOMIZED AD S To realize the function of retargeting, there has to be implemented a second variable after the ClickTag. After a maximum of 7 seconds, the floating must close automatically. on(release) { geturl(_root.clicktag,"_blank"); geturl("javascript:bt_retarget()","_self"); } 22

23 MOBILE TECHNICAL SPECIFICATION 23

24 MOBILE TECHNICAL SPECIFICATION: SMARTPHONE MOBILE WEBSITES / APPS (IOS & ANDROID) Ad format Size Weight Format Mobile / App Banner Portrait 320x50 / 640x100* 60 KB JPG,.GIF,.PNG Mobile / App Rectangle 300x250 / 600x500* 60 KB JPG,.GIF,.PNG Interstitial Portrait Mobile (Browser) Site App Interstitial Landscape Mobile (Browser) Site App 320x356 / 640x712* 320x480 / 640x960* 480x219 / 960x438* 480x320 / 960x640* 60 KB 60 KB 60 KB 60 KB JPG,.GIF,.PNG JPG,.GIF,.PNG Mobile / App Wideboard 320x160 / 640x320* 60 KB JPG,.GIF,.PNG * Optional. Only on Retina displays. 24

25 MOBILE SPEZIFIKATIONEN: TABLET MOBILE WEBSITES / APPS (IOS & ANDROID) Ad format Size Weight Format Tablet Banner Portrait 768x90 / 1536x180* 60 KB JPG,.GIF,.PNG Tablet Rectangle 300x250 / 600x500* 60 KB JPG,.GIF,.PNG Tablet Interstitial Portrait 768x916 / 1536x1832* 60 KB JPG,.GIF,.PNG Tablet Interstitial Landscape 1024x655 / 2048x1310* 60 KB JPG,.GIF,.PNG * Optional. Only on Retina displays. 25

26 MOBILE & TABLET GENERAL GUIDELINE FOR ALL CREATIVES Pixel size and file size may not exceed the established limits. Mobile banners must be sent compressed in a *.ZIP file; and not directly as content or attachment. Animated files are accepted if they do not exceed the maximum file size. Interstitial ads must always be sent as a portrait and landscape format. Retina sizes are optional. They must be delivered, if the ad is to be shown on high-resolution displays. The target URL of the banner must be separately provided and must refer to a mobile site or portal. You are free to design your advertising material. Send all ads with the necessary indications to your person to contact. Advertising material must be delivered at least 4 days prior to the start of the campaign. 26

27 VIDEO ADVERTISING 27

28 INBANNER/INPAGE VIDEO AD Flash Video Tutorials at Macromedia: Use click TAG for thelinkage. (see 3.Flash specification) Use the variable AdlVideo as Video linkage Usually, the Video Data is not managed by Goldbach Audience, therfore it hast o be available by an external server. If you dont have any effective infrastructur, Goldbach Audience ist taking over the data delivery for value. System Security Flash / Doubleclick deblock Domains. Example Action-Script for a Video integration through the NetStream category: Click here to download a template for this advertising medium. System.security.allowDomain("*.doubleclick.net", "*.doubleclick.com"); var netconn:netconnection =new NetConnection(); netconn.connect(null); var netstream:netstream =new NetStream(netConn); VideoStream.attachVideo(netStream); netstream.setbuffertime(10); netstream.play(_root.adlvideo); 28

29 INSTREAM VIDEO AD VIDEO Format:.MP4 Weight: max. 4 MB Codec: VP6 / MainConcept H.264 Video Size: 1024x576 pixels Site Relation: 16:9 Complete-Bitrate: physisch max kbps / VAST max. 750 kbps Colour intensity: 32-Bit Framerate: 25 fps Durability: as per Productionplan (max. 30s) 29

30 INSTREAM VIDEO AD AUDIO Format: MPEG Audio Format-Version: Version 1 Format-Profile: Layer 3 Format_Settings_Mode: Stereo Bitrates-Modus: constant (cbr) Bitrate: 128 Kbps Channels: 2 Channels Samplingrate: 44.1 KHz Volume EBU R128: -23 LUFs 30

31 PUSH-DOWN VIDEO AD 1/2 DIMENSIONEN: Closed: Open: 728x90 pixels 728x400 pixels (max.) At the first stage the advertising medium interaction you can use the expand action onrollover (MouseOver). The Push- Down Video Ad is always closed per Mouseout, so use the onrollout (MouseOut) Action. After the creative was closed it can only be expanded again by clicking, so use the onrelease action. Therefore you have to place an advice within the advertising medium. For example a click here to expand Button. The Collapse command to close must be executed 0.5 sec before the advertising medium turns into the closed condition. There is no need for a closing animation as the animation is done via the adserver creative delivery code The site is moving back within 0.5 sec into the original/closed condition. 31

32 PUSH-DOWN VIDEO AD 2/2 The video integration is done according to our In Banner/In Page video Ad specifications. Expand Layer (At the begin onrollover / after the first close onrelease) : geturl("javascript:f4d_expand_layer()","_self ) Collapse Layer (always onrollout): geturl("javascript:f4d_collapse_layer()","_self ) Click here to download a template for this advertising medium. 32

33 FULL SCREEN VIDEO ADS 1/2 VIDEO SCROLL All Animations in the Flash for Text/Images/Vector-Graphics should be coded on the Maintimeline. Classes for Transformations and Movements must not been used Wether Flash built-in Classes nore Engines like TweenLight, TweenMax oder Caurina. The Movie in the Video Scroll has to be delivered as for Video Interstitials (see Specs Video Interstitial. This Movie will also be used in the 124x70 Area. Within the Video Scroll the movie will be played without sound. After Interacting with the Video Part in the Scroll the Creative will go Fullscreen where the Movie plays with sound-on. Skin or Logo also has to be produced for the Video Scroll like for Video Interstitials. Elements to deliver: Flash 800x70px Video Skin or Logo Hex Code used as Backgroundcolor of the Video Scroll & Interstitial (Default is Black) 33

34 FULL SCREEN VIDEO ADS 2/2 VIDEO SKINS The Skin has to be delivered as *.PNG or actionscript free *.SWF file. The PNG/Flashfile will be layed over the Movie, therefore the Skin must have a transparent Area so the movie is viewable. The Controll Elements (Progress Bar, Close Button etc.) will be layed over the Skin. The max. Dimension for such a skin is 1280x800 pixels and 100 KB Filesize. Measurements for the View-Through Area aren t strict but should be close to the dimensions of the movie. 34

35 WILMAA SPECS 1/2 Premium Ad (Welcome) If desired terminatiing in a specified color, please tell us the hexcodeitteilen (e.g. #FFFFFF / White) Format Size Duration / Weight.FLV /.MP4 max. 1280x800 max. 30 / max. 4 MB / max. 8 MB Premium Ad & Wallpaper.FLV /.MP4 512x288 max. 700x500 max. 60 / max. 4 MB Wallpaper + Colorcode (Default #FFFFFF) Addition to Welcome.PNG /.JPG 1280x800 (terminating in a color) max. 100 KB Terminating in color, therefore please tell us the needed Hexcode (Default Value = #FFFFFF / White) Standard Ad (Channel Switch) Video:.FLV /.MP4 max. 1024x576 max. 30 / max. 4 MB Standard Ad & Premium Ad Mobile Video:.MP4 max. 1024x576 max. 30 / max. 2 MB 35

36 WILMAA SPECS 2/2 Format Size Duration / Weight Click & Mail** Kombination Premium Ad / Standard Ad Creative Delivery **Click&Mail Sound Complete HTML- and Text- . The display and functionality must be optimized and tested on the e- mail clients Outlook, Lotus Notes and Gmail (Web mail). Width max. 680 pixels - Look at the separate Specs on the previous page transmission band 10 work days, digital creative 3 work days before campaign start Text for Speech Bubbles: Hello [User-Name], are you interested in info about [Offering (max.45 Characters)]? In Combination with PremiumAd or StandardAd Integrated in Video. Sound volume is controlled through user when watching wilmaa. The volume must be conform to the guidelines of EBU R

37 WILMAA SPECS SWF Wilmaa is a flash based platform. The programming of the Flash Files therefore require certain precautionary measures to prevent errors: Do not change root Don t use the Stage object Be careful with Scaling: Scale on internal Movie-Clips only Don t use Loops without Timeouts Exception prone code must always be included in TryCatch block 37

38 WILMAA SPECS WALLPAPER CREATIVE GUIDE 38

39 WILMAA SPECS WILMAA RAW MATERIAL Information and recommendations for raw material. Delivery file format:.flv /.F4V (flash video) 39

40 EXPANDABLE AD 40

41 EXPANDABLE AD There are two methods of making the advertising medium expand: On(RollOver): The expand effect takes place as soon as the user moves his mouse over the advertising medium. On(Release): The expand effect takes place as soon as the user clicks an element in the advertising medium. There are two methods of making the advertising medium collapse: On(RollOut): The collapse effect happens, as soon as the user removes the mouse pointer from the ad. On(Release): The collapse effect takes place as soon as the user clicks an element in the advertising medium. ATTENTION: This is only permitted in Expandables/Floatings. 41

42 EXPANDABLE AD IMPORTANT: If the advertising medium opens automatically, it will be considered as a Floating Ad and allocated to the respective price category. After a maximum of 7 seconds, the Expandable Ad/Floating which opens automatically must close automatically. Expandable Banners open from the top down e.g., from 486x60 to 468x300. Expandable Skyscrapers open from right to left e.g., from 160x600 to 300x

43 EXPANDABLE AD Goldbach Audience has developed a Richmedia template that takes over the expand procedure. Expanded Layer: This function is used to call up the expanded flash file and must always be used in conjunction with the f4d_collapse_layer function. These functions must be used in the event onrollover, onrelease, onpress. Collapse Layer : geturl("javascript:f4d_expand_layer()","_self") geturl("javascript:f4d_expand_layer()","_self") Click here to download a template for this advertising medium. 43

44 MAXIMUM SIZES OF STANDARD FORMATS 44

45 SIZE FORMATS Format Max size Expanded max size Weight in KB Fullbanner 468x60 468x Leaderboard 728x90 994x Billboard 728x Wide Skyscraper 160x x Half Page Ad 300x x Medium Rectangle 300x x Maxiboard 994x x Wideboard 994x x Monstersky 245x x Floating Ad On request 50 For other size formats, refer to the media data of individual web sites under 45

46 ADVERTISING MEDIA TEMPLATES 46

47 ADVERTISING MEDIA TEMPLATES Ad Appeal AS2 / AS3 Expandable Ads AS2 / AS3 Floating Ads AS2 / AS3 Fullbanner AS2 / AS3 Skyscraper AS2 / AS3 Push-Down Ad AS2 / AS3 In Banner / In Page Video Ad AS2 / AS3 47

48 THANK YOU Goldbach Audience (Switzerland) AG Seestrasse Küsnacht-Zürich T info@goldbachaudience.ch 48