На главную

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

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Интернет-реклама

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

Статья описывает уловку, при помощи которой на любом сайте с PHP и MySQL может быть развернута полнофункциональная система ротации Rich media баннеров.

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

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

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

В этой короткой статье мы с вами шаг за шагом создадим не только заготовку 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:

  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)
  1. Отображение JS баннеров
  • :: Создать DHTML Зону произвольного (но нужного) размера.
    Размер будет влиять только на видимость баннеров в привязках к Зоне.
  • :: Выбрать стиль отображения DHTMLSimple
    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. Все ограничивается весом баннера в кило.

Напитаться креативными идеями вы можете в галерее баннеров газеты "Бостон Глоб": 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.

Банзай!

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100