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

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


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

Стандартный баннер, имеющий фиксированное положение на странице, заданную высоту и занимающий 100% ширины родительского контейнера.

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, Edge, IE10+ Safari6.2+, Chrome, Firefox; — — — —

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

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

Стандартные размеры, WxH: 100%x90px, 100%x120px, 100%x200px, 100%x250px, 100%x300px

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

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

Аудио

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

Вес креатива

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

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

Скачать

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

  1. Распакуйте архив с примером.
  2. Для просмотра креатива, используйте страницу http://preview.yehtu.com или же скопируйте все файлы в папку index – banners – banner – body и откройте файл index.html в браузере через localhost. Во втором случае требуется предварительная установка и настройка веб-сервера (к примеру, IIS для Windows, Apache для Mac OS).
  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.
Упрощенный пример использования globalHTML5Api.init для формата Flexible.

Показать пример кода globalHTML5Api.init
globalHTML5Api.on('load', function(){
 globalHTML5Api.init({
  'resize': [
   {
    'name': 'state-1',
    'width': '100%',
    'height': '90px'
   }
  ]
 });
});

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

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

Методы  globalHTML5Api

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

Видео

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

Изображения

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

Учет событий

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