C@S.md

Общие требования для всех категорий баннеров:

Динамический баннер является частным случаем HTML5-баннера и наследует его технические требования. Кроме требований для HTML5-баннеров необходимо соблюсти следующие условия:

1. Все кликабельные ссылки должны вставляться только в виде html-тега <a>. Эмуляция кликабельной области с помощью JavaScript запрещается
2. Элементы баннера, которые предполагают пользовательское взаимодействие (формы, кнопки и пр. интерактивные компоненты), не должны перекрываться кликабельной ссылкой.
3. В случае возникновения ошибок в баннере необходимо обеспечить показ его упрощенной версии или gif-заглушки.
4. Из баннера необходимо убрать теги html, head (со всем содержимым, в т.ч. meta), и body. Стили и скрипты, подключаемые в теге head должны быть вынесены за него.
5. Все стили и скрипты, которые имеют обращение к статическим ресурсам баннера (картинки, шрифты и т.д.), должны быть размещены в html-файле в тегах script и style.
6. Все содержимое баннера, которое будет динамически меняться в рамках кампании, должно быть только внутри разметки баннера. Запрещено переопределение внутри js и css.
7. Все скрипты и стили, которые вставляются в html inline (инлайново) должны быть внутри одного тега script и одного тега style. К стилям и скриптам, которые подключаются из внешних файлов данное правило не относится
8. В html-файле баннера количество символов не должно превышать 65000.

Код баннера включается на страницу «через слот», таким образом, DOM-элементы баннера являются частью объекной модели документа страницы, а JavaScript-код исполняется в том же окружении что и исходный код площадки, на которой размещается этот баннер. Кроме того, объявление CSS правил баннера происходит в глобальной области видимости селекторов страницы. Таким образом возникают следующие возможные источники ошибок:

• Коллизии объявлений CSS правил, переопределение правил площадки;
• Побочные эффекты при выполнении JS кода баннера влияющие на работу площадки;
• Возникновение непойманных JS исключений в коде баннера приводящих к остановке выполнения текущего стека вызовов;
• Побочные эффекты DOM-манипуляций.

Для минимизации вероятности возникновения ошибок необходимо принять ряд ограничений и требований предъявляемых к исходному коду баннера. Учитывая возможные источники ошибок примем:

• Ограничения накладываемые на манипуляции с объектной моделью документа;
• Требования к объявлению CSS правил;
• Требования к JavaScript коду баннера.

Ограничения накладываемые на манипуляции с объектной моделью документа

Запрещены любые манипуляции с DOM узлами выше родительского узла баннера.

Исключениями являются:

• Операции чтения полей DOM узлов;
• Регистрация и удаление обработчиков событий mousemove, scroll, resize объекта window и visibilitychange объекта document. Работа с событиями должна осуществляться методами addEventListener и removeEventListener.

Требования к объявлению CSS правил

Запрещено описывать CSS-правила с использованием селекторов, которые могут вернуть элементы вне родительского узла баннера.

Достичь этого проще всего применяя компонентно-ориентированные методологии, например BEM, либо использовать инструменты создания областей имён на этапе сборки баннера, например css modules.

Требования к JavaScript коду баннера

В баннере запрещено:

• Взаимодействовать с переменными определёнными исходным кодом площадки;
• Создавать переменные в глобальной области видимости;
• Исполнять код, выполняющий DOM-манипуляции, противоречащие разделу «Ограничения накладываемые на манипуляции с объектной моделью документа».

Код баннера необходимо «оборачивать» в IIFE для избежания создания переменных в глобальной области видимости.

Требования для CRM-баннеров:

CRM-баннер — подтип динамического баннера, который позволяет осуществлять сбор пользовательских данных. Для этого баннер должен содержать форму пользовательского ввода, реализованную с помощью тега FORM. Отпраку данных необходимо осуществляась методом POST с кодировкой application/x-www-form-urlencoded. При этом URL, на который выполняется запрос, на этапе разработки креатива может быть любым на усмотрение разработчика.

Пользовательские данные собираются только на специальных предоставленных для кампании серверах Mail.Ru. Получение сервера для сбора данных обсуждается в индивидуальном порядке.

Пример CRM-баннера: ссылка на баннер

Требования для Live-баннеров:

Live-баннер — подтип динамического баннера, функционал и внешний вид которого, декларируется объектом формата JSON, формируемым на стороне клиента. Такой объект далее будем называть контекстом баннера.

Для запуска Live-баннера кроме архива с креативом необходимо предоставить так же URL, по которому HTTP-сервер клиента будет возвращать контекст баннера, например: http://time.jsontest.com/. Контекст должен быть досутпен по ссылке в течение всего времени проведения рекламной кампании. Данные возвращаемые по ссылке должны представлять собой валидный JSON.

Считывание контекста производится в JavaScript окружении баннера из глобальной переменной _bannerContext. Переменная указывает на десериализованный объект контекста баннера.

Пример Live-баннера: ссылка на баннер

Требования для Адаптивных баннеров:

Адаптивный баннер — подтип динамического баннера, функционал и внешний вид которого, декларируется объектом формата JSON, формируемым на стороне площадки. Такой объект далее будем называть контекстом баннера. Формат контекста баннера определяется площадкой и предоставляется клиенту на начальном этапе разработки креатива.

Считывание контекста производится в JavaScript окружении баннера из глобальной переменной _bannerContext. Переменная указывает на десериализованный объект контекста баннера.

Пример Адаптивного баннера: ссылка на баннер