Шаблон в интерфейсе: 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, в котором указываются размеры баннера, параметр учета клика и другие скрипты.
Инструкция по работе с архивом
- Распакуйте архив с примером.
- Для просмотра креатива используйте страницу https://preview.admixer.net. Также можно скопировать все файлы в папку index – banners – banner – body и открыть файл index.html в среде просмотра на мобильном устройстве через localhost (например, браузер Chrome с режимом эмулятора мобильного устройства). Во этом случае требуется предварительная установка и настройка веб-сервера (к примеру, IIS для Windows, Apache для Mac OS).
Дополнительно можете проверить превью креатива предварительно скопировав на него ссылку и просмотрев с мобильного девайса.
- Откройте текстовым редактором файл body.html и отредактируйте часть кода, которая находится внутри тэгов <body> </body>.
В тегах <body>…</body> указываются размеры баннера, скрипты и т.д. Если разместить их в другом месте, креатив не будет отображаться.
- Отредактируйте JS код.
- Сохраните и заархивируйте все используемые материалы в ZIP формате (архив должен создаваться из файлов, а не из папки, в которой эти файлы находятся).
Файл body.html должен находиться в корневой директории 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 баннер.
Важно! Все ссылки на внешние файлы должны работать по защищенному HTTPS протоколу.
Изображения
Поддерживаемые типы файлов: .jpg, .png, .gif, .svg.
Учет событий
- View/ Просмотр
- Confirmed view/ Подтвержденный просмотр
- Click/ Клик
Chrome
может ограничивать использование ресурсов рекламой (
до взаимодействия пользователя с ней) путем удаления тяжелого креатива со страницы. Реклама считается тяжелой, если пользователь не взаимодействовал с ней (например, не кликнул) и если она соответствует любому из следующих критериев:
— Использует основной поток
в общей сложности более 60 секунд
— Использует основной поток
более 15 секунд в любом 30-секундном окне
— Использует
более 4 мегабайт пропускной способности сети
По вопросам технических требований к баннерам, пожалуйста, обращайтесь к менеджеру поддержки вашего аккаунта.
Обновлено 09 апреля, 2024