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

Формат являє собою брендування сторінки сайту. В якості панелей брендування використовується HTML верстка.

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, Edge, IE10+ Safari8+, Chrome, Firefox; — — — —

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

Загальні вимоги

В якості панелей брендування використовуються HTML елементи.
Необхідно врахувати верстку сторінки розміщення креативу під час розроблення панелі брендування (ширина контенту, колір підкладки, відступи, видима частина брендування відносно контенту, з урахуванням роздільної здатності екрана пристроїв, які використовуються найбільше).

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

  • рекомендована вага - до 300 Kb

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

Завантажити

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

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

ZIP архів

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

HTML файл

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

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

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

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

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

Показати приклад коду globalHTML5Api.init
globalHTML5Api.on("load", function (bodycss) {
    var bgName = "background";
    if (globalHTML5Api.name() === bgName) {
        globalHTML5Api.init({
            'resize': [
                {
                    'name': 'state-1',
                    'width': '100%',
                    'height': '100%',
                    'fixed': {
                        'vertical': "center",
                        'horizontal': 'center',
                        'scroll': false 
                    },
					css:{
						zIndex: 0
					}
                }
            ]
        });
		bodycss.set({
			paddingTop: "100px",
			backgroundColor: "green"
		});
    } else {
        globalHTML5Api.panels.add(bgName, {
            body: true,
            first: true,
            visible: true,
            src: globalHTML5Api.src()
        });
    }
	document.body.onclick = function () {
		globalHTML5Api.click();
	}
})

Параметри 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 Положення контейнера по горизонталі
scroll (required) — Boolean 'true', якщо зображення має скролитися разом зі сторінкою, 'false', якщо ні
css — Object Об'єкт із CSS властивостями
zIndex Number Значення z-index для блоку з банером

Методи globalHTML5Api

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

Модуль bodycss

Цей модуль встановлює CSS властивості для елемента body на сторінці.

Властивості
Метод Параметри Властивості Тип Опис
set(options) — — — Ініціалізація модуля bodycss
options — Object Об'єкт із властивостями
paddingTop String CSS властивість, що задає для елемента відступ зверху
backgroundColor String CSS властивість, що задає елементу колір підкладки

Модуль Panels

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

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

Метод Параметри Властивості Тип Опис
add(name, options) — — — Метод додає панель на сторінку
name — String Ім'я панелі, що додається
options body Boolean default=“false”; Якщо значення "true", то панель буде розміщена в body елементі,

якщо значення "false", то в плейсхолдері
first Boolean default=“false”; Якщо значення "true", то панель стане на початок тега (body або плейсхолдер)
visible Boolean default=“false”; Панель буде відрендерена видимою під час додавання
src String Шлях до файлу панелі; можна використовувати шлях, що повертається методом globalHTML5Api.src(). Якщо посилання не передавати, то метод поверне поточний файл

Зображення

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

Важливо! Усі посилання на зовнішні файли повинні працювати за захищеним  HTTPS  протоколом.

Облік подій:

  • View/ Перегляд
  • Confirmed view/ Підтверджений перегляд
  • Click/ Клік

Відомі обмеження

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

Chrome може обмежувати використання ресурсів рекламою (до взаємодії користувача з нею) шляхом видалення важкого креативу зі сторінки. Реклама вважається важкою, якщо користувач не взаємодіяв з нею (наприклад, не клікнув) і якщо вона відповідає будь-якому з таких критеріїв:

  • Використовує основний потік загалом понад 60 секунд
  • Використовує основний потік понад 15 секунд у будь-якому 30-секундному вікні
  • Використовує  більше 4 мегабайт пропускної здатності мережі

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

Оновлено 23 січня, 2024