Digital Material Instructions

Format

• jpg, png, 3rd party tag (iframe)
• One link and the entire ad serves as the link area
• Material may have its own click / impression tracking. 

Material sizes

• 620 x 891 px ( 300 kB)

N.B. 3rd party tag :  Format: Iframe.  The content can only be lightly animated.

Format

• jpg, png, 3rd party tag, HTML5
• One link and the entire ad serves as the link area.
• You can provide your own click/impression tracking in the material.
• Animations made with Canvas do not work properly on iOS platforms, and we do not recommend their use if the campaign is visible in our iOS applications.

Material size

• 300 x 600 px (.jpg, .png, tag, HTML5)
• Size limit 300 kB

Material instructions:

• Image 600 x 314, max. 300 kB
• Headline max. 90 characters
• Lead max. 150 characters
• Advertiser: (the advertiser's name as it should be displayed in the highlight)
• No full stops are used in the headline. A question mark, dash or colon are ok.  We do not recommend the use of exclamation marks.

  • For example: "Do you know the everyday salt bombs to watch out for?" OR "Many eat too much salt every day without knowing it" OR "Your first bike is like your first love – see the amazing pictures of bikers"

• The headline and lead should be grammatically correct and written in good Finnish
• Clicking should redirect to content which is in line with the headline and lead (not e.g. a product catalogue, the frontpage of the company website or an online shop). The content must deliver what the headline has promised.
• Writers should find out how similar topics have been headlined and illustrated in the selected media before.

Desktop

• 980 x 400 px
• File formats: JPG, PNG, HTML5, iframe tag
• Max 300 kB
• Max 5 / size
• Material may have its own click / impression tracking. 

Mobile

• JPG, PNG; 600x600px or 300x300px
• HTML5, JavaScript tag; 300x300 px
• Max 300 kB
• Material may have its own click / impression tracking. 

N.B. HTML5 material may be either responsive or a fixed size of 300 x 300. The ad spot will be scaled according to the width of the device.

Desktop

• Wallpaper size in all media is 1600 x 1200 px, kilobyte limit 300kB.
• File formats: JPG, PNG or GIF (not animated)
• Wallpaper is centered unless otherwise stated in the media-specific positioning instructions.
• Wallpaper cannot load through a tag and it is not clickable.
• Wallpaper is only sold with a parade. Parade material size 980x400 px. Formats .jpg, .gif, .png (300 kB), HTML5 (max300 kB) or iframe -tag.
• Please remember always https-requirements about linkages of HTML5 materials. Parade ad can be loaded from 3rd party tag.
• The wallpaper must have a subdued appearance and it must be sent to the media for approval no later than 5 days before the campaign launch.
• The media reserves the right to request changes to the product if deemed necessary.
• Please note that Wallpaper sized 1600 x 1200 will not be scaled according to the screen resolution so some of the content may not be visible on smaller screens.
• See the media-specific positioning instructions > 

You can use either image or video material in the topscroll.

When positioning the ad content, please take the safe area into account to ensure that the most important content is visible to all users (see positioning guidelines).

Notes

• Tracking: Only click tracking is possible. To ensure a smooth user experience and fast ad loading, the ad call is loaded on the site before user consent, anonymously and without cookies. Therefore, impression tracking that sets cookies is not allowed.
• The ad may be shown to a visitor once per day.
• The video is displayed in a loop. We recommend that the video is at least 3 seconds long.
• Video material may include sound, but please note that the ad starts automatically without sound and always requires user interaction to enable audio.
• The ad is displayed at the top of the website and app, below the header and before the page content. The ad occupies 100% of the available browser window height and is scaled according to the browser width, up to the maximum width of the ad.

Topscroll with image

Topscroll with video

Asset size: 1080×1920 px
Image (JPG, PNG max 300 KB)
or Video (MP4, max 20 sec, 30 MB)

• Midscroll is show full width in mobile devices,  in desktop inside news feed and article.

•  A single click‑through URL is used, and the entire ad area functions as the clickable area.

• Click and impression tracking pixels can be provided.

• 3rd party tags are not currently accepted. 
  Exception: Adnami Mobile Midscroll tag or transfer link is accepted if campaign is mobile targeted. 

Guidelines about safe zone:
It is recommended to place the key elements of the creative (e.g., logo, CTA, text) in the center area of the ad.
Avoid placing important content in the top or bottom 10% of the ad area.

Video Guidelines:

• The video plays on loop. Use short video —recommended length is 6 seconds.
• Video can include sound, but note that video has autoplay muted, and audio is heard only if the user activates it.
• Maximum video length: 20 sec
• Maximum file size: 30 MB
• Format: MP4
• Frame rate: 25 fps
• Stereo audio: 44.1 kHz or 48 kHz
• Audio levels: –23 LUFS according to EBU R128 standard
• Video bitrate: 8,000–16,000 kbps
• Audio bitrate: 384 kbps

Material deadline: 2 working days before the campaign begins

After You have made the booking, please send the material via material link . Material delivery >

If you have any problems with submitting the material through the upload link, please contact us by e-mail: digitrafiikki@sanoma.com

1. The creative must have one root HTML file (index.html).
2. You may use folder structure where e.g. the style files and images are located in separate folders.
3. HTML5 materials must be delivered in a zipped file (.zip) containing all the files related to the ad.
4. Clicks must open in a new browser window (_blank).
5. Use unique identifiers, classes, variables and function names for each ad.
6. The margin value of the creative's style configurations must be 0 so that additional borders do not appear around the outer edges of the banner.
7. You should preferably use double quotation marks (").
8. Please note that your ad creative will be published inside an iframe on the media page/app. Please check that click tracking has been done according to our instructions.
9. The default character encoding in HTML is UTF-8.
10. Calculating the file size: All of the files related to the ad - images, script files, fonts, style files - must be included when calculating the ad's file size.
11. Keep the number of files reasonable; each individual file load burdens and prolongs the loading of the ad/page. The maximum number of host-initiated file requests is 15.
12. By default, all older browsers that do not support HTML5 (such as IE9 and older versions) are excluded from the campaign. However, if you wish to include old browser versions in your campaign, please deliver a backup image with your HTML5 material that can be used with older browsers.

The instructions below explain how to add click tracking to material when HTML5 material is run directly through Sanoma's system.

Sanoma Click API

Add the following code snippet to the head section of your HTML code:

<script src="https://sn.sanoma.fi/js/ClicksApi.js"></script> 

Defining the ClickTAGs

Example 1: Example in cases where clickthrough URL is defined directly in the html:

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickUrl('https://yourlinkgoeshere'); return false;">Click here</a> 

Example 2: SanomaClicksApi supports either specifying clickTag name as argument or using default tagname provided by Xandr by omitting argument altogether. 

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG'); return false;">Click here</a> 

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag(); return false;">Click here</a>

Improve Initial Display

• Use inline CSS styles and HTML so that the initial display of the ad would load as fast as possible.
• Limit initial dependencies on any render-blocking .js and .css files.
• Load interactive elements as a deferred or secondary subload.
• Defer heavy file weights (e.g. a video) until the user initiates interaction.
• Avoid any unnecessary downloads.
• In order to boost the loading of an ad, always combine files whenever possible, e.g. JavaScript libraries, HTML, CSS.
• In order to improve the initial visual experience, check the device and the connection speed to provide the most optimum solution. For instance, display a lighter version of the ad in devices with slower connection speeds, so that the user experience would still be as good as possible.

Image Assets

• Optimise all images
• Preload images when necessary
• Consolidate images whenever possible (sprite sheet)
• Use sprite sheets for multiple display assets and animation

Avoid:

• Ads may not employ rapid or "strobing" animation of any graphic, copy, or background elements.
• Avoid animation effects that are CPU intensive (20% average CPU usage accepted, sustained spikes over 70% will be rejected)
• Avoid or reduce the usage of:
  • loops and timers (cancel/Clear all setInterval and setTimeout once their job is done)
  • setInterval
  • setTimeout
  • requestAnimationFrame
  • eval() to avoid security risks
  • global variables
• Minimize DOM access
• jQuery is not recommended for HTML5 ads for these reasons:
  • Degraded performance on mobile devices because of reliance on time-based animations.
  • Unnecessary file weight: the majority of the library's functionality isn't required.

• IAB: HTML5 for Digital Advertising
• IAB HTML5 Ad Validator

If you know how to build websites, you also know how to build HTML5 ads. You may use any tool you want, Notepad++, CoffeeCup, Sublime, Notepad etc. An HTML5 ad is like an HTML5 page, but smaller and simpler. You may also design your ad using HTML5 animation tools.

Please Observe Concerning HTML5 Materials

• Calculating the kilobyte limit: all files related to the ad are included.
• Maximum number of host-initiated file requests: 15
  Avoid unnecessary loads after the initial load. If it is essential for the ad, the maximum kilobyte size of a subsequent load may be no larger than the initial load.
• A subsequent load occurring due to the user’s activation (e.g. mouseover or click) may be larger.

Read the instructions for HTML5 material delivery

• Size: 1600 x 1200 px
• Weight limit: 300 kB
• HTML5, JPG, or PNG
• Dynamic Wallpaper consists of a single file. No separate giant panorama material is therefore delivered with Dynamic Wallpaper.
• The whole area of the Wallpaper is clickable.
• The Wallpaper must have a subdued appearance. Any aimation must stop after 5 seconds of play.
• The media reserves the right to request changes to the ad, if deemed necessary.
• Background color possible, stated as HEX code.
• Please note that a Wallpaper sized 1600x1200 px will not be scaled according to the screen resolution so some of the content may not be visible on smaller screens (viewport width under 1207 px).
• Dynamic Wallpaper cannot be run through a third party tag.
• HTML5 Dynamic Wallpaper works on most browsers. However, please note that it does not work in Internet Explorer 9 or older browsers, nor browsers without HTML5 support. A backup image is not possible.
• Adding click tracking: detailed instructions here
• Instructions for Wallpaper in programmatic buying here.

Deliver the following elements/information to the Traffic Team:

• URL of the ad's HTML page if the ad is hosted on e.g. the advertiser's or advertising agency's server
  OR
  a ZIP file containing the ad's HTML page and the used image, script and style files
• Code of the background colour in the space left around the wallpaper (e.g. ”#30821b”) or a sample of the background colour
• State whether a locked or scrollable Wallpaper option is used
• Third party tracking pixel URL (optional)

Dynamic Wallpaper Positioning

Newsmedia

• Dynamic Wallpaper can be locked or scrolling.
• The content width is 980 px, but centre alignment is done according to a width of 1190 px (cf. PSD template).
• Tip: The content area (980 px) can be filled with white colour to meet the weight limits. Do not crop it too closely to allow for some margin for positioning.
  Download the PSD templates

Lifestyle: Hyvaterveys.fi, Kodinkuvalehti.fi, Menaiset.fi, Etlehti.fi, Tiede.fi, Vauva.fi, Soppa365.fi

• Dynamic Wallpaper can be locked.
• The content width on the sites is 1250 px. Tip: The content area (1250 px) can be filled with white colour to create a Wallpaper that meets the kilobyte limits. Do not crop it too closely to allow for some margin for positioning.
• The Wallpaper is centered on the page according to the enclosed PSD file.
  Download the PSD template

Responsive Skins scale to the full width and height of the desktop screen behind the content and stay visible as the user scrolls the page. Fluid Skin and Seamless Skin formats are possible on our news sites.
Fluid Skin consists of three separate elements: a top banner, a left-side panel, and a right-side panel.
Seamless Skin consists of a responsive background and overlays positioned on top of it.

Please note the following:

• OUR NEWS SITES ARE ASYMMETRICAL.

• The site is centered within a 1190px area, but the news content width is 980px and positioned against the left edge of that area - more space remaining on the right side than on the left.

• The Skin is shown only if the browser window width is at least 1208px.

• We accepts the assets to build the Skin by Sanoma, or Adnami transfer links , or Adnami tags.

Wallpaper – FLUID SKIN

A Fluid Skin consists of three separate elements – the left and right panels (side panels) and the top banner.
Each element can use an image, video, or HTML5 as a bacground element.
Overlay elements can be positioned on top of the backgrounds.

Although Fluid Skin follows the same rules on both symmetrical and asymmetrical sites, the following should be noted on Sanoma’s asymmetrical news sites:

• All tactical elements such as text, CTAs, videos, carousels etc. should always be placed in the right banner when possible, or in the top banner, due to the size differences between the left and right panels.
• Texts and other elements in the left panel are visible only when the browser window is approximately 1500px or wider, or when the browser zoom is below 100%.
• If possible, materials should be created as responsive HTML5 creatives, or at minimum as background images/videos + overlay files.
  • Texts etc. should not be included directly in the backgrounds to avoid unintended cropping.
• On Sanoma news sites, the exact top banner size for Fluid Skins is 980×400px.

Side Panels
Background (image or video):
- Image: 800×1440 px, JPG or WEBP (200 kb)
- Video: 1080×1920 px (9:16), MP4 (max 20 sec, 30 MB)

Side overlays: Max 800×1440 px (PNG, WEBP, max 200 kb)

Top Banner
Size: 980×400 px
Formats: image, video, or HTML5
- Image: JPG, WEBP max 200 kb
- Video: MP4, max 20 sec, 30 MB
- HTML5: width 100% (responsive), height 400 px (HTML zip file or third-party tag)

An overlay can also be positioned on top of the top banner. 
Max 980×400 px (PNG, WEBP, max 200 kb)

Wallpaper – SEAMLESS SKIN

Seamless Skin format allows for the easy creation of a responsive skin creative. You can use either an image or a video as a background. Overlays in the side panels are used to ensure branding and messaging are always visible. In Adnami Studio, select the Asymmetric Seamless Skin template to ensure correct behaviour on Sanoma sites.

Seamless Skin Background
- Image: 2560×1440 px (JPG, WEBP)
- Video: 1920×1080 px (MP4)

Left and Right Overlays
Max size: 800×1440 px (PNG or WEBP with transparent background)

Top Banner (image, video or HTML5)
- Image: 980×400 px (JPG, WEBP max 200 kb)
- Video: 980×400 px (MP4, max 20 sec, 30 MB)
- HTML5: width 100% (responsive), height 400 px (HTML zip file or third-party tag)

An overlay can also be added on top of the top banner:
Max 980×400 px (PNG, WEBP, max 200 kb)

You can also create Seamless Skin in HTML5

Background: 2560×1440 px (Responsive HTML5)
Optional Top Banner:
- Image or video: 980×400 px (JPG, WEBP or MP4)
- HTML5: 980×400 px or (100% width, 100% height) (HTML Zip File or 3rd Party Tag)

More detailed instructions on the different formats:
adnami.io/guide-to-skins