Технические требования

  1. Формат
    • AdSmart – 100% (500 минимум) х 240 пикселей
    • AdSmart Premium – 100% (500 минимум) х 480 пикселей
    • AdSmart Mobile – 100% (min.300) x 240px
  2. Формат файла готового проекта — zip архив
  3. Максимальный размер архива и каждого файла внутри него:
    • 300Кб;
    • 1Мб для видео файлов
  4. Не тянущиеся баннеры к размещению не принимаются
  5. Наличие рамки в баннере обязательно

Сроки

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

Рекомендации

AdSmart – очень эффектный и крупный формат. Но, к сожалению, его потенциал часто не используется на 100%. Следуя простым правилам, вы сможете подготовить эффективные баннеры, производящие максимальное впечатление на потенциальных клиентов.

Подготовка баннера

1. Требования к HTML коду (для разработчиков кода)

Подготовьте ваш проект, соблюдая следующие требования:

  1. Максимально допустимое количество символов в HTML коде — 65 000;
  2. JavaScript и CSS предпочтительнее размещать внутри HTML кода баннера;
    Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
    сохраните js и css код в отдельные файлы с расширением .js или .css;
  3. В проекте может находиться только один файл с расширением .html;
  4. Максимально допустимое количество файлов в проекте — 50;
  5. Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm;
  6. Максимальный размер архива и каждого файла внутри него:
    • 300Кб;
    • 1Мб для видео файлов
  7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
  8. В названиях переменных и объектов нельзя использовать русские буквы.
    Исключение составляет только текст на баннере.
  9. Формат готового проекта — zip архив.

2. Adobe Animate CC — Баннер с одной кнопкой

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

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

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

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

5. Публикация проекта

Вся область баннера кликабельна и представляет собой кнопку для перехода на сайт рекламодателя. Кликовая ссылка будет подтягиваться в креатив из настроек баннера в ADFOX.

3. Adobe Animate CC — Баннер с несколькими кнопками

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

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

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

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. Откройте параметры публикации и подключите шаблон из первого пункта и опубликуйте проект, выбрав нужную директорию.

8. Публикация проекта

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

4. Google Web Designer

1. Подготовка редактора

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

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

Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:
%reference%, %user1%, %eventN%, где N — номер события от 1 до 30.

 

2. Обработка клика.

Все события назначаются конкретным элементам анимации через вкладку “События”.
Для вызова действий используется компонент “Интерактивная область”.
Добавьте его и выберите событие Интерактивная область → Касание/нажатие (или “Tap Area > Touch/Click” в английской версии).
Во вкладке “Собственный код” укажите вызов функции клика.

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

callClick();

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

callClick(n);

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

2.3 Если необходимо вызвать событие из анимации без перехода используйте следующий код:

callEvent(n);

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

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

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

Также используйте опции “Выровнять по контейнеру” и “Резиновый макет” на верхней панели инструментов.
Если перед использованием каких-либо инструментов выравнивания включить “Резиновый макет”, то при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.
При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные – в пикселях.

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

4. Публикация проекта

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

После публикации проекта, он должен быть архивирован в формат .zip, после чего добавлен в ADFOX через шаблон “HTML5Creative”.

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

500px
600px
700px
800px
900px
100%