Все мы давно привыкли к рекламным баннерам на любимых нами сайтах. Некоторые из них скромно помигивают в углу страницы, другие же навязчиво предлагают нажать на них, внезапно появляясь в центре экрана и надоедая (да, именно надоедая) анимацией. Прошло время, когда красивые эффекты могли ввести пользователя в ступор и заставить кликнуть по рекламному объявлению, эффективность сисек и прочих сомнительных маркетинговых ходов тоже резко снизилась, ведь пользователи эволюционировали. Сейчас они кликают на баннере только если им действительно интересно то, что он продаёт.
В распоряжении веб-разработчиков находится масса технологий, с помощью которых были сделаны gmail, facebook и множество других замечательных сервисов, но почему до сих пор баннеры — это всего лишь электронная вывеска-замануха, и не более? Мы решили сделать баннер, который не просто завлекает на сайт, но сам продаёт.
Баннер-магазин
Специально для демонстрации нашей идеи мы разработали баннер, который вы можете видеть слева. Он использует реальную YML раздачу одного интернет-магазина бытовой техники, так что каталог не «рыбный», и вы даже можете приобрести понравившийся товар. Нажав на ссылку «купить» вы попадёте на профиль товара на сайте интернет-магазина.
Технически это скорее виджет, но каждую нашу разработку мы ориентируем прежде всего на пользователя, а с точки зрения user experience это однозначно баннер, так как он имеет прямоугольную форму, будет располагаться в тех областях сайта, в которых обычно располагаются баннеры, и служит в рекламных целях. Так что в этой статье (кроме раздела про реализацию) будет фигурировать именно слово «баннер».
С нашим баннером у пользователя появился выбор. Он не переходит на другой сайт сразу, ему ничего не мешает воспользоваться поиском баннера, посмотреть информацию о товаре, и если он не найдёт ни чего интересного – просто продолжить просмотр сайта. Но если пользователь нашёл интересующий его товар и перешёл по ссылке «купить», интернет-магазин, владеющий таким баннером, получает пользователя в несколько раз более мотивированного к покупке, чем если бы он перешёл с обычного баннера, пускай и с самого анимированного на свете. К тому же наш баннер не нервирует (хочется думать) пользователя, не навязывает себя, он просто делает свою работу – продаёт.
Баннер имеет размер 240х400px (вертикальный прямоугольник, такой есть, например на Хабрахабре, справа, над «Прямым эфиром») и состоит из следующих страниц:
 Главная страница. Здесь можно задать параметры поиска, при этом, если выбрать категорию, автоматически подстраивается список доступных подкатегорий. |
 Загрузка результатов поиска. Запрос товаров по выбранным критериям отправляется на наш сервер. Нужно немного подождать. |
 Результаты поиска. Товары выводятся по 10 штук. Можно полистать страницы результатов, посмотреть описание товара наведя мышкой на картинку или перейти к подробной информации о товаре. |
 Информация о товаре. Фотография побольше, подробное описсание товара и конечно большая ссылка «купить». Подробной информации не очень много, но и баннер-то демонстрационный. |
 О баннере. Самая скучная страница нашего приложения. Добавлена с целью того, чтоб баннер не забывал своего хозяина, даже если кто-нибудь захочет разместить его у себя в блоге например. |
 Обратная связь. Вы можете отправить нам пожелание или предложение по поводу баннера. Только не забудьте заполнить все поля формы! |
Реализация
Каталог товаров для виджета наш сервер получает от интернет-магазина в формате YML (Yandex Market Language). Это стандарт поддерживает большинство крупных интернет магазинов и в их YML-выдаче присутствует вся необходимая для виджета информация. Извлеченные из YML-документа данные помещаются в БД на нашем сервере, все изображения товаров приводятся к единому размеру и типу. Клиентская часть виджета тоже находится на нашем сервере и загружается в iframe на рекламной площадке (в данном случае вместо рекламной площадки наш блог), взаимодействие с баннер-сервером осуществляется через AJAX. Технически весь виджет состоит из одной HTML страницы, управляемой с помощью JavaScript.
Клиентская часть виджета написана с использованием jQuery, и имеет размер 38Кб. Библиотека jQuery загружается с code.google.com так что у некоторых пользователей она будет закэширована и для них баннер ещё на 19Кб легче. Мы не использовали в реализации виджета ни одной картинки, чтоб подчеркнуть его функциональную миссию в противовес презентационному назначению обычных баннеров.
Идеи для развития
У нас есть несколько мыслей по поводу возможностей внедрения и развития нашего решения:
- Создание абсолютно независимого баннер-магазина, со своей корзиной товаров, личным кабинетом и страницей оформления заказа. Ограниченность доступного пространства можно было бы преодолеть за счёт всплывающих окон, управляющихся баннером и показывающихся на рекламной площадке.
- Если у магазина небольшое количество товаров (майки, сувенирная продукция), баннер-магазин может стать единственной площадкой для реализации товаров. Магазин может вообще не иметь собственного сайта и реализовывать товары исключительно через баннеры, размещённые на рекламных площадках. Получится некий «облачный» интернет-магазин.
- Если в системе будет несколько интернет-магазинов, можно будет сделать контекстный показ того или иного магазина в зависимости от поисковой истории пользователя просматривающего страницу или контекстной нагрузки самой страницы, на которой размещён баннер.
- Подобный баннер можно сделать не только для интернет-магазина, но и для сервиса знакомств, сервиса по поиску работы, торрент-трекера и ещё много чего.
Заключение
Мы искренне верим в то, что наша разработка поможет сделать рынок интернет-рекламы более цивилизованным, что пользователи будут находить и покупать именно те товары, которые им нужны, а не те, которые им навязывают пёстрой рекламой и дешёвыми уловками, в то, что интернет-магазины станут более эффективными и прибыльными.
Выражаем благодарность магазину bosso.ru и лично Виталию Подкатилову за разрешение использовать их YML раздачу.