Spezifikationen Werbemittel

TECHNICAL SPECIFICATIONS
1
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
GUIDELINES FOR ALL ADVERTISING MEDIA
3
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 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.
• 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
HTML5 GUIDELINES
5
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.
• http://www.werbeformen.org
• http://www.iab.com/guidelines/iab-display-advertising-guidelines/
6
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
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:
https://compressor.io/
• 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: http://www.bvdw.org/presseserver/HTML5_Richtlinie/bvdw_ovk_html5%20richtlinie_final_20150720.pdf
8
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
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
Rich Media
HTML5 GUIDELINES
HTML5 CPM SURCHARGE
Format
CPM Surcharge
In Page
CHF 0.15
Floating, Expanding
CHF 0.60
Video
CHF 1.00
11
FLASH SPECIFICATIONS
12
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
FLASH SPECIFICATIONS
OPTIMIZING THE FLASH ADVERTISEMENT
•
•
•
•
•
•
•
•
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
14
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
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
FLASH SPECIFICATIONS
AS2 CLICKTAG IMPLEMENTATION
17
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):
http://www.adobe.com/resources/richmedia/tracking/designers_guide/
Click here to download a template for this advertising medium.
18
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
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
FLASH SPECIFICATIONS
OPENING THE LANDING PAGE IN A PREDEFINED WINDOW
Documentation:
left=50
width=600
toolbar=no
resizable=no
status=no
location=no
indicates the window position from the LEFT in pixels
indicates the window width in pixels
possible toolbar parameters yes/no
possible status parameters yes/no
Status mögliche Parameter yes/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
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
MOBILE TECHNICAL SPECIFICATION
23
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
JPG, .GIF, .PNG
320x356 / 640x712*
320x480 / 640x960*
60 KB
60 KB
Interstitial Landscape
• Mobile (Browser) Site
• App
JPG, .GIF, .PNG
480x219 / 960x438*
480x320 / 960x640*
60 KB
60 KB
Mobile / App Wideboard
320x160 / 640x320*
60 KB
JPG, .GIF, .PNG
* Optional. Only on Retina displays.
24
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
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 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.
26
VIDEO ADVERTISING
27
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:
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
INSTREAM VIDEO AD
VIDEO
•
•
•
•
•
•
•
•
•
Format:
Weight:
Codec:
Video Size:
Site Relation:
Complete-Bitrate:
Colour intensity:
Framerate:
Durability:
.MP4
max. 4 MB
VP6 / MainConcept H.264
1024x576 pixels
16:9
physisch max. 3 000 kbps / VAST max. 750 kbps
32-Bit
25 fps
as per Productionplan (max. 30s)
29
INSTREAM VIDEO AD
AUDIO
•
•
•
•
•
•
•
•
•
Format:
Format-Version:
Format-Profile:
Format_Settings_Mode:
Bitrates-Modus:
Bitrate:
Channels:
Samplingrate:
Volume EBU R128:
MPEG Audio
Version 1
Layer 3
Stereo
constant (cbr)
128 Kbps
2 Channels
44.1 KHz
-23 LUFs
30
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 PushDown 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
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
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
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
WILMAA SPECS 1/2
Format
Size
Duration / Weight
Premium Ad (Welcome)
.FLV / .MP4
If desired terminatiing in a specified color, please
tell us the hexcodeitteilen (e.g. #FFFFFF / White)
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
.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
Terminating in color, therefore please tell us the
needed Hexcode (Default Value = #FFFFFF /
White)
35
WILMAA SPECS 2/2
Click & Mail**
Kombination Premium Ad /
Standard Ad
Format
Size
Duration / Weight
Complete HTML- and Text-E-Mail.
The display and functionality must
be optimized and tested on the email clients Outlook, Lotus Notes
and Gmail (Web mail).
Width max. 680 pixels
-
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.
36
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
WILMAA SPECS – WALLPAPER CREATIVE GUIDE
38
WILMAA SPECS
WILMAA RAW MATERIAL
Information and recommendations for raw material. Delivery file format: .FLV / .F4V (flash video)
39
EXPANDABLE AD
40
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
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 300x600.
42
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.
getURL("Javascript:f4d_expand_layer()","_self")
 Collapse Layer :
getURL("Javascript:f4d_expand_layer()","_self")
Click here to download a template for this advertising medium.
43
MAXIMUM SIZES OF STANDARD FORMATS
44
SIZE FORMATS
Format
Max size
Expanded max size
Weight in KB
Fullbanner
468x60
468x300
40
Leaderboard
728x90
994x560
50
Billboard
728x300
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
50
For other size formats, refer to the media data of individual web sites under www.onlinemediatool.ch
45
ADVERTISING MEDIA TEMPLATES
46
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
THANK YOU
Goldbach Audience (Switzerland) AG
Seestrasse 39 | 8700 Küsnacht-Zürich
T +41 44 914 92 70
www.goldbachaudience.com
[email protected]
48