Технические требования

Медийная реклама
Витрины
Rich media
Дополнительные возможности
Мобильные версии сайтов
Мобильные приложения
Общие положения

Стандартные форматы Лето

Обязательно! Перед тем как отправить баннер на модерацию, проверьте его через Инструмент для просмотра креативов

 
Требования к HTML креативу

HTML5-баннер должен быть предоставлен в виде ZIP-архива с содержимым баннера.

  • Архив должен содержать файл index.html - непосредственно файл баннера. Размер этого файла должен быть не больше 64КБ. Кодировка UTF-8.
  • Для имён остальных файлов и директорий можно использовать следующий набор символов: -._, цифры и латинский алфавит.
  • Длина имён файлов, включая путь от корня распакованного архива, не должна превышать 256 символов.

Пример содержимого архива:



HTML-код баннера должен находиться в файле index.html. К его содержимому предъявляются следующие требования:

  • Все ссылки в баннере должны быть относительными путями в ZIP-архиве. При отработке баннера не должно быть внешних сетевых обращений. При необходимости все вспомогательные JS-библиотеки должны предоставляться вместе с баннером.
  • При использовании нескольких ссылок перехода на сайт рекламодателя (например, для разных областей баннера) в самом баннере (файле index.html) вместо ссылок перехода необходимо указывать макрос %clickurl_N%, где N - номер ссылки. Сами ссылки указываются отдельно от баннера.
  • Вместо перечисления макросов всех ссылок можно использовать макрос %clickurls%, который заменится на перечисление через запятую всех клик-ссылок, заключённых в кавычки так, чтобы это перечисление можно было использовать в качестве массива JavaScript.
  • При показе на площадке баннер будет загружен в iframe с домена, отличающегося от домена площадки, поэтому доступ к внешним объектам ифрейма запрещён.
  • Запрещено использование устаревших, нестандартных и экспериментальных методов JavaScript API.
  • Баннер должен корректно работать на устройствах с различными значениями devicePixelRatio.
  • Для обеспечения кроссбраузерности к коду баннера применяется аналог normalize.css, поэтому наличие тега style не гарантирует соответствующих изменений в отображении баннера.
  • Для ссылки на рекламируемый ресурс необходимо прописывать атрибут target со значением _blank, чтобы сайт рекламодателя открывался в новом окне.

Пример простого файла index.html:

<!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>

 

Пример файла index.html для баннера растягиваемого по горизонтали с разными ссылками для текста и картинки:

<!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>

Пример использования макроса %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>
 

Баннеры всех форматов должны сопровождаться точной ссылкой на ресурс, указанной (присланной) отдельно. Сам баннер не должен содержать прямой ссылки на ресурс.

  1. Ссылка (URL) на рекламируемый ресурс:
  2. Ссылка (URL) внешнего счётчика показов (опционально).
    • Максимальная длина ссылки - 1024 знаков.
    • Счётчик должен поддерживать работу по HTTPS. Ссылку необходимо указывать:
      • без указания протокола, например: //example.com/, - если счётчик поддерживает оба протокола HTTP и HTTPS.
      • с указанием протокола HTTPS, например: https://example.com/, - если счётчик поддерживает только HTTPS.
  3. В ссылках для клика и внешнего счётчика можно использовать макрос %random%, чтобы избежать использования кэша браузера для этих ссылок. Вместо макроса в ссылку будет вставлено большое целое число. Например, из https://example.com/?rnd=%random%/ получится https://example.com/?rnd=1431655765/

Необходимо обеспечить корректную работу креативов в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 6 и выше, Chrome 14 и выше, Opera 12 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge 13 и выше.

Инструкции по подготовке креативов в популярных HTML5 редакторах можно найти по ссылке.

Общие положения

Данные требования дополняют условия размещений

Настоящий документ не регламентирует ценовую политику компании  и морально-этические требования к креативам рекламных материалов.

Размещение может быть гарантировано только при условии предоставления рекламных материалов, полностью соответствующих требованиям, минимум за пять рабочих дней до начала размещения.

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

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 accelerate creative’s uploading, it is better to allocate JavaScript and CSS inside the creative's HTML code.

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&Co's servers (<version> - corresponding the library version):
  • jQuery (versions available as of the publication date: from 1.2.3 to 3.2.1 (the list will be expanded with new versions))  
- //dsp-rambler.ru/js/jquery/jquery-.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

  • Greensock (versions available as of the publication date: from 1.16.0 to 1.20.3 (the list is expanded with new versions))

- //dsp-rambler.ru/js/gsap//easing/EasePack.min.js

- //dsp-rambler.ru/js/gsap//plugins/CSSPlugin.min.js

- //dsp-rambler.ru/js/gsap//TweenLite.min.js

- //dsp-rambler.ru/js/gsap//TweenMax.min.js

- //dsp-rambler.ru/js/gsap//TimelineLite.min.js

- //dsp-rambler.ru/js/gsap//TimelineMax.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.

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

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

- http://www.afisha.ru/msk/cinema/?rclid=%rclid%

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