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

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


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

Баннер, разворачивающийся по действию пользователя влево/вправо и вниз. Состоит из начальной панели и развернутой. Развернутая панель постепенно заполняется картинками одного размера. Количество картинок, порядок и время их появления задаются при верстке. После того, как все картинки отобразились, поверх может быть показан также HTML блок и видео.

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

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

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

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

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

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

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

  • Контейнер в развернутом состоянии может быть заполнен любым количеством одинакового размера изображений.
  • Также одно изображение может быть разрезано на указанное количество равных частей.
  • Вес файлов: рекомендуемый 60KB

Видео

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

Аудио

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

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

  • Кнопка “X / Закрыть” в правом верхнем углу баннера (позволяет пользователю свернуть баннер)
  • Аудио: звук вкл./выкл
  • Видео: кнопки Play/Pause

Скачать архивы с примерами.

Cкачать пример HTML5

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

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

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

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

ZIP архив

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

HTML файл

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

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

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

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

Все используемые объекты и методы globalHTML5Api помещаются внутрь вызываемой функции.
Подключаемые модули передаются в качестве параметров функции. В примере выше подключены модули Flip и Player. Если подключается несколько модулей, они указываются через запятую.
Пример использования globalHTML5Api.init для формата Flip:

Показать пример кода globalHTML5Api.init
globalHTML5Api.init({
	'resize': [
		{
			'name': 'state-1',
			'width': '300px',
			'height': '250px'
		},
		{
			'name': 'state-2',
			'width': '900px',
			'height': '500px',
			'overlay': {
				'from': 'state-1',
				'left': 600,
				'bottom': 0
			},
			'onComplete': function () {
				flip.play();
				player.play();
			},
			'onStart': function () {
				document.getElementById('main').style.display = 'none';
			}
		}
	]
});

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

Ключ Параметры Свойства Тип Описание
resize(options) — — — Инициализация globalHTML5Api.resize
options — Array Массив объектов со свойствами. Каждый объект представляет собой отдельное положение контейнера (resizeState)
name (required) String Имя объекта
width (required) String|Number Значение ширины контейнера с баннером
height (required) String|Number Значение высоты контейнера с баннером
overlay — Object Объект со свойствами. Описывает положение контейнера относительно окна браузера
from (required) String Положение контейнера, из которого начинается перекрытие контента (‘resizeStateName’)
left String Значение отступа влево
right String Значение отступа вправо (не используется вместе с ‘left’)
top String Значение отступа вверх
bottom String Значение отступа вниз (не используется вместе с ‘top’)
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 – изменение положения контейнера до указанного.

Пример использования модуля Flip (нажмите ниже, чтобы развернуть код).

Показать пример кода JavaScript
var s = globalHTML5Api.src;
var flip = Flip.create({
    'map': [
        [3, 2, 1],
        [4, 5, 6]
    ],
    'items': [
        [s('flip/01.png'), s('flip/02.png'), s('flip/03.png')],
        [s('flip/04.png'), s('flip/05.png'), s('flip/06.png')]
    ],
    'content': document.getElementById('content'),
    'time': 0.3,
    'delay': 0.2,
    'onReverseComplete': function () {
        globalHTML5Api.resize.to('state-1', 0, 'adCollapse');
        document.getElementById('main').style.display = '';
    }
}).appendTo(document.getElementById('container'));

Параметры Flip

Метод Параметры Свойства Тип Описание
create(options) — — — Инициализация Flip
options — Object Объект со свойствами
map (required) Array of arrays Массив индексов, указывающих на последовательность появления элемента (item).
Количество массивов и индексов в каждом массиве также показывает, на сколько элементов будет разбит Flip.
Есть два способа передать последовательность:

  1. Использовать только целочисленные индексы (1, 2 и т.д.). Такой индекс ищет index-1 рядом (слева, справа, сверху, снизу). Если такой есть, то текущий будет показан после него. Если такого нет, то текущий будет отправной точкой для следующих.
  2. Использовать комбинированный способ из целочисленных и составных индексов. Составной индекс представляет собой строку из двух чисел, разделенных точкой (‘1.2’). Такой индекс показывает, из какого положения будет открыт данный элемент; где первое число – это номер строки, второе – это номер по порядку элемента в строке.
    Порядок чтения индексов – слева направо.
    Пример комбинированного способа записи индексов:
'map': [
   [3, 2, 1],
   [4, '1.2', 2],
   ['3.2', 4, 3]
 ],

Согласно такому расположению, крайний элемент слева в третьем ряду будет открыт из второго элемента в третьем ряду (‘3.2’)
items (required) Array of arrays | String Массив элементов, содержащих абсолютный путь к источнику изображения. При использовании относительного пути абсолютный можно получить с помощью метода globalHTML5Api.src(). Данный метод описан ниже.
Ссылки на источники изображений указываются в соответствии с элементами в массиве ‘map’. Если указан только один файл в качестве источника изображения, то он будет автоматически разбит на указанное в ‘map’ количество элементов.
time (required) Number Время появления каждого элемента в массиве в секундах.
delay Number Время в секундах, добавляемое к ‘time’. Если из одного контейнера появляется два и более элементов, можно добавить время задержки до появления каждого следующего элемента
content String HTML Element, который будет показан поверх контейнера с Flip
onComplete Function Запуск функции по завершению Flip анимации (после разворачивания всех элементов)
onReverseComplete Function Запуск функции по завершению Flip анимации в обратном порядке (после сворачивания всех элементов)
appendTo(Node) — — — Добавление объекта к указанному элементу
Node — String HTML Element, в который вставляется созданный объект
play(time) — — — Метод запускает анимацию Flip (разворачивание элементов)
time — Number (optional) Время разворачивания каждого элемента; является множителем для значения свойства ‘time’
reverse(time) — — — Метод запускает анимацию Flip в обратном порядке (сворачивание элементов)
time — Number (optional) Время сворачивания каждого элемента; является множителем для значения свойства ‘time’

Методы globalHTML5Api

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

Изображения

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

Видео

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

Учет событий

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

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

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