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

Требования к HTML-баннерам Yandex SSP

1. Баннер должен представлять собой ZIP-архив, внутри которого находятся все файлы, необходимые для работы баннера.

2. Размер архива не должен превышать 150 килобайт.

3. Архив может содержать один HTML-файл с названием index.html и несколько файлов в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.

4. Для имени файлов и директорий допустимо использовать только такой набор символов: -._~ , цифры и латинский алфавит.

5. Все ссылки в креативе должны быть относительными путями в ZIP-архиве. При отработке креатива не должно быть внешних сетевых обращений. При необходимости все вспомогательные JS-библиотеки должны предоставляться вместе с креативом. Исключение составляют библиотеки из п.12.

6. Нужно минимизировать число файлов в архиве. При необходимости можно объединить все JS/CSS/Image-документы и включить их в HTML-файл. Изображения объединить в лист спрайтов. Максимальное число файлов — 50.

7. Креатив должен корректно работать в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 5 и выше, Chrome 14 и выше, Opera 14 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge. При необходимости в файле должна учитываться функциональность браузера, необходимая для его работы.

8. Открытие рекламируемого сайта должно происходить в новом окне, только по клику пользователя левой кнопки мыши на баннер.

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

<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 href ...></a>" присваиваем для них обработчики на клик:

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

10. Размер баннера должен быть указан в теге <META> следующим образом:

<meta name="ad.size" content="width=300,height=250">
												

11. Сразу после тега <HEAD> должно быть включение рекламной библиотеки Яндекс:

<HEAD>
	<script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"></script>
</HEAD>
												

12. В креативе разрешены внешние ссылки на некоторые базовые библиотеки, включённые в инструменты разработки на HTML5: Adobe Edge Animate CC, Adobe Flash CC HTML5 Canvas, CreateJS, GreenSock, Swiffy и другие.

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

13. В архив с баннером должна присутствовать картинка-заглушка с именем preloader. Вес заглушки – не более 150 Кб. Картинка проходит отдельную модерацию, включая размер. Картинка будет использоваться для показа в браузерах, не входящих в список поддерживаемых.

14. Запрещается использовать раздражающее вредоносное поведение скриптов: например, вызовы для самопроизвольного открытия pop-up, смены адреса страницы и т.п. Запрещено использование расширений для браузера (flash/java и др.).

15. Рекламный баннер не должен быть приведен к виду, затрудняющему анализ (обфусцирован).

16. Рекламный баннер должен отвечать требованиям по загрузке CPU.

17. Рекламные материалы должны соответствовать требованиям, изложенным в документе «Баннерная реклама. Требования к рекламным материалам», в пп. 3-10.

18. Анимация баннера не должна мешать пользователю и затруднять восприятие основного содержания страницы сайта (в дизайне запрещено использовать резко перемещающиеся и мелькающие графические элементы, мигающий фон и т. д.).

19. При подготовке баннера не допускается использование графических элементов низкого качества, в том числе:

  • Деформированных изображений и изображений с помехами (артефактами) вследствие сжатия файла.

  • Изображений с низким разрешением (на изображении видны пиксели), изображения с низкой четкостью графики.

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

Top