HTML App Mobile Banner/Interstitial

HTML App Mobile Banner и HTML App Mobile Interstitial — баннеры, которые отображают HTML-креатив в мобильных приложениях.

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

Убедитесь, что HTML-код соответствует следующим требованиям.

Требования к HTML-коду

  1. Максимальный размер HTML-файла — 65 000 байт.

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

    1. Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css.

    2. Файлы по весу не должны превышать 300 КБ.

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

      Не используйте относительные ссылки: src="../js/script.js".

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

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

  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-архив.

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

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

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

Редактор Adobe Animate CC

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

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

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

  4. Выберите нужную директорию и опубликуйте проект.

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

Редактор Google Web Designer

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

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

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

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

    %request.reference_mrc%, %user2%, %eventN%, где N — номер события от 4 до 30.

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

    Все события назначаются конкретным элементам анимации через вкладку События.

    Для вызова действий используется компонент Интерактивная область.

    Добавьте его и выберите событие Интерактивная область → Касание/нажатие или в английской версии Tap Area → Touch/Click.

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

    • callClick() — если используется одна кнопка перехода;

    • callClick(n) — если кнопок перехода несколько;

    • callEvent(n) — если необходимо вызвать событие из анимации без перехода.

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

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

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

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

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

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

    Пример готового проекта в Google Web Designer.

  3. Опубликуйте проект со следующими настройками:

    • включена опция Собрать файлы;
    • включена опция Создать ZIP-архив;
    • включена опция Распаковка групп;
    • включены опции CSS prefix для WebKit и Mozilla.

    Примечание

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

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

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

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

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

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

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

<a href="%banner.reference_mrc_user2%" 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 должен быть номер события с 4 по 28. Например:

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

Сообщите менеджеру, добавляющему баннер в Adfox, соответствие ссылок и переменных. При добавлении баннера на вкладке Events укажите:

  • первую ссылку — http://site.ru — %banner.event4% для События 4;

  • вторую ссылку — http://site.ru/about/ — %banner.event5% для События 5.

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

Чтобы добавить баннер в Adfox:

  1. В настройках кампании перейдите на вкладку Баннеры и нажмите Добавить.

  2. Выберите тип баннера App Mobile Banner или App Mobile Interstitial и шаблон HTML App Mobile Banner или HTML App Mobile Interstitial соответственно.

  3. Укажите параметры баннера:

    • Приоритет — числовое значение, определяющее порядок показа баннера в рамках кампании. Чем больше число, тем выше приоритет у баннера перед другими баннерами этой же кампании. Подробнее о приоритетах читайте в Справке Adfox.

    • Архив с HTML5 креативом — загрузите ZIP-архив с проектом, при этом поле HTML5 должно оставаться пустым (оно будет заполнено содержимым HTML-файла вашего проекта уже после добавления баннера).

    • Ссылка на промерочный пиксель — по умолчанию используется пиксель Adfox //banners.adfox.ru/transparent.gif. При необходимости вести учет показов в сторонней системе, удалите пиксель Adfox и укажите другую ссылку.

    • HTML5 — если вы загрузили архив с проектом, поле будет заполнено автоматически.

    • URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).

    • Дата, время начала — обязательные параметры. По умолчанию стоит текущая дата. Если ее не изменить, баннеры начнут показываться сразу после их добавления (если статус баннера активен).

    • Метка рекламы — выберите Реклама или Соцреклама, чтобы добавить метку на баннер. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение Отключена.

      Примечание

      Добавление метки Соцреклама не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию Договор социальной рекламы в соответствующем договоре с конечным рекламодателем.

    • Домен — укажите домен рекламодателя, он будет добавлен в метку: Реклама / Example.com или Соцреклама / Example.com (только если в выпадающем списке выбрано значение Реклама или Соцреклама).

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

      В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации».

      Примечание

      Если баннер некликабельный (поле URL перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера.

    • Маркировка рекламы — раздел доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные о креативах в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически. Подробнее о маркировке рекламы читайте в Справке Adfox.

    • Название — укажите произвольное название баннера. Если поле оставить пустым, баннеру будет присвоен порядковый номер.

    • Статус — выберите статус для баннера:

      • активен — баннер готов для показа;
      • приостановлен — показ баннера приостановлен;
      • Завершенная — баннер показываться не будет.

    • Отключен на новых площадках — по умолчанию опция включена. После создания баннера он не будет размещаться автоматически:

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

    • Профиль таргетирования — выберите предварительно созданный профиль таргетирования. Подробнее о профилях читайте в Справке Adfox.

    • События включены — опция используется для получения прямых ссылок на события для промера в сторонней системе. Чтобы активировать опцию, на вкладке Размещения у баннера нажмите . В открывшемся окне вы увидите ссылки на события от 1 до 30, которые нужно скопировать и отправить для установки в стороннюю систему.

    • Показы всего, сутки, час:

      • Показы всего, сутки, час — максимальное количество показов баннера. Если кампания имеет равномерное распределение — необходимо установить дату завершения показа баннера. Как только количество показов достигнет максимального, статус баннера изменится на Завершенная и баннер перестанет показываться.
      • Показы сутки — максимальное количество показов в сутки. Как только количество показов с начала суток достигнет максимального, показы приостановятся до начала следующих суток.
      • Показы час — максимальное количество показов в час. Как только количество показов с начала часа достигнет максимального, показы приостановятся до начала следующего часа.

    • Переходы всего, сутки, час:

      • Переходы всего — максимальное количество переходов по баннеру. Если кампания имеет равномерное распределение — необходимо установить дату завершения показа баннера. Как только количество переходов достигнет максимального, статус баннера изменится на Завершенная и баннер перестанет показываться.
      • Переходы сутки — максимальное количество переходов по баннеру в сутки. Как только количество переходов с начала суток достигнет максимального, показы приостановятся до начала следующих суток.
      • Переходы час — максимальное количество переходов по баннеру в час. Как только количество переходов с начала часа достигнет максимального, показы приостановятся до начала следующего часа.

    • Дата, время окончания — чтобы установить дату и время окончания, сначала включите опцию.

  4. Чтобы сохранить баннер, нажмите кнопку Добавить.

Обратиться в службу поддержки

Предыдущая
Требования к баннерам
Следующая
Image App Mobile Banner/Interstitial