?

Requirements in Russian here / Требования на русском языке здесь.

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 format is displayed on screens wider than 1500px and consists of two vertical creatives displayed to the left and right of the site content.

Creatives are adaptive in width and height. The content of the creatives can be the same or different.

When scrolling creatives are fixed and remain in sight.

Animation in creatives plays one full cycle and stops on the frame with the advertised product, service.

The duration of the animation of the creative should not exceed 15 seconds, frame changes should not be frequent and Intrusive, with constant blinking of elements or the entire creative.

The format involves the use of creative in HTML5 format

2.The width and height of the creative

The creative must be adaptive and support the display in the range:

  • width: 100px to 300px;
  • height: from 600px to 100% of the available height of the container and can be limited to 1020px.

Creative elements should occupy 100% of the area reserved for them.

3. File size limits

The weight of each of the creatives and all files and resources uploaded by the creative that are required for it correct operation - up to 500KB.

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

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

These requirements are applicable for each of the two creatives, and two ZIP archives with different names for the left and right parts must be sent for placement.

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

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.