Banner HTML5
Перевірка видимості
Banner HTML5 - банер, який відображає довільний HTML-вміст або зображення. HTML-код може являти собою звичайну HTML сторінку зі стилями та скриптами. Він міститься у iframe та має обмежений доступ до вмісту майданчика.
Параметри, що налаштовуються при додаванні до ADFOX: - Ширина, висота банера. - Власні CSS-стилі для контейнера з банером.
Розробка HTML-креативу
1. Ознайомтеся з вимогами до HTML-коду
Максимально допустимий розмір HTML-файлу – 65 000 байт.
Приклад підключення js та css файлів:
У проекті може бути лише один файл з розширенням .html.
Максимально допустима кількість файлів у проекті – 50;
Дозволені типи файлів у проекті: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
У назвах змінних та об'єктів не можна використовувати українські літери. Виняток становить лише текст на банері.
Формат готового проекту -zip архів.
Вимоги до зображень
Використовуйте зображення високої роздільної здатності, це кардинально покращить якість банера на мобільному пристрої, хоч і знизить швидкість завантаження банера.
Рекомендується зменшувати розмір файлу зображення, використовуючи сервіси на зразок TinyPng. Цей сервіс працює як з PNG, так і з JPEG.
Можна використовувати зображення SVG. Вони векторні, а значить, вони будуть краще виглядати на всіх пристроях - мобільних і декстопних. Також вони мають мінімальний розмір файлу і можуть бути з анімацією.
Допустимі формати зображень: png, gif, jpg, svg. Максимальна вагаодного файлу: 300Кб.
Редактор Adobe Animate CC - Банер з однією кнопкою
1. Завантажте шаблон для банера з однією клікабельною областю (кнопкою).
2. Створіть в Adobe Animate проект HTML5 Canvas (або відкрийте вже існуючий)
4. Опублікуйте проект, вибравши потрібну директорію
Редактор Adobe Animate CC - Банер з кількома кнопками
1. Завантажте шаблон для банера з кількома кнопками
2. Створіть в Adobe Animate проект HTML5 Canvas (або відкрийте вже існуючий)
3. При додаванні кнопок (buttons) або вкладених у сцену кліпів (movie clips) важливо задавати їмinstance name, щоб потім можна було додати клік до потрібних кнопок. Рекомендуємо використовувати назви button1 – button9.
Див. також:
• Інструкція з додавання кнопки та призначення instance name
Кнопка на головній сцені
1. Створіть на сцені якийсь об'єкт, наприклад, за допомогою Rectangle Tool. Потім виділіть його і в контекстному меню виберіть "Convert to Symbol."
2. У діалоговому вікні, що з'явилося, виберіть Type: Button, Name можна залишити без змін, натисніть Ok.
3. Призначте кнопці Instance Name, щоб працював клік.
4. Пропишіть у Actions для цієї кнопки код:
Вкладена кнопка
1. Припустимо, що кнопка знаходиться всередині іншого символу, наприклад усередині Movie Clip. У цьому прикладі Movie Clip встановлено Instance Name "name"
2. По подвійному кліку перейдіть всередину name, там буде вкладена кнопка.
3. При вказівці в Actions шляху дотакої кнопки, потрібно буде додати Instance Name об'єкта після цього, в який вона вкладена:
• Інструкція зі створення прозорих кнопок
1. Виділіть потрібний елемент і перетворіть його на символ
2. Вкажіть назву та виберіть Type: Button
3. За допомогою подвійного кліка за символом перейдіть до нього:
4. Зробіть insert keyframe на кадр hit
5. Видаліть вміст кадрів up, over, down
6. Прозора кнопка готова:
4. Додайте в проект шар Actions (до нього будемо додавати код для кнопок)
5. Відкрийте вікно для написання коду
6. Далі модифікуйте код і пропишіть його в шарі Actions
Якщо кнопка знаходиться в головній сцені, то пропишіть її instance name відразу після цього, наприклад
Якщо кнопка знаходиться всередині вкладеної сцени, то після цього пропишіть спочатку instance name сцени, а потім вже instance name кнопки:
Приклад підсумкового коду у шарі Actions:
7. Перша кнопка в рядку коду буде викликати перше посилання з ADFOX, друга - другу і так далі.
Редактор Google Web Designer
Шаблон містить скрипт adfox_HTML5.js та набір параметрів для коректної роботи переходів та підрахунку подій: %reference%, %user1%, %eventN%, де N — номер події від 1 до 30.
2. Обробка кліка.
Усі події призначаються конкретним елементам анімації через вкладку "Події".
Для виклику дій використовується компонент "Інтерактивна область". Додайте його та виберіть подіюІнтерактивна область → Торкання/натискання (або "Tap Area >Touch/Click" в англійській версії).
У вкладці "Власний код" вкажіть виклик кліка.
2.1 Якщо використовується одна кнопка переходу:
2.2 Якщо кілька кнопок переходу:
деn — номер події, яка має бути викликана.
2.3 Якщо потрібно викликати подію з анімації без переходу використовуйте наступний код:
деn — номер події, яка має бути викликана.
Особливість реалізації тягнучого (гумового) банера.
Щоб банер тягнувся по ширині контейнера, в якому він буде на сайті, на панелі Властивості для положення та розмірів вкажіть відсотки замість пікселів.
Також використовуйте опції "Вирівняти по контейнеру" та "Гумовий макет" на верхній панелі інструментів. Якщо перед використанням будь-яких інструментів вирівнювання увімкнути "Гумовий макет", то при зміні розміру батьківського контейнера всі елементи будуть вирівнюватися відносно один одного та щодо розмірів контейнера. При цьому можна одночасно використовувати як відносні розміри елементів у відсотках, так і абсолютні – у пікселях.
Приклад готового проекту Google Web Designer, вихідний файл.
4. Публікація проекту.
1. Підрахунок кліків у банері
Щоб у ADFOX у банера вважалася статистика за кліками, необхідно в HTML-коді в тезі а для атрибуту href прописати змінну:
Приклад HTML-коду для підрахунку кліків по банеру:
2. Підрахунок кліків з кількох посилань у банері
Замініть значення атрибуту href на змінні %request.reference%@%banner.eventN% , де замість N має бути номер події з 1 до 28. Наприклад:
Відповідність посилань тазмінних потрібно повідомити менеджеру, що додає банер ADFOX. Так як при додаванні банера потрібно буде у вкладці "Події" вказати для Події 1 перше посилання, а для події 2 друге посилання.
Додавання банера до ADFOX
Щоб додати банер до ADFOX, виберіть потрібний тип банера та шаблон"Banner HTML5 [loader]".
Вкажіть параметри банера:
Архів з HTML5 креативом — завантажте .zip архів з проектом, поле"HTML5 код креативу" повинно залишатися порожнім (воно буде заповнено вмістом .html файлу вашого проекту вже після додавання банера).
"TARGET" посилання - визначає у якому вікні відкривати посилання: _top - у поточному вікні; _blank – у новому вікні або вкладці, залежно від налаштувань браузера.
Посилання на промірювальний піксель — за замовчуванням використовується піксель ADFOX //banners.adfox.ru/transparent.gif , за необхідності вести облік показів у сторонній системі, видаліть піксель ADFOX і вкажіть інше посилання.
Ширина креативу (px або %) - вкажіть ширину банера.
Висота креативу (px або %) - вкажіть висоту банера.
Зображення — Завантажте зображення. Умови показу креативів: - доданий HTML-код і зображення - буде показаний HTML-код. - додане зображення — відображатиметься зображення. - доданий HTML-код - буде показаний HTML-код.
Ім'я атрибута class контейнера баннера — вкажіть ім'я (або кілька імен через пропуск) для атрибута class контейнера з банером.
Стилі для блоку банера — довільні стилі для контейнера банера одним рядком. Окрім стилю: display. Наприклад, "border: 1px solid red;". Невалідні значення будуть відкинуті браузером.