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

UI-шаблон: HTML5 Mobile Float


Превью

Mobile Catfish (HTML5) — это плавающий рекламный формат для мобильных устройств. Баннер закреплен внизу экрана, занимает всю его ширину и остается видимым, пока пользователь прокручивает содержимое страницы. Пользователь может закрыть баннер кнопкой закрытия; тап по любой другой части баннера открывает целевую страницу и закрывает баннер.

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

Десктоп Планшет Смартфон
Windows Mac iOS Android iOS Android
- - Поддерживается Поддерживается Поддерживается Поддерживается

Совместимость с инвентарем:

Только локальный инвентарь (прямые зоны паблишеров).

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

Элемент Требование
Основная панель Ширина: 100% экрана
Высота: до 30% высоты экрана
Расположение Закреплена внизу экрана, по центру горизонтально
Кнопка закрытия «X» в правом верхнем углу панели, не менее 24×24 px
Зона клика Вся панель, кроме кнопки закрытия
Размер файла До 50 MB
Изображения Рекомендуемые форматы: .jpg, .png, .gif, .svg

Скачайте архив с шаблоном:

Скачать

Как работать с архивом (шаблоном)

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

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

ZIP-архив

Баннер со всеми файлами нужно заархивировать в .zip. Используйте .zip-архив с шаблоном.

HTML-файл

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

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

globalHTML5Api подключается автоматически. Обращение к нему выглядит так:

Развернуть код globalHTML5Api
globalHTML5Api.on('load', function(){
  /*
    YOUR CODE IS HERE
  */
});

Объекты и методы globalHTML5Api нужно задавать внутри вызываемой функции. Все используемые модули нужно перечислить как параметры функции. Этот формат не требует модулей. Пример использования globalHTML5Api.init для формата Mobile Catfish:

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

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

Ключ Свойства Тип Описание
resize – Array Массив объектов
name (обязательный) String Название объекта. Каждый объект описывает отдельное состояние контейнера (resizeState)
fixed – Объект со свойствами. Описывает положение контейнера относительно окна браузера
vertical (обязательный) bottom Вертикальное выравнивание контейнера
horizontal (обязательный) center Горизонтальное выравнивание контейнера
width (обязательный) String|Number Ширина контейнера баннера
height (обязательный) String|Number Высота контейнера баннера

Методы globalHTML5Api

Метод Аргументы Тип Описание
click(URL) – – Метод для вызова перехода по клику. Целевой URL можно задать как параметр или в интерфейсе. URL, заданный в коде, имеет более высокий приоритет, чем URL из интерфейса, что может привести к конфликту. Поэтому обязательно используйте только один из способов.
URL (необязательный) String Целевой URL
src(URL) – – Метод возвращает абсолютный путь к файлу
URL (необязательный) String Относительный путь к файлу
close(preventEvent) – – Метод для закрытия баннера. В шаблоне он вызывается после клика со значением true, чтобы баннер закрылся без отправки события закрытия.
preventEvent (необязательный) Boolean Отменяет отправку трекингового события close (закрытие баннера). Если значение false, событие будет отправлено. По умолчанию: false

Трекинг событий

  • Показ (View)
  • Подтвержденный показ (Confirmed view)
  • Клик (Click)
Chrome ограничивает ресурсы, которые может использовать рекламный баннер до взаимодействия с пользователем, и удаляет со страницы «тяжелые» креативы. Баннер считается тяжелым, если пользователь с ним не взаимодействовал (например, не тапнул и не кликнул) и он соответствует любому из критериев:
– использует основной поток более 60 секунд в общей сложности
– использует основной поток более 15 секунд в любом 30-секундном интервале
– использует более 4 мегабайт сетевого трафика

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

Обновлено 27 октября, 2026