NetWL

Russian

English

Ukrainian

Назад к Обзору платформы

Глоссарий

Креативы

Стоимость креативов

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

Тех. требования к креативам

Дополнительные настройки

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 мегабайт пропускной способности сети

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

Обновлено 09 апреля, 2024