Admixer HelpCenter

Russian

English

Ukrainian

Назад к Обзору платформы

Глоссарий

Креативы

Работа с креативами

Дополнительные настройки

Viber Format Creatives specs

UI template: HTML5 Float

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

Разновидность рекламного баннера на всю ширину, который появляется внизу экрана и остаётся видимым, пока пользователь не закроет его нажатием кнопки Close. Высота рекламы этого формата составляет 30% от высоты экрана. После клика по баннеру пользователь будет перенаправлен на целевую страницу, а баннер будет закрыт.

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

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

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

Desktop		Tablet		Phone
Windows	Mac	iOS	Android	iOS	Android
+	+	вер. 7.0+	вер. 4.4+	вер. 7.0+	вер. 4.4+

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

Скачать

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

Распакуйте архив с шаблоном креатива.
Для предпросмотра креатива воспользуйтесь страницей предпросмотра или скопируйте все файлы в папку index – banners – banner – body и откройте файл index.html в браузере через localhost. Для этого необходимо установить веб-сервер (например, IIS для Windows, Apache для Mac OS).

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

Откройте файл body.html в текстовом редакторе и отредактируйте фрагмент кода внутри тегов <body> </body> (между комментариями USER’S CODE START и USER’S CODE END).

Отредактируйте файл js/body.js.
Сохраните и заархивируйте все файлы баннера в .zip (архивировать нужно сами файлы, а не папку, в которой они находятся).

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

ZIP-архив

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

HTML-файл

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

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

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

Развернуть код globalHTML5Api

globalHTML5Api.on('load', function(){
  /*
    ВАШ КОД ЗДЕСЬ
  */
});

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

Развернуть пример кода globalHTML5Api.init

globalHTML5Api.on('load', function(){
  globalHTML5Api.init({
    'resize': [
      {
        'name': 'state-1',
        'fixed': {
          'vertical': 'bottom',
          'horizontal': 'center'
        },
        'width': '100%',
        'height': '30%'
      }
    ]
  });
});

Пример обработки кнопки Close и клика (из файла js/body.js):

Развернуть пример кода кнопки Close и клика

globalHTML5Api.on('load', function(){
  function prevent(_event) {
    if (_event) {
      _event.returnValue = false;
      _event.cancelBubble = true;
      if (_event.preventDefault) { _event.preventDefault(); }
      if (_event.stopPropagation) { _event.stopPropagation(); }
    }
  }
  function $(id){
    return document.getElementById(id);
  }

  // Кнопка Close
  $('close').onclick = function(_event){
    prevent(_event);
    globalHTML5Api.close();
  };

  // Клик по баннеру: переход на целевую страницу и закрытие баннера
  $('main_content').onclick = function(_event){
    prevent(_event);
    globalHTML5Api.click('');
    globalHTML5Api.close(true);
  };
});

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

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

Методы globalHTML5Api

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

Видео

Чтобы добавить видео в креатив, используйте стандартный HTML5-тег <video>. Дополнительный плеер или модуль не нужен.

Поместите видеофайл в архив, например в папку images. Также можно указать ссылку на видео, размещённое на внешнем сервере (см. примечание ниже).
Откройте body.html и вставьте тег <video> внутрь <body>, между комментариями USER’S CODE START и USER’S CODE END:
```
<video src="images/output.mp4" autoplay loop muted controls style="position: absolute; left: 0; top: 0;"></video>
```
В атрибуте src укажите путь к видеофайлу относительно body.html. Если видео размещено на внешнем сервере, укажите здесь его полный URL.

Атрибуты, использованные в примере:

Атрибут	Что делает
`autoplay`	Запускает видео сразу после загрузки баннера.
`muted`	Запускает видео без звука. Браузеры блокируют автовоспроизведение со звуком, поэтому оставляйте `muted`, если используете `autoplay`.
`loop`	Воспроизводит видео сначала после его окончания.
`controls`	Показывает элементы управления плеером (воспроизведение/пауза, звук, шкала времени). Не добавляйте этот атрибут, если элементы управления не нужны.
`style`	Определяет расположение видео в баннере. Позицию и размер можно изменить в соответствии с вашим макетом.

Важно: только для видео, размещённых вне архива.
Если вы указываете ссылку на видео с внешнего сервера вместо того, чтобы добавить файл в архив, ссылка в src должна начинаться с https://. Иначе видео не загрузится на защищённых (HTTPS) сайтах. Для видео, хранящихся в архиве, это не требуется.

Изображения

Рекомендуемые типы файлов: .jpg, .png, .gif, .svg

Размер файла

До 50 МБ

Отслеживание событий

View (просмотр)
Confirmed view (подтверждённый просмотр)
Click (клик)

Chrome будет ограничивать ресурсы, которые может использовать медийная реклама до взаимодействия с ней пользователя, удаляя «тяжёлые» креативы со страницы. Реклама считается «тяжёлой», если пользователь не взаимодействовал с ней (например, не касался её и не кликал) и она соответствует любому из следующих критериев:
– использует основной поток в общей сложности более 60 секунд;
– использует основной поток более 15 секунд в любом 30-секундном интервале;
– использует более 4 мегабайт сетевого трафика.

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

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