Требования к рекламным материалам

Рекламные материалы не должны содержать элементы пользовательского графического интерфейса и элементы дизайна страниц Яндекса: недопустимо использование изображения курсора, поисковой строки, процесса ввода поискового запроса, псевдофункциональных кнопок и других элементов, имитирующих интерфейс Яндекса.

Рекламные материалы должны соответствовать требованиям, изложенным в документе «Баннеры HTML5. Требования к рекламным материалам / Технические требования к баннеру HTML5 с раскрывающимся блоком в Яндекс.Директе».

Дизайн рекламных материалов должен соответствовать требованиям, изложенным в документе «Требования к оформлению баннеров на Главной странице / Полная версия сайта».

Для целей размещения рекламных материалов рекламодатель должен предоставить следующие файлы:

1. HTML5-баннер или баннер-изображение/графический баннер
2. Раскрывающийся блок баннера в HTML5 формате

Дополнительно, для проигрывания в раскрывающемся блоке баннера, могут загружаться видеоролики. Максимальное количество видеороликов — 4.

Общие требования

• HTML5- баннер, который соответствует требованиям, изложенным в документе «Баннеры HTML5. Требования к рекламным материалам / Технические требования к баннеру HTML5 в Яндекс.Директе».
• В архиве может быть не более 20 файлов. Включите исходный код из файлов JavaScript, CSS, SVG в HTML-файл, а все растровые изображения объедините в один файл (атлас спрайтов).
• Вес архива без видеофайла должен быть меньше 1 МБ. Видеофайл должен занимать до 20 МБ, т. е. архив с видеофайлом должен занимать до 21 МБ. Вес каждого HTML-файла в архиве должен быть меньше 150 КБ.
• Основной баннер не должен содержать интерактивные элементы, обработчиков клика и дополнительные ссылки, в том числе кнопку повтора анимации. По клику на основной баннер показывается раскрывающийся блок баннера
• В теге <meta> укажите размер баннера следующим образом:

  <meta name="ad.size" content="width=1456,height=180">

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

• Раскрывающийся блок должен корректно отображаться при изменении высоты в диапазоне от 360 до 675 пикселей и ширины от 640 до 1200 пикселей, т. е. при изменении размера баннера на всем диапазоне от минимальных до максимальных высоты и ширины на баннере не должно появляться артефактов и искажений
• Вся значимая информация должна быть отцентрирована
• Вся область раскрывающегося блока баннера должна быть кликабельной, т. е. клик по любой области баннера должен или осуществлять действия, предусмотренные интерактивными элементами баннера, или вести на сайт рекламодателя
• В раскрывающемся блоке баннера не должно быть тега ad.size
• По клику на баннер должен отрабатывать специальный метод API: homeExpandableDesktopBannerAPI.click_and_close (click_num);
  Где click_num номер клика. Этот метод закрывает большое окно и делает переход на сайт рекламодателя на указанную ссылку по номеру URL, заведенному в системе.

  Добавляется, например, через addEventListener:

  
  <a id="click1_area" onmouseover="btnSiteOver()" onmouseout="btnSiteOut()">
     <div class="btnSite" id="btnSite"></div></a>
  <script>
     document.getElementById("click1_area").addEventListener("click",function(){
        homeExpandableDesktopBannerAPI.click_and_close(1);
     });
  </script>
  

  Если есть второй клик, то аналогично:

  
  document.getElementById("click2_area").addEventListener("click",function(){
     homeExpandableDesktopBannerAPI.click_and_close(2);
  });
  

  Для банеров сделанных в Adobe может использоваться и такая конструкция добавления кликов к объектам среды Animate CC:

  
  /* основной клик */
  this.bgfull.addEventListener("click", fl_MainClick);
  function fl_MainClick(e) {
     if (e.nativeEvent.button == 0){  /* проверяем, что клик только по левой кнопке */
        homeExpandableDesktopBannerAPI.click_and_close(1);
     }
     return true;
  }
  /* дополнительный клик по кнопке внутри баннера */
  this.btn.addEventListener("click", fl_ClickOnButton);
     function fl_ClickOnButton(e) {
        if (e.nativeEvent.button == 0){ /* проверяем, что клик только по левой кнопке */
           homeExpandableDesktopBannerAPI.click_and_close(2);
        }
     return false;
  }
  

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

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

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

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

Дополнительные требования к баннерам с видео

• Использование видеоролика допускается только в раскрывающемся блоке. Формат видеофайла — MP4. Максимальная продолжительность видеоролика — 5 минут. Максимальный вес видео (распакованный файл) — 20 МБ. Обращение к видеоролику должно осуществляться с помощью метода homeExpandableDesktopBannerAPI.getVideoURL():

  var url_video = homeExpandableDesktopBannerAPI.getVideoURL();

• Если видеоролик проигрывается автоматически при загрузке раскрывающегося блока, то воспроизведение должно выполняться с выключенным звуком. Если видеоролик проигрывается при нажатии кнопки «Play», воспроизведение может начинаться с включенным звуком.
• Пользователь должен иметь возможность в любой момент остановить и возобновить показ видео.
• Не допускается воспроизведение звука отдельно от видео.