Banner HTML5

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

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

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

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

Параметры, настраиваемые при добавлении в Adfox:

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

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

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

   1. Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css.
   2. Файлы по весу не должны превышать 300 КБ.
   3. Загрузите файлы на вкладку Файлы рекламной кампании и полученные ссылки на файлы подключите в HTML-код.

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

   script type="text/javascript" src="ССЫЛКА_НА_ФАЙЛ">/script> link rel="stylesheet" type="text/css" href="ССЫЛКА_НА_ФАЙЛ" />

   Примечание. В HTML-коде не допускается использование относительных путей к файлам.
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. Формат готового проекта — ZIP-архив.

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

• используйте картинки высокого разрешения, это кардинально улучшит качество баннера на мобильном устройстве, хоть и снизит скорость загрузки баннера;
• рекомендуется уменьшать размер файла изображения, используя сервисы наподобие TinyPng. Данный сервис работает как с PNG, так и c JPEG;
• можно использовать SVG картинки ни векторные, а значит они будут лучше выглядеть на всех устройствах — мобильных и декстопных. Также они имеют малый размер файла и могут быть с анимацией;
• допустимые форматы изображений: PNG, GIF, JPG, SVG;
• максимальный вес одного файла: 300 КБ.

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

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

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

   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.

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

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

   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

   Кнопка на главной сцене

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

      

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

      

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

      

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

      window.buttons.push(
      //Пропишите через запятую пути кнопок, добавив вначале this
      this.button1
      //Конец места для кнопок
      );

      

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

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

      

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

      

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

      window.buttons.push(
      //Пропишите через запятую пути кнопок, добавив вначале this
      this.name.button1
      //Конец места для кнопок
      );

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

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

      

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

      

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

      

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

      

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

      

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

      

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

1. Скачайте шаблон баннера для 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.

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

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

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

   %banner.reference_mrc_user1%

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

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

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

   Примечание. Шаблоны HTML App Mobile

   В HTML-коде баннеров, которые будут размещаться в мобильных приложениях, для учета переходов используйте макрос:

   %banner.reference_mrc_user2%

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

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

   <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.

   Например:

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

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

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

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

Чтобы добавить баннер в Adfox, выберите нужный тип баннера и шаблон Banner HTML5 [context].