Назад к Обзору платформы
Глоссарий
Креативы

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


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

Формат баннера, состоящий из верхней стираемой области и любого HTML5 баннера, скрытого под ней.

Данный формат может подпадать под ограничения, налагаемые Google совместно с Coalition for Better Ads на показ рекламных баннеров в браузере Chrome. Чтобы баннер не был признан таким, который нарушает требования стандарта, необходимо исключить следующее поведение баннера: · автопроигрываемое видео с включенным звуком.

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

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

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

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
— — ver. 8.0+ ver. 4.4+ ver. 8.0+ ver. 4.4+

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

Скачать

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

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

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

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

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

Размеры баннера

Баннер может быть любого размера в зависимости от формата и устройства, на котором он будет размещен.
Рекомендуемые размеры для размещения на смартфонах, px: 300×250, 300×300.

Видео

  • Рекомендуемое соотношение сторон видеофайла 16:9
  • Тип файлов: .mp4
  • Макс. продолжительность: 15 сек

Аудио

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

Вес креатива

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

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

ZIP архив

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

HTML файл

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

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

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

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

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

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

Показать пример кода globalHTML5Api.init
globalHTML5Api.on("load", function (Scratch, Player) {
    globalHTML5Api.init({
        "resize": [{
            "name": "state1",
            "width": "300px",
            "height": "300px",
            "onComplete": function () {
                        //function();
              },
            "onStart": function () {
                        //function();
              }
        }]
    });
})

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

Ключ Параметры Свойства Тип Описание
resize(options) — — — Инициализация globalHTML5Api.resize
options — Array Массив объектов со свойствами. Каждый объект представляет собой отдельное положение контейнера (resizeState)
name (required) String Имя объекта
width (required) String|Number Значение ширины контейнера с баннером
height (required) String|Number Значение высоты контейнера с баннером
onComplete Function Запуск callback функции по окончанию globalHTML5Api.init.resize.to(this.name)
onStart Function Запуск callback функции по началу globalHTML5Api.init.resize.to(this.name)

Пример использование модуля Scratch:

Показать пример кода
var container = document.getElementById("banner_container");
    var scratch = Scratch.create({
        "pattern": "image/pattern.png",
        "container": container,
        "brushImg": "image/brushstroke.png",
        "triggerPercent": 50,
        "texture":"image/texture.jpg",
        "brushSize":30,
        "onComplete":function(){
            //function();
        },
        "onScratch": function(){			
            //function();
        }
    })

Параметры Scratch

Метод Параметры Тип Описание
create — Object Инициализация Scratch
container (required) String HTML элемент, в который добавляется canvas.
pattern (required) String Ссылка на изображение, которое ставится поверх баннера. Данное изображение должно быть стерто, чтоб показался баннер.
texture (optional) String Ссылка на изображение, которое выполняет роль фона и заполняет пространство, не перекрытое паттерном (pattern).
brushImg (optional) String Изображение выступает источником контура вытирающей области. Цвет изображения не учитывается, важны только форма и прозрачность.
brushSize (optional) Number Размер вытирающей области.
triggerPercent (required) Number Процентная доля вытертой области от всей области, по достижению которой верхний слой будет скрыт и показан баннер.
onComplete (optional) Function Запуск callback функции по достижению значения, которое меньше указанного в ‘triggerPercent’, т.е. после того, как был стерт верхний слой.
onScratch (optional) Function Возвращает значение процентной доли вытертой области.

Методы globalHTML5Api

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

Видео

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

Изображения

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

Также поддерживаются CSS файлы.

Учет событий

Любые события, доступные в HTML баннере.

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