HTML-баннер (HTML5)

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

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

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

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

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

Учет кликов в баннере

Стандартные HTML-креативы

По умолчанию клики в 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 с баннером

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

Загрузка баннера
  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 вместе с управляющим скриптом.

Ограничения на размер загружаемых файлов

  • обычные графические файлы (в интерфейсе обозначены img width x height) — 600 Кб;
  • swf-файлы (в интерфейсе обозначены flash width x height) — 600 Кб;
  • другие типы файлов — 600 Кб;
  • для многокомпонентных баннеров ограничения проверяются отдельно для каждой составляющей.

Если вес файла превышает установленное для него значение, можно закачать его на сторонний сервер.

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

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

Примечание: Формат 100%х200 должен быть смоделирован под адаптивную верстку сайта (желательна заглушка в формате gif)