?
1. Общее описание формата
2. Ширина и высота креатива
3. Максимальный вес креатива
4. Требования к реализации HTML5 креатива
5. Требования к реализации расхлопа
6. Проверка креатива

1. Общее описание формата

При загрузке страницы показывается стандартный креатив в формате Billboard 100%х250 или 300х600.

При наведении курсором мыши длительностью не менее 1 секунды открывается креатив большого размера поверх контента сайта.

Общее количество расхлопов до креатива большего размера ограничено - до 2 за сессию.

При клике на креатив осуществляется переход на сайт рекламодателя.

Креатив большего размера схлопывается до стандартных размеров при выполнении любого из следующих условий:

  • клик на крестик в правом верхнем углу;
  • курсор мыши отведен с области показа креатива;
  • прошло 30 секунд с момента расхлопа до креатива большого размера;
  • клик на креатив.

2. Ширина и высота креатива

  • Расхлоп из формата Billboard 100%х250 - 100%х500px.

  • Расхлоп из формата 300х600 - 600х600px.

3. Максимальный вес креатива

Общий вес креатива и всех подгружаемых креативом файлов и ресурсов, необходимых для его корректной работы — до 500КБ.

Исключение для креативов с видео - максимальный вес - до 3,5МБ.

В общем весе креатива не учитывается вес сторонних JS-библиотек, размещенных на серверах dsp-rambler.ru. Список таких библиотек представлен в п. 4 данных технических требований, поздраздел Картинки, CSS и JS.

Если креатив предоставлен в виде файла ZIP-архива, указанные выше требования остаются в силе. Вес файла ZIP-архива во внимание не принимается.

4. Требования к реализации HTML5 креатива

Креатив HTML5 — креатив, который отображает произвольное HTML-содержимое или изображение. HTML-код может представлять из себя обычную HTML страницу со стилями и скриптами. Он помещается в iframe и имеет ограниченный доступ к содержимому площадки.

Реализация архива с HTML5 креативом

Архив с HTML-кодом можно подготовить самостоятельно (инструкция ниже) или с помощью редактора Adobe Animate CC (инструкция здесь).

Самостоятельная реализация архива с HTML5 креативом

Содержимое zip-архива с проектом

HTML5-креатив должен быть предоставлен в виде ZIP-архива с содержимым креатива. Данный архив должен содержать следующие файлы:

1. Файл index.html

Размер — до 64КБ.

Кодировка — UTF-8.

2. Остальные файлы

Для имён остальных файлов и директорий можно использовать следующий набор символов: «-» «.» «_», цифры и латинский алфавит. Длина имён файлов, включая путь от корня распакованного архива, не должна превышать 256 символов.

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

HTML5-код креатива

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

Картинки, CSS и JS

Для ускорения загрузки все ресурсы креатива (JavaScript, CSS и картинки) необходимо размещать внутри HTML-кода  и загружать параллельно.

В коде не допускается использовать внешние ресурсы. Все ссылки в креативе должны быть относительными путями в ZIP-архиве.

При необходимости использования сторонних JS-библиотек необходимо их предоставить вместе с креативом, за исключением нижеперечисленных. Следующие внешние библиотеки размещены на серверах Rambler Group (<version> - соответствующая версии библиотеки):

  • jQuery (доступные версии на момент публикации: с 1.2.3 до 3.3.1 (список расширяется новыми версиями))

//dsp-rambler.ru/js/jquery/jquery-<version>.min.js

  • CreateJS (список расширяется новыми версиями)

//dsp-rambler.ru/js/createjs/createjs-2015.05.21.min.js

//dsp-rambler.ru/js/createjs/createjs-2015.11.26.min.js

//dsp-rambler.ru/js/createjs/1.0.0/createjs.min.js

//dsp-rambler.ru/js/createjs/easeljs-0.8.1.min.js

//dsp-rambler.ru/js/createjs/easeljs-0.8.2.min.js

//dsp-rambler.ru/js/createjs/tweenjs-0.6.1.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 (доступные версии на момент публикации: с 1.16.0 до 3.5.1 (список расширяется новыми версиями))

Состав файлов: с версии 1.16.0 до 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

Состав файлов: c версии 3.0.0 до 3.5.1:

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

Запрещено использовать устаревшие, нестандартные и экспериментальные методы JavaScript API.

Видео

При использовании видео в HTML креативе необходимо учитывать следующие требования:

  • формат файла - .mp4;
  • креатив должен обязательно содержать элементы управления видео и звуком: кнопки остановки и старта проигрывания видео, включения и выключения звука;
  • элементы управления должны быть заметными, однозначно читаться и работать согласно обозначению.
  • звук по умолчанию должен быть выключен, включается только по клику на управляющую кнопку;
  • на desktop форматах видео проигрывается однократно при загрузке креатива и останавливается. Повторное проигрывание возможно по клику или нажатию на управляющую кнопку;
  • на mobile форматах видео должно проигрываться при нажатии на кнопку старта видео, проигрываться однократно и останавливаться;
  • при переходе на сайт клиента видео и аудио потоки в баннере должны быть остановлены;
  • области креатива за пределами зоны видео рекомендуется заполнять другими элементами креатива;
  • запрещается использование видео-файлов для реализации анимации элементов креатива.
Ссылки перехода

Для ссылки на рекламируемый ресурс необходимо прописывать атрибут target со значением _blank, чтобы сайт рекламодателя открывался в новом окне. Пример.

Допускается использовать несколько ссылок перехода, например, для разных областей креатива - см. макрос %clickurl_N%. Вместо перечисления макросов всех ссылок можно использовать макрос %clickurls%.

Сами ссылки предоставляются отдельно от креатива, например, через интерфейс ЛЕТО.

Oтображение и работоспособность

Не рекомендуется в верхней части креатива высотой в 13px располагать логотипы, юридическую информацию и важные элементы, так как в этой области они могут быть перекрыты надписью "Реклама" и информацией о рекламодателе (пример - Рекламодатель: OOO "Ромашка").

Креатив должен корректно работать на устройствах с различными значениями devicePixelRatio (например, retina-display).

Креатив должен корректно работать и отображаться в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 6 и выше, Chrome 14 и выше, Opera 12 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge 13 и выше. Для обеспечения кроссбраузерности к коду креатива применяется аналог normalize.css, поэтому наличие тега style не гарантирует соответствующих изменений в отображении креатива.

При клике на баннер аудио/видео сопровождение должно быть остановлено (если используется).

При наведении на кликабельные элементы креатива курсор должен быть в виде руки с указательным пальцем (pointer).

Если фон баннера светлый/белый/прозрачный, необходима однопиксельная рамка контрастного цвета для отделения от контента сайта.

Запрещается доступ к внешним объектам iframe, так как при показе на площадке креатив будет загружен в iframe с домена, отличающегося от домена площадки.

Креатив не должен нагружать процессор компьютера более 30% в среднем и 60% в пике.

Количество запросов (http requests), необходимых для загрузки и начала отображения креатива (т.е. на фазе Initial Load), не должно превышать 10.

Макросы

Внимание: макросы работают только внутри index.html.

  • %clickurl_N%, где N - номер ссылки - подставляет ссылку с номером N. Пример 1.

Нумерация ссылок начинается с 1. Если кликовая ссылка одна, макрос должен иметь вид %clickurl_1%.

  • %clickurls% - заменяет на перечисление через запятую всех клик-ссылок, заключённых в кавычки так, чтобы это перечисление можно было использовать в качестве массива JavaScript. Пример.
  • %encoded_clickurl_N% - аналогично %clickurl_N%, только ссылка будет дополнительно url-кодирована.
  • %encoded_clickurls% - аналогично %clickurls%, только ссылки будут дополнительно url-кодированы.
  • %random% - подставляется большое случайное целое число. Например, из https://example.com/?rnd=%random%/ получится https://example.com/?rnd=1431655765/
  • %rclid% - подставляется уникальный идентификатор клика.
 
Примеры
1. Простой файл 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>

2. Файл 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>

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

 Ссылки (URL) перехода и внешние счетчики промера

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

Ссылка (URL) на рекламируемый ресурс

Максимальная длина ссылки - 1024 знаков.

Для отслеживания активности пользователя, кликнувшего по креативу, необходимо:

  • добавить в ссылку перехода параметр rclid=%rclid%. При показе креатива %rclid% заменится на реальное значение. Например: https://kassa.rambler.ru/?utm_content=kassa&utm_medium=topline& utm_source=head&rclid=%rclid%
  • установить на сайт код счётчика Rambler/Top-100.
Ссылка (URL) внешнего счётчика показов (список сторонних систем, принимаемых к размещению) 

Счетчик не принимается JS-кодом, только URL ссылкой.

Максимальная длина ссылки - 1024 знаков.

Счётчик должен поддерживать работу по HTTPS. Ссылку необходимо прописывать:

  • без указания протокола, например: //example.com/ - если счетчик поддерживает оба протокола HTTP и HTTPS.
  • с указанием протокола HTTPS, например: https://example.com/ - если счётчик поддерживает только HTTPS.

Примечание: для защиты от попадания ссылок в кеш браузера следует использовать макрос %random%. Предоставление ссылки внешнего счетчика показов без проставленного макроса макрос %random% может привести к расхождению статистики.

5. Требования к реализации расхлопа

Необходимо предоставить креатив в формате HTML5.

Такой креатив может отображать произвольное HTML-содержимое. Он помещается в iframe и практически не имеет доступа к содержимому площадки. Всё взаимодействие с окном, в которое встроен креатив, осуществляется через API, предоставляемое клиентским скриптом.

Подключение библиотеки с API:

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

<script src='https://dsp-rambler.ru/tpl/Unfold/%template_version%/external.js'></script>

ВОЗМОЖНОСТИ

Расхлоп по наведению (инициатор расхлопа - рекламная система Rambler Group):

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

Пример:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <title>External creative</title>
    <script src='https://dsp-rambler.ru/tpl/Unfold/%template_version%/external.js' defer></script>
  </head>

 
  <body>
    <script>
      window.ramblerDSP = window.ramblerDSP || {};
      window.ramblerDSP.subscriptions = window.ramblerDSP.subscriptions || {};
      window.ramblerDSP.subscriptions.iframeOnExpand = [
        function() { console.log('Баннер расхлопнулся'); },
      ];
      window.ramblerDSP.subscriptions.iframeOnBeforeExpand = [
        function() { console.log('Баннер будет расхлопнут'); },
      ];
      window.ramblerDSP.subscriptions.iframeOnCollapse = [
        function() { console.log('Баннер схлопнулся'); },
      ];
      window.ramblerDSP.subscriptions.iframeOnBeforeCollapse = [
        function() { console.log('Баннер будет схлопнут'); },
      ];
    </script>
    <div style='width: 100%; height: 300px; background: deepskyblue;'></div>
  </body>
</html>

В данном случае скрипт rambler-dsp подгружается асинхронно, клиент подписывается на события, которые вызываются после установки 'соединения' между родительским окном и дочерним, при возникновении соответствующих изменений шаблона(описание в разделе 'События').

Креатив при данном типе расхлопа может быть:

  • адаптивным, то есть при увеличении размеров iframe, в котором он располагается, увеличиваться и уменьшаться в размерах вслед за ним;
  • расхлопываться до необходимых значений ширины и высоты программным путём, при помощи подписки на события шаблона.

События:

Все колбэки на события хранятся в window.ramblerDSP.subscriptions

Доступны следующие колбэки шаблона:

  • onInit - массив, в который необходимо записать все колбэки, которые должны быть вызваны после установки соединения между родительским и дочерним окном. В момент срабатывания события становятся доступны методы родительского окна;
  • iframeOnExpand - массив, в который необходимо записать все колбэки, которые должны быть вызваны после расхлопывания креатива;
  • iframeOnCollapse - массив, в который необходимо записать все колбэки, которые должны быть вызваны после схлопывания креатива;
  • iframeOnBeforeExpand - массив, в который необходимо записать все колбэки, которые должны быть вызваны перед расхлопом креатива;
  • iframeOnBeforeCollapse - массив, в который необходимо записать все колбэки, которые должны быть вызваны перед схлопыванием креатива.

Пример:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <title>External creative</title>
  </head>

 
  <body>
    <script src='https://dsp-rambler.ru/tpl/Unfold/%template_version%/external.js' defer></script>
    <script>
      window.ramblerDSP = window.ramblerDSP || {};
      window.ramblerDSP.subscriptions = window.ramblerDSP.subscriptions || {};
      window.ramblerDSP.subscriptions.iframeOnExpand = [
        function() { console.log('Баннер расхлопнулся'); },
      ];
      window.ramblerDSP.subscriptions.iframeOnCollapse = [
        function() { console.log('Баннер схлопнулся'); },
      ];
      window.ramblerDSP.subscriptions.onInit = [
        function() { console.log('Соединение установлено, методы, предоставляемые rambler dsp доступны'); },
      ];
    </script>
    <div style='width: 100%; height: 300px; background: deepskyblue;'></div>
  </body>
</html>

Внимание!

Колбэки могут быть записаны и после загрузки библиотеки, и до. Исключение составляет событие onInit, которое вызывается единожды при установке соединения между iframe с креативом и родительским окном. Если на момент загрузки библиотеки не будет осуществлена подписка, то в дальнейшем записанный колбэк не будет вызван.

Методы:

В глобальном объекте после подгрузки и исполнения нашего js файла доступна функция window.ramblerDSP.getMethods, вызвав которую, можно получить доступ к различным методам, в их числе:

  • expand - вызывает расхлоп баннера со стороны главного окна (в которое встроен креатив);
  • collapse - схлопывает баннер со стороны главного окна (в которое встроен креатив).

Вызвав метод 'then' с аргументом в виде колбэка после использования одного из этих методов, можно получить информацию о результате выполнения метода.

Пример:

window.ramblerDSP.getMethods(function(methods) {
  methods.expand().then(function(isExpanded) {
    if (isExpanded) {
      console.log('Креатив расхлопнут')
    }
  });
  methods.collapse().then(function(isCollapsed) {
    if (isCollapsed) {
      console.log('Креатив схлопнут')
    }
  });
});

6. Проверка креатива

Проверьте как работает ваш креатив вживую на наших площадках.

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