Организации показа и учета Rich-media баннеров

Статья описывает уловку, при помощи которой на любом сайте с PHP и MySQL может быть развернута полнофункциональная система ротации Rich media баннеров.
Вот таких, например: http://www.boston.com/mediakit/shosh_atbat.htm , http://www.unitedvirtualities.com/de.../miller_2.html , http://www.unitedvirtualities.com/de.../pediarix.html и еще круче. Хочешь за пару часов уметь разворачивать "взрослую" ротацию таких вот баннеров
на любой площадке, начиная от хоум пейджа подружки? - Читай статью. Да! Все время забываю напомниить. Рассматривая примеры - включи звук!

Rich-media баннеры для всех
http://to-dress.ru/rich/redist/rich.htm

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

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

2. Это распространится повсеместно, если будет каждому доступно.

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

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

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

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

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

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

<span style="position: absolute" ...>
<OBJECT> ... </OBJECT>
</span>

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




<span style="position: absolute; left: 18; top: 3; width: 800; height: 600; z-index: 1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="800" HEIGHT="600" id="rich-crave-min" ALIGN>
<param NAME="movie" VALUE="rich-crave-min.swf">
<param NAME="quality" VALUE="high">
<param NAME="wmode" VALUE="transparent">
<param NAME="bgcolor" VALUE="#FFFFFF">
<EMBED src="rich-crave-min.swf" quality=high wmode=transparent bgcolor=#FFFFFF WIDTH="800" HEIGHT="600" NAME="rich-crave-min" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</object>
</span></p>

Баннер работает, но способ его размещения никуда не годен и сейчас мы его усовершенствуем.

Создаем файл "crave_local.js" с вот таким содержимым:

document.write('<span style="position: absolute; left: 18; top: 3; width: 800; height: 600; z-index: 1">');
document.write('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="800" HEIGHT="600" id="rich-crave-min" ALIGN="">');
document.write('<PARAM NAME=movie VALUE="rich-crave-min.swf"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent><PARAM NAME=bgcolor VALUE=#FFFFFF>');
document.write('<EMBED src="rich-crave-min.swf" quality=high wmode=transparent bgcolor=#FFFFFF WIDTH="800" HEIGHT="600" NAME="rich-crave-min" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT></span>');
Это тот же самый код, что и в предыдущем примере, но помещаемый в страницу конструкцией:

<script language="JavaScript" src="crave_local.js"></script>
Смотрите файл "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-баннер.

Конструкция <span style="position: absolute...; z-index: 1> корректно работает не во всех браузерах.

Суть в том, что Rich media баннеры на http://to-dress.ru распахиваясь, перекрывают кликабельные ссылки. И ссылки, перекрытые распахнутым баннером, сохраняют кликабельность только в IE 5.05 и выше.

Для этого добавлена проверка версии браузера перед доставкой баннера.

Если распахивающийся баннер не перекрывает кликабельных ссылок, то можно ограничиться проверкой (лишь бы не ОПЕРА)

4. Теперь замечаем, что диалог "Invocationcode", имеет кучу полезных опций! Ставим "Style=>Simple, Automatically close after => 2 sec".

С интересом наблюдаем, "test_dhtml_js2.htm", как окошко само закрывается, оставляя после себя работающий баннер.

5. Когда нарезвитесь, меняя цвета и стили окошка, выберите окончательный вариант кода доставки баннера:
Style=>Simple
Show close button : No
Automatically close after : 1 sec
Transparent background
No border

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

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

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

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


Все. Удачи. Ну и вы же понимаете, что баннер может иметь и не 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.

to-dress добавил [date]1083609801[/date]:
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++

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

I. Добавление баннера в 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)

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

:: Создать DHTML Зону произвольного (но нужного) размера.
Размер будет влиять только на видимость баннеров в привязках к Зоне.

:: Выбрать стиль отображения DHTML
Simple
Show close button : No
Automatically close after : 1 sec
Transparent background
No border

:: Здесь мы применяем трюк, заставляя DHTML Layer доставлять JS код баннера в код страницы и умирать.

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

<script language="JavaScript">
<!--
if ((GETEnough)&&(!OPERA)) {
document.write('<script language="JavaScript" src="http://мой_баннер.js"></script>');
}
//--></script>


++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++