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

Формат представляет собой брендирование страницы сайта. В качестве панелей брендирования используется HTML верстка.

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, Edge, IE10+ Safari8+, Chrome, Firefox; — — — —

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

Общие требования

В качестве панелей брендирования используются HTML элементы.
Необходимо учесть верстку страницы размещения креатива при разработке панели брендирования (ширина контента, цвет подложки, отступы, видимая часть брендирования относительно контента, с учетом разрешения экрана наиболее используемых устройств).

Вес креатива

  • рекомендуемый вес – до 300 Kb

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

Скачать

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

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

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

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

ZIP архив

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

HTML файл

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

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

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

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

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

Показать пример кода globalHTML5Api.init
globalHTML5Api.on("load", function (bodycss) {
    var bgName = "background";
    if (globalHTML5Api.name() === bgName) {
        globalHTML5Api.init({
            'resize': [
                {
                    'name': 'state-1',
                    'width': '100%',
                    'height': '100%',
                    'fixed': {
                        'vertical': "center",
                        'horizontal': 'center',
                        'scroll': false 
                    },
					css:{
						zIndex: 0
					}
                }
            ]
        });
		bodycss.set({
			paddingTop: "100px",
			backgroundColor: "green"
		});
    } else {
        globalHTML5Api.panels.add(bgName, {
            body: true,
            first: true,
            visible: true,
            src: globalHTML5Api.src()
        });
    }
	document.body.onclick = function () {
		globalHTML5Api.click();
	}
})

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

Ключ Параметры Свойства Тип Описание
resize(options) — — — Инициализация globalHTML5Api.resize
options — Array Массив объектов со свойствами. Каждый объект представляет собой отдельное положение контейнера (resizeState)
name (required) String Имя объекта
width (required) String|Number Значение ширины контейнера с баннером
height (required) String|Number Значение высоты контейнера с баннером
fixed — Object Объект со свойствами. Описывает положение контейнера относительно окна браузера
vertical (required) center String Положение контейнера по вертикали
horizontal (required) center String Положение контейнера по горизонтали
scroll (required) — Boolean ‘true’, если изображение должно скроллиться вместе со страницей, ‘false’, если нет
css — Object Объект с CSS свойствами
zIndex Number Значение z-index для блока с баннером

Методы globalHTML5Api

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

Модуль bodycss

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

Свойства
Метод Параметры Свойства Тип Описание
set(options) — — — Инициализация модуля bodycss
options — Object Объект со свойствами
paddingTop String CSS свойство, задающее для элемента отступ сверху
backgroundColor String CSS свойство, задающее элементу цвет подложки

Модуль Panels

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

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

Метод Параметры Свойства Тип Описание
add(name, options) — — — Метод добавляет панель на страницу
name — String Имя добавляемой панели
options body Boolean default=“false”; Если значение “true”, то панель будет размещена в body элементе,

если значение “false”, то в плейсхолдере
first Boolean default=“false”; Если значение “true”, то панель станет в начало тега (body или плейсхолдер)
visible Boolean default=“false”; Панель будет отрендерена видимой при добавлении
src String Путь к файлу панели; можно использовать путь, возвращаемый методом globalHTML5Api.src(). Если ссылку не передавать, то метод вернет текущий файл

Изображения

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

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

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

  • View/ Просмотр
  • Confirmed view/ Подтвержденный просмотр
  • Click/ Клик

Известные ограничения

При размещении данного формата, необходимо предусмотреть отсутствие другого брендирования на странице, т.к. оно может быть перекрыто.

Chrome может ограничивать использование ресурсов рекламой (до взаимодействия пользователя с ней) путем удаления тяжелого креатива со страницы. Реклама считается тяжелой, если пользователь не взаимодействовал с ней (например, не кликнул) и если она соответствует любому из следующих критериев:

  • Использует основной поток в общей сложности более 60 секунд
  • Использует основной поток более 15 секунд в любом 30-секундном окне
  • Использует более 4 мегабайт пропускной способности сети

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

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