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

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


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

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

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

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

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

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

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

  • Ширина: 100%
  • Висота: максимум 30% від висоти екрана

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

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

Аудiо

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

Кнопки керування

  • Кнопка "X/Закрити" у правому верхньому кутку банера (дає змогу користувачеві повністю закрити банер). Мінімально необхідний відступ для кнопки Закрити від верхньої та правої меж банера - 5px.

Рекомендована вага креативу

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

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

Завантажити

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

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

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

ZIP архiв

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

HTML файл

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

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

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

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

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

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

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

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

Методи  globalHTML5Api

Метод Аргументи Тип Опис
click(URL) — — Виклик клік-переходу на цільову сторінку. Посилання переходу може бути передано безпосередньо в коді креативу. Також посилання переходу може бути задано з шаблону заливки креативу в інтерфейсі користувача. Посилання, задане в коді, має більший пріоритет, ніж посилання, задане через шаблон, що може призвести до конфлікту. Тому для передачі посилання обов'язково використовувати тільки один із доступних способів.
URL (optional) String Посилання переходу
src(URL) — — Метод повертає абсолютний шлях до файлу
URL (optional) String Відносний шлях до файлу
close() — — Виклик закриття банера
globalHTML5Api.autoClose(timeMS, preventEvent) — — Виклик автоматичного закриття банера через вказану кількість мілісекунд
timeMS (required) Number Кількість мілісекунд до виклику закриття банера
preventEvent (optional) Boolean Запобігання відправлення облікової події "close" (Закриття банера). Якщо значення false - подію буде надіслано. За замовчуванням: false

Вiдео

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

Зображення

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

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

Облік подій:

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

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

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