YEHTU

Ukrainian

English

Russian

Назад до Огляду платформи

Глосарій

Креативи

Робота з креативами

Вартість креативів

Тех. вимоги до креативів

Додаткові налаштування

Viber Format Creatives specs

Шаблон в інтерфейсі: HTML5 Banner

Попередній перегляд

Формат банера, що складається з двох панелей - початкової та розгорнутої. У розгорнутому стані банер зсуває контент сайту донизу; має рекомендований розмір 970х250, а також кнопку Close Ad/Закрити, після натискання на яку банер згортається повністю, залишаючи видимою кнопку Show Ad/Відкрити, після натискання на яку банер розгортається знову. Розгорнута панель може містити відео.

Цей формат може підпадати під обмеження, що накладаються Google спільно з Coalition for Better Ads на показ рекламних банерів у браузері Chrome. Щоб банер не був визнаний таким, що порушує вимоги стандарта, необхідно виключити наступну поведінку банера:
· автопрогравання відео з увімкненим звуком.

Підтримувані платформи

Desktop		Tablet		Phone
Windows	Mac	iOS	Android	iOS	Android
Chrome, Firefox, Edge, IE10+	Safari7+, Chrome, Firefox	—	—	—	—

Вимоги до формату

Аудiо:

Ініціюється користувачем (вимкнено за замовчуванням)
Під час клік-переходу звук має вимикатися

Вiдео:

Може бути як автопрограваним, так і ініційованим користувачем
Тривалість: max 30 сек
Частота кадрів: 24 к/с
Формат файла: .mp4
Розмір: залежить від розмірів контейнера з відеоплеєром; співвідношення сторін відеофайлу має відповідати співвідношенню сторін відеоконтейнера

Кнопки:

Звук: Mute/Unmute (додаються на стороні шаблону креативу)
Відео: Play/Pause/Resume (додаються на стороні шаблону креативу)
Close Ad/Закрити (після натискання на кнопку банер схлопується повністю, залишається видимою кнопка Show Ad/Відкрити)
Show Ad/Відкрити (після натискання на кнопку банер розхлопується; можливі розміри кнопки, px: 88х31, 62х88, 196х31)

Вага:

до 500 Kb без відео
до 3 Mb з відео

Завантажити архів із прикладом:

Завантажити

Дана структура файлів в архіві відповідає прикладу і може бути змінена вами. Обов'язковим файлом в архіві є body.html, в якому вказуються розміри банера, параметр обліку кліка та інші скрипти.

Інструкція по роботі з архівом

Розпакуйте архів із прикладом.
Для перегляду креативу, використовуйте сторінку https://preview.yehtu.com. Також можна скопіювати всі файли в папку index – banners – banner – body і відкрити файл index.html у середовищі перегляду на мобільному пристрої через localhost (наприклад, браузер Chrome з режимом емулятора мобільного пристрою). У цьому разі потрібне попереднє встановлення та налаштування веб-сервера (наприклад, IIS для Windows, Apache для Mac OS).
Відкрийте текстовим редактором файл body.html і відредагуйте частину коду, яка знаходиться всередині тегів <body> </body> (дані, внесені поза цими тегами, збережені не будуть).

В тегах <body>…</body> вказуються розміри банера, скрипти тощо. Якщо розмістити їх в іншому місці, креатив не відображатиметься.

Відредагуйте файл body.js.
Збережіть і заархівуйте всі використовувані матеріали в ZIP форматі (архів повинен створюватися з файлів, а не з папки, в якій ці файли знаходяться).

Вимоги до файлів

ZIP архів

Банер з усіма необхідними матеріалами повинен знаходитися в .zip архіві. Рекомендуємо використовувати архів із прикладом.

HTML файл

HTML-Файл повинен містити шляхи до завантажуваних матеріалів (JS-файлів, зображень). Рекомендована назва HTML-файла — body.html.

Підключення та використання API

globalHTML5Api підключається автоматично, викликається за допомогою методу:

Показати код globalHTML5Api

globalHTML5Api.on('load', function(){
  /*
    YOUR CODE IS HERE
  */
});

Усі використовувані об'єкти і методи globalHTML5Api поміщаються всередину викликаної функції. Модулі, що підключаються, передаються як параметри функції. Для цього формату можуть бути використані модулі Player i Tween. Спрощений приклад використання globalHTML5Api.init для формату Pushdown:

Показати приклад коду globalHTML5Api

globalHTML5Api.on('load', function(){ 
globalHTML5Api.init({
        "resize": [{
            "name": "state-1",
            "width": "100px",
            "height": "220px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            },
            "onStart":function(){
                //function
            },
            "onComplete":function(){
                //function
            }
        }, {
            "name": "state-2",
            "width": "500px",
            "height": "220px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            }
        }, {
            "name": "state-3",
            "width": "900px",
            "height": "520px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            }
        }]
    });
});

Параметри globalHTML5Api.init

Ключ	Параметри	Властивості	Тип	Опис
resize(options)	—	—	—	Ініціалізація globalHTML5Api.resize
	options	—	Array	Масив об'єктів із властивостями. Кожен об'єкт являє собою окреме положення контейнера (resizeState)
		name (required)	String	Ім'я об'єкта
		width (required)	String\|Number	Значення ширини контейнера з банером
		height (required)	String\|Number	Значення висоти контейнера з банером
		onComplete	Function	Запуск callback функції після закінчення globalHTML5Api.init.resize.to(this.name)
		onStart	Function	Запуск callback функції на початку globalHTML5Api.init.resize.to(this.name)

Методи globalHTML5Api.resize

Метод	Параметри	Тип	Опис
to(resizeStateName, time, eventName)	—	—	Зміна поточного положення контейнера на вказане
	resizeStateName (required)	String	Ім'я положення контейнера, до якого потрібно перейти
	time (required)	Number	Час анімації зміни положення контейнера
	eventName (required)	String	Подія, яку необхідно враховувати: adExpand – розгортання контейнера; adCollapse – згортання контейнера; adExpandAuto – автоматичне розгортання контейнера; adCollapseAuto – автоматичне згортання контейнера.
currentState()	—	—	Метод повертає рядок: resizeState.name – ім'я поточного положення контейнера; interactive to resizeState.name – зміна положення контейнера до зазначеного.

Методи globalHTML5Api

Метод	Аргументи	Тип	Опис
click(URL)	—	—	Виклик клік-переходу на цільову сторінку. Посилання переходу може бути передано безпосередньо в коді креативу. Також його може бути задано з шаблону заливки креативу в користувацькому інтерфейсі. Посилання, задане в коді, має більший пріоритет, ніж посилання, задане через шаблон, що може призвести до конфлікту. Тому для передачі посилання обов'язково використовувати тільки один із доступних способів.
click(URL)	URL (optional)	String	Посилання переходу
src(URL)	—	—	Метод повертає абсолютний шлях до файлу
src(URL)	URL (optional)	String	Відносний шлях до файлу

Відео

Якщо креатив містить відео, дотримуйтесь Інструкції з додавання відео в HTML5 банер.

Зображення

Підтримувані типи файлів: .jpg, .png, .gif, .svg

Важливо! Усі посилання на зовнішні файли повинні працювати за захищеним HTTPS протоколом.

Облік подій

View/Перегляд
Confirmed view/ Підтверджений перегляд
Click/ Клік
Expand by user/ Розхлоп банера користувачем
Auto-expand/ Автоматичний розхлоп банера
Collapse by user/ Згортання банера користувачем
Auto-collapse/ Автоматичне згортання банера
Play/ Запуск відеоролика
Pause/ Пауза
Resume/ Повторний запуск відеоролика
Sound on/ Увімкнення звуку
Sound off/ Вимкнення звуку
Progress (firstQuartile, midpoint, thirdQuartile, complete)/ Перегляд відеоролика (перша чверть, середина, третя чверть, закінчення)

Chrome може обмежувати використання ресурсів рекламою (до взаємодії користувача з нею) шляхом видалення важкого креативу зі сторінки. Реклама вважається важкою, якщо користувач не взаємодіяв з нею (наприклад, не клікнув) і якщо вона відповідає будь-якому з таких критеріїв:
— Використовує основний потік загалом понад 60 секунд
— Використовує основний потік понад 15 секунд у будь-якому 30-секундному вікні
— Використовує більше 4 мегабайт пропускної здатності мережі

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

Оновлено 23 січня, 2024