HTML-баннер (HTML5)



1. Карточка баннера

Описание:
баннер со встроенной графикой, HTML-формами, несколькими ссылками.
Тип кода:
фреймовый, Poster, Ajax, Extension.
Подробнее:
HTML-баннеры реализуют графические объекты и интерактивные механизмы взаимодействия с пользователями. HTML-баннер может состоять из нескольких объектов. Это могут быть изображения (простые картинки), Flash-анимации, фрагменты HTML-кода. Например, в одном баннере может быть несколько ссылок, в зависимости от того, куда кликнет посетитель, он попадает на разные страницы сайта.

Примечание: В случае необходимости показывать баннер при доскролле до баннерного места, можно воспользоваться кодом Poster или специальным кодом Ajax. В остальных случаях используйте стандартные коды Ajax или Extension.

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

Подготовьте HTML-код баннера. Это может быть любой HTML-код, в том числе HTML 5, представляющий собой HTML верстку баннера с CSS стилями и JavaScript-кодом. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера, а не подключать отдельными файлами. Однако в случае необходимости использование отдельных файлов также допускается. Можно использовать как абсолютные ссылки на файлы, подгружаемые в баннер (различные изображения и Flash-файлы), так и относительные.

Важно: При использовании относительных путей к файлам, необходимо, чтобы все файлы баннера в обязательном порядке находились в той же папке, что и сам подготавливаемый HTML-файл. Т.е. не должно фигурировать дополнительных папок для изображений, js-файлов или медиа-файлов. Названия всех файлов баннера должны соответствовать требованиям системы.

Примечание: Для баннеров на коде IFrame (размерных) HTML-файл баннера обязательно должен называться index.html.

Примечание: Если баннер использует дополнительные скрипты, их название должно быть отлично от script.js. Название script.js зарезервировано за управляющим скриптом баннера.

3. Технические требования для учета клика

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

По умолчанию клики в HTML-баннере не учитываются. Для учета кликов в HTML-файл баннера необходимо внести изменения согласно одной из следующих инструкций:

  • Прошивка на клик для HTML-креативов
    1. Откройте текстовым редактором HTML-файл баннера. Подключите файл html.js:
      <script src="/html.js"></script>

      Если баннер расположен на стороннем сервере, укажите полный путь до файла html.js:

      <script src="//content.adriver.ru/html.js"></script>

      Примечание: Скачивать плагин html.js или создавать его самостоятельно не требуется. Данный плагин размещается на серверах AdRiver и достаточно просто подключить его в подготавливаемом файле.

    2. Для учета кликов и перехода по ссылке, указанной в системе при загрузке баннера (поле Линк баннера), используйте функцию ar_callLink. Вызов функции может быть осуществлен при любом событии для любого тэга в коде баннера, например:
      <div class="button" onclick="return ar_callLink( {target: '_blank'} );">Перейти на сайт</div>

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

      <div class="button" onclick="return ar_callLink({target: '_blank', other: '//ya.ru'});">Перейти на сайт</div>

      Возможные параметры:

      target
      в каком окне открывать ссылку. Возможные значения: _blank (новое окно), _top (в этом же окне), _self (в iframe с баннером)
      other
      альтернативная ссылка для перехода, если необходимо перенаправить пользователя на адрес, отличный от указанного в поле Линк баннера. При этом клики будут учитываться в том же баннере
      event
      объект события (click, mousedown и т.п.). При передаче данного параметра, в кликовую ссылку добавятся координаты клика внутри IFrame с баннером

      Все параметры опциональны.

  • Инструкция для подсчета кликов по ссылкам в HTML-баннере с помощью кликовой ссылки AdRiver

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

Также можно воспользоваться инструкцией кликового баннера. Однако в этом случае клики считаются в отдельном баннере и отображаются в расширенной статистике баннера, но не отображаются в статистике кампании или сценария.

3.2 Валидация на соответствие требованиям Adriver

Для проверки html-файла вы можете воспользоваться специальной утилитой Adriver: перейти на сайт.

4. Загрузка баннера

  1. Подготовьте баннер согласно п. 2 и п. 3 инструкции
  2. Добавьте баннер:
    • для баннеров на коде IFrame — баннер соответствующей ширины и высоты;
    • для баннеров на коде Extension — special—>extension—>flash-extension
    • для баннеров на коде Poster — special—>poster—>flash-poster
    • для баннеров на коде Ajax — special—>AjaxJS—>Flash-AjaxJS
  3. Укажите ссылку на сайт рекламодателя в поле Линк Баннера. При необходимости, укажите другие параметры
  4. ЩелкнитеДобавить баннер. Вы попадете на страницу редактирования параметров баннера
  5. Включите баннер (галочка Вкл.), укажите распределение в течение дня, задайте необходимые ограничения по количеству показов/кликов. При необходимости, настройте другие параметры. Для сохранения введенных настроек щелкните Сохранить
  6. Кликните по ссылке Загрузить баннер
  7. В поле HTML с помощью кнопки Обзор выберите HTML-файл вашего баннера
  8. В полях Ширина и Высота укажите ширину и высоту вашего баннера. При необходимости, заполните другие поля
  9. В поле Дополнительная компонента с помощью кнопки Обзор добавьте все дополнительные файлы баннера (изображения, js-файлы или медиа-файлы)
  10. Щелкните Загрузить

Размер загружаемых файлов должен соответствовать спецификации.

Примечание: Для HTML-баннеров на кодах Extension / Poster / Ajax существует альтернативный способ загрузки – загрузка баннера как generic вместе с управляющим скриптом. Подробнее.