Admixer HelpCenter

Russian

English

Ukrainian

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

Глоссарий

Креативы

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

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

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

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

Viber Format Creatives specs

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

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

Формат баннера, состоящий из двух панелей – начальной и развернутой. В развернутом состоянии баннер сдвигает контент сайта вниз; имеет рекомендованный размер 970х250, а также кнопку Close Ad/Закрыть, по нажатию на которую баннер схлопывается полностью, оставляя видимой кнопку Show Ad/Открыть, по нажатию на которую баннер расхлопывается снова. Развернутая панель может содержать видео.

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

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

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

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

Аудио:

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

Видео:

Может быть как автопроигрываемое, так и инициируемое пользователем
Продолжительность: max 30 сек
Frame rate: 24 fps
Формат файла: .mp4
Размер: зависит от размеров контейнера с видеоплеером; соотношение сторон видеофайла должно соответствовать соотношению сторон видеоконтейнера

Кнопки:

Звук: Mute/Unmute (добавляются на стороне шаблона креатива)
Видео: Play/Pause/Resume (добавляются на стороне шаблона креатива)
Close Ad/Закрыть (по нажатию на кнопку баннер схлопывается полностью, остается видимой кнопка Show Ad/Открыть)
Show Ad/Открыть (по нажатию на кнопку баннер расхлопывается; возможные размеры кнопки, px: 88х31, 62х88, 196х31)

Вес:

до 500 Kb без видео
до 3 Mb с видео

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

Скачать

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

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

Распакуйте архив с примером.
Для просмотра креатива, используйте страницу https://preview.admixer.net. Также можно скопировать все файлы в папку index – banners – banner – body и открыть файл index.html в среде просмотра на мобильном устройстве через localhost (например, браузер Chrome с режимом эмулятора мобильного устройства). В этом случае требуется предварительная установка и настройка веб-сервера (к примеру, 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 для формата Pushdown:

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

globalHTML5Api.on('load', function(){ 
globalHTML5Api.init({
        "resize": [{
            "name": "state-1",
            "width": "100px",
            "height": "220px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            },
            "onStart":function(){
                //function
            },
            "onComplete":function(){
                //function
            }
        }, {
            "name": "state-2",
            "width": "500px",
            "height": "220px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            }
        }, {
            "name": "state-3",
            "width": "900px",
            "height": "520px",
            "fixed": {
                "vertical": "center",
                "horizontal": "left"
            }
        }]
    });
});

Параметры globalHTML5Api.init

Ключ	Параметры	Свойства	Тип	Описание
resize(options)	—	—	—	Инициализация globalHTML5Api.resize
	options	—	Array	Массив объектов со свойствами. Каждый объект представляет собой отдельное положение контейнера (resizeState)
		name (required)	String	Имя объекта
		width (required)	String\|Number	Значение ширины контейнера с баннером
		height (required)	String\|Number	Значение высоты контейнера с баннером
		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

Важно! Все ссылки на внешние файлы должны работать по защищенному 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)/ Досмотр видеоролика (первая четверть, середина, третья четверть, окончание)

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

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

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