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

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


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

Формат баннера, который отображается поверх контента сайта и остается на месте при скролле страницы. Может быть расположен вверху или внизу экрана. По нажатию на кнопку закрытия, баннер полностью закрывается.

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

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

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

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

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

  • Ширина: 100%
  • Высота: максимум 30% от высоты экрана

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

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

Аудио

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

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

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

Рекомендуемый вес креатива

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

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

Скачать

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

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

Показать пример кода globalHTML5Api.init
globalHTML5Api.on('load', function(){
 globalHTML5Api.init({
  'resize': [
   {
    'name': 'state-1',
    'fixed' : {
      'vertical':'bottom',
      'horizontal':'center'
    },
     'onComplete': function () {
		    //function();
			},
     'onStart': function () {
		    //function();
			}
    'width': '100%',
    'height': '30%'
   }
  ]
 });
});

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

Ключ Параметры Свойства Тип Описание
resize(options) — — — Инициализация globalHTML5Api.resize
options — Array Массив объектов со свойствами. Каждый объект представляет собой отдельное положение контейнера (resizeState)
name (required) String Имя объекта
width (required) String|Number Значение ширины контейнера с баннером
height (required) String|Number Значение высоты контейнера с баннером
fixed — Object Объект со свойствами. Описывает положение контейнера относительно окна браузера
vertical (required) top, bottom String Положение контейнера по вертикали
horizontal (required) center String Положение контейнера по горизонтали
onComplete Function Запуск callback функции по окончанию globalHTML5Api.init.resize.to(this.name)
onStart Function Запуск callback функции по началу globalHTML5Api.init.resize.to(this.name)

Методы  globalHTML5Api

Метод Аргументы Тип Описание
click(URL) — — Вызов клик-перехода на целевую страницу. Ссылка перехода может быть передана непосредственно в коде креатива. Также ссылка перехода может быть задана из шаблона заливки креатива в пользовательском интерфейсе. Ссылка, заданная в коде, имеет больший приоритет, чем ссылка, заданная через шаблон, что может привести к конфликту. Поэтому для передачи ссылки обязательно использовать только один из доступных способов.
URL (optional) String Ссылка перехода
src(URL) — — Метод возвращает абсолютный путь к файлу
URL (optional) String Относительный путь к файлу
close() — — Вызов закрытия баннера
globalHTML5Api.autoClose(timeMS, preventEvent) — — Вызов автоматического закрытия баннера через указанное количество миллисекунд
timeMS (required) Number Колличество миллисекунд до вызова закрытия баннера
preventEvent (optional) Boolean Предотвращение отправки учетного события “close” (Закрытие баннера). Если значение false – событие будет отправлено. Default: false

Видео

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

Изображения

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

Важно! Все ссылки на внешние файлы должны работать по защищенному HTTPS протоколу.

Учет событий:

  • View/ Просмотр
  • Confirmed view/ Подтвержденный просмотр
  • Click/ Клик
  • Closed by user/ Закрытие баннера пользователем
Chrome может ограничивать использование ресурсов рекламой (до взаимодействия пользователя с ней) путем удаления тяжелого креатива со страницы. Реклама считается тяжелой, если пользователь не взаимодействовал с ней (например, не кликнул) и если она соответствует любому из следующих критериев:
— Использует основной поток в общей сложности более 60 секунд
— Использует основной поток более 15 секунд в любом 30-секундном окне
— Использует более 4 мегабайт пропускной способности сети

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

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