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

Предпросмотр

При заходе на страницу, пользователь видит начальный свернутый баннер. Переход к развернутому баннеру может быть осуществлен по клику или по наведению на основной баннер. При разворачивании, скриншот контента сдвигается в сторону (эффект "открытой двери"), открывая развернутый баннер.

Контейнер с анимацией Takeover может задействовать только часть контента сайта, например, центральную, – без боковых колонок. В таком случае, для контейнера указываются необходимые размеры и положение, и анимация сработает только для указанной части.

Данный формат может подпадать под ограничения, налагаемые 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 сек
  • Frame rate: 24 fps

Аудио

  • Инициируется пользователем (выключено по умолчанию)

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

  • Кнопка “X Закрыть” в правом верхнем углу развернутой панели (позволяет пользователю свернуть баннер)

Вес креатива

  • до 300 Kb без видео
  • до 2 Mb с видео

Скачать архив с примером:

Скачать

Данная структура файлов в архивы соответствует примеру и может быть изменена вами. Обязательным файлом в архивах является body.html, в котором указываются размеры баннера, параметр учета клика и другие скрипты.
  1. Распакуйте архив с примером.
  2. Для просмотра креатива используйте страницу https://preview.admixer.net. Также можно скопировать все файлы в папку index – banners – banner – body и открыть файл index.html в браузере через localhost. Во втором случае требуется предварительная установка и настройка веб-сервера (к примеру, IIS для Windows, Apache для Mac OS).
  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("side", {
					time: 2,
					degree: 90,
					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("side", {
	time: 2,
	target: "bottom",
	degree: 90,
	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(“side”, options) — — — Метод запускает анимацию takeover
side — String Тип анимации takeover
options — Object Объект со свойствами
target (required) left, right, top, bottom String Направление раскрытия скриншота контента сайта
time (required) Number Время, за которое выполняется анимация takeover; в секундах
degree (required) Number Угол разворота скриншота контента
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.
  • В браузере Safari версии 11 и выше автоматическое воспроизведение видео с включенным звуком невозможно.
Chrome может ограничивать использование ресурсов рекламой (до взаимодействия пользователя с ней) путем удаления тяжелого креатива со страницы. Реклама считается тяжелой, если пользователь не взаимодействовал с ней (например, не кликнул) и если она соответствует любому из следующих критериев:
— Использует основной поток в общей сложности более 60 секунд
— Использует основной поток более 15 секунд в любом 30-секундном окне
— Использует более 4 мегабайт пропускной способности сети
По вопросам технических требований к баннерам, пожалуйста, обращайтесь к менеджеру поддержки вашего аккаунта.
Обновлено 06 декабря, 2023