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

UI-шаблон: HTML5 Mobile Float


Прев'ю

Mobile Catfish (HTML5) — це плаваючий рекламний формат для мобільних пристроїв. Банер закріплений унизу екрана, займає всю його ширину й залишається видимим, поки користувач прокручує вміст сторінки. Користувач може закрити банер кнопкою закриття; тап по будь-якій іншій частині банера відкриває цільову сторінку й закриває банер.

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

Десктоп Планшет Смартфон
Windows Mac iOS Android iOS Android
- - Підтримується Підтримується Підтримується Підтримується

Сумісність з інвентарем:

Лише локальний інвентар (прямі зони паблішерів).

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

Елемент Вимога
Основна панель Ширина: 100% екрана
Висота: до 30% висоти екрана
Розташування Закріплена внизу екрана, по центру горизонтально
Кнопка закриття «X» у верхньому правому куті панелі, не менше 24×24 px
Зона кліку Уся панель, крім кнопки закриття
Розмір файлу До 50 MB
Зображення Рекомендовані формати: .jpg, .png, .gif, .svg

Завантажте архів із шаблоном:

Завантажити

Як працювати з архівом (шаблоном)

  1. Розпакуйте архів із шаблоном креативу.
  2. Для прев'ю креативу скористайтеся сторінкою прев'ю або скопіюйте всі файли в папку index – banners – banner – body і відкрийте файл index.html у браузері через localhost. Для цього потрібно встановити вебсервер (наприклад, IIS для Windows, Apache для Mac OS).
    Також ви можете переглянути прев'ю креативу на мобільному пристрої, скопіювавши посилання на нього.
  3. Відкрийте файл body.html у текстовому редакторі й відредагуйте код усередині тегів <body> </body>.
  1. Відредагуйте файл body.js.
  2. Збережіть і заархівуйте всі файли банера в .zip (архівувати потрібно самі файли, а не папку, у якій вони лежать).

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

ZIP-архів

Банер з усіма файлами потрібно заархівувати у .zip. Використовуйте .zip-архів із шаблоном.

HTML-файл

HTML-файл має підключати всі використані ресурси (бібліотеки, зображення тощо). Обов'язкова назва файлу — body.html.

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

globalHTML5Api підключається автоматично. Звернення до нього виглядає так:

Розгорнути код globalHTML5Api
globalHTML5Api.on('load', function(){
  /*
    YOUR CODE IS HERE
  */
});

Об'єкти й методи globalHTML5Api потрібно задавати всередині функції, що викликається. Усі використані модулі потрібно перелічити як параметри функції. Цей формат не потребує модулів. Приклад використання globalHTML5Api.init для формату Mobile Catfish:

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

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

Ключ Властивості Тип Опис
resize – Array Масив об'єктів
name (обов'язковий) String Назва об'єкта. Кожен об'єкт описує окремий стан контейнера (resizeState)
fixed – Об'єкт із властивостями. Описує положення контейнера відносно вікна браузера
vertical (обов'язковий) bottom Вертикальне вирівнювання контейнера
horizontal (обов'язковий) center Горизонтальне вирівнювання контейнера
width (обов'язковий) String|Number Ширина контейнера банера
height (обов'язковий) String|Number Висота контейнера банера

Методи globalHTML5Api

Метод Аргументи Тип Опис
click(URL) – – Метод для виклику переходу за кліком. Цільовий URL можна задати як параметр або в інтерфейсі. URL, заданий у коді, має вищий пріоритет, ніж URL з інтерфейсу, що може спричинити конфлікт. Тому обов'язково використовуйте лише один зі способів.
URL (необов'язковий) String Цільовий URL
src(URL) – – Метод повертає абсолютний шлях до файлу
URL (необов'язковий) String Відносний шлях до файлу
close(preventEvent) – – Метод для закриття банера. У шаблоні він викликається після кліку зі значенням true, щоб банер закрився без надсилання події закриття.
preventEvent (необов'язковий) Boolean Скасовує надсилання трекінгової події close (закриття банера). Якщо значення false, подія буде надіслана. За замовчуванням: false

Трекінг подій

  • Показ (View)
  • Підтверджений показ (Confirmed view)
  • Клік (Click)
Chrome обмежує ресурси, які може використовувати рекламний банер до взаємодії з користувачем, і видаляє зі сторінки «важкі» креативи. Банер вважається важким, якщо користувач з ним не взаємодіяв (наприклад, не тапнув і не клікнув) і він відповідає будь-якому з критеріїв:
– використовує основний потік понад 60 секунд загалом
– використовує основний потік понад 15 секунд у будь-якому 30-секундному інтервалі
– використовує понад 4 мегабайти мережевого трафіку

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

Оновлено 27 жовтня, 2026