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

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


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

Стандартний банер, що має фіксоване положення на сторінці, задану висоту і займає 100% ширини батьківського контейнера.

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, Edge, IE10+ Safari6.2+, Chrome, Firefox; — — — —

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

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

Стандартні розміри, WxH: 100%x90px, 100%x120px, 100%x200px, 100%x250px, 100%x300px

Відео (опційно)

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

Аудіо

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

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

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

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

Завантажити

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

  1. Розпакуйте архів із прикладом.
  2. Для перегляду креативу, використовуйте сторінку http://preview.yehtu.com  або ж скопіюйте всі файли в папку index – banners – banner – body і відкрийте файл index.html в браузері через localhost. У другому випадку потрібне попереднє встановлення та налаштування веб-сервера (наприклад, IIS для Windows, Apache для Mac OS).
  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.
Спрощений приклад використання globalHTML5Api.init для формату Flexible.

Показати пример кода globalHTML5Api.init
globalHTML5Api.on('load', function(){
 globalHTML5Api.init({
  'resize': [
   {
    'name': 'state-1',
    'width': '100%',
    'height': '90px'
   }
  ]
 });
});

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

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

Методи  globalHTML5Api

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

Відео

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

Зображення

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

Облік подій

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