Баннеры Яндекс. Требования для Mediasniper

❗️

Согласно статье 18.1. Федерального закона от 13.03.2006 N 38-ФЗ (ред. от 14.07.2022) "О рекламе"
Реклама, распространяемая в информационно-телекоммуникационной сети "Интернет", за исключением рекламы, размещенной в телепрограммах и телепередачах, радиопрограммах и радиопередачах, распространяемых в информационно-телекоммуникационной сети "Интернет", должна содержать пометку "реклама", а также указание на рекламодателя такой рекламы и (или) сайт, страницу сайта в информационно-телекоммуникационной сети "Интернет", содержащие информацию о рекламодателе такой рекламы.

Примеры правильной маркировки:
Реклама. ООО “Ромашка”
Реклама. romashka.ru
Реклама. ООО “Ромашка”. romashka.ru

Маркировки необходимо указывать на каждом кадре баннера и на всем протяжении видео-ролика.
Дисклеймер не заменяет маркировку.
Маркировка должна быть читабельна.

Технические требования к баннеру HTML5 для открутки на Яндекс

  1. Формат присылаемых данных — ZIP-архив.
  2. Размер архива не должен превышать 150 килобайт.
  3. Архив может содержать один HTML-файл и несколько файлов в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.

❗️

В архивах будет игнорироваться содержимое папки __MACOSX и файлы .DS_Store. Они создаются при архивировании на платформах Apple Mac OS X и для работы рекламных материалов не нужны.

  1. Для имени файлов и директорий допустимо использовать только такой набор символов:
    -._~ , цифры и латинский алфавит.
  2. Все ссылки в рекламных материалах должны быть относительными путями в ZIP-архиве. При отработке рекламных материалов не должно быть внешних сетевых обращений. При необходимости все вспомогательные JS-библиотеки должны предоставляться вместе с рекламными материалами.
  3. Нужно минимизировать число файлов в архиве. Изображения объединить в лист спрайтов. При необходимости можно объединить все JS/CSS/Image-документы и включить их в HTML-файл. Максимальное число файлов — 50.
  4. Рекламные материалы должны корректно работать в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 5 и выше, Chrome 14 и выше, Opera 14 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge. При необходимости в файле должна учитываться функциональность браузера, необходимая для его работы.
  5. Открытие рекламируемого сайта должно происходить в новом окне, только по клику пользователя левой кнопки мыши на баннер.
  6. Переходы в баннере должны получать адрес перехода на сайт рекламодателя таким вызовом yandexHTML5BannerApi.getClickURLNum(1) для первого клика, yandexHTML5BannerApi.getClickURLNum(2) для второго клика и т.д.
<a id="click1_area" href="#" target="_blank">...</a> 
<a id="click2_area" href="#" target="_blank">...</a> 
// после объявления тегов "<a href ...></a>" 
// присваиваем для них обработчики на клик так: 
<script> 
   document.getElementById("click1_area").href = yandexHTML5BannerApi.getClickURLNum(1); 
   document.getElementById("click2_area").href = yandexHTML5BannerApi.getClickURLNum(2); 
</script>
  1. Размер файла баннера указывается в теге следующим образом:
<meta name="ad.size" content="width=300,height=250">
  1. Сразу после тега должно быть включение рекламной библиотеки Яндекс:
<HEAD> 
   <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"> 
   </script>
  1. В рекламных материалах разрешены внешние ссылки на некоторые базовые библиотеки, включённые в инструменты разработки на HTML5: Adobe Edge Animate CC, Adobe Flash CC HTML5 Canvas, CreateJS, GreenSock, Swiffy и другие.
    Для того чтобы внешние ссылки были допустимы в баннере, они должны вести только на сайт производителя библиотеки.
  2. Отдельно к архиву должна быть приложена картинка-заглушка и ALT-текст (до 100 символов). Картинка проходит отдельную модерацию, включая размер. Картинка и текст будут использоваться для показа в браузерах, не входящих в список поддерживаемых из п.7.
  3. Запрещается использовать раздражающее вредоносное поведение скриптов: например, вызовы для самопроизвольного открытия pop-up, смены адреса страницы и т.п. Запрещено использование расширений для браузера (flash/java и др.).
  4. Рекламный баннер не должен быть приведен к виду, затрудняющему анализ (обфусцирован).
  5. Предполагается, что баннер должен вести себя одинаково, единообразно, во всех окружениях, на всех платформах, на все открытия всем пользователям, за все время кампании.
  6. Рекламный баннер должен отвечать требованиям по загрузке CPU1.
  7. Рекламные материалы должны соответствовать требованиям, изложенным в документе «Баннерная реклама. Требования к рекламным материалам», в пп. 3-10.
  8. Анимация баннера не должна мешать пользователю и затруднять восприятие основного содержания страницы сайта (в дизайне запрещено использовать резко перемещающиеся и мелькающие графические элементы, мигающий фон и т. д.).
  9. При подготовке баннера не допускается использование графических элементов низкого качества, в том числе:
    — деформированных изображений и изображений с помехами (артефактами) вследствие сжатия файла,
    — изображений с низким разрешением (на изображении видны пиксели), изображения с низкой четкостью графики.
  10. Дополнительно к рекламным материалам могут загружаться видеоролики в формате MP4 (если они разрешены в продукте). Максимально допустимый размер видеофайла — 2 мегабайта.

Обращение к роликам должно быть URL JS вызовом начиная с 1. Например для ролика 1
var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);
Воспроизведение должно быть явно инициировано пользователем. Должна быть возможность в любой момент остановить и возобновить воспроизведение. Должен быть указан размер видеофайла. Не допускается воспроизведение звука отдельно от видео. В целях безопасности и ускорения загрузки видеофайл будет размещен на серверах Яндекса.

Рекламодатель может сделать подсчет запусков просмотра видео, для этого при нажатии кнопки проигрывания видеоролика должен отрабатывать такой javascript вызов:
Для ролика 1: yandexHTML5BannerApi.reportVideoStart(1);
Для ролика 2: yandexHTML5BannerApi.reportVideoStart(2);
22. Аудиоролики не поддерживаются.

📘

Пример готового баннера HTML5 доступен для скачивания по ссылке. В коде образца можно посмотреть, как выполнены пункты 5, 8, 9, 10, 11 и 12.