Назад до Огляду платформи
Глосарій
Креативи
Робота з креативами
Вартість креативів
Тех. вимоги до креативів
Додаткові налаштування
Viber Format Creatives specs

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


Попередній перегляд

Формат банера, що складається з верхньої області, що стирається, і будь-якого HTML5 банера, прихованого під нею.

Цей формат може підпадати під обмеження, що накладаються  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+

Завантажити архів з прикладом:

Завантажити

Інструкція по роботі з архівом

  1. Розпакуйте архів з прикладом.
  2. Для перегляду креативу використовуйте сторінку  https://preview.yehtu.com. Також можна скопіювати всі файли в папку 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 мегабайт пропускної здатності мережі
З питань технічних вимог до банерів, будь ласка, звертайтеся до менеджера підтримки вашого акаунта.
Оновлено 08 квітня, 2024