Назад до Огляду платформи
Глосарій
Креативи
Робота з креативами
Вартість креативів
Тех. вимоги до креативів
Додаткові налаштування
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+ Safari5.1+, Chrome, Firefox — — — —

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

Початкова панель (кут)

  • За замовчуванням, шаблон містить кут білого кольору, його необхідно замінити призначеним для користувача зображенням у тому разі, якщо потрібен інший колір кута.
  • Початкова панель являє собою квадрат, розділений діагоналлю (від верхнього лівого кута до нижнього правого) на два трикутники. Трикутник зліва має прозоре тло, трикутник праворуч має бути пофарбований у колір фону контенту сайту (як правило, білий). Крізь прозоре тло трикутника зліва видно банер. Як початкова панель може виступати видима частина повноекранного банера, можна також створити окремий банер.
  • Стандартні розміри, WxH, px: 100×100, 150×150, 200×200. Співвідношення сторін зображення 1:1
  • Вага файла: рекомендована до 8KB
  • Тип файла: .png, .jpg

Розгорнута панель

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

Відео

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

Аудіо

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

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

Кнопка "X Закрити" в правому верхньому кутку розгорнутої панелі (дає змогу користувачеві згорнути банер)

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

Download

Дана структура файлів в архіві відповідає прикладу і може бути змінена вами.  Обов'язковим файлом в архівах є  body.html, в якому вказуються розміри банера, параметр обліку кліка та інші скрипти.
  1. Розпакуйте архів із прикладом.
  2. Для перегляду креативу, використовуйте сторінку https://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 і  Corner.
Приклад використання globalHTML5Api.init для формата Corner:

Показати приклад коду globalHTML5Api.init
var width = 100;
var height = 100;
var vertical = "bottom";
var horizontal = "left";
globalHTML5Api.init({              
  resize: [
    {
      name: "state-1",
      width: width,
      height: height,
      fixed: {
        vertical: vertical,
        horizontal: horizontal
      },
      onComplete: function () {
        //function();
              },
      onStart: function () {
        //function();
              }
    },
    {
      name: "state-2",
      width: "100%",
      height: "100%",
      fixed: {
        vertical: vertical,
        horizontal: horizontal
      },
      onComplete: function(){
        document.getElementById("expand").style.display = "";
        C.expand({
          onCollapse: function(){
            globalHTML5Api.resize.to("state-1",0);
            player.pause(null, true);
          }
        });
      }
    }   
  ]                                                 
});

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

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

Методи globalHTML5Api.resize

Методи Параметри Тип Опис
to(resizeStateName, time, eventName) — — Зміна поточного положення контейнера на вказане
resizeStateName (required) String Ім'я положення контейнера, до якого потрібно перейти
time (required) Number Час анімації зміни положення контейнера
eventName  (required) String Подія, яку необхідно враховувати:

  • adExpand – розгортання контейнера;
  • adCollapse – згортання контейнера;
  • adExpandAuto – автоматичне розгортання контейнера;
  • adCollapseAuto – автоматичне згортання контейнера.
currentState() — — Метод повертає рядок:
resizeState.name – ім'я поточного положення контейнера
interactive to resizeState.name – зміна положення контейнера до зазначеного

Приклад використання модуля Corner (натисніть нижче, щоб розгорнути):

Показати приклад коду JavaScript
var C = Corner.create({
 content: document.getElementById("content"),
 horizontal: horizontal,
 vertical: vertical,
 width: width,
 height: height,
 time: 1.8
});

Параметри Corner

Метод Параметри Властивості Тип Опис
create(options) — — — Ініціалізація Corner
options — Object Об'єкт із властивостями
content (required) String HTML Element з версткою креативу
horizontal (required) left, right String Положення кута по горизонталі
vertical (required) top, bottom String Положення кута по вертикалі
width (required) String|Number Ширина кута
height (required) String|Number Висота кута
time (optional) Number Час, за який виконується анімація кута
cornerImage String Шлях до файлу. Цей параметр дає змогу змінити картинку, що використовується як кут
expand(options) — — — Метод запускає анімацію Corner (розгортання кута)
options — Object Об'єкт із властивостями
onExpand Function Виклик функції після завершення анімації Corner (розгортання кута)
onCollapse Function Виклик функції після завершення анімації Corner (згортання кута)
collapse(options) — — — Метод запускає анімацію Corner (розгортання кута)
options — Object Об'єкт із властивостями
onExpand Function Виклик функції після завершення анімації Corner (розгортання кута)
onCollapse Function Виклик функції після завершення анімації Corner (згортання кута)

Методи  globalHTML5Api

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

Відео

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

Зображення

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

Облік подій

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