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. Подготовка баннера

2.1. HTML-баннер на коде IFrame

  1. Подготовьте HTML-код баннера. Файл обязательно должен называться index.html

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

  2. Загрузите баннер в систему

2.2. HTML-баннер на коде Poster / Extension

  1. Подготовьте HTML-код баннера. Файл обязательно должен называться index.html

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

  2. Распакуйте пример
  3. Откройте текстовым редактором файл script.js. Внесите изменения в верхнюю часть скрипта, отмеченную как Editable block:
    var ar_width      = '240';
    var ar_height     = '400';
    var ar_gif_pixel  = '';

    Переменные:

    ar_width
    ширина баннера. Укажите ваше значение
    ar_height
    высота баннера. Укажите ваше значение
    ar_gif_pixel
    вызов стороннего счётчика. Если не требуется — оставьте значение пустым
  4. Сохраните файл script.js
  5. Откройте текстовым редактором файл index.html. Скопируйте HTML код вашего баннера и вставьте в файл index.html в указанном месте:
    <html>
    <body>
    
    <!-- Сюда поместите HTML для баннера -->
    
    </body>
    </html>
    
  6. Если в баннере используются буквы русского алфавита, то кодируйте их номерами
  7. Сохраните измененный файл index.html
  8. Загрузите баннер в систему

2.3. HTML-баннер на коде Ajax

  1. Подготовьте HTML-код баннера

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

  2. Распакуйте пример
  3. Откройте текстовым редактором файл script.js. Внесите изменения в верхнюю часть скрипта, отмеченную как Editable block:
    var ar_width	= '100';
    var ar_height	= '100';
    var ar_html	= 'banner.html';
    var ar_pix	= '';

    Переменные:

    ar_width
    ширина баннера. Укажите ваше значение
    ar_height
    высота баннера. Укажите ваше значение
    ar_html
    имя HTML-файла для баннера. В данном случае — banner.html
    ar_pix
    вызов стороннего счётчика. Если не требуется — оставьте значение пустым
  4. Если в баннере используются буквы русского алфавита, то кодируйте их номерами
  5. Сохраните файл script.js, загрузите баннер в систему

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

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

По умолчанию клики в HTML-баннере не учитываются. Для учета кликов в файл index.html необходимо внести изменения согласно одной из данных инструкций:

  • Прошивка на клик для HTML-креативов
    1. Откройте текстовым редактором файл index.html Подключите файл html.js:
      <script src="/html.js"></script>

      Если баннер расположен на стороннем сервере, укажите полный путь до файла html.js:

      <script src="//content.adriver.ru/html.js"></script>

      Примечание: скачивать плагин html.js или создавать его самостоятельно не надо. Данный плагин размещается на серверах AdRiver и достаточно просто подключить его в подготавливаемом файле.

    2. Для осуществления перехода и учета клика используйте функцию ar_callLink():
      ar_callLink();

      При вызове без параметров переход будет осуществлен по ссылке, указанной в поле Линк баннера при его добавлении в систему. Также в функцию может быть передан объект с параметрами. Вызов функции может быть осуществлен при любом необходимом событии для любого тэга в коде баннера:

      <div class="button" onclick="return ar_callLink({target: '_blank', other: '//ya.ru', event: event});">Перейти на сайт</div>          

      Возможные параметры:

      target
      в каком окне открывать ссылку. Возможные значения: _blank (новое окно), _top (в этом же окне), _self (в iframe с баннером)
      other
      здесь может быть указана альтернативная ссылка для перехода, если необходимо перенаправить пользователя на адрес, отличный от указанного в поле Линк баннера. При этом клики будут продолжать учитываться в том же баннере
      event
      объект события (click, mousedown и т.п.). При передаче данного параметра в кликовую ссылку добавятся координаты клика внутри iframe с баннером

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

  • Инструкция для нескольких ссылок в HTML-баннере
  • Инструкция для подсчета кликов по ссылкам в HTML-баннере с помощью кликовой ссылки AdRiver

Во всех указанных случаях клики по всем ссылкам с баннера будут учитываться в статистике самого HTML-баннера, загруженного в AdRiver.

Также можно воспользоваться инструкцией кликового баннера. Однако в этом случае клики считаются в отдельном баннере и отображаются в расширенной статистике баннера, но не отображаются в статистике кампании или сценария.

3.2. Подготовка HTML-креатива, полученного конвертацией Swiffy-конвертером

Примечание: данное решение корректно работает для текущей версии приложения Swiffy. В случае модификации приложения Swiffy решение может потребовать доработки.

Файлы с одной ссылкой

Данное решение предназначено для Flash-роликов с одной ссылкой перехода.

Важно! Перед конвертацией .swf файла с помощью Swiffy конвертера убедитесь, что Flash-ролик прошит в соответствии с техническими требованиями AdRiver. Наличие переменной link1 обязательно.

Если HTML-креатив был получен в результате конвертации .swf файла Swiffy конвертером, его необходимо модифицировать следующим образом:

  1. Откройте текстовым редактором полученный в результате конвертации HTML-файл
  2. Подключите в HTML-файле плагин html.js удобным для вас способом:
    1. Если файлы загружены в Адривер, используйте для подключения следующий код:
      <script src="/html.js"></script>
    2. Если HTML-файл баннера размещен на стороннем сервере, укажите полный путь до плагина html.js:
      <script src="//content.adriver.ru/html.js"></script>

      Примечание: скачивать плагин html.js или создавать его самостоятельно не надо. Данный плагин размещается на серверах AdRiver и достаточно просто подключить его в подготавливаемом файле.

      Примечание: не рекомендуется указывать протокол в явном виде (http или https), символы // в начале абсолютного пути позволят определить протокол автоматически .

  3. Объявите переменную link1 следующим образом:
    var link1 = encodeURIComponent(ar_redirect);
  4. После вызова функции stage.start() добавьте следующий код:
    stage.setFlashVars('link1='+link1);

В результате изменений .html-файл баннера должен выглядеть примерно так:

Файлы с несколькими ссылками

Данное решение предназначено для Flash-роликов с альтернативными ссылками перехода.

Перед конвертацией .swf файла с помощью Swiffy конвертера убедитесь, что Flash-ролик соответствует следующим требованиям:

  • Flash-ролик прошит в соответствии с техническими требованиями AdRiver
  • Для каждой ссылки перехода создана отдельная кликовая область (button)
  • Для каждой ссылки перехода использована соответствующая переменная link1, link2, link3 и т.д., в зависимости от количества ссылок

Пример прошивки на альтернативные клики .swf ролика с тремя ссылками перехода на ActionScript2, для дальнейшей конвертации в HTML с помощью Swiffy:

// для элемента button1

on (release) {
       getURL(_root.link1,"_blank");
}

// для элемента button2

on (release) {
       getURL(_root.link2,"_blank");
}

// для элемента button3

on (release) {
       getURL(_root.link3,"_blank");
}

Если HTML-креатив был получен в результате конвертации Swiffy конвертером корректно подготовленного .swf файла , его необходимо модифицировать следующим образом:

  1. Откройте текстовым редактором полученный в результате конвертации HTML-файл
  2. Подключите файл html.js
    <script src="/html.js"></script>
  3. Объявите переменные link1...linkN следующим образом:
    var link1 = encodeURIComponent(ar_redirect + encodeURIComponent("http://url1"));
    var link2 = encodeURIComponent(ar_redirect + encodeURIComponent("http://url2"));
    ...
    var linkN = encodeURIComponent(ar_redirect + encodeURIComponent("http://urlN"));
  4. После вызова функции stage.start() добавьте следующий код:
    stage.setFlashVars('link1='+link1);
    stage.setFlashVars('link2='+link2);
    ...
    stage.setFlashVars('linkN='+linkN);

4. Загрузка баннера

  1. Подготовьте баннер согласно п. 2 инструкции;
  2. Добавьте баннер:
    • для баннеров на коде IFrame — баннер соответствующей ширины и высоты;
    • для баннеров на коде Extension —  special—>extension—>generic-extension;
    • для баннеров на коде Poster — special—>poster—>generic-poster;
    • для баннеров на коде AjaxJS — special—>AjaxJS—>Generic AjaxJS.
  3. Укажите ссылку на сайт рекламодателя в поле Линк Баннера. При необходимости, укажите другие параметры;
  4. Нажмите на кнопку Добавить баннер. Вы попадете на страницу редактирования параметров баннера;
  5. Включите баннер (галочка Вкл.), укажите распределение в течение дня, задайте необходимые ограничения по количеству показов/кликов. При необходимости, настройте другие параметры. Для сохранения введенных настроек нажмите на кнопку Сохранить;
  6. Кликните по ссылке Загрузить баннер;
  7. Выберите с помощью кнопки Обзор все файлы баннера. Файл index.html должен быть загружен обязательно. Для баннеров на кодах Ajax, Poster / Extension также необходимо загрузить файл script.js;
  8. Нажмите на кнопку Загрузить.

Размер загружаемых файлов должен соответствовать спецификации.

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

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

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