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-баннер – баннер, сорбирающий информацию от пользователей. Например, баннер с формой, собирающий электронную почту пользователей.

1. Пользовательские данные должны собираться только на специальных предоставленных для кампании серверах Mail.Ru. Получение сервера для сбора данных обсуждается в индивидуальном порядке.
2. Запросы на сервер с пользовательскими данными должны отправляться из тега form методом POST, указав кодировку application/x-www-form-urlencoded.

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

Live-баннер – баннер с динамическим контентом. Контент подтягивается в баннер из JSON-файла.

1. Данные для баннера формируются в JSON. Все встроенные объекты и поля должны быть обернуты глобальным массивом. Пример JSON: https://cloud.mail.ru/public/LTEW/vEckTPevs
2. Все данные, которые приходят из JSON интерполируются только в DOM-объекты.
3. Вес картинки, которая подставляется в баннер из JSON не должен превышать 61кб
4. JSON-файл должен отдавать по протоколу https методом GET
5. Если имеется большое количество информации, где за конкретную выдачу баннера нужно отобразить один набор данных, то этот набор данных необходимо отдавать по одному за один GET-запрос. Например, имеется 100 картинок и баннер, способный отобразить 2 картинки. В этом случае, за один GET-запрос необходимо отдавать 2 ссылки на картинки в одном JSON-объекте. При 51 первом запросе необходимо начинать выдачу с самой первой пары изображений.

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

Адаптивный баннер – баннер, который формирует свой контент в зависимости от группы таргетирования. Например, в одном и том же креативе показываются 2 разных текста для жителей Москвы и Санкт-Петербурга.

1. Баннер будет формироваться только на серверах Mail.Ru исходя из выбранных условий таргетинга
2. Баннер должен соответсовать всем общим требованиям. Дополнительно необходимо выслать данные, которые будут подставляться в разметку баннера в зависимости от выбранных условий. Способ предоставления этих материалов обсуждается на индивидуальной основе, в зависимости от задач, которые необходимо реализовать в рамках данной кампании
3. Данные в Адаптивных баннерах формируются только в html-разметке.