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

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


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

Формат банера, що складається з двох панелей - початкової та розгорнутої. Початкова панель з'являється під час завантаження сторінки сайту в контент-зоні, що займає 100% ширини сайту. При прокручуванні контенту сайту, контейнер з банером збільшується по висоті і поступово з'являється розгорнута панель. Розгорнута панель може містити відео. Відео програється автоматично під час потрапляння контейнера з плеєром у зону видимості користувача.

Формат передбачає наявність мобільної верстки сайту. Обов'язкові параметри для viewport meta tag: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no
Цей формат може підпадати під обмеження, що накладаються Google спільно з Coalition for Better Ads на показ рекламних банерів у браузері Chrome. Щоб банер не був визнаний таким, що порушує вимоги стандарта, необхідно виключити таку поведінку банера:
· автопрогравання відео з увімкненим звуком.

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

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

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

  1. Автоматичне відтворення відео не працює на пристроях із версією iOS 9 і нижче.
  2. Автоматичне відтворення відео на Android та iOS 10+ пристроях можливе тільки з вимкненим звуком.

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

Розміри банера

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

Вертикальне положення екрана
Висота банера в згорнутому стані за замовчуванням становить 1/3 максимальної висоти банера в розгорнутому стані
Ширина банера: контейнер із банером завжди розтягується на 100% ширини екрана пристрою.

Горизонтальне положення екрана
Висота банера в згорнутому стані за замовчуванням становить 1/3 максимальної висоти банера

Розгорнута панель

Вертикальне положення екрана
Висота банера за замовчуванням дорівнює ширині банера (співвідношення сторін 1:1)

Горизонтальне положення екрана
Висота банера в розгорнутому стані за замовчуванням становить 80% від висоти екрана пристрою.

Відео

  • Рекомендоване співвідношення сторін відеофайлу 16:9
  • Тип файлів: .mp4
  • Макс. тривалість: 15 сек

Аудіо

Ініціюється користувачем (вимкнено за замовчуванням)

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

  • до 300 KB без відео
  • до 2 MB з відео

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

Завантажити

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

  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>.
  1. Відредагуйте файл body.js.
  2. Збережіть і заархівуйте всі використовувані матеріали в ZIP форматі (архів має створюватися з файлів, а не з папки, в якій ці файли знаходяться).

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

ZIP архів

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

HTML файл

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

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

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

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

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

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

Показати приклад коду globalHTML5Api
globalHTML5Api.on("load", function (Extend, Player) {
    var extend = Extend.create({
        expandPercent: 95,
	 minSize: 20,
        onExpand: expand,
        onCollapse: collapse
    });	
    player = Player.create({
        src: "images/adm_video.mp4",
        container: document.getElementById("player")
    });  
});

Параметри Extend

Метод Параметри Тип Опис
create — Object Ініціалізація Extend
expandPercent (optional) Number Значення у % від висоти банера, по досягненню якого спрацьовує подія 'expand' (розгортання контейнера) і відправляються callback-функції.
Значення за замовчуванням - 50%.
minSize (optional) Number Минимальная высота начальной панели, определяется в % от высоты экрана устройства.
maxSize (optional) Number Максимальна висота розгорнутої панелі, визначається у % від висоти екрана пристрою.
onExpand (required) Function Запуск callback функції після досягнення значення, зазначеного в 'expandPercent'.
У цей момент запускається анімація розгорнутої панелі.
onCollapse (required) Function Запуск callback функції по досягненню значення, яке менше зазначеного в 'expandPercent', за умови, що 'expand' вже спрацював.
У цей момент запускається анімація згорнутої панелі.

Методи 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.

Також підтримуються файли CSS.

Облік подій

  • View/Перегляд
  • Confirmed view/Підтверджений перегляд
  • Click/Клік
  • Expand by user/Розхлоп банера користувачем
  • Collapse by user/Згортання банера користувачем
  • Play/Запуск відеоролика
  • Pause/Пауза
  • Resume/Повторний запуск відеоролика
  • Sound on/Увімкнення звуку
  • Sound off/Вимкнення звуку
  • Progress (firstQuartile, midpoint, thirdQuartile, complete)/ Перегляд відеоролика (перша чверть, середина, третя чверть, закінчення)
Chrome може обмежувати  використання ресурсів рекламою (до взаємодії користувача з нею) шляхом видалення важкого креативу зі сторінки. Реклама вважається важкою, якщо користувач не взаємодіяв з нею (наприклад, не клікнув) і якщо вона відповідає будь-якому з таких критеріїв:
— Використовує основний потік загалом понад 60 секунд
— Використовує основний потік понад 15 секунд у будь-якому 30-секундному вікні
— Використовує  більше 4 мегабайт пропускної здатності мережі
З питань технічних вимог до банерів, будь ласка, звертайтеся до менеджера підтримки вашого акаунта.
Оновлено 08 квітня, 2024