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

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

Горизонтальный рекламный формат во вторых и ниже экранах с заданной высотой и адаптивной шириной, занимающий 100% ширины контентной области сайта.

Формат предполагает использование креатива в формате HTML5 с видео общей продолжительностью до 15 секунд.

Проигрывание видео должно происходить автоматически при попадании в видимую часть браузера. Если автоматическое проигрывание видео не происходит из-за ограничений браузера (к примеру, у пользователя включена настройка экономии трафика), проигрывание должно происходить при нажатии на кнопку старта видео.

Видео должно проигрываться один раз и останавливаться. Повторное проигрывание видео возможно при нажатии на кнопку старта видео.

Звук выключен по умолчанию, но может быть включен при нажатии на кнопку включения звука.

Область за пределами зоны проигрывания видео должна быть заполнена элементами креатива.

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

Для создания эффекта 100% ширины необходимо показывать элементы креатива по всей ширине креатива (минимальная ширина - 300px, максимальная - 970px.

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

Общий вес креатива и всех подгружаемых файлов - до 150КБ.

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

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/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.0.5 (список расширяется новыми версиями))

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

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

Видео

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

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

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

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

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

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

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

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

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

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

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

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

 

Макросы

Внимание: макросы работают только внутри 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. Проверка креатива

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


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