AdRiver - система управления интернет-рекламой
О компании Справочное руководство Вход в систему
Рекламным агентствам  AdRiver DSP 
Владельцам сайтов  AdRiver SSP 
Управление рекламой

HTML-баннер (HTML5)

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

Описание:
баннер со встроенной графикой, HTML-формами, несколькими ссылками.
Тип кода:
фреймовый, Poster, Ajax, Extension.
Примеры:
размерный HTML-баннер на коде Ajax. Размерный HTML-баннер на коде HTML 728x90.
Подробнее:
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. Учет кликов в баннере

По умолчанию клики в 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-баннере
  • Инструкция для подсчета кликов по ссылкам в HTML-баннере с помощью кликовой ссылки 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 вместе с управляющим скриптом. Подробнее.

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

6. Полезные ссылки

Последнее обновление: 17.10.2016