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

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


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

Формат с эффектом параллакса, задействует часть подложки при прокрутке страницы. Как правило, занимает 100% ширины контентной зоны на странице.
Подходит для размещения как на десктопе, так и на мобильных устройствах.

Parallax для мобильных устройств предполагает наличие мобильной верстки сайта. Обязательные параметры для viewport meta tag: width=device-width, initial-scale=1.0.
Данный формат может подпадать под ограничения, налагаемые Google совместно с Coalition for Better Ads на показ рекламных баннеров в браузере Chrome. Чтобы баннер не был признан таким, который нарушает требования стандарта, необходимо исключить следующее поведение баннера:
· автопроигрываемое видео с включенным звуком.

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox Safari7.1+, Chrome, Firefox ver. 8.0+ ver. 4.4+ ver. 8.0+ ver. 4.4+

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

Скачать

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

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

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

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

  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(listener){
    /*
        YOUR CODE IS HERE
    */
});

Все используемые объекты и методы globalHTML5Api помещаются внутрь вызываемой функции.
Подключаемые модули передаются в качестве параметров функции. Данный формат может использовать модуль panels.
Модуль Panels передавать в качестве параметра не нужно.

Упрощенный пример использования globalHTML5Api для формата Parallax:

Показать образец кода JavaScript
globalHTML5Api.on("load", function (listener) {
  globalHTML5Api.init({
    resize: [{
      name: "state-1",
      width: "100%",
      height: "30w",
      parallax: true
    }],
  });
  globalHTML5Api.panels.add("content", {
    src: globalHTML5Api.src("content.html"),
    visible: true
  });
  document.body.onclick = function(event){
    listener.Listener.prevent(event);
    globalHTML5Api.click();
  }
});
body.js обязательно должен содержать globalHTML5Api.panels.add(name, options).

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

Ключ Свойства Тип Описание
resize — Array Массив обьектов
name (required) String Имя объекта. Каждый объект представляет собой отдельное положение контейнера (resizeState).
width (required) String|Number Значение ширины контейнера с баннером
height (required) String|Number Значение высоты контейнера с баннером. Если высота обозначена как parent.innerHeight, то ее можно уменшить с помощью множителя (parent.innerHeight*number)
parallax (required) Boolean ‘true’, если должен использоваться эффект параллакс, ‘false’, если нет

Модуль Panels

Данный модуль добавляет панели баннера на страницу.

Свойства модуля Panels

Метод Параметры Свойства Тип Описание
add(name, options) — — — Метод добавляет панель на страницу
name (required) — String Имя добавляемой панели
options visible (required) Boolean default=“false”; Панель будет отрендерена видимой при добавлении
src (required) String Путь к файлу панели; можно использовать путь, возвращаемый методом globalHTML5Api.src(). Если ссылку не передавать, то метод вернет текущий файл

Методы globalHTML5Api

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

Изображения

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

Видео

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

Учет событий

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