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

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


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

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

Цей формат підпадає під обмеження, що накладаються на 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+

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

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

Стандартні розміри, WxH, 100%x100%

Зверніть увагу: якщо сайт не підтримує мобільну або планшетну версію, рекомендується вказувати параметри шаблону креативу, такі як висота і ширина, у відсотках (%), а не в одиницях висоти області перегляду (vh) і ширини області перегляду (vw). У таких випадках перевага надається відсотковим одиницям, оскільки вони забезпечують узгодженість макета на різних пристроях, гарантуючи безперебійну роботу користувача і дозволяють створювати гнучкі та плавні креативи, які легко адаптуються до різних розмірів екрану.

    Відео

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

    Аудіо

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

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

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

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

    Завантажити

    Дана структура файлів в архіві відповідає прикладу і може бути змінена вами.  Обов'язковим файлом в архівах є body.html, в якому вказуються розміри банера, параметр обліку кліка та інші скрипти.

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

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

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

    ZIP архів

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

    HTML файл (body.html)

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

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

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

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

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

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

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

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

    Методи globalHTML5Api

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

    Відео

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

    Зображення

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

    Облік подій

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