Назад до Огляду платформи
Глосарій
Креативи
Робота з креативами
Вартість креативів
Тех. вимоги до креативів
Додаткові налаштування
Viber Format Creatives specs

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


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

Повноекранний мобільний формат, що залучає користувача у взаємодію з банером. Користувачеві пропонують струснути смартфон для здійснення певної дії.

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

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
— — ver. 8.0+ ver. 5+ ver. 8.0+ ver. 5+

Відомі обмеження

На мобільних пристроях із платформою iOS 12 і вище налаштування Рух і орієнтація може бути вимкнена за замовчуванням. У такому разі модуль shake запустить показ усіх панелей креативу автоматично з інтервалом 5 секунд.

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

Завантажити

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

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

    3. Додатково можете перевірити прев’ю креатива попередньо скопіювавши на нього посилання і переглянувши з мобільного девайсу.

  3. Відкрийте текстовим редактором файл body.html і відредагуйте частину коду, яка знаходиться всередині тегів <body> </body>.
В тегах <body>…</body> вказуються розміри банера, скрипти тощо. Якщо розмістити їх в іншому місці, креатив не відображатиметься.
  1. Відредагуйте JS код.
  2. Збережіть і заархівуйте всі використовувані матеріали в ZIP форматі (архів має створюватися з файлів, а не з папки, в якій ці файли знаходяться).

Загальні вимоги до формату

Основна панель

Стандартні розміри, WxH, 100%x100%

Відео

  • Розмір контейнера для відеоплеєра може бути заданий будь-який у межах розгорнутої панелі
  • Тип файлів: .mp4
  • Макс. тривалість: 30 сек

Вага креативу

  • до 300 Kb без відео
  • до 2 Mb з відео

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

ZIP архів

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

HTML файл

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

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

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

Показати код globalHTML5Api
globalHTML5Api.on('load', function(){
  /*
    YOUR CODE IS HERE
  */
});

Усі використовувані об'єкти та методи globalHTML5Api поміщаються всередину викликаної функції.  Модулі , що підключаються, передаються як параметри функції. Цей формат може використовувати модуль Player, Shake.

Спрощений приклад використання globalHTML5Api для формата Shake:

Показати приклад коду globalHTML5Api
globalHTML5Api.on('load', function(Shake){
	globalHTML5Api.init({
		'resize' : [
			{
				'name': 'state-1',
				'fixed' : {
						'vertical':'center',
						'horizontal':'center'
					},
				'width': '100%',
				'height': '100%'
			}
		]
	});
})

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

Ключ Властивості Тип Опис
resize — Array Масив об'єктів
name (required) String Ім'я об'єкта. Кожен об'єкт являє собою окреме положення контейнера (resizeState).
fixed — Об'єкт із властивостями. Описує положення контейнера щодо вікна браузера
vertical (required) top, bottom Положення контейнера по вертикалі
horizontal (required) center Положення контейнера по горизонталі
width (required) String|Number Значення ширини контейнера з банером
height (required) String|Number Значення висоти контейнера з банером

Приклад використання модуля Shake:

Показати приклад коду
var container = $('container');
    Shake.subscribe(function(){
		container.style.backgroundColor = "rgb(" + rnd(0,255) + "," + rnd(0,255) + "," + rnd(0,255) + ")";
	})

*У прикладі вище функція зворотного виклику змінює колір банера за подією shake.

Параметри Shake

Метод Аргументи Опис
subscribe Function Метод відповідає за відстеження події Shake і запуск функції по здійсненню події, тобто після того як користувач потряс пристрій.

Методи globalHTML5Api

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

Відео

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

Зображення

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

Облік подій

  • View/ Перегляд
  • Confirmed view/Підтверджений перегляд
  • Click/Клік
Chrome може обмежувати використання ресурсів рекламою (до взаємодії користувача з нею) шляхом видалення важкого креативу зі сторінки. Реклама вважається важкою, якщо користувач не взаємодіяв з нею (наприклад, не клікнув) і якщо вона відповідає будь-якому з таких критеріїв:
— Використовує основний потік загалом понад 60 секунд
— Використовує основний потік понад 15 секунд у будь-якому 30-секундному вікні
— Використовує більше 4 мегабайт пропускної здатності мережі
З питань технічних вимог до банерів, будь ласка, звертайтеся до менеджера підтримки вашого акаунта.
Оновлено 08 квітня, 2024