Технические требования к баннеру с раскрывающимся блоком

HTML5-баннер с раскрывающимся блоком — это ZIP-архив, содержащий два файла HTML (основной баннер и раскрывающийся блок баннера) и файлы JavaScript, JSON, CSS, JPEG, GIF, PNG, SVG, MP4. Вы можете добавить несколько вариантов основного HTML5-баннера для отображения на различных экранах:

Экран Обычный HiDPI
Размер основного баннера в пикселях 728 × 90 1456 × 180
Максимальный вес архива 21 МБ 21 МБ
Максимальный вес видео (распакованный файл) 20 МБ 20 МБ
Максимальный вес содержимого баннера без видео (распакованные файлы) 1 МБ 1 МБ

Архив и файлы в нем должны соответствовать требованиям:

Общие требования
  1. В названиях файлов и каталогов можно использовать только буквы латинского алфавита, цифры и символы -._~.

  2. Все ссылки в HTML5-файлах должны быть относительными и вести на другие файлы из архива.

  3. В архиве может быть не более 20 файлов. Включите исходный код из файлов JavaScript, CSS, SVG в HTML-файлы, а все растровые изображения объедините в один файл (атлас спрайтов).

  4. Вес архива без видеофайла должен быть меньше 1 МБ. Видеофайл должен занимать до 20 МБ, т. е. архив с видеофайлом должен занимать до 21 МБ. Вес каждого HTML-файла в архиве должен быть меньше 150 КБ.

  5. Все обработчики событий должны быть явно указаны внутри тега script, например:

    <script>
        document.onload = init;
    </script>
  6. Разрешаются внешние вызовы JavaScript-библиотек, размещенных на серверах Яндекса. Если в HTML5-баннере используется другая библиотека, включите ее исходный код в архив.

  7. В ссылке на сайт, содержащейся в HTML5-баннере, должно быть не более 1024 знаков в кодировке UTF-8.

  8. В баннере не должны использоваться инструменты сбора статистики (пиксели, счетчики и прочие).

    При создании кампании вы сможете указать пиксель Яндекс.Аудиторий или счетчик ADFOX (подробнее в разделе Как запустить кампанию), а также использовать UTM-метки в ссылке на сайт.

Требования к основному баннеру
  1. Основной баннер не должен содержать интерактивные элементы, обработчиков клика и дополнительные ссылки, в том числе кнопку повтора анимации. По клику на основной баннер показывается раскрывающийся блок баннера.

  2. В атрибуте content тегa meta основного баннера должен быть указан размер HTML5-баннера, как в примере ниже:
    <meta name="ad.size" content="width=728,height=90">
    или
    <meta name="ad.size" content="width=1456,height=180">
Требования к раскрывающемуся блоку
  1. Раскрывающийся блок должен корректно отображаться при изменении высоты в диапазоне от 360 до 675 пикселей и ширины от 640 до 1200 пикселей, т. е. при изменении размера баннера на всем диапазоне от минимальных до максимальных высоты и ширины на баннере не должно появляться артефактов и искажений.

  2. Вся значимая информация должна быть отцентрирована.

  3. Вся область раскрывающегося блока баннера должна быть кликабельной, т. е. клик по любой области баннера должен или осуществлять действия, предусмотренные интерактивными элементами баннера, или вести на сайт рекламодателя.

  4. Переход по ссылке должен генерироваться вызовом метода homeExpandableDesktopBannerAPI.clickAndClose(clickNum), где clickNum — порядковый номер ссылки, указанной в поле Ссылки на сайт на странице создания или редактирования объявлений. Этот метод закрывает раскрывающийся блок и выполняет переход на сайт рекламодателя.
    <a id="click1_area"><div>баннер</div></a>
    <script>
       document.getElementById("click1_area").addEventListener("click", function(){
          homeExpandableDesktopBannerAPI.clickAndClose(1);
       });
    </script>
  5. Баннер не должен быть прозрачным и не должен содержать рамку.

  6. На всей области раскрывающегося блока не должно быть элементов, позволяющих его закрыть.

  7. В раскрывающемся блоке баннера обязателен тег meta с атрибутом ad.bgrcolor, который задает цвет подложки, например:

    <meta name="ad.bgrcolor" content="FFFFFF">

    Подложка не должна существенно отличаться от основного цвета баннера.

  8. В раскрывающемся блоке баннера не должно быть тега ad.size.

  9. В раскрывающийся блок баннера можно добавить управляющую кнопку Посмотреть еще раз, нажатие на которую приведет к повторному запуску сценария.

Требования к баннерам с видео
  1. Использование видеоролика допускается только в раскрывающемся блоке. Формат видеофайла — MP4. Максимальная продолжительность видеоролика — 5 минут. Обращение к видеоролику должно осуществляться с помощью метода homeExpandableDesktopBannerAPI.getVideoURL():
    var url_video = homeExpandableDesktopBannerAPI.getVideoURL();
  2. Если видеоролик проигрывается автоматически при загрузке раскрывающегося блока, то воспроизведение должно выполняться с выключенным звуком. Если видеоролик проигрывается при нажатии кнопки «Play», воспроизведение может начинаться с включенным звуком.
  3. Пользователь должен иметь возможность в любой момент остановить и возобновить показ видео.
  4. Не допускается воспроизведение звука отдельно от видео.

В архиве будет игнорироваться содержимое папки __MACOSX и файлы .DS_Store, Thumbs.db. Это вспомогательные файлы операционных систем, которые не нужны для работы HTML5-баннера.