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

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


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

Формат з ефектом паралакса, задіює частину підкладки при прокручуванні сторінки. Як правило, займає 100% ширини контентної зони на сторінці.
Підходить для розміщення як на десктопі, так і на мобільних пристроях.

Parallax для мобільних пристроїв передбачає наявність мобільної верстки сайту. Обов'язкові параметри для viewport meta tag: width=device-width, initial-scale=1.0.
Цей формат може підпадати під обмеження, що накладаються Google спільно з Coalition for Better Ads на показ рекламних банерів у браузері Chrome. Щоб банер не був визнаний таким, що порушує вимоги стандарта, необхідно виключити таку поведінку банера:
· автопрогравання відео з увімкненим звуком.

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox Safari7.1+, Chrome, Firefox ver. 8.0+ ver. 4.4+ ver. 8.0+ ver. 4.4+

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

Завантажити

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

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

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

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

  3. Відкрийте текстовим редактором файл body.html і відредагуйте частину коду, яка знаходиться всередині тегів <body> </body>.
В тегах <body>…</body> вказуються розміри банера, скрипти тощо. Якщо розмістити їх в іншому місці, креатив не відображатиметься.
  1. Відредагуйте файл body.js.
  2. Збережіть і заархівуйте всі використовувані матеріали в ZIP форматі (архів має створюватися з файлів, а не з папки, в якій ці файли знаходяться).

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

ZIP архів

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

HTML файл

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

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

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

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

Усі використовувані об'єкти і методи globalHTML5Api поміщаються всередину викликаної функції.
Модулі, що підключаються, передаються як параметри функції. Цей формат може використовувати модуль panels.
Модуль Panels передавати як параметр не потрібно.

Спрощений приклад використання globalHTML5Api для формату Parallax:

Показати зразок коду JavaScript
globalHTML5Api.on("load", function (listener) {
  globalHTML5Api.init({
    resize: [{
      name: "state-1",
      width: "100%",
      height: "30w",
      parallax: true
    }],
  });
  globalHTML5Api.panels.add("content", {
    src: globalHTML5Api.src("content.html"),
    visible: true
  });
  document.body.onclick = function(event){
    listener.Listener.prevent(event);
    globalHTML5Api.click();
  }
});
body.js обов'язково повинен містити globalHTML5Api.panels.add(name, options).

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

Ключ Властивості Тип Опис
resize — Array Масив об'єктів
name (required) String Ім'я об'єкта. Кожен об'єкт являє собою окреме положення контейнера (resizeState).
width (required) String|Number Значення ширини контейнера з банером
height (required) String|Number Значення висоти контейнера з банером. Якщо висота позначена як parent.innerHeight, то її можна зменшити за допомогою множника (parent.innerHeight*number)
parallax (required) Boolean ‘true’, якщо має використовуватися ефект паралакс, 'false', якщо ні

Модуль Panels

Даний модуль додає панелі банера на сторінку.

Властивості модуля Panels

Метод Параметри Властивості Тип Опис
add(name, options) — — — Метод додає панель на сторінку
name (required) — String Ім'я панелі, що додається
options visible (required) Boolean default=“false”; Панель буде відображено видимою під час додавання
src (required) String Шлях до файлу панелі; можна використовувати шлях, що повертається методом globalHTML5Api.src(). Якщо посилання не передавати, то метод поверне поточний файл

Методи globalHTML5Api

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

Зображення

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

Відео

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

Облік подій

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