TECHNICAL SPECIFICATIONS

(1)

TECHNICAL SPECIFICATIONS

(2)

TABLE OF CONTENT

• Goldbach Audience guidelines for all advertising media

• Goldbach Audience HTML5 guidelines

• Goldbach Audience maximum sizes of standard formats

• Goldbach Audience Flash specifications

• Goldbach Audience Expandable Ad

• Goldbach Audience Ad Appeal

• Goldbach Audience Banderole Ad

• Goldbach Audience HTML/Form Creatives

• Goldbach Audience DartMotif & Eyeblaster Richmedia Ads

• Goldbach Audience Mobile technical specification

• Goldbach Audience Video Advertising

(3)

GUIDELINES FOR ALL ADVERTISING MEDIA

(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.

• 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 e-mail 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.

• Links must always open up in a new window.

(5)

HTML5 GUIDELINES

(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 we now prefer HTML5 ads.

• Banner formats

The following standards apply to all fixed-size formats, i.e. ads with fixed height and width, in line with IAB standards for regular ads, excluding ads that overlay or that proportionally or freely scale the content of websites (e.g. site bar, see http://www.werbeformen.org).

(7)

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

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.

FILE SIZE

7

(8)

• 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.

• Image compression

Image files are to be compressed. We recommend using PNG crushing software and scalable vector graphics.

(9)

• 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:

9

(10)

• 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.

• Provision

We only accept redirects. With the exception of DoubleClick Studio ads, we also accept physical delivery. Surcharges for

DoubleClick Studio hosting. Google Web Designer https://www.google.com/webdesigner/ is the recommended designer tool for DoubleClick Studio ads.

(11)

MAXIMUM SIZES OF STANDARD FORMATS

(12)

SIZE FORMATS

Format Max size Expanded max size Weight in KB

Fullbanner 468x60 468x300 40 Leaderboard 728x90 994x560 50 Billboard 728x300 50 Wide Skyscraper 160x600 800x600 50 Half Page Ad 300x600 900x600 50 Medium Rectangle 300x250 500x500 50 Maxiboard 994x118 994x354 50 Wideboard 994x250 994x500 50 Monstersky 245x770 735x770 50 Floating Ad On request 50

(13)

FLASH SPECIFICATIONS

(14)

FLASH SPECIFICATIONS

• 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

(15)

FLASH SPECIFICATIONS

• Framerate should be between 15-18 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: https://helpx.adobe.com/flash/using/best-practices-optimizing-fla-files.html

15

(16)

FLASH SPECIFICATIONS

AS2 CLICKTAG IMPLEMENTATION

Standard Action-Script for the LINK Button:

on(release){

getURL(clickTAG, "_blank");

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.

(17)

FLASH SPECIFICATIONS

AS2 CLICKTAG IMPLEMENTATION

17 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.

(18)

FLASH SPECIFICATIONS

(19)

FLASH SPECIFICATIONS

AS2 CLICKTAG IMPLEMENTATION

19

• 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

 etc.

• Online clickTAG tutorial by Macromedia for all Flash versions (AS2):

http://www.adobe.com/resources/richmedia/tracking/designers_guide/

(20)

FLASH SPECIFICATIONS

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);

(21)

FLASH SPECIFICATIONS

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".

OPENING THE LANDING PAGE IN A PREDEFINED WINDOW

21 Example ActionScript on the link button:

on (release) { getURL("javascript:window.open('" + _root.clickTAG + "','FensterName','left=50,top=50,width=600,height=400,toolbar=no,scrollba rs=no,resizable=no,menubar=no,status=no,directories=no,location=no');voi d(0);", "_self"); }

(22)

FLASH SPECIFICATIONS

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 indicates the window position from the TOP in pixels

height=400 indicates the window height in pixels

scrollbars=no possible scrollbar parameters yes/no

menubar=no possible menu-bar parameters yes/no

directories=no possibly directory parameters yes/no

OPENING THE LANDING PAGE IN A PREDEFINED WINDOW

(23)

FLASH SPECIFICATIONS

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.

EXTENSIONS FOR BT-CUSTOMIZED AD’S

23 on(release) { getURL(_root.clickTag,"_blank"); getURL("Javascript:BT_Retarget()","_self"); }

(24)

(25)

EXPANDABLE AD

25

• 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.

(26)

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.

(27)

• 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 :

Click here to download a template for this advertising medium.

27

getURL("Javascript:f4d_expand_layer()","_self")

(28)

(29)

AD APPEAL

BRANDSENSE ADAPPEAL

29

There are two ways of making an advertising medium expand:

• Ad Appeal-Closed: Start state closed.

The expansion takes place as soon as the user moves his mouse over the advertising medium (On-Mouseover). The ad closes as soon as the user removes the mouse (Mouse-off).

• Ad Appeal-Open: Start state open.

The expand effect takes place when the advertising media is activated and closes automatically after a maximum of 7 seconds; with Mouseover, same function as Closed.

(30)

ADAPPEAL

BRANDSENSE ADAPPEAL

• The AdAppeal is always located in the top right corner. It must be possible to close both variants with a close button.

• Please integrate the clickTAG for the link URL. (see 3.Flash specification)

• Creative Size (dimension):

 Height corner: max. 130 pixels

 Width corner: max. 130 pixels

 Height layer: max. 600 pixels

(31)

ADAPPEAL

31 Special ActionScript commands:

• In the first frame of the expanding animation:

• getURL(“Javascript:f4d_expand_layer();”,“_self”);

• In the last frame of the collapsing animation:

• getURL(“Javascript:f4d_collapse_layer();”,“_self”);

(32)

(33)

BANDEROLE AD

33

• 1 x Flash Creative Size (dimension):

 Height: 250 pixels

 Width: 770 pixels

• 1 x Open and 1 x Close Button as .JPG/.GIF:

 Height: 250 pixels

(34)

BANDEROLE AD

Consider:

Use the general Flash Specification for the click button (clickTAG).

• The Default Background-Color is white (#FFF)

• If you wish another color you have to tell us the HEX-Colorcode on creative delivery.

(35)

HTML/ADVERTISING MEDIA FORM

(36)

HTML/ADVERTISING MEDIA FORM

For forms please use the following syntax:

• The link URL is to be limited to 256 characters. To send a form, use the GET method.

• Remove all unnecessary comments, spaces, and tabs from the code.

• To avoid conflicts between the advertising medium code and the Web site, all variables and

• functions of the HTML/JavaScript code should be

• unique. For this purpose, we recommend expanding the variables with "adl_".

</form> </table>

(37)

DARTMOTIF & EYEBLASTER RICHMEDIA ADS

(38)

DARTMOTIF & EYEBLASTER RICHMEDIA ADS

• DartMotif

 When creating other DartMotif Ads you work with Doubleclick TABS: http://studio.doubleclick.com/

 Support on creating DartMotif Ads: German: renglert@google.com

English: clk-drmtechnical@google.com

• Eyeblaster

 When creating Eyeblaster Ads you will need the EB Flash workshop:

 Support on creating Eyeblaster Ads:

(39)

MOBILE TECHNICAL SPECIFICATION

(40)

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 320x356 / 640x712* 320x480 / 640x960* 60 KB 60 KB JPG, .GIF, .PNG Interstitial Landscape

• Mobile (Browser) Site

• App 480x219 / 960x438* 480x320 / 960x640* 60 KB 60 KB JPG, .GIF, .PNG

(41)

MOBILE SPEZIFIKATIONEN: TABLET

MOBILE WEBSITES / APPS (IOS & ANDROID)

41 * Optional. Only on Retina displays.

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

(42)

MOBILE & TABLET

• 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 e-mail 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.

GENERAL GUIDELINE FOR ALL CREATIVES

(43)

VIDEO ADVERTISING

(44)

INBANNER/INPAGE VIDEO AD

• Flash Video Tutorials at Macromedia: http://www.macromedia.com/de/devnet/flash/video.html

• 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: System.security.allowDomain("*.doubleclick.net", "*.doubleclick.com");

var netConn:NetConnection =new NetConnection(); netConn.connect(null);

var netStream:NetStream =new NetStream(netConn); VideoStream.attachVideo(netStream);

(45)

INSTREAM VIDEO AD

VIDEO

45 • Format: .MP4 • Weight: max. 4 MB • Codec: VP6 / MainConcept H.264

• Video Size: 1024x576 pixels

• Site Relation: 16:9

• Complete-Bitrate: physisch max. 3 000 kbps / VAST max. 750 kbps

• Colour intensity: 32-Bit

• Framerate: 25 fps

(46)

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

(47)

PUSH-DOWN VIDEO AD 1/2

• Dimensionen:

 Closed: 728x90 pixels

 Open: 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.

(48)

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) :

• Collapse Layer (always onRollout):

Click here to download a template for this advertising medium.

getURL("Javascript:f4d_expand_layer()","_self”)

(49)

FULL SCREEN VIDEO ADS 1/2

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.

49

VIDEO SCROLL

Elements to deliver: • Flash 800x70px • Video • Skin or Logo

• Hex Code used as

Backgroundcolor of the Video Scroll & Interstitial (Default is Black)

(50)

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.

(51)

WILMAA SPECS 1/2

Format Size Duration / Weight

Premium Ad (Welcome)

If desired terminatiing in a specified color, please tell us the hexcodeitteilen (e.g. #FFFFFF / White)

.FLV / .MP4 max. 1280x800 max. 30“ / max. 4 MB

30“ - 60“ / max. 8 MB

Premium Ad & Wallpaper .FLV / .MP4 512x288 max. 700x500 max. 60“ / max. 4 MB

Wallpaper + Colorcode (Default #FFFFFF)

Addition to Welcome

Terminating in color, therefore please tell us the needed Hexcode (Default Value = #FFFFFF / White)

.PNG /.JPG 1280x800 (terminating in a color) max. 100 KB

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

(52)

Format Size Duration / Weight Click & Mail** Complete HTML-and Text-E-Mail.

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

-Kombination Premium Ad / Standard Ad

Look at the separate Specs on the previous page

Creative Delivery transmission band 10 work days, digital creative 3 work days before campaign start

**Click&Mail Text for Speech Bubbles: „Hello [User-Name], are you interested in info about [Offering (max .45 Characters)]

?“

In Combination with PremiumAd or StandardAd

Sound Integrated in Video. Sound volume is controlled through user when watching wilmaa. The volume must be

conform to the guidelines of EBU R128.

WILMAA SPECS 2/2

(53)

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

(54)

(55)

WILMAA SPECS

55

WILMAA RAW MATERIAL

(56)

(57)

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

(58)

THANK YOU

Goldbach Audience (Switzerland) AG Seestrasse 39 | 8700 Küsnacht-Zürich T +41 44 914 92 70

www.goldbachaudience.com info@goldbachaudience.ch