Библиотека Интернет Индустрии I2R.ru

Говоря о Rich-media баннерах можно легко согласиться с двумя утверждениями:

1. Это привлекательно, это красиво, это престижно. В Rich-media баннер это вмещается бездна информации по сравнению с обычными форматами.
2. Это распространится повсеместно, если будет каждому доступно.

В этой короткой статье мы с вами шаг за шагом создадим не только заготовку Rich-media баннера, но и, что важно, наладим ротацию, биллинг и учет Rich-media баннеров. Причем собственными силами (без привлечения чужих закрытых систем).

Самый эффектный из Rich-media форматов, это, конечно, "летающие" и "распахивающиеся" баннеры, в которых часть содержимого может на время выходить за пределы баннера.

Собственно, сама задача изготовления летающего или распахивающегося баннера проста - это просто флэш-ролик, имеющий размер распахнутого баннера и состоящий из двух сцен: на первой сцене расположена кнопка размером со "сложенный", "запаркованный" баннер, на второй сцене - "распахнутый", "летающий" рекламный сюжет. Наведение мыши на кнопку в сцене "сложенного" баннера вызывает переход на вторую "распахнутую" сцену. В "распахнутой" сцене есть кнопка "[х] закрыть". Команда "закрыть баннер" вызывает переход на первую, "сложенную" сцену. Все.

Исходники баннеров здесь: http://to-dress.ru/rich/redist/riches.zip

Открываем, изучаем короткие скрипты на кнопках и фреймах. Вся наука.

Теперь баннер нужно поместить на страницу. Заглядываем в HTML файл, созданный Flash'ем при публикации ролика и, создав слой, помещаем в него строчки ограниченные тегами <OBJECT> ... </OBJECT>:

Смотрите, как это сделано в файле "test_flash.htm".

Баннер работает, но способ его размещения никуда не годен и сейчас мы его усовершенствуем. Создаем файл "crave_local.js" с вот таким содержимым:

Это тот же самый код, что и в предыдущем примере, но помещаемый в страницу конструкцией:

Смотрите файл "test_js.htm".

Этап создания баннера завершен. У нас есть строчка "<SCRIPT language="JavaScript" src="crave_local.js"></SCRIPT>", которая называется "JavaScript-баннер" и для полного счастья нам осталось только наладить ротацию JavaScript-баннеров.

Доставку JavaScript-баннеров умеет осуществлять большинство "взрослых", коммерческих централизованных "крутилок", класса AdRiver или DoubleClick, но в большинстве случаев (а именно - никогда) их политика не рассчитана на бесплатное или комиссионное обслуживание "хоум пейджей" и т.д., что вполне естественно, т.к. "комиссия" и прочие понятия баннерообменных сетей плохо приложимы к Rich media хотя бы оттого, что это не GIF 468х60 и кто с кем и зачем будет меняться - непонятно. А мы ищем решение, доступное абсолютно всем.

Оказалось, что мелкий хак (и даже не хак, а уловка!) к PhpAdsNew - опен сорс "крутилке", распространяемой под GPL лицензией, позволяет с легкостью наладить показ, учет, ротацию, таргетинг и прочие нужные вещи в отношении JavaScript-баннеров. Которые могут доставлять в страницу хочешь Rich media контент, а хочешь вообще что угодно.

Историческая справка: команда PhpAdsNew - выходцы из команды всем известного PhpMyAdmin. Что вызывает доверие. Требования к системе со стороны PhpAdsNew минимальны. У вас должны быть PHP и MySQL. Существует и версия для PostgreSQL - phpPgAds ( http://www.phppgads.com/one/ ).

Итак, закачиваем и ставим PhpAdsNew ( вот отсюда - http://phpadsnew.com/two/ ).

Внимательно читаем доки. Работать с PhpAdsNew очень просто. Торопыгам советую не мучить себя и прочитать мануал до конца. В мануале есть все.

Итак, суть хака, позволяющего доставлять JavaScript-баннеры через PhpAdsNew:

1. Cоздаем DHTML зону: Inventory => Publishers & Zones => Expand all => Create.
   Zone type => Interstitial or Floating DHTML. Указываем желаемый размер зоны в пикселях.
   Этот размер всегда нужен, даже если баннер будет "летать" и не будет иметь "размера".
   PhpAdsNew для показа в зоне выбирает из баннерохранилища совпадающий с ней по размеру баннер.
   Получаем код вызова баннера для этой зоны: Inventory => Publishers & Zones => Expand all => Щелкаем на имени нужной Зоны.
   Zone properties => Invocationcode.
2. Создаем HTML баннер: Inventory => Advertisers & Campaigns => Expand all => Create.
   ...type of the banner => HTML banner. Вписываем в окошко любой текст. Задаем размер баннера равным только что созданной зоне.
   
   Привязываем баннер или компанию к зоне: Inventory => Publishers & Zones => Expand all => Щелкаем на имени нужной Зоны.
   Zone properties => Linked Banners, привязать Кампанию к Зоне (Campaign selection) или Баннер к Зоне (Banner selection) из выпадающего списка "type of linking"
   
   Любуемся, балуемся: "test_dhtml.htm".
3. Налюбовавшись, возвращаемся к баннеру: Inventory => Advertisers & Campaigns => Expand all => Щелчок на нужном баннере.
   Теперь вместо текста "DHTML окошко..." вставляем в окно баннера вот эту конструкцию:<SCRIPT language="JavaScript">
<!--
if ((GETEnough)&&(!OPERA)) {
document.write('<SCRIPT language="JavaScript" src="http://to-dress.ru/rich/crave.js"><SCRIPT>');
}
//--></SCRIPT>
   Любуемся, балуемся: "test_dhtml_js.htm". Видим, что если закрыть DHTML окошко, то под ним находится наш работающий JS-баннер.
   Конструкция С интересом наблюдаем, "test_dhtml_js2.htm", как окошко само закрывается, оставляя после себя работающий баннер.
4. Когда нарезвитесь, меняя цвета и стили окошка, выберите окончательный вариант кода доставки баннера:
   Style=>Simple
Show close button : No
Automatically close after : 1 sec
Transparent background
No border

5. Готово. Файл: "test_dhtml_js_finish.htm".

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

Теперь PhpAdsNew доставляет нам в страницу JS-баннеры, сопровождая их доставку всеми своими возможностями: ограничениями на показы, таргетингом, ротацией, учетом и проч. Читайте мануал к PhpAdsNew.

JS-баннеры позволяют не только доставлять в страницу Rich media контент, но и смешивать в ротации баннеры нескольких размеров и форматов.

А это все, что осталось от юзер мануала, если взять главное. Повесьте эту страничку на монитор, пока не достигнете автоматизма в управлении рекламой на своем сайте:

1. Добавление баннера в phpAdsNew

:: Прежде, чем добавить баннер, средствами: Inventory => Publishers & Zones нужно создать Издателя, а на сайте Издателя - Зоны.

Добавление баннера:

• :: Прийти в Inventory
• :: Прийти в Advertisers & Campaigns
• :: При необходимости создать нужного Клиента (Advertiser) и Рекламную Кампанию (Campaign)
• :: Открыть нужного Клиента (Advertiser)
• :: Открыть нужную Кампанию (Campaign) внутри Клиента (Advertiser)
• :: Внутри Кампании (Campaign) щелкнуть на баннер-иконке Create
• :: Залить баннер, оформить параметры доставки/таргетинга
• :: При необходимости прийти в Inventory () => Publishers & Zones и привязать Кампанию (Campaign) в которую добавлен баннер к нужной Зоне (Zone) Zone properties => Linked Banners, привязать Кампанию к Зоне (Campaign selection).
  В Зоне будут показываться все баннеры привязанной Кампании, подходяшие по размеру.
• :: К Зоне (Zone) можно привязывать как Кампании, так и отдельные Баннеры: Inventory () => Publishers & Zones, Щелчок на нужной Зоне (Zone), Zone properties => Linked Banners , привязка Кампании (Campaign selection) или привязка Баннера (Banner selection)

2. Отображение JS баннеров

• :: Создать DHTML Зону произвольного (но нужного) размера.
  Размер будет влиять только на видимость баннеров в привязках к Зоне.
• :: Выбрать стиль отображения DHTMLSimple
Show close button : No
Automatically close after : 1 sec
Transparent background
No border
• :: Здесь мы применяем трюк, заставляя DHTML Layer доставлять JS код баннера в код страницы и умирать.

Создать HTML баннер, вписать в окно содержимого баннера волшебные слова:

Все. Удачи. Ну и вы же понимаете, что баннер может иметь и не 2 интерактивных сцены, а хоть 300. Все ограничивается весом баннера в кило.

Напитаться креативными идеями вы можете в галерее баннеров газеты "Бостон Глоб": http://www.boston.com/mediakit/shosh_globe.htm , http://www.boston.com/mediakit/shosh_atbat.htm или компании " http://www.unitedvirtualities.com ". Рекомендую ссылку: Главная страница UV => shoshkele => product suit => страница 3 (shohsbanners) => Expandable 2 и Expandable 3.