Динамический баннер является частным случаем HTML5-баннера и наследует его технические требования. Кроме требований для HTML5-баннеров необходимо соблюсти следующие условия:
- Все кликабельные ссылки должны вставляться только в виде html-тега
<a>
. Эмуляция кликабельной области с помощью JavaScript запрещается - Элементы баннера, которые предполагают пользовательское взаимодействие (формы, кнопки и пр. интерактивные компоненты), не должны перекрываться кликабельной ссылкой.
- В случае возникновения ошибок в баннере необходимо обеспечить показ его упрощенной версии или gif-заглушки.
- Из баннера необходимо убрать теги
html
,head
(со всем содержимым, в т.ч.meta
), иbody
. Стили и скрипты, подключаемые в теге head должны быть вынесены за него. - Все стили и скрипты, которые имеют обращение к статическим ресурсам баннера (картинки, шрифты и т.д.), должны быть размещены в html-файле в тегах
script
иstyle
. - Все содержимое баннера, которое будет динамически меняться в рамках кампании, должно быть только внутри разметки баннера. Запрещено переопределение внутри js и css.
- Все скрипты и стили, которые вставляются в
html
inline (инлайново) должны быть внутри одного тегаscript
и одного тега style. К стилям и скриптам, которые подключаются из внешних файлов данное правило не относится - В html-файле баннера количество символов не должно превышать 65000.
Код баннера включается на страницу «через слот», таким образом, DOM-элементы баннера являются частью объекной модели документа страницы, а JavaScript-код исполняется в том же окружении что и исходный код площадки, на которой размещается этот баннер. Кроме того, объявление CSS правил баннера происходит в глобальной области видимости селекторов страницы. Таким образом возникают следующие возможные источники ошибок:
- Коллизии объявлений CSS правил, переопределение правил площадки;
- Побочные эффекты при выполнении JS кода баннера влияющие на работу площадки;
- Возникновение непойманных JS исключений в коде баннера приводящих к остановке выполнения текущего стека вызовов;
- Побочные эффекты DOM-манипуляций.
Для минимизации вероятности возникновения ошибок необходимо принять ряд ограничений и требований предъявляемых к исходному коду баннера. Учитывая возможные источники ошибок примем:
- Ограничения накладываемые на манипуляции с объектной моделью документа;
- Требования к объявлению CSS правил;
- Требования к JavaScript коду баннера.
Запрещены любые манипуляции с DOM узлами выше родительского узла баннера.
Исключениями являются:
- Операции чтения полей DOM узлов;
- Регистрация и удаление обработчиков событий
mousemove
,scroll
,resize
объектаwindow
иvisibilitychange
объектаdocument
. Работа с событиями должна осуществляться методамиaddEventListener
иremoveEventListener
.
Запрещено описывать CSS-правила с использованием селекторов, которые могут вернуть элементы вне родительского узла баннера.
Достичь этого проще всего применяя компонентно-ориентированные методологии, например BEM, либо использовать инструменты создания областей имён на этапе сборки баннера, например css modules.
В баннере запрещено:
- Взаимодействовать с переменными определёнными исходным кодом площадки;
- Создавать переменные в глобальной области видимости;
- Исполнять код, выполняющий DOM-манипуляции, противоречащие разделу «Ограничения накладываемые на манипуляции с объектной моделью документа».
Код баннера необходимо «оборачивать» в IIFE для избежания создания переменных в глобальной области видимости.
CRM-баннер – баннер, сорбирающий информацию от пользователей. Например, баннер с формой, собирающий электронную почту пользователей.
- Пользовательские данные должны собираться только на специальных предоставленных для кампании серверах Mail.Ru. Получение сервера для сбора данных обсуждается в индивидуальном порядке.
- Запросы на сервер с пользовательскими данными должны отправляться из тега form методом POST, указав кодировку application/x-www-form-urlencoded.
Live-баннер – баннер с динамическим контентом. Контент подтягивается в баннер из JSON-файла.
- Данные для баннера формируются в JSON. Все встроенные объекты и поля должны быть обернуты глобальным массивом. Пример JSON: https://cloud.mail.ru/public/LTEW/vEckTPevs
- Все данные, которые приходят из JSON интерполируются только в DOM-объекты.
- Вес картинки, которая подставляется в баннер из JSON не должен превышать 61кб
- JSON-файл должен отдавать по протоколу https методом GET
- Если имеется большое количество информации, где за конкретную выдачу баннера нужно отобразить один набор данных, то этот набор данных необходимо отдавать по одному за один GET-запрос. Например, имеется 100 картинок и баннер, способный отобразить 2 картинки. В этом случае, за один GET-запрос необходимо отдавать 2 ссылки на картинки в одном JSON-объекте. При 51 первом запросе необходимо начинать выдачу с самой первой пары изображений.
Адаптивный баннер – баннер, который формирует свой контент в зависимости от группы таргетирования. Например, в одном и том же креативе показываются 2 разных текста для жителей Москвы и Санкт-Петербурга.
- Баннер будет формироваться только на серверах Mail.Ru исходя из выбранных условий таргетинга
- Баннер должен соответсовать всем общим требованиям. Дополнительно необходимо выслать данные, которые будут подставляться в разметку баннера в зависимости от выбранных условий. Способ предоставления этих материалов обсуждается на индивидуальной основе, в зависимости от задач, которые необходимо реализовать в рамках данной кампании
- Данные в Адаптивных баннерах формируются только в html-разметке.