Banner HTML5

Описание

Примечание. Шаблон работает только на кодах вставок, использующих библиотеку loader.js — в инструкции такие коды имеют пометку NEW.

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

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

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

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

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

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

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

Ознакомьтесь с требованиями к 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.

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

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

    %reference%, %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_user1%

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

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

    <a href=«%banner.reference_user1%»target=%banner.target%>Сайт рекламодателя</a>
    Примечание. В HTML-коде баннеров, которые будут размещаться в мобильных приложениях, для учета кликов используйте макрос:

    %reference%@%banner.user1%

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

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

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

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

    Например:

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

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

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

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

Добавление баннера в ADFOX

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

Укажите параметры баннера:
  1. Архив с HTML5 креативом — загрузите zip-архив с проектом, поле HTML5-код креатива должно оставаться пустым (оно будет заполнено содержимым html-файла вашего проекта уже после добавления баннера.
  2. HTML5 код креатива — загрузите zip-архив с проектом, подготовленный в HTML-редакторах или вставьте HTML-код.
  3. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).
    Примечание. Если в баннере несколько ссылок, добавьте их во вкладке События у баннера, в поля URL перехода. Соответствие номеров ссылок и событий уточняйте у разработчиков HTML креатива.
  4. TARGET ссылки — определяет, в каком окне открывать ссылку:
    • _top — в текущем окне;
    • _blank — в новом окне или вкладке, в зависимости от настроек браузера.
  5. Ссылка на промерочный пиксель — по умолчанию используется пиксель ADFOX //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель ADFOX и укажите другую ссылку.
  6. Ширина креатива (px или %) — укажите ширину баннера.
  7. Высота креатива (px или %) — укажите высоту баннера.
  8. Изображение — загрузите изображение.

    Условия показа креативов:

    • добавлен HTML-код и изображение — будет показан HTML-код;
    • добавлено изображение — будет показано изображение;`
    • добавлен HTML-код — будет показан HTML-код.
  9. Имя атрибута class контейнера баннера — укажите имя (или несколько имён через пробел) для атрибута class контейнера с баннером.
  10. Использовать SafeFrame (yes|no) — safeFrame — это технология, которая оборачивает рекламу в специальный iframe, у которого есть строгий API. SafeFrame не даёт рекламе, которая в нём отрисовывается, собирать данные и взаимодействовать с остальной страницей вне safeFrame.
    • yes — включить использование safeFrame и запретить доступ к веб-странице;
    • no — не включать safeFrame.

    Код баннера имеет доступ к веб-странице.

  11. Стили для блока баннера — произвольные стили для контейнера баннера одной строкой. Кроме стиля: display. Например, «border: 1px solid red;». Невалидные значения будут отброшены браузером.