Шаблон в інтерфейсі: HTML5 Mobile Float
Попередній перегляд
Повноекранний мобільний формат, що залучає користувача у взаємодію з банером. Користувачеві пропонують струснути смартфон для здійснення певної дії.
Цей формат може підпадати під обмеження, що накладаються
Google спільно з
Coalition for Better Ads на показ рекламних банерів у браузері Chrome. Щоб банер не був визнаний таким, що порушує вимоги
стандарта, необхідно виключити таку поведінку банера:
· автопрогравання відео з увімкненим звуком.
Підтримувані платформи
Desktop |
Tablet |
Phone |
Windows |
Mac |
iOS |
Android |
iOS |
Android |
— |
— |
ver. 8.0+ |
ver. 5+ |
ver. 8.0+ |
ver. 5+ |
Відомі обмеження
На мобільних пристроях із платформою iOS 12 і вище налаштування Рух і орієнтація може бути вимкнена за замовчуванням. У такому разі модуль shake запустить показ усіх панелей креативу автоматично з інтервалом 5 секунд.
Завантажити архів з прикладом:
Завантажити
Дана структура файлів в архіві відповідає прикладу і може бути змінена вами. Обов'язковим файлом в архіві є 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-архіва.
Загальні вимоги до формату
Основна панель
Стандартні розміри, WxH, 100%x100%
Відео
- Розмір контейнера для відеоплеєра може бути заданий будь-який у межах розгорнутої панелі
- Тип файлів: .mp4
- Макс. тривалість: 30 сек
Вага креативу
- до 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, Shake.
Спрощений приклад використання globalHTML5Api для формата Shake:
- Показати приклад коду globalHTML5Api
globalHTML5Api.on('load', function(Shake){
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) |
top, bottom |
Положення контейнера по вертикалі |
horizontal (required) |
center |
Положення контейнера по горизонталі |
width (required) |
String|Number |
Значення ширини контейнера з банером |
height (required) |
String|Number |
Значення висоти контейнера з банером |
Приклад використання модуля Shake:
- Показати приклад коду
var container = $('container');
Shake.subscribe(function(){
container.style.backgroundColor = "rgb(" + rnd(0,255) + "," + rnd(0,255) + "," + rnd(0,255) + ")";
})
*У прикладі вище функція зворотного виклику змінює колір банера за подією shake.
Параметри Shake
Метод |
Аргументи |
Опис |
subscribe |
Function |
Метод відповідає за відстеження події Shake і запуск функції по здійсненню події, тобто після того як користувач потряс пристрій. |
Методи globalHTML5Api
Метод |
Аргументи |
Тип |
Опис |
click(URL) |
— |
— |
Виклик клік-переходу на цільову сторінку. Посилання переходу може бути передано безпосередньо в коді креативу. Також посилання переходу може бути задано з шаблону заливки креативу в інтерфейсі користувача. Посилання, задане в коді, має більший пріоритет, ніж посилання, задане через шаблон, що може призвести до конфлікту. Тому для передачі посилання обов'язково використовувати тільки один із доступних способів. |
URL (optional) |
String |
Посилання переходу |
src(URL) |
— |
— |
Метод повертає абсолютний шлях до файлу |
URL (optional) |
String |
Відносний шлях до файлу |
globalHTML5Api.on(‘event’, callback);) |
— |
— |
Виклик функції за подією |
event |
String |
Подія ‘positionChange()’ |
callback(positionData) |
Function |
callback-функція |
Відео
Якщо креатив містить відео, скористайтеся інструкцією Додавання відео в HTML5 банер.
Важливо! Усі посилання на зовнішні файли повинні працювати за захищеним HTTPS протоколом.
Зображення
Підтримувані типи файлів: .jpg, .png, .gif, .svg.
Облік подій
- View/ Перегляд
- Confirmed view/Підтверджений перегляд
- Click/Клік
Chrome
може обмежувати використання ресурсів рекламою (
до взаємодії користувача з нею) шляхом видалення важкого креативу зі сторінки. Реклама вважається важкою, якщо користувач не взаємодіяв з нею (наприклад, не клікнув) і якщо вона відповідає будь-якому з таких критеріїв:
— Використовує основний потік
загалом понад 60 секунд
— Використовує основний потік
понад 15 секунд у будь-якому 30-секундному вікні
— Використовує
більше 4 мегабайт пропускної здатності мережі
З питань технічних вимог до банерів, будь ласка, звертайтеся до менеджера підтримки вашого акаунта.