Яндекс і HTML5 банери
Чудова новина. C 1-липня Яндекс почав приймати HTML5 банери. Зміни торкнулися RTB-частини, а МКБ (банер поруч з пошуковою видачею) поки тестуються, і доступні для розміщення тільки GIF і JPG / PNG банери. Терміни запуску HTML5 банерів для позиції МКБ поки не оголошуються.
Вимоги ж до HTML5 банерах сучасні і конкурентні. Раніше необхідно було весь вміст банерів вміщати в 60 кб, тепер - 150 кб. Ніякої революції, все стандартно - в Google Adwords вже багато років саме ця планка максимальної ваги банера.
Допускаються також зовнішні посилання на сторонні бібліотеки. Для рекламодавців це спрощує пошук пошук фахівців розробки та адаптації банерів під майданчик, а також розширює можливості по безпосередньому наповненню банерів.
І ми, звичайно, розробляємо HTML5 банери для розміщення їх в Яндексі. А також адаптуємо вже готові HTML5 банери під технічні вимоги. Пишіть.
Технічні вимоги:
1. Формат присилаються даних - ZIP-архів.
2. Розмір архіву не повинен перевищувати 150 кілобайт.
3. Архів може містити один HTML-файл і кілька файлів в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.
В архівах буде ігноруватися вміст папки __MACOSX і файли .DS_Store. Вони створюються при архівації на платформах Apple Mac OS X і для роботи креативу не потрібні.
4. Для імені файлів і директорій допустимо використовувати тільки такий набір символів: -._ ~, цифри і латинський алфавіт.
5. Всі номери в креативі повинні бути відносними шляхами в ZIP-архіві. При відпрацюванні креативу не повинно бути зовнішніх мережевих звернень. При необхідності всі допоміжні JS-бібліотеки повинні надаватися разом з креативом.
6. Потрібно мінімізувати число файлів в архіві. При необхідності можна об'єднати всі JS / CSS / Image-документи і включити їх в HTML-файл. Зображення об'єднати в лист спрайтів. Максимальна кількість файлів - 50.
7. Креатив повинен коректно працювати в браузерах Internet Explorer 9 і вище, Firefox 14 і вище, Safari 5 і вище, Chrome 14 і вище, Opera 14 і вище, яндекс.браузер 14 і вище, Microsoft Edge. При необхідності в файлі повинна враховуватися функціональність браузера, необхідна для його роботи.
8. Відкриття рекламованого сайту має відбуватися в новому вікні, тільки при натисканні користувача лівої кнопки миші на банер.
9. Переходи в банері повинні отримувати адреса переходу на сайт рекламодавця таким викликом 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); <Em> </ script> </ em>
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>
12. У креативі дозволені зовнішні посилання на деякі базові бібліотеки, включені в інструменти розробки на HTML5: Adobe Edge Animate CC, Adobe Flash CC HTML5 Canvas, CreateJS, GreenSock, Swiffy і інші. Для того щоб зовнішні посилання були допустимі в банері, вони повинні вести тільки на сайт виробника бібліотеки.
13. Окремо до архіву має бути додана картинка-заглушка і ALT-текст (до 100 символів). Картинка проходить окрему модерацію, включаючи розмір. Картинка і текст будуть використовуватися для показу в браузерах, що не входять в список підтримуваних з п.7.
14. Забороняється використовувати подразнюючу шкідливе поведінка скриптів: наприклад, виклики для мимовільного відкриття pop-up, зміни адреси сторінки і т.п. Заборонено використання розширень для браузера (flash / java та ін.).
15. Рекламний банер не повинен бути приведений до виду, ускладнюють аналіз (обфусцірован).
16. Передбачається, що банер повинен вести себе однаково, одноманітно, у всіх середовищах, на всіх платформах, на все відкриття всім користувачам, за весь час кампанії.
17. Рекламний банер повинен відповідати вимогам щодо завантаження CPU.
Для тестування рівня завантаження процесора рекламними матеріалами використовується спеціально виділений комп'ютер (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.
18. Рекламні матеріали повинні відповідати вимогам, викладеним у документі «Банерна реклама. Вимоги до рекламних матеріалів », в пп. 3-10.
19. Анімація банера не повинна заважати користувачеві і ускладнювати сприйняття основного змісту сторінки сайту (в дизайні заборонено використовувати різко переміщаються і мелькають графічні елементи, миготливий фон і т. Д.).
20. При підготовці банера не допускається використання графічних елементів низької якості, в тому числі:
- деформованих зображень і зображень з перешкодами (артефактами) внаслідок стиснення файлу
- зображень з низьким дозволом (на зображенні видно пікселі), зображення з низькою чіткістю графіки.
21. Додатково до креативу можуть завантажуватися відеоролики у форматі MP4 (якщо вони дозволені в продукті). Максимально допустимий розмір відеофайлу - 2 мегабайта.
Звернення до роликів має бути URL JS викликом починаючи з 1. Наприклад для ролика 1
var url_video1 = yandexHTML5BannerApi.getVideoURLNum (1);
Відтворення має бути явно ініційовано користувачем. Повинна бути можливість в будь-який момент зупинити і відновити відтворення. Повинен бути зазначений розмір відеофайлу. Не допускається відтворення звуку окремо від відео. З метою безпеки та підвищити швидкість завантаження відеофайл буде розміщений на серверах Яндекса.
Рекламодавець може зробити підрахунок запусків перегляду відео, для цього при натисканні кнопки програвання відеоролика повинен відпрацьовувати такий javascript виклик:
Для ролика 1: yandexHTML5BannerApi.reportVideoStart (1);
Для ролика 2: yandexHTML5BannerApi.reportVideoStart (2);
Додатково до креативу можуть завантажуватися відеоролики у форматі MP4 (якщо вони дозволені в продукті). Максимально допустимий розмір відеофайлу - 2 мегабайта.Обращеніе до роликів має бути по параметру URL videoN починаючи з 1. Наприклад, для ролика 1 url_video1 = getUrlParam ( 'video1'); Відтворення має бути явно ініційовано користувачем. Повинна бути можливість в будь-який момент зупинити і відновити відтворення. Повинен бути зазначений розмір відеофайлу. З метою безпеки та підвищити швидкість завантаження відеофайл буде розміщений на серверах Яндекса. Рекламодавець може зробити підрахунок запусків перегляду відео, для цього при натисканні кнопки програвання відеоролика повинен відпрацьовувати такий javascript виклик:
Для ролика 1: yandexInbannerVideoEventApi.reportVideoStart (1);
Для ролика 2: yandexInbannerVideoEventApi.reportVideoStart (2)
22. Аудіоролики не підтримуються.