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

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


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

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

Данный формат подпадает под ограничения, налагаемые 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+

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

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

Стандартные размеры, WxH, 100%x100%

Обратите внимание: если сайт не поддерживает мобильную или планшетную версию, рекомендуется указывать параметры шаблона креатива, такие как высота и ширина, в процентных единицах (%), а не в единицах высоты области просмотра (vh) и ширины области просмотра (vw). В таких случаях предпочтение отдается процентным единицам, поскольку они обеспечивают согласованность макета на разных устройствах, гарантируя бесперебойную работу пользователя, позволяя создавать гибкие и плавные креативы, которые легко адаптируются к различным размерам экрана.

    Видео

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

    Аудио

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

    Вес креатива

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

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

    Скачать

    Данная структура файлов в архивы соответствует примеру и может быть изменена вами. Обязательным файлом в архивах является body.html, в котором указываются размеры баннера, параметр учета клика и другие скрипты.

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

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

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

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

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

    ZIP архив

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

    HTML файл (body.html)

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

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

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

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

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

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

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

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

    Методы globalHTML5Api

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

    Видео

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

    Изображения

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

    Учет событий

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