Шаблон в інтерфейсі: 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 мегабайт пропускної здатності мережі
З питань технічних вимог до банерів, будь ласка, звертайтеся до менеджера підтримки вашого акаунта.