Основы баннерной рекламы - Алексей Петюшкин

Анимация

По статистике, анимированные рекламные баннеры получают на 25 % больше отклика, чем статичные носители. И это понятно: движение приковывает взгляд пользователя, динамичные сцены и образы фиксируются даже боковым зрением и более четко запечатлеваются в памяти потребителей. Для сравнения статичной и анимированной рекламы приведем пример, связанный с телевидением. Какое рекламное обращение привлечет большее внимание: неподвижная картинка с логотипом рекламодателя и краткой информацией о предлагаемых товарах (услугах), или динамично развивающееся действие, состоящее из нескольких ярких, цветных, живых сцен с участием людей, природы, животных? Скорее всего, последнее обращение будет более эффективным. Вспомните такие конкретные ролики, как реклама Nescafe («Сначала был кофе»), «БиЛайн GSM» («Не звоните, потому что ждете вечерних скидок?») и пр. Общая рекламная идея для представления марки была проведена через всю серию роликов, каждый из которых представлял собой небольшое действие в лицах, динамически отображающее суть рекламного предложения. Наверняка такая реклама надолго останется в памяти людей, даже если они не пьют кофе и не пользуются услугами сотовой связи.

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

Однако при использовании, например, GIF-анимации рекламодатель может столкнуться с одной проблемой: чем насыщеннее, динамичнее и правдоподобнее будет анимированный баннер, тем сложнее его внутренняя структура, а соответственно – выше размер конечного файла. Учитывая, что в российской части Интернета файловым лимитом принято считать 15 Кбайт (для большого формата 468x60) и еще меньший размер для других форматов, рекламодатель вынужден искать "золотую середину". Однако при этом необходимо соответствовать требованиям рекламных площадок и баннерных сетей, придать анимированному рекламному носителю максимум динамики, плавности и реалистичности, а также предоставить допустимый уровень качества GIF-баннера (оптимизация изображений, корректировка цветовой палитры и пр.).

Rich-media

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

Обыкновенный графический баннер или Flash-ролик делаются с помощью специального программного обеспечения (Ulead GIF Animator, Macromedia Flash), а как создать HTML-баннер? Рассмотрим пример простейшего HTML-баннера (см. рис. 5.7).

HTML-баннер представляет собой код или фрагмент кода обыкновенной Web-страницы, который загружается посредством так называемых «плавающих» фреймов или действия директив SSI (Server Side Includes). В нашем случае мы условно разделим изображение, показанное на рисунке, на четыре части: слева логотип компании «Автодром», правая часть состоит из верхнего, нижнего, правого и левого разделителей, а также редактируемой области, в которую будут включены специальные поля формы (радиокнопки "До 1990 года" и "После 1990 года", ниспадающее меню с наименованиями моделей и кнопка подтверждения). Компоновка составных элементов такого HTML-баннера будет реализована посредством следующего кода (листинг 11.1).

Листинг 11.1. Примерный вид кода для HTML-баннера

<table width=468 border=0 cellpadding=0 cellspacing=0>

<tr>

<td rowspan=3>

<img src="images/autodrom.gif" width=186 height=60></td>

<td rowspan=2>

<img src="images/l_border.gif" width=4 height=51></td>

<td colspan=2>

<img src="images/t_border.gif" width=278 height=8></td>

</tr>

<tr>

<td width=270 height=43>

<form name="auto" method="post" action="http://www.server.ru/cgi-bin/auto.cgi">

<input type="radio" value="till1990" name="1990">До 1990 года<Ьг>

<input type="radio" value="since1990" name="1990">После 1990 года

<select name="model">

<option value= "Mercedes ">Mercedes</option>

<option value="Toyota">Toyota</option>

<option value="Opel">Opel</option>

<option value="Ford">Ford</option>

</select>

<input type="submit" value="OK">

</form>

</td>

<td>

<img src="images/r_border.gif" width=8 height=43></td>

</tr>

<tr>

<td colspan=3>

<img src="images/b_border.gif" width=282 height=9></td>

</tr>

</table>

Для лучшего понимания кода дадим некоторые пояснения: autodrom.gif – файл логотипа компании «Автодром»; l_border.gif – файл левого разделителя; r_border.gif – файл правого разделителя; t_border.gif – файл верхнего разделителя; b_border.gif – файл нижнего разделителя; http://www.server.ru/cgi-bin/auto.cgi – путь к программе-обработчику на сервере рекламодателя; input type="radio" – радиокнопки; option value= «Mercedes» – пункт ниспадающего меню; input type= «submit» – кнопка подтверждения запроса.

Добавив к вышеуказанному коду остальные необходимые инструкции (BODY, HEAD, TITLE и др.), сохраняем документ, например, под именем banner.html. Далее получившийся HTML-баннер можно отобразить двумя способами: с помощью встроенного ("плавающего") фрейма и путем SSI-директивы.

Спецификация «плавающих» фреймов позволяет внедрять в структуру Web-страниц отдельные HTML-документы, описываемые парным тегом <iframe></iframe>. Данная конструкция поддерживается только браузером Microsoft Internet Explorer и другим ПО для просмотра сайтов, разработанным на базе упомянутого браузера. Однако, учитывая статистику использования браузеров среди пользователей Интернета, на сегодняшний день многие баннерные сети и рекламные площадки активно применяют «плавающие» фреймы (например, RLE Banner Network, Lycos-Pocciw и др.). Для того чтобы HTML-баннер отображался на странице, в нужном месте документа нужно вставить следующий код (листинг 11.2).

Листинг 11.2. Отображение HTML-баннера с помощью «плавающего» фрейма

<iframe src="http://www.server.ru/banners/iframe/banner.html"

name="banner" width=468 height=60 scrolling="no" frameborder=0>

Ваш браузер не поддерживает "плавающие" фреймы.

</iframe>

Поясним элементы кода: iframe src="http://www.server.ru/banners/iframe/banner.html" – путь на сервере рекламодателя или издателя к встраиваемому HTML-документу; name="banner" – «имя» встроенного файла (необходимо для программы-обработчика в HTML-баннере); width=468 height=60 – фиксированные размеры фрейма, совпадающие со значениями ширины и высоты HTML-баннера (в данном случае – это Full Banner); scrolling="no" – атрибут, определяющий наличие полосы прокрутки во встроенном документе; framebordeг=0 – толщина рамки вокруг встроенного файла; Ваш браузер не поддерживает «плавающие» фреймы – сообщение для обладателей браузеров, не имеющих поддержки «плавающих» фреймов (пользователи Microsoft Internet Explorer этого сообщения не увидят).