Статья описывает систему при помощи которой на любом сайте с PHP и MySQL может быть развернута полнофункциональная система ротации Rich media баннеров. Хочешь за пару часов уметь разворачивать "взрослую" ротацию таких вот баннеров на любой площадке?
Тогда читай статью. Да! Все время забываю напомнить. Рассматривая примеры - включи звук!

Говоря о 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".

<!-- вот баннер -->
<p><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/s
hockwave/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="https://xakep.ru/wp-content/uploads/post/22254/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="https://xakep.ru/wp-content/uploads/post/22254/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="https://xakep.ru/wp-content/uploads/post/22254/crave_local.js"></script>

Этап создания баннера завершен. У нас есть строчка "<script language="JavaScript" src="https://xakep.ru/wp-content/uploads/post/22254/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 баннеры распахиваясь, перекрывают кликабельные ссылки. И ссылки, перекрытые распахнутым баннером, сохраняют кликабельность только в 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 контент, но и смешивать в ротации баннеры нескольких размеров и форматов.

 

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

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>

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

  • Подпишись на наc в Telegram!

    Только важные новости и лучшие статьи

    Подписаться

    • Открыть комментарии
    Подписаться
    Уведомить о
    0 комментариев
    Межтекстовые Отзывы
    Посмотреть все комментарии