Admixer HelpCenter

Russian

English

Ukrainian

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

Глоссарий

Креативы

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

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

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

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

Viber Format Creatives specs

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

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

Формат баннера, состоящий из двух панелей – начальной и полноэкранной. Полноэкранная панель появляется по клику или по наведению на основную. Кнопка “Закрыть” на полноэкранной панели возвращает баннер в начальное состояние.

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

Поддерживаемые платформы

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

Требования к формату

Основная панель

Стандартные размеры WxH, px: 300×250, 240×350, 300×250, 240×500, 300×600

Развернутая панель

Стандартные размеры, WxH: 100%x100%

Видео (опционально)

Размер контейнера для видеоплеера может быть задан любой в границах панели
Тип файлов: .mp4
Макс. продолжительность: 30 сек
Frame rate: 24 fps

Аудио

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

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

Кнопка “X / Закрыть” в правом верхнем углу баннера (позволяет пользователю закрыть развернутую панель)
Минимально необходимый отступ для кнопки Закрыть от верхней и правой границ баннера – 5px:

right: 5px;
top: 5px;

Вес креатива

до 300 KB без видео
до 2 MB с видео

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

Скачать

Данная структура файлов в архиве соответствует примеру и может быть изменена вами. Обязательным файлом в архиве является body.html, в котором указываются размеры баннера, параметр учета клика и другие скрипты.

Инструкция по работе с архивом

Распакуйте архив с примером.
Для просмотра креатива, используйте страницу http://preview.admixer.net или же скопируйте все файлы в папку index – banners – banner – body и откройте файл index.html в браузере через localhost. Во втором случае требуется предварительная установка и настройка веб-сервера (к примеру, IIS для Windows, Apache для Mac OS).
Откройте текстовым редактором файл body.html и отредактируйте часть кода, которая находится внутри тэгов <body> </body>.

В тегах <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 помещаются внутрь вызываемой функции.
Подключаемые модули передаются в качестве параметров функции. Для данного формата могут быть использованы модули Player и Tween.
Упрощенный пример использования globalHTML5Api.init для формата Click to Fullscreen:

Показать пример кода globalHTML5Api.init

globalHTML5Api.on('load', function(){
	globalHTML5Api.init({
		'resize' : [
			{
				'name': 'state-1',
				'width': '300px',
				'height': '250px',
				'onComplete': function () {
					//function();
			},
				'onStart': function () {
					//function();
			}
			},
			{
				'name': 'state-2',
				'fixed' : {
						'vertical':'center',
						'horizontal':'center'
					},
				'width': '100%',
				'height': '100%'
			}
		]
	});
});

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

Методы globalHTML5Api

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

Видео

Если креатив содержит видео, следуйте Инструкции по добавлению видео в HTML5 баннер.

Изображения

Поддерживаемые типы файлов: .jpg, .png, .gif, .svg

Также поддерживаются файлы CSS.

Учет событий

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)/ Досмотр видеоролика (первая четверть, середина, третья четверть, окончание)

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

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

Обновлено 09 декабря, 2022