?
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

Fullscreen format on top of the site content when the page is loaded.

The creative closes automatically after 10 seconds, or when clicking on the 'cross'.

Use the HTML5 creative for this format.

2.The width and height of the creative

Width: minimum - 900px, maximum - 100%.

Height: minimum - 600px, maximum - 100%.

Elements of creativity should occupy 100% of the area reserved for them.

The creative should be adaptive and proportionally decrease or increase depending on the resolution of the user's screen.

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 - до 500KB.

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

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.0.5 (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

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 color is light / white / transparent, then a black one-pixel frame is needed.

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.

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

While developing creative, consider the following additional requirements:

  • It is forbidden to add a cross on the side of the creative. This function is implemented on the side of the advertising system.
  • Only one click link from the creative is allowed.

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.