Admixer HelpCenter

Ukrainian

English

Russian

Назад до Огляду платформи

Глосарій

Креативи

Робота з креативами

Вартість креативів

Тех. вимоги до креативів

Додаткові налаштування

Viber Format Creatives specs

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

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

Формат з ефектом паралакса для запуску на смартфонах і планшетах, задіює частину підкладки під час прокручування сторінки, розкривається на всю висоту екрана пристрою. Креатив може містити відео. Відображення креативу в емуляторі мобільного пристрою може істотно відрізнятися від його відображення на реальному пристрої. У зв'язку з цим, настійно рекомендується тестувати всі креативи на реальних пристроях.

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

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

Автоматичне відтворення відео не працює на пристроях із версією iOS 9 і нижче.
Автоматичне відтворення відео на Android та iOS 10+ пристроях можливе тільки з вимкненим звуком.
Для коректного відображення креативу на пристроях iOS, блок щодо якого спрацьовує властивість clip rect , не повинен містити елементів з абсолютним позиціонуванням. Замість цього рекомендується використовувати фіксоване позиціонування .

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

Завантажити

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

Розпакуйте архів з прикладом.
Для перегляду креатива на локальному пристрої, скопіюйте всі файли в папку index - banners - parallax - body і відкрийте файл index.html у середовищі перегляду на мобільному пристрої через localhost (наприклад, браузер Chrome з режимом емулятора мобільного пристрою). У цьому випадку потрібне попереднє встановлення та налаштування веб-сервера (наприклад, IIS для Windows, Apache для Mac OS).

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

Відкрийте текстовим редактором файл body.html і відредагуйте частину коду, яка знаходиться всередині тегів <body> </body>.

Відредагуйте файл body.js.
Збережіть і заархівуйте всі використовувані матеріали в ZIP форматі (архів повинен створюватися з файлів, а не з папки, в якій ці файли знаходяться).

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

ZIP архів

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

HTML файл

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

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

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

Показати код globalHTML5Api

globalHTML5Api.on('load', function(){
  /*
    YOUR CODE IS HERE
  */
});

Усі використовувані об'єкти і методи globalHTML5Api поміщаються всередину функції, що викликається. Модулі, що підключаються, передаються як параметри функції. У прикладі вище підключені модулі Listener і Player. Якщо підключається кілька модулів, вони вказуються через кому.

globalHTML5Api для формату Mobile Parallax Fullscreen використовується таким чином:

Показати приклад JavaScript коду для Mobile Parallax Fullscreen

globalHTML5Api.on('load', function (listener, Player) {
	var name = globalHTML5Api.name();
	if (name !== "content") {
		var player = Player.create({
			'src': 'video.mp4',
			'container': document.getElementById('player')
		  });
		  globalHTML5Api.init({
			resize: [
			  {
				name: "state-1",
				width: "100%",
				height: "100vh",
				parallax: true,
			  }
			]
		  });
		  globalHTML5Api.panels.add("top", {
			visible: true,
			src: globalHTML5Api.src("top.html")
		  });
		  globalHTML5Api.panels.add("bottom", {
			visible: true,
			src: globalHTML5Api.src("bottom.html")
		  });
		  globalHTML5Api.panels.add("content", {
			  visible: true,
			  src: globalHTML5Api.src(),
		  });
		  var paused = true;
		  globalHTML5Api.on("positionChange", function(position){
			if (paused && position.inViewPercent >= 50) {
			  player.play();
			  paused = false;
			} else if (!paused && position.inViewPercent < 50){
			  player.pause();
			  paused = true;
			}
		  });
		  document.body.onclick = function (event) {
			listener.Listener.prevent(event);
			globalHTML5Api.click();
		  }
	} else {
		document.body.style.display = "none";
		globalHTML5Api.init({
			resize: [
			  {
				name: "state-1",
				width: "100%",
				height: "100vh",
				css: {zIndex: -1}
			  }
			]
		  });
	}
});

Параметри 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”;Панель буде відображена видимою під час додавання
	options	src (required)	String	Шлях до файлу панелі; можна використовувати шлях, що повертається методом globalHTML5Api.src(). Якщо посилання не передавати, то метод поверне поточний файл

Методи globalHTML5Api

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

Відео

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

Зображення

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

Облік подій

View/Перегляд
Confirmed view/Підтверджений перегляд
Click/Клік
Play/Запуск відеоролика
Pause/Пауза
Resume/Повторний запуск відеоролика
Sound on/Увімкнення звуку
Sound off/Вимкнення звуку
Progress (firstQuartile, midpoint, thirdQuartile, complete)/Перегляд відеоролика (перша чверть, середина, третя чверть, закінчення)

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

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

Оновлено 08 квітня, 2024