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

UI template: HTML5 Float


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

Різновид рекламного банера на всю ширину, яка з’являється внизу екрана й залишається видимою, доки користувач не закриє її натисканням кнопки Close. Висота реклами цього формату становить 30% від висоти екрана. Після кліку на банер користувача буде переспрямовано на цільову сторінку, а банер буде закрито.

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

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

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
+ + вер. 7.0+ вер. 4.4+ вер. 7.0+ вер. 4.4+

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

Завантажити

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

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

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

  3. Відкрийте файл body.html у текстовому редакторі та відредагуйте фрагмент коду всередині тегів <body> </body> (між коментарями USER’S CODE START і USER’S CODE END).
  1. Відредагуйте файл js/body.js.
  2. Збережіть і заархівуйте всі файли банера в .zip (архівувати потрібно самі файли, а не папку, у якій вони містяться).

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

ZIP-архів

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

HTML-файл

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

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

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

Розгорнути код globalHTML5Api
globalHTML5Api.on('load', function(){
  /*
    ВАШ КОД ТУТ
  */
});

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

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

Приклад обробки кнопки Close і кліку (з файлу js/body.js):

Розгорнути приклад коду кнопки Close і кліку
globalHTML5Api.on('load', function(){
  function prevent(_event) {
    if (_event) {
      _event.returnValue = false;
      _event.cancelBubble = true;
      if (_event.preventDefault) { _event.preventDefault(); }
      if (_event.stopPropagation) { _event.stopPropagation(); }
    }
  }
  function $(id){
    return document.getElementById(id);
  }

  // Кнопка Close
  $('close').onclick = function(_event){
    prevent(_event);
    globalHTML5Api.close();
  };

  // Клік на банер: перехід на цільову сторінку та закриття банера
  $('main_content').onclick = function(_event){
    prevent(_event);
    globalHTML5Api.click('');
    globalHTML5Api.close(true);
  };
});

Параметри 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) – – Метод для закриття банера
preventEvent (необов’язково) Boolean Запобігає надсиланню трекінгової події close (закриття банера). Використовується в шаблоні після кліку, щоб закриття банера після переходу не враховувалося як закриття. За замовчуванням: false
globalHTML5Api.autoClose(timeMS, preventEvent) – – Метод для автоматичного закриття банера через задану кількість мілісекунд
timeMS (обов’язково) Number Кількість мілісекунд до закриття банера
preventEvent (необов’язково) Boolean Запобігає надсиланню трекінгової події close (закриття банера). Якщо значення false, подію буде надіслано. За замовчуванням: false

Відео

Щоб додати відео до креативу, використовуйте стандартний HTML5-тег <video>. Додатковий плеєр або модуль не потрібен.

  1. Покладіть відеофайл в архів, наприклад у папку images. Також можна вказати посилання на відео, розміщене на зовнішньому сервері (див. примітку нижче).
  2. Відкрийте body.html і вставте тег <video> всередину <body>, між коментарями USER’S CODE START і USER’S CODE END: 
    <video src="images/output.mp4" autoplay loop muted controls style="position: absolute; left: 0; top: 0;"></video>
  3. В атрибуті src вкажіть шлях до відеофайлу відносно body.html. Якщо відео розміщене на зовнішньому сервері, вкажіть тут його повний URL.

Атрибути, використані в прикладі:

Атрибут Що робить
autoplay Запускає відео одразу після завантаження банера.
muted Запускає відео без звуку. Браузери блокують автовідтворення зі звуком, тому залишайте muted, якщо використовуєте autoplay.
loop Відтворює відео спочатку після його завершення.
controls Показує елементи керування плеєром (відтворення/пауза, звук, шкала часу). Не додавайте цей атрибут, якщо елементи керування не потрібні.
style Визначає розташування відео в банері. Позицію та розмір можна змінити відповідно до вашого макета.

Зображення

Рекомендовані типи файлів: .jpg, .png, .gif, .svg

Розмір файлу

До 50 МБ

Відстеження подій

  • View (перегляд)
  • Confirmed view (підтверджений перегляд)
  • Click (клік)
Chrome обмежуватиме ресурси, які може використовувати медійна реклама до взаємодії з нею користувача, видаляючи «важкі» креативи зі сторінки. Реклама вважається «важкою», якщо користувач не взаємодіяв із нею (наприклад, не торкався її і не клікав) і вона відповідає будь-якому з таких критеріїв:
– використовує основний потік загалом понад 60 секунд;
– використовує основний потік понад 15 секунд у будь-якому 30-секундному інтервалі;
– використовує понад 4 мегабайти мережевого трафіку.
З усіх питань щодо інструкцій для реклами звертайтеся до вашого менеджера підтримки.
Оновлено 27 жовтня, 2026