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

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

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

Контейнер з анімацією Takeover може задіяти тільки частину контенту сайту, наприклад, центральну, без бічних колонок. У такому разі, для контейнера вказуються необхідні розміри і положення, і анімація спрацює тільки для зазначеної частини. Приклад Takeover із зсувом контейнера шириною 600px.

Цей формат може підпадати під обмеження, що накладаються Google спільно з Coalition for Better Ads на показ рекламних банерів у браузері Chrome. Щоб банер не був визнаний таким, що порушує вимоги стандарта, необхідно виключити таку поведінку банера:
· автопрогравання відео з увімкненим звуком.
· банер, який автоматично розкривається.

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox Safari9+, Chrome, Firefox — — — —

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

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

Стандартні розміри, WxH, px: 300х250, 240х350, 240х400, 180х150, 320х280, 728х90, 970х90, 970х200, 650х250, 240×500, 300х600, 160х600

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

  • Стандартні розміри: 100%x100%
  • Верстка банера має враховувати розмір і позиціонування контейнера з банером у розгорнутому стані (після того, як виконалася анімація Takeover). Як правило, вони відповідають розміру і розташуванню контенту сайту, на якому буде відображено банер. Колір фону контейнера з банером має бути такий самий, як на сайті.

Відео

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

Аудіо

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

Кнопки управління

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

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

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

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

Завантажити

Дана структура файлів в архіві відповідає прикладу і може бути змінена вами. Обов'язковим файлом в архівах є body.html, в якому вказуються розміри банера, параметр обліку кліка та інші скрипти.
  1. Розпакуйте архів з прикладом.
  2. Для перегляду креатива використовуйте сторінку https://preview.admixer.net.
  3. Відкрийте текстовим редактором файл body.html і відредагуйте частину коду, яка знаходиться всередині тегів <body> </body>.
В тегах <body>…</body> вказуються розміри банера, скрипти тощо. Якщо розмістити їх в іншому місці, креатив не відображатиметься.
  1. Відредагуйте 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 поміщаються всередину викликаної функції. Модулі, що підключаються, передаються як параметри функції. Для цього формату можуть бути використані модулі Player і Takeover.
Приклад використання globalHTML5Api.init для формату Takeover:

Показати приклад коду globalHTML5Api.init
var takeover = Takeover.create();
globalHTML5Api.init({
	resize: [
		{
			name: "state-1",
			width: "300px",
			height: "250px",
			onComplete: function () {
				//function();
			},
			onStart: function () {
				//function();
			}
		},
		{
			name: "state-2",
			width: "100%",
			height: "100%",
			fixed: {
				vertical: "center",
				horizontal: "center"
			},
			onComplete: function () {
				takeover.show("slide", {
					time: 2,
					target: "bottom",
					onComplete: function (expand) {
						//function();
					},
					onStart: function () {
						//function();
					}
				});
			},
			onStart: function () {
				//function();
			}
		}
	]
});

Параметри 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 – зміна положення контейнера до вказаного

Спрощений приклад використання модуля Takeover (натисніть нижче, щоб розгорнути код).

Показати зразок коду модуля Takeover
var takeover = Takeover.create();
takeover.container(document.getElementById("container"));
takeover.show("slide", {
	time: 2,
	target: "bottom",
	onComplete: function () {
		//function();
	},
	onStart: function () {
		//function();
	}
});
takeover.on("ready", function(){
	//function();
	takeover.hide(2);
	};
});

Параметри Takeover

Метод Параметри Властивості Тип Опис
create() — — — Ініціалізація Takeover
container(HTMLElement) — — — Метод, що додає Takeover до вказаного контейнера
HTMLElement — String HTML елемент із версткою Takeover
show(“slide”, options) — — — Метод запускає анімацію takeover
slide — String Тип анімації takeover
options — Object Об'єкт із властивостями
target (required) left, right, top, bottom String Напрямок зсуву скріншоту контенту сайту
time (required) Number Час, за який виконується анімація takeover; у секундах
onStart (optional) Function Виклик функції на початку анімації takeover
onComplete (optional) Function Виклик функції по завершенню анімації takeover
hide(timeScale) — — — Метод запускає анімацію takeover у зворотному напрямку
timeScale (optional) — Number Значення виступає множником для time,
прискорює або сповільнює анімацію під час згортання takeover
on(“ready”, callback) — — — Метод дає змогу викликати функції щодо готовності скріншота контенту сайту
ready — String Подія, яка відбувається, коли готовий скріншот сайту
callback — Function Функція, яка запускається після готовності скріншота сайту

Методи  globalHTML5Api

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

Відео

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

Зображення

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

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

Облік подій

  • 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)/Перегляд відеоролика (перша чверть, середина, третя чверть, закінчення)

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

Формат не працюватиме коректно, якщо його було розміщено на сайті в Safe Frame.

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