Статья описывает уловку, при помощи которой на любом сайте с PHP и MySQL может быть развернута полнофункциональная система ротации Rich media баннеров.
Вот таких, например: http://www.boston.com/mediakit/shosh_atbat.htm, http://www.unitedvirtualities.com/demo/ … ler_2.html , http://www.unitedvirtualities.com/demo/ … iarix.html и еще круче. Хочешь за пару часов уметь разворачивать "взрослую" ротацию таких вот баннеров на любой площадке, начиная от хоум пейджа подружки? - Читай статью. Да! Все время забываю напомниить. Рассматривая примеры - включи звук!
Говоря о Rich-media баннерах можно легко согласиться с двумя утверждениями:
Это привлекательно, это красиво, это престижно. В Rich-media баннер это вмещается бездна информации по сравнению с обычными форматами.
Это распространится повсеместно, если будет каждому доступно.
В этой короткой статье мы с вами шаг за шагом создадим не только заготовку Rich-media баннера, но и, что важно, наладим ротацию, биллинг и учет Rich-media баннеров. Причем собственными силами (без привлечения чужих закрытых систем).
Самый эффектный из Rich-media форматов, это, конечно, "летающие" и "распахивающиеся" баннеры, в которых часть содержимого может на время выходить за пределы баннера.
Собственно, сама задача изготовления летающего или распахивающегося баннера проста - это просто флэш-ролик, имеющий размер распахнутого баннера и состоящий из двух сцен: на первой сцене расположена кнопка размером со "сложенный", "запаркованный" баннер, на второй сцене - "распахнутый", "летающий" рекламный сюжет. Наведение мыши на кнопку в сцене "сложенного" баннера вызывает переход на вторую "распахнутую" сцену. В "распахнутой" сцене есть кнопка "[х] закрыть". Команда "закрыть баннер" вызывает переход на первую, "сложенную" сцену. Все.
Исходники баннеров здесь: http://to-dress.ru/rich/redist/riches.zip
Открываем, изучаем короткие скрипты на кнопках и фреймах. Вся наука.
Теперь баннер нужно поместить на страницу. Заглядываем в HTML файл, созданный Flash'ем при публикации ролика и, создав слой, помещаем в него строчки ограниченные тегами <OBJECT> ... </OBJECT>:
<OBJECT> ... </OBJECT>
Смотрите, как это сделано в файле "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> <!-- вот баннер -->
Баннер работает, но способ его размещения никуда не годен и сейчас мы его усовершенствуем. Создаем файл "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:
Cоздаем DHTML зону: Inventory => Publishers & Zones => Expand all => Create.
Zone type => Interstitial or Floating DHTML. Указываем желаемый размер зоны в пикселях.
Этот размер всегда нужен, даже если баннер будет "летать" и не будет иметь "размера".
PhpAdsNew для показа в зоне выбирает из баннерохранилища совпадающий с ней по размеру баннер.
Получаем код вызова баннера для этой зоны: Inventory => Publishers & Zones => Expand all => Щелкаем на имени нужной Зоны.
Zone properties => Invocationcode.
Создаем 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".
Налюбовавшись, возвращаемся к баннеру: 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", как окошко само закрывается, оставляя после себя работающий баннер.
Когда нарезвитесь, меняя цвета и стили окошка, выберите окончательный вариант кода доставки баннера:
Style=>Simple Show close button : No Automatically close after : 1 sec Transparent background No border
Готово. Файл: "test_dhtml_js_finish.htm".
Как вы уже успели увидеть, позиционирование баннера производится ручками, подсчетом пикселей от верхнего левого угла. Спешу вас успокоить, юнайтедвиртуалитис работает точно так же.
Теперь PhpAdsNew доставляет нам в страницу JS-баннеры, сопровождая их доставку всеми своими возможностями: ограничениями на показы, таргетингом, ротацией, учетом и проч. Читайте мануал к PhpAdsNew.
JS-баннеры позволяют не только доставлять в страницу Rich media контент, но и смешивать в ротации баннеры нескольких размеров и форматов.
А это все, что осталось от юзер мануала, если взять главное. Повесьте эту страничку на монитор, пока не достигнете автоматизма в управлении рекламой на своем сайте:
Добавление баннера в 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)
Отображение JS баннеров
:: Создать DHTML Зону произвольного (но нужного) размера.
Размер будет влиять только на видимость баннеров в привязках к Зоне.
:: Выбрать стил[color=black]ь отображения DHTML[/color]
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>Все. Удачи. Ну и вы же понимаете, что баннер может иметь и не 2 интерактивных сцены, а хоть 300. Все ограничивается весом баннера в кило.
