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

      Источник: AdRiver