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. Проверка креатива
Проверьте как работает ваш креатив вживую на наших площадках.
- Данные требования дополняют общие положения размещения рекламных материалов.
- Размещение может быть гарантировано только при условии предоставления рекламных материалов, полностью соответствующих требованиям, минимум за пять рабочих дней до начала размещения.