Floor Ad

Floor Ad desktop

Описание формата

Горизонтальный рекламный формат, с заданной высотой и адаптивной шириной, занимающей 100% ширины экрана. Появляется при скролле во второй и ниже экраны и «прилипает» к нижней части экрана.

Частота показа не более 2 раз в сутки.

Скрытие креатива происходит при выполнении любого из следующих условий:

клик на крестик в правом верхнем углу креатива;
прошло 30 секунд;
клик по креативу.

Если креатив содержит анимацию или видео, их длительность не должна превышать 30 секунд.
Если фон баннера светлый/белый, необходима однопиксельная рамка цвета черного или серого цвета.

Основные требования к баннеру

Креатив формата HTML5 должен передаваться в виде zip-архива.

Все файлы CSS-стилей и JS-скриптов должны содержаться внутри zip-архива, также как и изображения в любом из перечисленных форматов: GIF, PNG, JPG, JPEG, SVG.

Весь контент креатива, включая изображения и текст, должен содержаться внутри zip-архива и не может быть загружен с внешнего ресурса, за исключением общеизвестных библиотек шрифтов и JS-библиотек таких как CreateJS, TweenJS, перечень которых можно найти по ссылкам:

https://code.createjs.com/
https://gsap.com/docs/v3/

Все кликабельные элементы должны при наведении менять курсор со стрелки на руку-курсор (cursor: pointer; ).

Фон баннера не должен быть прозрачным, а его содержимое должно занимать всю отведенную площадь. Обязательно наличие однопиксельной рамки у баннеров с белым фоном (рамка).

Рекламный баннер не должен быть приведен к виду, затрудняющему анализ (обфусцирован).

Предполагается, что баннер должен вести себя одинаково, единообразно, во всех окружениях, платформах, на все открытия всем пользователям, за все время кампании.

HTML5 должен корректно работать в браузерах: IE 10+, Firefox 28+, Safari 6+, Chrome 18+, Edge, Opera 15+; Для не поддерживаемых браузеров необходимо обеспечить показ упрощенной версии баннера или gif-заглушки. Все исключения необходимо описать в расширенных комментариях.

Анимация баннера не должна мешать пользователю и затруднять восприятие основного содержания страницы сайта (в дизайне запрещено использовать резко перемещающиеся и мелькающие графические элементы, мигающий фон и т. д.). Продолжительность анимации не должна превышать 30 секунд.

Маркировка - рекламное меню Adfox

При создании креатива необходимо учитывать, что в правом верхнем углу будет отрисован значок рекламного меню Adfox. Размер значка — 24x24px, отступ справа и сверху 4px.

Пример расположения рекламного меню на изображении справа --->

Размеры формата - ширина и высота

HTML5 Адаптивный по ширине креатив должен поддерживать отображение в диапазоне от 1920px до 100% доступной ширины контейнера. Ширина адаптивного креатива может быть ограничена значением 1980px.

Если креатив предоставляется в виде статичного изображения - для получения эффекта "адаптивного" баннера с шириной 100% необходимо, чтобы изображение переходило в единый цвет по левому и правому краю.

Фиксированный размер баннера 1920x120px

Размеры формата - максимальный вес

Суммарный вес изображений, используемых в креативе, необходимых для его корректной работы — до 100 кб, в разархивированном виде.
Исключение для креативов с видео - максимальный вес - до 1 мб.
В общем весе креатива не учитывается вес сторонних общеизвестных JS-библиотек, необходимых для анимации баннера, напр.:

https://code.createjs.com/createjs-2015.11.26.min.js и др.

Требования к изображениям

Рекомендуется уменьшать размер файла изображения, используя сервисы наподобие TinyPng, Squoosh, ShrinkMe, Imagecompressor. Данные сервисы работают как с PNG, так и c JPEG.
Можно использовать SVG-картинки. Они векторные, а значит, будут лучше выглядеть на всех устройствах — мобильных и десктопных. Также они имеют малый размер файла и могут быть с анимацией.
Допустимые форматы изображений: PNG, GIF, JPG, SVG.

Использование видео в HTML5-креативе

Максимальный вес видеофайла - 1 Мб
Формат видеофайла - MPEG-4. Обычно поддерживаются видеокодеки H.264 и MPEG-4, а также аудиокодек AAC.

Если отсутствует возможность оптимизировать вес видеофайла до 1 мб, то он может быть подгружен со стороннего сервера клиента (или третьего лица), при условии, что он будет с защищенным протоколом “https”.

В баннере должны присутствовать рабочие кнопки «Воспроизведение/Стоп» и «Со звуком/без звука».

Автовоспроизведение видео возможен только без звука.

Включение звука должно происходить только по клику (нажатию) пользователя на соответствующую кнопку.

При циклическом воспроизведении видео - второй и последующие циклы следует подгружать из кэша браузера.

При переходе на сайт клиента видео и аудио потоки в баннере должны быть остановлены.

Запрещается использование видео-файлов для реализации анимации элементов креатива.

Требования к разработке HTML5-креатива

Banner HTML5 — баннер, который отображает произвольное HTML-содержимое или изображение. HTML-код может представлять из себя обычную HTML-страницу со стилями и скриптами. Он помещается в iframe и имеет ограниченный доступ к содержимому площадки.

С помощью шаблона Banner HTML5 [context] баннер можно добавить двумя способами:

Подготовив только изображение. Наличие ссылки для перехода в параметрах баннера регулирует кликабельность изображения.
Подготовив HTML-креатив в редакторе по инструкции: Adobe Animate CC или Google Web Designer.

Если в баннере добавлен и HTML-код, и изображение, будет показан HTML-код.
Параметры, настраиваемые при добавлении в Adfox:

ширина, высота баннера;
собственные CSS-стили для контейнера с баннером.

Пример баннера

Пример готового проекта с одной кнопкой в Adobe Animate CC, исходный файл.

Пример готового проекта с несколькими кнопками в Adobe Animate CC, исходный файл.

Пример готового проекта в Google Web Designer, исходный файл.

Разработка HTML5-креатива

Ознакомьтесь с требованиями к HTML-коду

Максимально допустимый размер HTML-файла — 65 000 байт.
JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, уменьшите его, разместив JavaScript и CSS в отдельных файлах:

2.1. Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css.
2.2. Изображения в сумме по весу не должны превышать 100кб.
2.2.3. Загрузите файлы на вкладку Файлы рекламной кампании и подключите в HTML-код полученные ссылки на файлы:

Если в проекте прописаны абсолютные ссылки (src="js/script.js", src="css/style.css"), то при загрузке проекта Adfox распознает пути к файлам, автоматически загрузит их на вкладку Файлы и заменит все ссылки на эти файлы в загружаемом проекте.
Если в проекте прописаны относительные ссылки (например, src="../js/script.js"), воспользуйтесь одним из способов:

-замените ссылки на файлы .js и .css на абсолютные — сработает парсинг Adfox и все ссылки будут заменены автоматически;
-вручную загрузите файлы .js и .css на вкладку Файлы. Затем получите ссылки на эти файлы в Adfox и поменяйте в HTML-коде относительные ссылки на полученные.

Пример подключения JS и CSS-файлов:

3. В проекте может находиться только один файл с расширением .html.
4. Максимально допустимое количество файлов в проекте — 50.
5. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, SWF.
6. Максимальный размер каждого файла (действует также для файлов внутри архива): 300 КБ, 1 МБ для видеофайлов.
7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов.
8. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере.
9. Скрипты должны содержать дополнительный параметр:

10. Формат готового проекта — ZIP-архив.

Редактор Adobe Animate CC — Баннер с одной кнопкой

Выберите редактор, в котором будете разрабатывать HTML-креатив, и кликните на соответствующую ссылку.
Подготовьте архив с HTML-креативом по инструкции:

Редактор Adobe Animate CC — Баннер с одной кнопкой

Скачайте шаблон для баннера с одной кликабельной областью (кнопкой).

Adobe Animate CC версии 16.0 и выше
Adobe Animate CC версии 15.2 и выше
Adobe Animate CC версии 15.1 и ниже

2. Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий).

3. Откройте параметры публикации File → Publish Settings и подключите шаблон из пункта 1.

4. Опубликуйте проект, выбрав нужную директорию.

5. Вся область баннера кликабельна и представляет собой кнопку для перехода на сайт рекламодателя. Кликовая ссылка будет подтягиваться в креатив из настроек баннера в Adfox.
6. После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox.

Скачайте шаблон для баннера с одной кликабельной областью (кнопкой).

3. Откройте параметры публикации File → Publish Settings и подключите шаблон из пункта 1.

4. Опубликуйте проект, выбрав нужную директорию.

Редактор Adobe Animate CC — Баннер с несколькими кнопками

Скачайте шаблон для баннера с несколькими кнопками

Adobe Animate CC версии 16.0 и выше

Adobe Animate CC версии 15.2 и выше

Adobe Animate CC версии 15.1 и ниже

2. Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий).

3. При добавлении кнопок (buttons) или вложенных в сцену клипов (movie clips) важно задавать им instance name, чтобы потом можно было добавить клик к нужным кнопкам. Рекомендуем использовать названия «button1 - button9»

См. также:
Инструкция по добавлению кнопки и назначению instance name
Кнопка на главной сцене
3. 1. Создайте на сцене какой-нибудь объект, например, с помощью Rectangle Tool. Затем выделите его и в контекстном меню выберите Convert to Symbol....

3.2. В появившемся диалоговом окне выберите Type: Button, Name можно оставить без изменений, нажмите Ok.

3.3. Назначьте этой кнопке Instance Name, чтобы работал клик.

3.4. Пропишите в Actions для этой кнопки код:

window.buttons.push(

//Пропишите через запятую пути кнопок, добавив вначале this

this.button1

//Конец места для кнопок

);

Вложенная кнопка

3.5. Допустим, что кнопка находится внутри другого символа, например, внутри Movie Clip. В данном примере этому Movie Clip задано Instance Name«name».

3.6. По двойному клику перейдите внутрь name, там будет вложенная кнопка.

3.7. При указании в Actions пути до такой кнопки, нужно будет добавить Instance Name объекта после this, в который она вложена:

window.buttons.push(

//Пропишите через запятую пути кнопок, добавив вначале this

this.name.button1

//Конец места для кнопок

);

Инструкция по созданию прозрачных кнопок

3.7. Выделите нужный элемент и преобразуйте его в символ.

3.8. Укажите название и выберите Type: Button.

3.9. С помощью двойного клика по символу перейдите в него:

3.10. Сделайте insert keyframe в кадр hit.

3.11. Удалите содержимое кадров up, over,down:

3.12. Прозрачная кнопка готова:

4. Добавьте в проект слой Actions (в него будем добавлять код для кнопок).

5. Откройте окно для написания кода.

6. Далее модифицируйте код и пропишите его в слое Actions:

window.buttons.push(

//Пропишите через запятую пути кнопок, добавив вначале this

//Конец места для кнопок

)

setAdfox();

Если кнопка находится в главной сцене, пропишите ее instance name сразу после this, например:

this.button1

Если кнопка находится внутри вложенной сцены, после this пропишите сначала instance name сцены, а потом уже instance name кнопки:

this.scene_instance_name.button2

Пример итогового кода в слое Actions:

window.buttons.push(

//Пропишите через запятую пути кнопок, добавив вначале this

this.button1, this.scene_instance_name.button2

//Конец места для кнопок

); setAdfox();

7. Первая кнопка в строке кода будет вызывать первую ссылку из Adfox, вторая — вторую и так далее.

Примечание.

Вместе с HTML-креативом передайте менеджеру, который будет добавлять баннер в Adfox, информацию о соответствии кнопок и номеров ссылок.

8. Откройте параметры публикации и подключите шаблон из первого пункта. Опубликуйте проект, выбрав нужную директорию.

9. После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox.

Редактор Google Web Designer

Скачайте шаблон баннера для Google Web Designer

Код данного баннера можно брать за основу при создании креативов в редакторе. Разместите содержимое архива в папке с шаблонами программы, например:

/Users/[USER_NAME]/Documents/Google Web Designer/templates

Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:

%request.reference_mrc%, %user1%, %eventN%, где N — номер события от 1 до 30.
2. Обработка клика.
Все события назначаются конкретным элементам анимации через вкладку События.

Для вызова действий используется компонент Интерактивная область.
Добавьте его и выберите событие Интерактивная область → Касание/нажатие (или «Tap Area > Touch/Click» в английской версии).

На вкладке Собственный код укажите вызов функции клика.

если используется одна кнопка перехода:

callClick();

если кнопок перехода несколько:

callClick(n);
где n — номер события, которое должно быть вызвано.

если необходимо вызвать событие из анимации без перехода, используйте следующий код: callEvent(n);

где n — номер события, которое должно быть вызвано.

Особенность реализации тянущегося (резинового) баннера.

Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели Свойства для положения и размеров укажите проценты вместо пикселей.

Также используйте опции Выровнять по контейнеру и Резиновый макет на верхней панели инструментов.

Если перед использованием каких-либо инструментов выравнивания включить Резиновый макет, при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.

При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные — в пикселях.

Пример готового проекта в Google Web Designer, исходный файл.

3. Публикация проекта.
Проект должен быть опубликован со следующими настройками:

Примечание.

При добавлении баннера в Adfox менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера.

После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox.

Другие редакторы

Подсчет переходов в баннере.

Чтобы в Adfox у баннера считалась статистика по переходам, необходимо в HTML-коде в теге а для атрибута href прописать переменную:

%banner.reference_mrc_user1%

Также для ссылок используйте атрибут target с переменной _blank в значении атрибута. Если атрибут отсутствует, ссылка откроется внутри iframe, то есть рекламируемый сайт откроется на баннерном месте.

Пример HTML-кода для подсчета переходов по баннеру:

<a href="%banner.reference_mrc_user1%" target="%banner.target%">Сайт рекламодателя</a>

Подсчет переходов с нескольких ссылок в баннере.

Допустим, в баннере есть несколько ссылок для перехода, ведущих на разные страницы рекламируемого сайта, и по каждой из них нужно получить количество переходов.

<a href="http://site.ru" target="_blank">Первая ссылка</a>

<a href="http://site.ru/about/" target="_blank">Вторая ссылка</a>

Замените значения атрибута href на переменные %request.reference_mrc@%banner.eventN%, где вместо N должен быть номер события с 1 по 28.
Например:

Соответствие ссылок и переменных нужно сообщить менеджеру, добавляющему баннер в Adfox. Так как при добавлении баннера нужно будет на вкладке События указать для События 1 первую ссылку, а для события 2 — вторую ссылку.

Первая ссылка — http://site.ru — %banner.event1% (Событие 1).
Вторая ссылка — http://site.ru/about/ — %banner.event2% (Событие 2).

<a href="%request.reference_mrc%@%banner.event1%" target="%banner.target%">Первая ссылка</a>

<a href="%request.reference_mrc%@%banner.event2%" target="%banner.target%">Вторая ссылка</a>

independent media