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. Технические требования для учета клика

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

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