HTML-баннер (HTML5)

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

Примечание: В случае необходимости показывать баннер при доскролле до баннерного места, можно воспользоваться кодом 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-баннере с помощью кликовой ссылки 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 вместе с управляющим скриптом. Подробнее.