?
1. General description of the format
2. The width and height of the creative
3. File size limits
4. HTML5-creative implementation specifications
5. Creative validation

1. General description of the format

The horizontal ad format with the specified height and adaptive width, occupying 100% of the site's content area width.

Use the HTML5 creative for this format.

2.The width and height of the creative

Standart creative size:
  • 100%x400px

    Все мобильные площадки Rambler&Co, кроме Рамблер/почта

To create an effect of 100% of the width, you need to show creative elements across the entire width of the creative (the minimum width is 300px, the maximum width is 970px.

3. File size limits

The total weight of the creative and all files and resources uploaded by the creative that are required for it correct operation - до 150KB.

Video creatives are the exceptions, available size — up to 3,15MB.

The total weight of the creative does not take into account the weight of third-party JS libraries hosted on servers dsp-rambler.ru . A list of such libraries is provided in paragraph 4 of these technical requirements, subsection Images, CSS and JS.

If creative is provided in the form of ZIP file archive, the above requirements remain in effect. The weight of the ZIP file does not matter.

4. HTML5-creative implementation specification

HTML5-creative is an ad, displaying an any HTML content or image. The HTML code must be a usual HTML page with styles and scripts. It places into iframe and has limited access to the site content.

IMPLEMENTATION OF AN ARCHIVE WITH THE HTML5-CREATIVE BY YOUR OWN TOOLS AND EFFORTS

The archive with HTML code may be prepared in two ways:

- Using your own tools and efforts.

- Using an editor. See the Guide of creative preparation in Adobe Animate CC.

THE CONTENT OF A PROJECT .ZIP

An HTML5-creative must be provided in the form of a .zip archive including creative's content. 

This archive must contain the following files:

1. Creative file index.html
  • Size — not more than 64KB.
  • Encoding — UTF-8.
2. Other files

The following set of symbols should be used for the names of other files and directories: "-" "." "_", digits and Latin alphabet. 

The length of the file names, including the path from the unpacked archive's root, must be 256 symbols maximum.

 

Archive content example:

CREATIVE'S HTML5 CODE

Creative's HTML code must be set in the file index.html.

The content of the file must meet the following requirements

 Images, CSS and JS

To speed up the download, all creative resources (JavaScript, CSS and images) must be placed inside the HTML code and loaded in parallel.

The external resources is not allowed in the code. All the links in the creative must be a relative paths in the ZIP archive. If you use an external JS libraries, you must provide them with the creative together, except for the listed below.

The following external libraries place on Rambler Group's servers (<version> - corresponding the library version):

  • jQuery (versions available as of the publication date: from 1.2.3 to 3.3.1 (the list will be expanded with new versions))  
    • //dsp-rambler.ru/js/jquery/jquery-<version>.min.js 
  • CreateJS (the list is expanded with new versions)
    • //dsp-rambler.ru/js/createjs/createjs-2015.11.26.min.js
    • //dsp-rambler.ru/js/createjs/easeljs-0.8.2.min.js
    • //dsp-rambler.ru/js/createjs/tweenjs-0.6.2.min.js
    • //dsp-rambler.ru/js/createjs/preloadjs-0.6.2.min.js
    • //dsp-rambler.ru/js/createjs/1.0.0/createjs.min.js
    • //dsp-rambler.ru/js/createjs/1.0.0/easeljs.min.js
    • //dsp-rambler.ru/js/createjs/1.0.0/tweenjs.min.js
    • //dsp-rambler.ru/js/createjs/1.0.0/preloadjs.min.js
  • Greensock (versions available as of the publication date: from 1.16.0 to 3.5.1 (the list is expanded with new versions))

Composition of files: from 1.16.0 to 2.1.3:

    • //dsp-rambler.ru/js/gsap/<version>/easing/EasePack.min.js
    • //dsp-rambler.ru/js/gsap/<version>/plugins/CSSPlugin.min.js
    • //dsp-rambler.ru/js/gsap/<version>/TweenLite.min.js
    • //dsp-rambler.ru/js/gsap/<version>/TweenMax.min.js
    • //dsp-rambler.ru/js/gsap/<version>/TimelineLite.min.js
    • //dsp-rambler.ru/js/gsap/<version>/TimelineMax.min.js

Composition of files: from 3.0.0 to 3.0.5:

    • //dsp-rambler.ru/js/gsap/<version>/gsap.min.js
    • //dsp-rambler.ru/js/gsap/<version>/EasePack.min.js
  • AdobeEdge
    • //dsp-rambler.ru/js/edge/edge.6.0.0.min.js

It is forbidden to use outdated, non-standard and experimental JavaScript API methods.

Video

When using video in an HTML creative, consider the following requirements:

  • the format of the file - .mp4;
  • the creative must contain control elements of video and audio: buttons to stop and start video, turn sound on and off;
  • control elements  should be visible, clearly readable and work according to the designation;
  • the sound should be turned off by default, it should be turned on only by clicking on the control button;
  • the video plays once when the creative is loaded and stops after. Repeated playback is possible by clicking on the control button;
  • video and audio in the banner should be stopped when you go to the client's website;
  • the field of creative beyond the area of the video must be filled with elements of creative, and not allowed to use the fields in a homogeneous background (solid or gradient);
  • it is forbidden to use video files to implement animation of creative elements.
Click URLs

To create a URL to the advertised resource, it is required to specify a target attribute with the value _blank so that the advertiser's website opens in the new window. Example.

Using several click URLs is allowed, for example, for different creative's areas - see the macro %clickurl_N%. It is possible to use the macro %clickurl_N% instead of listing macros of all links. 

Displaying and operability

It is not recommended to place logos, legal information and important elements in the upper part of the creative in the height of 13px, because in this area they can be overlapped by the inscription "Advertising" and information about the advertiser (example - Advertiser: LTD " Chamomile").

The creative must work correctly on devices with different values devicePixelRatio (for example, retina-display).

The creative must work and be displayed correctly in Internet Explorer 9 and higher, Firefox 14 and higher, Safari 6 and higher, Chrome 14 and higher, Opera 12 and higher, Yandex.Browser 14 and higher, Microsoft Edge 13 and higher. To ensure the cross-browser compatibility, the system apply the analog of a normalize.css therefore, availability of the "style" tag does not guarantee relevant changes in the creative's display.
Clicking on the banner, audio/video support must be stopped (if it used).

When hovering over clickable creative elements, the cursor should be in the form of a hand with the index finger (pointer).

If the banner background is light/white/transparent, a single pixel frame in a contrasting colour is needed to separate it from the site content.

Forbidden: access to external iframe items, as while showing on the site the creative will be uploaded to iframe from a domain name different from the site domain name.

The creative should not load the computer processor more than 30% on average and 60% at the peak.

The number of http requests required to load and start displaying the creative (i.e. during the Initial Load phase) must not exceed 10.

Macros

Important: macros only work inside index.html

  • %clickurl_N%, where N, the link number, substitutes the link with the number N. Example.

The enumeration of references starts with 1. If the code contains one reference, the macros should be %clickurl_1%.

  • %clickurls% - replaces all clickable links enclosed in quotes with comma-separated list so that it is possible to use such list as a JavaScript array. Example.
  • %encoded_clickurl_N% - similarly to %clickurl_N%, but the link will be additionally url-encoded.
  • %encoded_clickurls% - similarly to %clickurls%, but links will be additionally url-encoded.
  • %random% - a big random whole number is put. For example https://example.com/?rnd=%random%/ will become https://example.com/?rnd=1431655765/%rclid%.
  • %rclid% - click's unique identifier is put.
 
EXAMPLES
1. Example of a simple index.html file:
<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="UTF-8"> 
        <title>Banner</title>
    </head>
    <body>
        <a href="%clickurl_1%" target="_blank">
            <img src="images/banner.png" alt="Креатив" width="240" height="400">
        </a>
    </body>
</html>
2. Example of an index.html file for a creative stretched horizontally with different links for the text and for the image:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Banner</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <a href="%clickurl_1%" target="_blank">
            <img src="images/banner.png" alt="Креатив" width="200" height="200">
        </a>
        <div align="right">
            <a href="%clickurl_2%">Текст креатива</a>
        </div>
    </body>
</html>

3. Example of using the macro %clickurls%:
<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="UTF-8"> 
        <title>Banner</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <script> 
            var clickurls = [%clickurls%]; 
            function click(n){     
                n = (n || 1) - 1; 
                window.open(clickurls[n], "_blank"); 
            } 
        </script>
    </head>
    <body>
        <img src="images/banner.png" alt="Креатив" width="200" height="200" onclick="click(1)">
        <div align="right">
            <span onclick="click(2)">Текст креатива</span>
        </div>
    </body>
</html>
 
CLICK URLS AND MEASUREMENT COUNTERS

Creatives of all formats must be supported with one or more links to the resource (including the links to external impression counters), such links specified (sent) separately, for example, through the LETO interface. The creative itself must not contain direct links to the resource.

The link (URL) to the advertised resource

Maximum link length - 1024 symbols.

In order to track post-click user’s activities it is required to:

  •  add the rclid=%rclid% parameter to the transfer link. Showing the creative, %rclid% will be replaced with the real value. For example:
    • https://kassa.rambler.ru/?utm_content=kassa&utm_medium=topline& utm_source=head&rclid=%rclid%
  • embedding the code of the Rambler/Top-100 counter in the website.
URL (link) of an external impression counter (the list of an external counters which we accept to the placement)

The counter is not accepted as JS code, only as a URL link.

Maximum link length - 1024 symbols.

The counter must support working using HTTPS. The link must be realize:

  • without protocol, for exapmle: //example.com/ - where the counter supports both HTTP and HTTPS.
  • specifying HTTPS as the protocol, for example: https://example.com/ - where the counter only supports HTTPS.

Note: to prevent links getting into the browser cache it is recommended to use the macro %random%.

You can see an example banner here.

You can download an example banner here.

5. Creative validation

Check out how your creative works live on our sites.

  • These requirements are supplement the General requirements to ad placements.
  • The placement can only be guaranteed if the ad materials, that fully meet the requirements, was submitted at least in five working days before the start of the ad campaign.