BannerLine HTML5
Перевірка видимості
BannerLine HTML5 - банер, який є перетяжкою у виглядіHTML5 креативу абозображень, що розхлопується при певних подіях. Відображається поверх контенту сайту, закріплюється до однієї зі сторін браузера і при скролінгу не змінює свого положення.
Вимоги до зображень
Підготуйте 1 або 2 зображення: перше - самостійний банер-перетяжка або ж банер у хлопнутому вигляді (має меншу висоту), друге - банер у розхристаному вигляді (має велику висоту).
Кнопка "Закрити" За необхідності замінити стандартну кнопку "Закрити" на власну, підготуйте зображення. Він буде вставлений у банер без зміни розмірів.
Використовуйте зображення високої роздільної здатності, це кардинально покращить якість банера на мобільному пристрої, хоч і знизить швидкість завантаження банера. Припустимі формати зображень: png, gif, jpg. Максимальна вага одного файлу: 300Кб.
Особливості формату для банера із зображенням: - Особливість тач пристроїв. На тач пристроях перший дотик на банер розкриває його, другий дотик здійснює перехід за посиланням. - Фон банера. Можна вказати колір фону для контейнера з зображенням, якщо він більший за розмір зображення. Така ситуація може бути, коли у банера вказано одне із значень розмірів - 100% і друге фіксовано в пікселях, або коли фіксований розмір банера менший за розмір екрану. У разі порушуються пропорції контейнера, але пропорції картинки залишаться незмінними. Вільний простір буде залитий одним кольором - вказаним у налаштуваннях банера. Для різних розхлопнутого та хлопнутого стану банера можнавказувати різні кольори.
Вимоги до HTML5 креативу (для розробників коду)
Функції та змінні для схлопу та розхлопу
Функціонал розхлопу/схлопу передбачає збільшення чи зменшення розмірів контейнера для HTML коду. Отже, зміна вмісту, що відображається в контейнері для розхлопу або схлопу, здійснюється розробником HTML коду банера.
Функції доступні у глобальній області видимості. Рекомендується використовувати приставку Windows. перед викликом кожної їх.
| expandBanner | При виклику цієї функції станеться розхлоп кадру |
| collapseBanner | При виклику цієї функції відбудеться схлоп кадру |
| onBannerCollapse | Якщо існує в глобальній області видимості, то викликається кодом adfox, щоб сповістити код банера про схлоп, що стався |
| onBannerExpand | Якщо існує в глобальній області видимості, то викликається кодом adfox, щоб сповістити код банера про розхлоп, що стався |
Якщо коду банера необхідно знати про зміну стану розхлопу, які відбулися поза кадром, потрібно реалізувати функції onBannerCollapse і onBannerExpand .
Щоб у будь-який момент подивитися в якому стані зараз знаходиться банер - хлопнутому або розхлопнутому, можна звернутися до глобальної змінної isBannerExpanded , яка поверне стан розхлопу: true - банер у стані розхлопу; false чи не оголошено — банер у стані схлопу.
Поради щодо підготовки креативів
Підрахунок подій
У банері ведеться автоматичний підрахунок подій:
Кількість закриття банера.
Кількість розхлоп банер.
Додавання банерав ADFOX
Щоб додати банер до ADFOX, виберіть потрібний тип банера та шаблон"BannerLine HTML5 [loader]".
Вкажіть параметри банера:
Архів з HTML5 креативом — завантажте .zip архів з проектом, поле"HTML5 код креативу" повинно залишатися порожнім (воно буде заповнено вмістом .html файлу вашого проекту вже після додавання банера).
HTML5 код креативу - вміст .html коду з архіву з проектом (завантажується автоматично з архіву).
"TARGET" посилання - визначає у якому вікні відкривати посилання: "_top" - у поточному вікні; "_blank" - у новому вікні або вкладці, залежно від налаштувань браузера.
Посилання на промірювальний піксель — за замовчуванням використовується піксель ADFOX //banners.adfox.ru/transparent.gif , за необхідності вести облік показів у сторонній системі, видаліть піксель ADFOX і вкажіть інше посилання.
Зображення №1 (до розхлопу) - зображення для банера з картинкою до розхлопу (у зхлопнутому стані). Можлива вказівка лише Зображення №1 (без завантаження Зображення №2), у такому разі BannerLine буде перетяжкою без розхлопувань.
Зображення №2 (після розхлопу) — зображення для банера з картинкою після розхлопу (у розхлопнутому стані).
Показувати кнопку "Закрити" (yes або no) — чи буде хрестик, що закриває (по суті, що видаляє), відображатися завжди.
Посилання до зображення "Закрити" — завантажте зображення для кнопки "Закрити".
Колір фону після розхлопу (#fff) - колір фону контейнера з картинкою в розхлопнутому стані. Наприклад, "#fff", "#f0f0f0" або "rgba(0,0,0,0.4)". За промовчанням прозорий.
Колір фону до розхлопу (#fff) — колір фону контейнера з картинкою в стані. Наприклад, "#fff", "#f0f0f0" або"rgba(0,0,0,0.4)". За промовчанням прозорий.
bodyPadding — вкажіть значення відступу для тега body у пікселях. Банер, розташований зверху або знизу (параметр Розташування у значенні "top" або "bottom"), автоматично додає відступи до елемента body (значення властивості padding встановлюється рівним висоті банера), щоб банер не перекривав контент сторінки. За замовчуванням не вказано, буде використовуватися висота банера. Для відключення освіти відступів вкажіть нульове значення ("0" або "0px").
Час життя розхлопу (секунд) — час у секундах, після якого банер буде автоматично зхлопнутий після автоматичного або викликаного користувачем розхлопу.
z-index - z-index блоку з банером. За замовчуванням 999996.
Ширина до розхлопу (px або 100%) — вкажіть ширину банера до розхлопу (у зхлопнутому стані).
Висота до розхлопу (px або 100%) — вкажіть висоту банера до розхлопу (у зхлопнутому стані).
Ширина після розхлопу (в px або 100%) - вкажіть ширину банера після розхлопу (у розхлопнутому стані).
Висота після розхлопу (px або 100%) — вкажіть висоту банера після розхлопу (у розхлопнутому стані).
Розташування — до якого боку вікна браузера необхідно прикріпити банер. Від цього параметра залежить сторона, в яку буде проводитися розхлоп банера. Розхлоп завжди спрямований до центру вікна браузера. Доступні варіанти розташування:
| варіант | Опис |
| top | Банер прикріплений до верху вікна браузера, і розхлоп відбувається вниз. |
| left | Банер прикріплений до лівої сторони вікна браузера і розхлоп проводиться направо. |
| bottom | Банер прикріплений до нижньої частини вікна браузера і розхлоп проводиться вгору. |
| right | Банер прикріплений до правої сторони вікна браузера і розхлоп проводиться вліво. |
Ім'я функції виклику розхлопу контейнера — ім'я функції, яка буде викликана кодом банера, щоб повідомити контейнеру що треба змінити розмір до розхлопнутого.
Ім'я функції для виклику схлопу контейнера - ім'я функції, яка буде викликана кодом банера, щоб повідомити контейнеру що треба змінити розмір до схлопнутого.
Ім'я функції для виклику розхлопу креативу — ім'я функції, яка буде викликана, щоб повідомити код банера, що банеру треба розкритися.
Ім'я функції для виклику схлопа креативу — ім'я функції, яка буде викликана, щоб повідомити код банера, що банеру треба зхлопнутися.
Стилі для блоку банера — довільні стилі для контейнера банера одним рядком, крім стилів: position, z-index, top, left, right, bottom, width, height, display. Наприклад, "border: 1px solid red;". Невалідні значення ігноруватимуться браузером.
Ім'я атрибута class контейнера баннера — вкажіть ім'я (або кілька імен через пропуск) для атрибута class контейнера з банером.