formats - networkadvertising.romandie-network.com/specs/assets/pdf/2017-04...2017/04/26 · click...
TRANSCRIPT
Formats
Technical Specifications2017
Table of contents
❖ GENERIC HTML5 SPECS
❖ SMART ADSERVER HTML5 SPECS
❖ DESKTOP FORMATS
❖ RTB FORMATS
❖ IN-STREAM FORMATS
❖ MOBILE FORMATS
❖ SPECIFIC FORMATS
[email protected] | +41 22 5 520 520
Specifications chart• All format specifications (dimensions, weight, etc…) follow the IAB’s recommendations• In some cases, specific features could be required• If the material is not compliant with our specifications, Romandie Network does not
guarantee the delivery and could apply additional costs to solve the problem• Standards banners must be submitted at least 3 business days before the campaign
launch• Banners with audio must be played in sound-off mode• The clic redirect on the banner has to open a new window
[email protected] | +41 22 5 520 520
Expandable Specifications• Expandable banners must be open only via mouse-over, automatic opening is
considered as RichMedia• Expandable banners must close via mouse-out• The expandable part of the banner must contain a close button
Hosting:Our adserving tool provides only basic features for hosted expandable banners. We recommend that these formats are hosted on a dedicated RichMedia tool (third-party ad tool) and you provide us with redirect (tag). In case the expandable banner is hosted by Romandie Network, you must provide us 2 files: one for the closed part, and one for the expanded part.
[email protected] | +41 22 5 520 520
GENERIC HTML5 SPECS
HTML5This article provides Smart AdServer's recommendations for HTML5 creatives for developers who create HTML5 ads.
Compression image assets :
To keep HTML5 creatives light, you should find a good compromise between image quality and file size. Here are some points to consider:
• use image files with few colors; indexed png or gif files are much lighter than JPEG files
• do not use transparency if it is not needed• never use heavy file formats such as raw or bmp• choose the lowest quality and the maximum compression rate to get the best quality
with minimal weight
[email protected] | +41 22 5 520 520
HTML5Reducing the number of HTTP requests
To reduce loading times for end users, you should reduce the number of files downloaded simultaneously (parallel HTTP requests).
In case of images, using sprites are a good strategy:
• combine all the image files into a single, large image file• make use of the coordinates (X and Y) of each image file• choose a CSS technique supported by all common browsers• use the CSS to point to the image files using their coordinates (X and Y)
In case of javascript, merge all your scripts in a single javascript file. This leads to a single HTTP request, rather than multiple requests for each script.
[email protected] | +41 22 5 520 520
HTML5Using external libraries
In your HTML5 creative, you may need visual effects and use common libraries such as jQuery, jQueryUI, jQueryMobile, Adobe Edge, etc. We do not recommend referencing such libraries as external libraries, but rather embed the library codes directly (physically) in your HTML5 creative.
Keeping code light and clean
• Follow these guidelines to get light and clean code:– use efficient and compact javascript
– use CSS3 if possible
– in the CSS, use global class names instead of inline styles for each tag
– minify code whenever possible to reduce file length
– use a YUI based library to compress code (e. g. http://refresh-sf.com/)
[email protected] | +41 22 5 520 520
HTML5Adapting to Browser and App environments
Even though modern browsers all support the common web standards (CSS, Javascript, HTML5), they slightly differ in the way they execute code. Check if all your file formats are compatible with the target browsers .
For mobile advertising, consider mobile-specific events (swipe, pinch-to-zoom, touch, etc.) and set up HTML mobile properties (e. g. pixel ratio and viewport settings).
Animations
When using animations, a crucial point to consider is performance in order to avoid overwhelming the CPU. Please refer to the IAB's best practices here (page 18).
[email protected] | +41 22 5 520 520
HTML5Video ads
Videos in HTML5 creatives can be integrated using the <video></video> tags. http://www.iab.net/media/file/HTML5DAv101.pdf
You fill find information about:
• video controls• browser support• video events• autoplay and audio settings• delivery and file size
[email protected] | +41 22 5 520 520
SMART ADSERVER HTML5 SPECS(if creative file sent to and hosted by
Romandie-Network)
Click counting in HTML5 creatives
[email protected] | +41 22 5 520 520
Including Smart AdServer's click counting library:
In the <head></head> section of the creative's main file (index.html), you need the include the following script:
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.0.js"></script>
Declaring the clickTag variable:
In the creative's main file (index.html), you also need to declare the variable "clickTag" and assign the clickthrough URL(s). The clickthrough URL is the URL, where users will be redirected when they click on the creative.
var clickTag = "http://www.myclickthroughurl.com";
Click counting in HTML5 creatives
[email protected] | +41 22 5 520 520
Declaring the click Tag variable:
In case of multiple clickthrough URLs, enumerate the variable as follows: clickTag0, clickTag1, clickTag2...
var clickTag0 = "http://www.myclickthroughurl_1.com";var clickTag1 = "http://www.myclickthroughurl_2.com";var clickTag2 = "http://www.myclickthroughurl_3.com";
Defining the click destination:
When assigning a hyperlink to a clickable item on the creative (text, button etc.), you can choose from two options:
Click counting in HTML5 creatives
[email protected] | +41 22 5 520 520
Option 1<a href="javascript:window.open(window.clickTag, '_blank')"></a>
Option 2<a id="clickArea" target="_blank"></a>
<script type="text/javascript">var clickArea = document.getElementById("clickArea");clickArea.href = clickTag;</script>
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.To know when the initialization is completed, register the "init" function, which will callback when the click counting library has finished its task.
More infos : https://goo.gl/5SjgRA
HTML5 creative specifications
[email protected] | +41 22 5 520 520
HTML5 ZIP file
• HTML5 creatives consist of assets (gif, png, mp4 etc.) and a main html file, which references the assets. These files have to be bundled into a ZIP file prior to uploading them into Smart AdServer's system.
• The weight for the banner (see weight per format) is the un-zipped folder.• When creating the ZIP file, please respect the following 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).
HTML5 creative specifications
[email protected] | +41 22 5 520 520
Supported file formats
In HTML creatives, you can use file formats: jpg, jpeg, png, gif, swf, flv, mp4, zip, webm, mp3, m3u8, aac, m4v, m4a, wmv, avi, 3gp, ogg, ogv, txt, json, ics, svg.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).
DESKTOP FORMATS
Rectangle
• Size: 300x250 px• Weight: max. 100 Ko (unzipped
folder if HTML5)• Format: redirect (tag) or
HTML5, Jpeg, Gif
Expand• Expand size: 500x500 px
(custom size on demand)• Please check the expandable
specifications (see page 3)
[email protected] | +41 22 5 520 520
Halfpage• Size: 300x600 px• Weight: max. 100 Ko (unzipped folder if
HTML5)• Format: redirect (tag) or HTML5, Jpeg,
Gif
Expand• Expand size: 600x600 px (custom size
on demand)• Please check the expandable
specifications (see page 3)
[email protected] | +41 22 5 520 520
Leaderboard• Size: 728x90 px• Weight: max. 100 Ko (unzipped folder if
HTML5)• Format: redirect (tag) or HTML5, Jpeg,
Gif
Expand• Expand size: 728x400 px (custom size
on demand)• Please check the expandable
specifications (see page 3)
[email protected] | +41 22 5 520 520
Maxileaderboard• Size: 994x118 px• Weight: max. 100 Ko (unzipped folder if
HTML5)• Format: redirect (tag) or HTML5, Jpeg,
Gif
Expand• Expand size: 994x400 px (custom size
on demand)• Please check the expandable
specifications (see page 3)
[email protected] | +41 22 5 520 520
Wideboard• Size: 994x250 px• Weight: max. 100 Ko (unzipped folder if
HTML5)• Format: redirect (tag) or HTML5, Jpeg,
Gif
Expand• Expand size: 994x500 px (custom size
on demand)• Please check the expandable
specifications (see page 3)
[email protected] | +41 22 5 520 520
Skyscraper• Size: 160x600 px• Weight: max. 100 Ko (unzipped folder if
HTML5)• Format: redirect (tag) or HTML5, Jpeg,
Gif
Expand• Expand size: 600x600 px (custom size
on demand)• Please check the expandable
specifications (see page 3)
[email protected] | +41 22 5 520 520
BigSkyscraper• Size: 245x770 px• Weight: max. 100 Ko (unzipped folder if
HTML5)• Format: redirect (tag) or HTML5, Jpeg,
Gif
[email protected] | +41 22 5 520 520
RichMedia / Layers / Floating• Size: cutomised
(by default 400x400 px)• Weight: max. 100 Ko (unzipped folder if
HTML5)• Displaying time frame: max 10 seconds
(managed by ourself)• Close button on the top right (managed
by ourself)• Format: redirect (tag) or HTML5, Jpeg,
Gif
[email protected] | +41 22 5 520 520
Interstitial (1 /2)• Size: 800x600 px (custom on demand)• Weight: max. 100 Ko (unzipped folder if
HTML5)• Format: redirect (tag) or HTML5, Jpeg,
Gif
Note: deliver the format as a simple rectangle banner, without close function. Displaying time frame or direct access linkare managed by our adserving tool
[email protected] | +41 22 5 520 520
Interstitial variant (2/2)Interstitial Video• Video file : VAST or MP4 (8Mb max)
Interstitial Video with background• Video file : VAST or MP4 (8Mb max)• Color HEX for the background or• JPG/PNG/GIF file• Example : http://goo.gl/1zAnE9
Interstitial Video fullscreen• Video file : VAST or MP4 (8Mb max)• Example : http://goo.gl/7eLVOg
(please use files with high resolution and bitrate)
[email protected] | +41 22 5 520 520
Sitebar ClassicThe Sitebar Classic contains a video spot + logo and a backgrund color
• Video format : Any format (no VAST)• Size: 720px wide minumum• Video weight: unlimited• Logo : JPG, min 200 x 200px• Background color : HEX• Example : http://goo.gl/PJTBEn
Note : Only one subject per campaign
[email protected] | +41 22 5 520 520
Sitebar Custom
[email protected] | +41 22 5 520 520
The Sitebar Custom contains a video spot + background image
• Video format : Any format (no VAST)• Size: 720px wide minumum• Video weight: unlimited• Background image : 500 x 1’000 px
(120Ko max)• Examples : http://goo.gl/RhnFqA or
http://goo.gl/8gtxJQ
Note : Only one subject per campaign
Sitebar Cube
[email protected] | +41 22 5 520 520
The Sitebar Cube contains 2-4 background images and may contains a video spot
• Video format : Any format (no VAST)• Size: 720px wide minumum• Video weight: unlimited• Background image (per subject) : 500 x
1’000 px (120Ko max per subject)• Examples :
– without video : http://goo.gl/F3l8G1– with video : http://goo.gl/nzWkRr
InRead• A video ad autoplays while the user
reads a text content. The ad format automatically identifies the best position where the ad can be displayed. The ad format automatically pauses / resumes the video when the visibility is below / above 50% ensuring maximum impact for the advertiser.
• Size/Weight/Format: no limit• Minimum recommended:
– At least 640px wide– At least 1’500 BPS– Frequency image: 25 i/s
• VAST or MP4• Players are VPAID compliant
[email protected] | +41 22 5 520 520
BrandingsIn general Background image and one or more other standard format (depending on the website choosed).
For specifications, they have to be askeddepending on the website requested.
[email protected] | +41 22 5 520 520
RTB FORMATS
IAB Standard – General Specs
[email protected] | +41 22 5 520 520
• IAB Standard: Rectangle, Leaderboard, Skyscraper(cf. Classic banners for dimensions)
• RTB specs:- Redirected Tag- Secure tags (https)- Weight: max 100 Ko- Banner’s animation: max 30 sec- Logo has to appear clearly in the animation
RTB Skinban
[email protected] | +41 22 5 520 520
• Background image:- Size: 1800x1000- Blank zone in the middle : 1000px- Visible zone left: 140px- Visible zone right: 140px- Header height : 220px
• Style:- Background color to provide (optional)
• Size mockup available here
RTB Native
[email protected] | +41 22 5 520 520
1. Image: 4 formats- Portrait: 300x400- Landscape HD: 900x500- Landscape: 800x450- Square: 500x500
2. Text: title and description- Title: 10-80 characters- Description: 150-300 characters
3. Sponsor: image (400x200) or text (short name)
4. Action:- Vast Tag or HTML5, no loop, pause and sound
button,- Autoexpand: Sound OFF- Expand: Sound ON
IN-STREAM FORMATS
Pre-Roll/Mid-Roll/Post-RollDesktop – Mobile
• Weight: 8Mo max– If we receive a file up to 8Mb, we’ll compress
the video file
• Minimum resolution: 1’024x576• Length recommended : max 20 seconds• Format: VAST or MP4• Players are VPAID compliant
[email protected] | +41 22 5 520 520
MOBILE FORMATS
Banner Mobile• Size: 300 or 320 x 50 px• Weight: max. 50 Ko• Format: redirect (tag) or HTML5, Jpeg,
Gif• Smartphone only
[email protected] | +41 22 5 520 520
Wideboard Mobile• Size: 320x160 px• Weight: max. 50 Ko• Format: redirect (tag) or HTML5, Jpeg,
Gif• Smartphone only
[email protected] | +41 22 5 520 520
Rectangle Mobile• Size: 300x250 px• Weight: max. 50 Ko• Format: redirect (tag) or HTML5, Jpeg,
Gif• Smartphone and Tablet
[email protected] | +41 22 5 520 520
Interstitiels Mobile• Smartphone : Size: 320x480 px• Tablet: Size: 675x900• Weight: max. 50 Ko• Displaying time frame: max 10 seconds• Format: HTML5, Jpeg, Gif• Note: deliver the format as a simple
banner, without close function. Displaying time frame or direct accesslink are managed by our adserving tool
[email protected] | +41 22 5 520 520
SPECIFIC FORMATS
InSkin Video• Video format : MP4 (encoding
H264/AAC)– Recommended dimensions: 512x288px– Recommended bitrate: 700 kbps– Weight: max. 5Mo
• 1 clic URL• 1 impression pixel• 1 companion (optional)
– JPG image 1’000 x 220 px :
[email protected] | +41 22 5 520 520
• How it works : https://goo.gl/VkXlep