Рекламные технологии Яндекса в Казахстане — Требования к рекламным материалам — Правила создания рекламных материалов в формате HTML5

Баннеры HTML5

1. HTML5 баннеры в Яндекс.Дисплее
2. HTML5 баннеры в Яндекс.Директе

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

Формат присылаемых данных — ZIP-архив.
Размер архива не должен превышать 150 килобайт.
Архив может содержать один HTML-файл и несколько файлов в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.
В архивах будет игнорироваться содержимое папки __MACOSX и файлы .DS_Store. Они создаются при архивировании на платформах Apple Mac OS X и для работы рекламных материалов не нужны.
Для имени файлов и директорий допустимо использовать только такой набор символов:
-._~ , цифры и латинский алфавит.
Все ссылки в рекламных материалах должны быть относительными путями в ZIP-архиве. При отработке рекламных материалов не должно быть внешних сетевых обращений. При необходимости все вспомогательные JS-библиотеки должны предоставляться вместе с рекламными материалами.
Нужно минимизировать число файлов в архиве. Изображения объединить в лист спрайтов. При необходимости можно объединить все JS/CSS/Image-документы и включить их в HTML-файл. Максимальное число файлов — 50.
Рекламные материалы должны корректно работать в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 5 и выше, Chrome 14 и выше, Opera 14 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge. При необходимости в файле должна учитываться функциональность браузера, необходимая для его работы.
Открытие рекламируемого сайта должно происходить в новом окне, только по клику пользователя левой кнопки мыши на баннер.

Переходы в баннере должны получать адрес перехода на сайт рекламодателя таким вызовом 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>

Пожалуйста, обратите внимание, что предыдущий вариант этого пункта с link1 также совместим, работает и принимается

Переходы в баннере должны использовать значение параметра linkN из get параметров URL к HTML-документу следующим образом: link1 для первого клика, link2 для второго и т.д. Можно использовать такой код:

<script>
   function getUrlParam(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
   }
</script>

<a id="click1_area" href="#" target="_blank">...</a>
<a id="click2_area" href="#" target="_blank">...</a>
<a id="click3_area" href="#" target="_blank">...</a>

// после объявления тегов "<a href ...></a>"
// присваиваем для них обработчики на клик:

<script>
   document.getElementById("click1_area").href = getUrlParam('link1');
   document.getElementById("click2_area").href = getUrlParam('link2');
   document.getElementById("click3_area").href = getUrlParam('link3');
</script>

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

Размер файла баннера указывается в теге <META> следующим образом:
```
<meta name="ad.size" content="width=300,height=250">
```
Сразу после тега <HEAD> должно быть включение рекламной библиотеки Яндекс:
```
<HEAD> 
   <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"> 
   </script>
```
В рекламных материалах разрешены внешние ссылки на некоторые базовые библиотеки, включённые в инструменты разработки на HTML5: Adobe Edge Animate CC, Adobe Flash CC HTML5 Canvas, CreateJS, GreenSock, Swiffy и другие.
Для того чтобы внешние ссылки были допустимы в баннере, они должны вести только на сайт производителя библиотеки.
Отдельно к архиву должна быть приложена картинка-заглушка и ALT-текст (до 100 символов). Картинка проходит отдельную модерацию, включая размер. Картинка и текст будут использоваться для показа в браузерах, не входящих в список поддерживаемых из п.7.
Запрещается использовать раздражающее вредоносное поведение скриптов: например, вызовы для самопроизвольного открытия pop-up, смены адреса страницы и т.п. Запрещено использование расширений для браузера (flash/java и др.).
Рекламный баннер не должен быть приведен к виду, затрудняющему анализ (обфусцирован).
Предполагается, что банер должен вести себя одинаково, единообразно, во всех окружениях, на всех платформах, на все открытия всем пользователям, за все время кампании.
Рекламный баннер должен отвечать требованиям по загрузке CPU¹.
Рекламные материалы должны соответствовать требованиям, изложенным в документе «Баннерная реклама. Требования к рекламным материалам», в пп. 3-10.
Анимация баннера не должна мешать пользователю и затруднять восприятие основного содержания страницы сайта (в дизайне запрещено использовать резко перемещающиеся и мелькающие графические элементы, мигающий фон и т. д.).
При подготовке баннера не допускается использование графических элементов низкого качества, в том числе:
— деформированных изображений и изображений с помехами (артефактами) вследствие сжатия файла,
— изображений с низким разрешением (на изображении видны пиксели), изображения с низкой четкостью графики.
Дополнительно к рекламным материалам могут загружаться видеоролики в формате MP4 (если они разрешены в продукте). Максимально допустимый размер видеофайла — 2 мегабайта.

Обращение к роликам должно быть URL JS вызовом начиная с 1. Например для ролика 1
var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);

Воспроизведение должно быть явно инициировано пользователем. Должна быть возможность в любой момент остановить и возобновить воспроизведение. Должен быть указан размер видеофайла. Не допускается воспроизведение звука отдельно от видео. В целях безопасности и ускорения загрузки видеофайл будет размещен на серверах Яндекса.

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

Дополнительно к рекламным материалам могут загружаться видеоролики в формате MP4 (если они разрешены в продукте). Максимально допустимый размер видеофайла — 2 мегабайта.

Обращение к роликам должно быть по параметру URL videoN начиная с 1. Например, для ролика 1 url_video1 = getUrlParam('video1');

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

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

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

Технические требования к баннеру HTML5, полученному в результате конвертации через swiffy

Для целей размещения баннеров в формате HTML5 Яндексу должны быть переданы файлы следующих форматов:
- Flash (.SWF)
- HTML5 (.html) — результат конвертации в программе swiffy flash-баннера изготовленного на условиях, изложенных в документе «Flash-баннеры, аудио и видео. Требования к рекламным материалам».
- картинка-заглушка (размер зависит от требования, предъявляемого к размеру (пикселов) конкретного баннера). Формат GIF, JPEG или PNG
- альтернативный текст для баннера
Все файлы, относящиеся к одной единице рекламы, должны иметь одно и то же имя.
Flash-баннер, который используется рекламодателем для конвертации в формат HTML5, должен соответствовать требованиям, изложенным в документе «Flash-баннеры, аудио и видео. Требования к рекламным материалам», включая требования, изложенные в п. 3 указанного документа.
При позиционировании элементов flash-баннера (изображений, текстов и другого контента) не допускается использование дробных координат. Координаты элементов flash-баннера должны быть прописаны целыми числами.
Это необходимо для того, чтобы текст и изображения при конвертации в HTML5 сохраняли четкость. Для автоматического округления дробных значений координат до целых чисел можно использовать скрипт для среды flash, файл pixel_round.jsfl доступен для скачивания по ссылке.
Максимальный размер flash-баннера до конвертации в формат HTML5 не должен превышать 60 килобайт. Размер файла HTML5, полученного в результате конвертации через swiffy, может превышать 60 килобайт.
Flash-баннер не должен содержать видео и аудио.
Файл в формате HTML5 должен быть сконвертирован без каких-либо дополнительных правок и изменений.
Рекламодатель должен самостоятельно проверить файл HTML5 на ошибки в проигрывании и показе, и подтвердить, что результат конвертации соответствует исходному flash-баннеру.
Файл в формате HTML5 должен отвечать требованиям по загрузке CPU¹.
Рекламные материалы (формат баннер) должны отвечать требованиям, изложенным в документе «Баннерная реклама. Требования к рекламным материалам», включая, но не ограничиваясь требованиям пп. 3-10 указанного документа.

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

Формат присылаемых данных — ZIP-архив.
Размер ZIP-архива не должен превышать 150 килобайт.
Архив может содержать один HTML-файл и несколько файлов в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.
В архивах будет игнорироваться содержимое папки __MACOSX и файлы .DS_Store, Thumbs.db. Они создаются при архивировании на платформах Apple Mac OS X и для работы рекламных материалов не нужны.
Для имени файлов и директорий допустимо использовать только такой набор символов:
-._~ , цифры и латинский алфавит.
Все ссылки в рекламных материалах должны быть относительными путями в ZIP-архиве. При отработке рекламных материалов не должно быть внешних сетевых обращений. При необходимости все вспомогательные JS-библиотеки должны предоставляться вместе с рекламными материалами.
Нужно минимизировать число файлов в архиве. Изображения объединить в лист спрайтов. При необходимости можно объединить все JS/CSS/Image-документы и включить их в HTML-файл. Максимальное число файлов — 20.
Рекламные материалы должны корректно работать в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 5 и выше, Chrome 14 и выше, Opera 14 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge. При необходимости в файле должна учитываться функциональность браузера, необходимая для его работы.
Открытие рекламируемого сайта должно происходить в новом окне, только по клику пользователя левой кнопки мыши на баннер.
По клику на баннер будет открываться страница, указанная в поле Ссылка на сайт на странице создания или редактирования группы объявлений. Переход на эту страницу должен генерироваться в баннере вызовом метода yandexHTML5BannerApi.getClickNum(1).
```
<a id="click_area" href="#" target="_blank">...</a>
 // после элемента "<a href ...></a>"
 // присваиваем для него значение атрибута href так:
 <script>
       document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);
 </script>
```
Размер файла баннера указывается в теге <META> следующим образом:
```
<meta name="ad.size" content="width=300,height=250">
```
Доступны следующие размеры: 160×600, 240×400, 240×600, 300×250, 300×300, 300×500, 300×600, 320×50, 320×100, 320×480, 336×280, 480×320, 728×90, 970×250, 1000×120.
В рекламных материалах разрешены внешние ссылки на библиотеки jQuery и библиотеки, указанные на странице https://tech.yandex.ru/jslibs/.
Для того чтобы внешние ссылки были допустимы в баннере, они должны вести только на сайт производителя библиотеки.
Запрещается использовать раздражающее вредоносное поведение скриптов: например, вызовы для самопроизвольного открытия pop-up, смены адреса страницы и т.п. Запрещено использование расширений для браузера (flash/java и др.).
Рекламный баннер не должен быть приведен к виду, затрудняющему анализ (обфусцирован).
Предполагается, что баннер должен вести себя одинаково, единообразно, во всех окружениях, на всех платформах, на все открытия всем пользователям, за все время кампании.
Рекламный баннер должен отвечать требованиям по загрузке CPU¹.
Рекламные материалы должны соответствовать требованиям, изложенным в документе «Баннерная реклама. Требования к рекламным материалам», в пп. 4-10.
Анимация баннера не должна мешать пользователю и затруднять восприятие основного содержания страницы сайта (в дизайне запрещено использовать резко перемещающиеся и мелькающие графические элементы, мигающий фон и т. д.).
При подготовке баннера не допускается использование графических элементов низкого качества, в том числе: — деформированных изображений и изображений с помехами (артефактами) вследствие сжатия файла, — изображений с низким разрешением (на изображении видны пиксели), изображения с низкой четкостью графики.
Использование аудиороликов не поддерживается.
Использование видеороликов не поддерживается.
Максимальное количество знаков в ссылке, содержащейся в баннере (URL), не должно превышать 1024 знаков.
Ссылки (URL) на сайт (адрес страницы, которая открывается по клику на баннер) принимаются только в кодировке UTF-8.

1. Для тестирования уровня загрузки процессора рекламными материалами используется специально выделенный компьютер (Intel^® Core™2 Duo CPU P9600@ 2,53GHz, 2 ГБ оперативной памяти и 64-800 МБ видео памяти) c установленной 64-разрядной Windows 7 Профессиональная. Компьютер настроен стандартным образом для работы в офисе.
Для тестирования загрузки процессора загружается специальная страница, содержащая только тестируемый баннер. Другие программы при этом не запущены.
Для оценки загрузки используется стандартный TaskManager.
При таком тестировании баннер не должен потреблять более 50% процессорных ресурсов согласно данным в закладке Performance в Task Manager (UpdateSpeed установлен в значение High).
Считается, что баннер требует слишком много ресурсов, если загрузка более 50% ресурсов процессора происходит в течение заметного времени (доли/единицы секунд) или максимальная загрузка процессора в пике составляет более 70%.
Оптимизация использования оперативной памяти не производится, дополнительные утилиты или резидентные программы при старте не загружаются. После входа в систему объем памяти, занятой различными системными процессами, составляет порядка 62-63 МБ по данным Task Manager.

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

Баннеры HTML5

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

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

Инструменты Яндекса

Рекламные продукты

Решения для отраслей

Обучение

Рекламным агентствам

Площадкам: технологии для издателей

Материалы

Технические требования

Цены

Политика конфиденциальности

Контакты