Эта статья направлена как на аудиторию, которая уже умеет свои «продвинутые» магазины, с которых стабильно течёт трафик, так и на новичков, которые только собираются создавать и продвигать свои магазинчики.
Ни для кого не секрет, что большая часть покупок в интернете происходит спонтанно и на «случайных» сайтах, но только часть из покупателей возвращается за повторной покупкой(остальные меняют магазин просто из-за несистематичности покупок или простой забывчивости), а еще меньше рекомендуют место для покупок своим знакомым и друзьям.
Итак, допустим, что мы поднаторели в привлечении пользователя на сайт. Но давайте проследим цепочку событий чуть дальше. Заинтересованный пользователь заходит на Ваш магазин, выбирает товар, покупает его и, довольный покупкой, уходит в дальнейшее странствование по Интернету. Как Вы думаете, что он будет делать, когда вновь решит совершить покупку?
Шанс того, что он запомнит адрес Вашего сайта и придет именно к Вам, крайне невелик, скорее всего, он просто введет в поисковике очередной запрос и осчастливит своей покупкой чей-то чужой проект, а, следовательно, и кошелек. Обидно? Конечно обидно. Но эта проблема вполне разрешима, и я хочу предоставить Вам не только сугубо теоретические советы в решении, но дать, так сказать, практическое пособие, на основе которого Вы сможете построить собственные решения, позволяющие пользователю вновь и вновь возвращаться в Ваш магазин за покупками.
Мой способ поможет закрепиться в мозгах и компьютерах, как имеющихся, так и потенциальных «ребиллеров». Мы сделаем так, что покупатель вернется на наш магазин не используя поисковик и не запоминая url. И если знакомый спросит у него, где можно приобрести тот же товар, то вполне вероятно, что он не будет отправлен «погуглить», а получит ссылку именно на Ваш сайт. Для этого мы сделаем красочный и информативный фарма буклет на флеше с яркой и кликабельной гиперссылкой на страницу покупки, а так же зашьем буклет в .exe файл, чтобы пользователь имел возможность сохранить буклет на своем компьютере, и, впоследствии, поделится им с окружающими. Так же я покажу, как сделать простенькое дополнение для фаерфокса, которое послужит тем же целям.
Для нетерпеливых скажу сразу, в конце статьи приведены ссылки на примеры буклета и плагина.
Итак, приступим. Мы решили создать фарма буклет для своего магазина.
Для начала определимся с тематикой, ведь, согласитесь, было бы глупо пытаться получить ребиллы на сайте по продаже той же виагры за счет буклета о продаже гомеопатических препаратов.
Так же стоит определиться с методом разработки буклета. Есть несколько подходов к проектированию флеш приложений. Один из них – рисовать все содержимое непосредственно во флеше, к плюсам данного метода можно отнести полную свободу в плане того, что мы собираемся изобразить, к минусам же отнесем необходимость иметь немалый опыт рисования во флеше, чтобы сделать что-то радующее глаз конечного пользователя. Есть и второй метод, рисовать все в сторонних растровых редакторах, например в том же многострадальном фотошопе, и использовать флеш исключительно для верстки, в данном методе Вам не понадобится больших познаний в области рисования во флеш, но может возникнуть множество некорректностей в отображении растровой графики.
Предлагаю воспользоваться основными плюсами обоих методов, выбрав нечто среднее. Основу графической составляющей мы создадим в фотошопе, а тексты и мелкие доработки добавим непосредственно во флеше.
Итак, мы определились с тематикой, пусть это будет виагра, и со способом реализации. Пришло время активных действий. Найдем несколько картинок по тематике нашего проекта, пошуршав по своим хламовичкам я без труда выудил вот эти вот картинки, которые послужат нам в качестве заготовок для внешнего вида нашего буклета:
В качестве растрового редактора я воспользовался Adobe Photoshop CS3. На скорую руку обработав эти изображения, мной был получен вот такой вот симпатишный шаблончик интерфейса для буклета:
Для тех, кто с фотошопом никогда не работал, будет полезно увидеть всю последовательность операций с пояснениями.
Здесь Вы можете посмотреть все, так сказать, почти вживую (16Mb):
В лучшем качестве это видео можно скачать здесь (37Mb)
Затем мы разделяем наш шаблон на части и собираем из них буклет во Flash. Не забываем разбавлять внешний вид различными свистелками, наша задача – заинтересовать пользователя, чтобы он, если не скачал буклет к себе на машину, так уж точно запомнил, где его видел.
Вы будете смеяться, но в качестве среды разработки я воспользовался старым добрым 6-м флешем, он же Flash MX. «Почему?» — спросите Вы, я Вам отвечу, на это есть две причины. Первая из них — флеш ролики созданные в этой версии тянут куда меньше ресурсов при воспроизведении, чем ролики, созданные в новых версиях (что немаловажно, если планируется размещать их на сайте), и при этом возможностей шестого флеша хватает чуть более чем полностью для решения большинства задач, в том числе и для нашей задачи, его вполне хватит. Вторая причина не столь важна, но тоже приятна – крайне малый размер среды разработки.
Вот процесс создания флешки (21Mb):
В лучшем качестве это видео можно скачать здесь (43Mb)
Чтобы отследить действенность каждого отдельного буклета, можно вставлять в него ссылку с редиректом и смотреть по рефереру
Вот, собственно, такие несложные манипуляции следует проделать, чтобы создать буклет. Однако, самое главное, чтобы он был скачан. Для этого стоит уделить внимание расположению ссылки для скачки и стимулам для самого процесса скачивания.
Однозначно стоит сделать красочную кнопку с надписью “Download Viagra”, “More Information” и выдавать ее после покупки. Можно использовать этот буклет как скидочный купон, сделав баннер и написав там условия.
Можно придумать еще с десяток способов использования таких буклетов. С этим Вы уже справитесь сами.
Давайте рассмотрим статистику используемых браузеров, по состоянию на октябрь 2010 года, 30% посетителей порталов wiki пользуются браузером Mozilla Firefox. Статистика Wiki была выбрана потому, что она достаточно реально отражает состояние вещей. Можно воспользоваться статистическими данными от w3.org, там, кстати, Firefox использует 45% пользователей, но эти данные не столь точно отражают реальную ситуацию, так как w3.org посещает гораздо более узкий круг участников Интернет сообщества. В любом случае цифра достаточно велика, чтобы потратить несколько минут своего времени, и собрать дополнение для данного браузера, которое поспособствует возвращению покупателя на наш магазин.
Сначала создадим папку, в которой будут хранится файлы нашего дополнения. В моем случае это «BuyViagra»
Теперь зайдем в эту папку, и создадим файл «install.rdf», это заголовочный файл нашего дополнения, впишем в него следующее содержимое:
<?xml version=»1.0″?>
<RDF xmlns=»http://www.w3.org/1999/02/22-rdf-syntax-ns#»
xmlns:em=»http://www.mozilla.org/2004/em-rdf#»>
<Description about=»urn:mozilla:install-manifest»>
<em:id>уникальный идентификатор</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>
<!— Target Application this extension can install into,
with minimum and maximum supported versions. —>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>2.0</em:minVersion>
<em:maxVersion>3.*</em:maxVersion>
</Description>
</em:targetApplication>
<!— Front End MetaData —>
<em:name>название дополнения</em:name>
<em:description>краткое описание дополнения</em:description>
<em:creator>имя автора</em:creator>
<em:homepageURL>домашняя страница дополнения</em:homepageURL>
</Description>
</RDF>
Здесь:
- уникальный идентификатор – или адрес электронной почты, или GUID, без разницы, лишь бы был уникальным
- 1.0 – версия дополнения
- 2.0 – номер версии Firefox, начиная с которой дополнение будет корректно работать. Т.е. пользователи с версией Firefox ниже указанной при попытке установить плагин будут получать сообщение о несовместимости
- 3.* — номер версии Firefox, по которую дополнение будет корректно работать. Т.е. пользователи с версией Firefox выше указанной при попытке установить плагин будут получать сообщение о несовместимости. Звездочка говорит о том, что дополнение совместимо со всеми подверсиями версии 3. (очень мал шанс, что такой простой плагин что-то умудрится сломать, если станет несовместим с последними подверсиями 3-й версии фаерфокса, поэтому ставим такой запас на будущие версии. Все дело в том, что автоматические обновления предусмотрены только для плагинов, которые размещены на сайте мозиллы, и если пользователь обновит свой браузер, и дополнение станет несовместимым по описанию в файле «install.rdf», то он ни каким образом не сможет обновить его, кроме как зайдя на Ваш сайт, и скачав новую версию вручную)
Остальные пункты, я надеюсь, не нуждаются в пояснениях.
Теперь создаем в папке нашего дополнения папку «chrome», и в папке «chrome» создаем папку «content».
В корневой папке рядом с файлом «install.rdf» создадим еще один файл с названием «chrome.manifest». Пока что запишем в него всего одну строчку:
Здесь:
- content – указывает тип данных
- buyviagra – название пакета (рабочее название дополнения, так сказать)
- chrome/content/ — путь к содержимому (слеш на конце обязателен)
Возвращаемся в папку «content» и создаем в ней файл с расширением «.xul», это файл разметки интерфейса, по структуре все тот же xml с примочками (желающим изучить данный формат можно начать, например, с http://www.xul.ru/). В моем случае название файла — «buyv.xul».
Внутри файла пишем следующее:
<?xml version=»1.0″?>
<?xml-stylesheet href=»chrome://buyviagra/skin/bvstyle.css» type=»text/css»?>
<overlay id=»bvOverlay» xmlns=»http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul»>
<statusbar id=»status-bar»>
<statusbarpanel id=»bv_statusbar_panel»
insertbefore=»statusbar-display»>
<box id=»bv_statusbar»
title=»Buy viagra»
width=»16″
height=»16″
tooltiptext=»Click me to buy viagra»
onclick=»openUILink(‘https://www.rxpblog.com/’);»/>
</statusbarpanel>
</statusbar>
<toolbarpalette id=»BrowserToolbarPalette»>
<toolbarbutton
class=»toolbarbutton-1″
id=»bv_toolbar_button»
label=»Buy viagra»
tooltiptext=»Click me to buy viagra»
oncommand=»openUILink(‘https://www.rxpblog.com/’);»/>
</toolbarpalette>
</overlay>
Здесь:
- <?xml-stylesheet href=»chrome://buyviagra/skin/bvstyle.css» type=»text/css»?> — подключение таблицы стилей. Как Вы уже, наверное, догадались, buyviagra в пути к файлу, это ни что иное, как название пакета, которое мы указали в «chrome.manifest»
- tooltiptext – строка, которая выводится при наведении курсора мыши на кнопку
- id – идентификационные имена элементов, нас интересуют только «bv_statusbar» и «bv_toolbar_button» далее мы пропишем для них стили
Итак, что же все таки реализует этот файл? Все просто, в этом файле мы описали две кнопочки, одна из которых будет выводится как кнопка панели навигации (будет присутствовать в наборе кнопок, которые можно вытащить в эту панель, да-да, то самое окошко с кнопками, которое появляется при правом клике на панели навигации и выборе пункта меню «Настроить»), вторая кнопка будет выводится в нижнем левом углу окна. При клике на любую из кнопок осуществляется переход по указанному адресу.
Мы создали каркас из двух кнопок, давайте обтянем его кожей.
В папке «chrome» рядом с папкой «content» создаем новую папку «skin». В папке «skin» мы создаем тот самый CSS файл, который указали при написании .xul файла.
Содержимое файла таково:
#bv_statusbar {
background: url(«chrome://buyviagra/skin/stbar.png») 0 0 no-repeat;
}
#bv_toolbar_button {
list-style-image: url(«chrome://buyviagra/skin/toolb.png»);
}
Теперь на наши кнопки будут отображаться в виде соответствующих картинок, которые размещаем рядом с CSS файлом. Так же как и в .xul файле, пути указаны в формате «chrome://имя пакета/путь к файлу».
Возвращаемся в корневую папку нашего дополнения, открываем файл «chrome.manifest» и дописываем к той одной строчке, которую мы вписали ранее, еще три строки:
overlay chrome://browser/content/browser.xul chrome://buyviagra/content/buyv.xul
skin buyviagra classic chrome/skin/
style chrome://global/content/customizeToolbar.xul chrome://buyviagra/skin/bvstyle.css
Здесь:
- overlay chrome://browser/content/browser.xul chrome://buyviagra/content/buyv.xul – вставляем свои кнопки в интерфейс браузера
- skin buyviagra classic chrome/skin/ — добавляем к пакету buyviagra скин, находящийся в папке chrome/skin/, и даем ему название classic
- style chrome://global/content/customizeToolbar.xul chrome://buyviagra/skin/bvstyle.css – добавляем классы из своей таблицы стилей в таблицу браузера (необходимо для корректного отображения нашей кнопки в списке элементов доступных для перетаскивания на панель навигации)
Теперь сжимаем сождержимое корневой папки нашего дополнения в zip архив и меняем расширение полученного файла c .zip на .xpi (обращаю Ваше внимание, нужно сжимать именно содержимое корневой папки, а не саму папку)
Все, наш плагин готов, его можно смело размещать для скачивания на своем сайте. Если пользователь Firfox-а попробует его скачать, то для него автоматически откроется диалог установки плагина.
Можно просто поставить буклет и ссылку на плагин на сайте Вашего магазина, а можно пойти дальше, и распространить их по различным тематическим ресурсам, справочным сайтам и прочим местам скопления заинтересованных пользователей. Таким образом, мы создали не просто несколько «примочек» для собственного сайта, а мощный инструмент по привлечению нового пользователя, который является своеобразным симбиозом баннерной рекламы и дорвея.
В заключение хочу сказать, что возвраты, это достаточно большой источник покупателей, так, например, после ликвидации одного из своих магазинов я перенаправил редирект по буклетам этого магазина на другую, еще не раскрученную площадку, и сразу же получил около 1/5 части от количества еженедельных покупок на исходном магазине. Согласитесь, ради этого стоит потратить несколько часов своего времени.
Ссылки на примеры и исходники:
- Пример буклета (.swf)
- Пример буклета (.exe)
- Пример плагина для Firefox (.xpi)
- Пример плагина для Firefox (.zip)
- Исходник шаблона буклета (.psd — Photoshop)
- Исходник буклета (.fla — Flash)
- Видеозапись создания шаблона буклета в фотошопе
- Видеозапись создания буклета во Flash MX
PS: Всем удачи. И многих Вам ребилов! 🙂
Автор статьи: Shadefirst.