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