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

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


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

Формат баннера, состоящий из двух панелей – начальной и развернутой. Начальная панель появляется при загрузке страницы сайта в контент-зоне, занимающей 100% ширины сайта. При прокрутке контента сайта, контейнер с баннером увеличивается по высоте и постепенно появляется развернутая панель. Развернутая панель может содержать видео. Видео проигрывается автоматически при попадании контейнера с плеером в область видимости пользователя.

Формат предполагает наличие мобильной верстки сайта. Обязательные параметры для viewport meta tag: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no
Данный формат может подпадать под ограничения, налагаемые 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+

Известные ограничения

  1. Автоматическое воспроизведение видео не работает на устройствах с версией iOS 9 и ниже.
  2. Автоматическое воспроизведение видео на Android и iOS 10+ устройствах возможно только с выключенным звуком.

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

Размеры баннера

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

Вертикальное положение экрана
Высота баннера в свернутом состоянии по умолчанию составляет 1/3 максимальной высоты баннера в развернутом состоянии
Ширина баннера: контейнер с баннером всегда растягивается на 100% ширины экрана устройства.

Горизонтальное положение экрана
Высота баннера в свернутом состоянии по умолчанию составляет 1/3 максимальной высоты баннера

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

Вертикальное положение экрана
Высота баннера по умолчанию равняется ширине баннера (соотношение сторон 1:1)

Горизонтальное положение экрана
Высота баннера в развернутом состоянии по умолчанию составляет 80% от высоты экрана устройства.

Видео

  • Рекомендуемое соотношение сторон видеофайла 16:9
  • Тип файлов: .mp4
  • Макс. продолжительность: 15 сек

Аудио

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

Вес креатива

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

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

Скачать

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

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

    3. Дополнительно можете проверить превью креатива предварительно скопировав на него ссылку и просмотрев с мобильного девайса.

  3. Откройте текстовым редактором файл body.html и отредактируйте часть кода, которая находится внутри тэгов <body> </body>.
  1. Отредактируйте файл body.js.
  2. Сохраните и заархивируйте все используемые материалы в ZIP формате (архив должен создаваться из файлов, а не из папки, в которой эти файлы находятся).

Требования к файлам

ZIP архив

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

HTML файл

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

Подключение и использование API

globalHTML5Api подключается автоматически, вызывается с помощью метода:

Показать код globalHTML5Api
globalHTML5Api.on('load', function(){
  /*
    YOUR CODE IS HERE
  */
});

Все используемые объекты и методы globalHTML5Api помещаются внутрь вызываемой функции. Подключаемые модули передаются в качестве параметров функции. Данный формат может использовать модуль Player, Tween и Extend.

Упрощенный пример использования globalHTML5Api для формата Mobile Extend:

Показать пример кода globalHTML5Api
globalHTML5Api.on("load", function (Extend, Player) {
    var extend = Extend.create({
        expandPercent: 95,
	 minSize: 20,
        onExpand: expand,
        onCollapse: collapse
    });	
    player = Player.create({
        src: "images/adm_video.mp4",
        container: document.getElementById("player")
    });  
});

Параметры Extend

Метод Параметры Тип Описание
create — Object Инициализация Extend
expandPercent (optional) Number Значение в % от высоты баннера, по достижению которого срабатывает событие ‘expand’ (разворачивание контейнера) и отправляются callback-функции.
Значение по умолчанию 50%.
minSize (optional) Number Минимальная высота начальной панели, определяется в % от высоты экрана устройства.
maxSize (optional) Number Максимальная высота развернутой панели, определяется в % от высоты экрана устройства.
onExpand (required) Function Запуск callback функции по достижению значения, указанного в ‘expandPercent’.
В этот момент запускается анимация развернутой панели.
onCollapse (required) Function Запуск callback функции по достижению значения, которое меньше указанного в ‘expandPercent’, при условии, что ‘expand’ уже сработал.
В этот момент запускается анимация свернутой панели.

Методы globalHTML5Api

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

Видео

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

Изображения

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

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

Учет событий

  • View/ Просмотр
  • Confirmed view/ Подтвержденный просмотр
  • Click/ Клик
  • Expand by user/ Расхлоп баннера пользователем
  • Collapse by user/ Сворачивание баннера пользователем
  • Play/ Запуск видеоролика
  • Pause/ Пауза
  • Resume/ Повторный запуск видеоролика
  • Sound on/ Включение звука
  • Sound off/ Выключение звука
  • Progress (firstQuartile, midpoint, thirdQuartile, complete)/ Досмотр видеоролика (первая четверть, середина, третья четверть, окончание)
Chrome может ограничивать использование ресурсов рекламой (до взаимодействия пользователя с ней) путем удаления тяжелого креатива со страницы. Реклама считается тяжелой, если пользователь не взаимодействовал с ней (например, не кликнул) и если она соответствует любому из следующих критериев:
— Использует основной поток в общей сложности более 60 секунд
— Использует основной поток более 15 секунд в любом 30-секундном окне
— Использует более 4 мегабайт пропускной способности сети
По вопросам технических требований к баннерам, пожалуйста, обращайтесь к менеджеру поддержки вашего аккаунта.
Обновлено 09 апреля, 2024