Урок 9

Продуктовый сайт

Схема и компоненты сайта для автоматизированной продажи информационных продуктов
Время прохождения:

1 час
  • Пройдено 28,56% 28,56%
Задача урока:

Показать подробную схему сайта, который является основой системы продаж.

Продуктовый сайт — это сайт, который исчерпывающе описывает продукт и помогает посетителю принять решение о покупке. При этом процесс покупки может происходить любым способом, в том числе в шоуруме или по телефону.
Созданный мной продуктовый сайт для Tactic.pro содержал полное маркетинговое описание онлайн-курса, некоторую организационную информацию, закрытый раздел с онлайн-курсом и подписные формы, которые позволяли подписаться на мини-курс и попробовать продукт. Все это упрощало подписчикам принятие решения о покупке.

Ниже приведена схема продуктового сайта Tactic.pro, который был ядром моей автоматизированной системы продаж:

Схема продуктового сайта для автоматизации продаж онлайн-курса Tactic.pro (ссылка на страницу целиком: https://drive.google.com/file/d/1Jve4mapGqYkh1lFzp_DDDetl3D1lEB4x/view?usp=sharing)

Обратите внимание, что страницы полного сайта делятся по своему назначению:

Продуктовый сайт:

— Главная страница;
— Открытые информационные страницы;
— Статейные информационные страницы;
— Страница регистрации;
— Страница авторизации;
— Страницы учебного раздела (онлайн-курс).

Туннель для сбора подписной базы:

— Подписная страница на мини-курс;
— Страницы благодарности за подписку;
— Страницы мини-курса;
— Страница для сбора отзывов;
— Прокладки для отслеживания эффективности каналов трафика.

Туннель для обучения продукту:

— Подписная страница с приглашением;
— Закрытые информационные страницы.

Туннель для проведения продаж:

— Страница с продающим видео;
— Продающая страница;
— Страница с видеопояснением;
— Страницы благодарности за покупку;
— Страница старта активации;
— Страница завершения активации;
— Страница ввода пин-кода.

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

Когда вы будете смотреть скриншоты страниц сайта Tactic.pro, помните, что дизайн сайта я менял в процессе развития проекта. А поскольку скриншоты страниц я делал в разное время, то по дизайну они могут отличаться. Но это только подтверждает, что проект развивался, а не застаивался в одной поре.

 

Главная страница

Главную страницу сайта я делал конверсионной страницей. Это значит, что после её просмотра, посетитель должен был либо заинтересоваться и пойти читать другие страницы, либо подписаться на мини-курс. То есть, главная страница сайта должна была сконвертировать посетителя в какое-то действие.

Поэтому основная цель главной страницы сайта — это конверсия посетителя в переход к изучению других страниц, либо в подписку на мини-курс. И с этой целью главная страница отлично справлялась, о чём свидетельствует и низкий показатель отказов.

Аккаунт Яндекс Метрики проекта Tactic.pro за период с 01.03.2013 по 31.12.2015

На главной странице сайта я описал преимущества онлайн-курса, технические характеристики и отзывы, а также разместил подписную форму на бесплатный мини-курс «Работа с наиболее опасными укрытиями». Это позволило рассказывать о продукте прямо с главной страницы сайта и одновременно собирать подписную базу.

Главная страница сайта, которая фокусировала посетителей на онлайн-курсе и за счёт этого давала более высокую конверсию в подписку

Конверсию в подписку главная страница давала благодаря комбинации подписных форм, которые стояли внизу страницы, а также открывались в поп-апе спустя 15-30 секунд после захода посетителя на сайт. Показатель конверсии при этом, колебался от 1 до 17,96%, в зависимости от привлекаемой аудитории.

Улучшенная версия главной страницы сайта, которая также фокусировала посетителей на онлайн-курсе и давала высокую конверсию в подписку (использовалась до конца 2015 года включительно), (ссылка на страницу целиком: https://drive.google.com/file/d/1tLec2pH34ibD0SrDGux8333Veg4y41VW/view?usp=sharing)

В связи с тем, что позиционирование проекта Tactic.pro менялось, то в конце 2015 года пришлось изменить сайт и методы продвижения проекта. Смена сайта и методов была вызвана необходимостью акцентировать внимание на развитии сообщества Tactic.pro, вместо развития онлайн-курса. Я уже занимался другим проектом и готовил Tactic.pro к передаче своим ученикам.

Версия главной страницы сайта с конца 2015 года, которая фокусировала посетителей на сообщество мужчин и проведение совместных учебных тактических операций (ссылка на страницу целиком: https://drive.google.com/file/d/1ypGO-D4jujKt_GaQK8WbgRbMbkxw_Lzp/view?usp=sharing)

Смена сайта и методов отразилась на доходах проекта. Зато теперь в развитии проекта участвовало гораздо больше людей. Это позволяло мне думать, что построенное сообщество сможет добиться большего. Новый сайт отлично описывал принципы сообщества Tactic.pro и доносил его суть.

 

Открытые информационные страницы

Основная цель открытой информационной страницы — предоставить посетителю организационную информацию в максимально удобном виде.

На открытых информационных страницах я описывал различные организационные аспекты вроде миссии, ценностей, способов оплаты, методов шифрования, контактов и прочего. Открытые информационные страницы всегда были доступны по ссылке на сайте.

Открытая информационная страница, описывающая особенности курса Tactic.pro (ссылка на страницу целиком: https://drive.google.com/file/d/1SMRWtmxxxpzPPf3CUCTxvk2UvzhfrtRH/view?usp=sharing)

 

Статейные информационные страницы

Основная цель статейной информационной страницы — предоставить посетителю учебную и новостную информацию в максимально удобном виде.

В качестве статейных информационных страниц я использовал обычный блог (но можно было публиковать статьи списком). В блоге я публиковал видеоуроки, отчёты с тренингов, интервью, новости и другой полезный контент. Блог со статейными информационными страницами был доступен по ссылке на сайте.

Статейная информационная страница в блоге (ссылка на страницу целиком: https://drive.google.com/file/d/1MiYfJ1nTq-rjYt1vaRgfpOQTILf3sKpt/view?usp=sharing)

Блог также способствовал привлечению SEO-трафика. Но стоит отметить, что за 3 года я не обнаружил сильного прироста трафика благодаря блогу. Скорее это был вспомогательный трафик. Без этого трафика Tactic.pro легко бы справился. Намного больше трафика давали рекомендации подписчиков и клиентов, которые пользовались продуктом.

Но с другой стороны, я и не ставил перед собой цель создать блог для привлечения SEO-трафика. Блог Tactic.pro — это всегда было средством информирования. А вспомогательный SEO-трафик благодаря блогу — это приятный бонус.

 

Подписные формы

Основная цель подписных форм — сконвертировать посетителя сайта в подписчика. Не путайте с подписной страницей, где подписная форма — это неотъемлемая часть страницы. На сайте же, из-за большого объёма информации и количества ссылок, конверсия в подписку теряется, поэтому формам уделяется особое внимание.

На продуктовой части сайта Tactic.pro я разместил более 10 подписных форм. Формы стояли везде: на главной странице; на информационных страницах; в блоге; в каждой статье блога. Также форма открывалась в поп-ап окне, спустя 15-30 секунд после захода посетителя на сайт.

Подписная форма для получения мини-курса «Работа с наиболее опасными укрытиями», появляющаяся спустя 15-30 секунд после посещения сайта, а также при уходе с сайта

Все подписные формы были похожи, т. к. все были заточены на получение мини-курса: «Работа с наиболее опасными укрытиями». Я сделал это для того, чтобы посетитель как можно чаще натыкался на подписные формы. И как только посетитель заинтересовался мини-курсом, он мог сразу же подписаться.

Такой подход отлично работал. Каждая подписная форма давала небольшой ручеёк подписчиков, образуя совокупную конверсию от 1 до 17,96%, в зависимости от привлекаемой аудитории.

 

Страницы регистрации и авторизации

Основная цель страниц регистрации и авторизации — это распределение уровней доступа к учебным материалам с помощью идентификации оплативших пользователей. Проще говоря, это нужно, чтобы доступ к онлайн-курсу мог получить только оплативший пользователь.

Страница регистрации имела всего 6 полей. Регистрационные данные пользователь получал на указанную им эл. почту, что ещё раз подтверждало ранее указанные им данные.

Зарегистрировавшись, пользователю присваивался уровень доступа «Мини-курс». Этот уровень доступа позволял просматривать только мини-курс «Работа с наиболее опасными укрытиями». Но когда пользователь приобретал доступ к продвинутому онлайн-курсу, то соответственно, получал пожизненный доступ к материалам онлайн-курса. По сути, покупая курс, пользователь приобретал пожизненный доступ к его материалам.

С одной стороны, это вроде как снижало конверсию. Но с другой стороны, это собирало базу особенно мотивированных пользователей. Ведь они не только подписались и подтвердили подписку, но ещё и зарегистрировались. Я оправданно полагал, что мотивации к изучению тактики у таких пользователей намного больше.

Страница с формой регистрации на сайте Tactic.pro

Страница авторизации позволяла пользователям идентифицировать себя на сайте, вводя свои логин и пароль. Учитывая, что доступ к учебным материалам имели только зарегистрированные пользователи, авторизация позволяла идентифицировать пользователей и предоставлять им доступ к материалам, в соответствии с оплаченным ими уровнем доступа.

Страница авторизации на сайте Tactic.pro

Вам могло показаться, что верным решением было бы объединить регистрацию и подписку. Но в моём случае объединение усложняло процесс подписки настолько, что существенно снижало конверсию. Поэтому я сначала давал посетителям возможность подписаться на мини-курс, а при получении к нему доступа, посетителям нужно было регистрироваться.

Таким образом, я с большей вероятностью получал подписчика, а с меньшей вероятностью пользователя. Зато я мог позже обратиться к подписчику и, предложив ему полезный контент, сделать его пользователем. А если посетителям сразу предлагалось зарегистрироваться, то отказов было больше, и я терял их навсегда.

Ещё одна положительная сторона от такого решения — это защита материала от пиратского распространения. Дело в том, что простая отправка ссылки на материал все равно вынуждала посетителя регистрироваться. А если человек отправлял ссылку с логином и паролем, то рисковал потерять доступ к своим платным материалам, если кто-то из новых пользователей сменил бы пароль.

 

База пользователей

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

База пользователей — это следствие от процесса регистрации. Когда пользователь регистрировался, а потом оплачивал и активировал продукт, ему присваивался уровень доступа, который позволял работать с тем или иным материалом.

База пользователей в административной части сайта Tactic.pro (ссылка на страницу целиком: https://drive.google.com/file/d/1d1RxWsEWwKEgVOogW0NwLivVos2Rj12J/view?usp=sharing)

Также прочтите тему «Страницы регистрации и авторизации».

 

Учебный раздел

Основная цель учебного раздела — обеспечить удобное место для самостоятельного изучения материалов курса. Настолько удобное, чтобы для пользователей онлайн-курс стал настольным пособием, к которому бы они регулярно обращались.

Для того, чтобы сделать учебный раздел максимально удобным и практичным, я основательно подготовил учебный материал. Сначала порезал учебные ролики на небольшие элементы, которые удобнее запоминать. Затем вычистил каждое видео, чтобы оставить только то, что имело значение для формирования навыка. После написал к каждому видео текстовое пояснение, чтобы акцентировать внимание на важном. И когда материал был готов, я составил такую структуру, работая с которой, человек быстрее понимал всю систему.

Такая продуманность делала курс по-настоящему эффективным учебным материалом. И теперь, чтобы курсом было удобно пользоваться, оставалось лишь сделать интуитивно понятный интерфейс.

Я выбрал классическую схему информационных страниц с боковым многоуровневым меню. Таким образом, в левой части экрана располагался сам учебный материал, а в правой части находилось меню.

Приветственная страница учебного раздела, изучив которую, пользователь мог понять, что такое онлайн-курс Tactic.pro и как им пользоваться

Поскольку меню было большим, я сделал его раскрытие поэтапным. Это значит, что сначала пользователь мог открыть только раздел первого уровня, потом второго, потом третьего и т. д. Такая особенность помогала пользователям фокусироваться на текущем разделе, а также видеть все разделы текущего уровня одновременно. Это способствовало развитию комплексного видения учебной программы.

Учебная страница продвинутого онлайн-курса (раздел «Индивидуальная подготовка», тема «Бесшумные перемещения по мелкой воде»)

В учебном разделе должно быть только самое необходимое. Чтобы ничто не отвлекало от процесса изучения, а наоборот, помогало осваивать предмет. Поэтому я сделал так, чтобы когда пользователь переходит в любой раздел курса, он видел только самую полезную информацию: главное меню, меню вложенности («хлебные крошки»), заголовок темы, текст, видео и меню справа с индикацией открытой темы (черный жирный шрифт).

Другая учебная страница продвинутого онлайн-курса (раздел «Индивидуальная подготовка», тема «Бесшумные перемещения в густом кустарнике»)

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

Отмечу, что сначала курс можно было просматривать на компьютерах, смартфонах и планшетах. Но позже Google Диск, на котором хранилось всё видео курса, перестал транслировать часть видео на мобильных устройствах. Поэтому полноценно изучать курс оставалось только на компьютерах. Но это все равно никак не повлияло на продажи.

Также стоит отметить, что доступ к учебному разделу предоставлялся после авторизации. И чтобы приобрести доступ, в туннеле для проведения продаж предусматривался процесс активации. О процессе активации я расскажу более подробно в соответствующем разделе.

 

Программное обеспечение

Продуктовый сайт Tactic.pro я построил на CMS Joomla (официальный сайт: joomla.org) и фреймворке Gantry (официальный сайт: gantry.org). Но сейчас я не считаю этот комплект хорошим решением, т. к. слишком это неповоротливая комбинация.

Чтобы построить сайт и туннели с помощью связки Joomla-Gantry, мне приходилось отдельно настраивать шаблон, отдельно страницы, отдельно компоненты, отдельно модули, отдельно материалы, отдельно меню, отдельно доступы. Всё это занимало очень много времени.

Административная часть сайта Tactic.pro, построенным на CMS Joomla

Но вначале 2013 года мне такое решение виделось наиболее подходящим. Ведь я понимал как с помощью Joomla и Gantry построить то, что мне было нужно. Использовать же WordPress, на тот момент, было слишком затруднительно. Тогда этот движок ещё не был так развит и не давал нужный набор функционала.

Сегодня же для построения продуктового сайта и системы продаж, наоборот, лучше использовать WordPress (официальный сайт: http://ru.wordpress.org). В связке с темой и плагином от Elegant Themes — Divi (официальный сайт: elegantthemes.com). Или с Elementor’ом (официальный сайт: elementor.com). Можно также использовать и более профессиональный маркетинговый пакет для WordPress — Thrive Themes (официальный сайт: thrivethemes.com).

Для приёма платежей подойдет WooCommerce (официальный сайт: woocommerce.com), который поддерживает все возможные способы приёма оплаты, в т. ч. и российские. С помощью WooCommerce можно продавать как цифровые, так и материальные товары. Можно продавать через корзину, а можно докупить плагин и продавать подписку.

Лично я предпочитаю связку: WordPress, Divi, WooCommerce. Либо WordPress, Thrive, WooCommerce. WordPress идёт на русском языке и скачивается бесплатно. Divi также на русском языке, но полный безлимитный пакет уже стоит 249 долларов. В пакет входит множество профессиональных тем, визуальный редактор, подписные формы и социальные кнопки. WooCommerce также на русском языке и тоже скачивается бесплатно.

 

Сервисы аналитики

Ко всем страницам сайту Tactic.pro я подключил две аналитики: Яндекс Метрика (официальный сайт: metrika.yandex.ru) и Google Analytics (официальный сайт: analytics.google.com). Всё основное время я пользовался Яндекс Метрикой. Google Analytics использовал как вспомогательный инструмент, а также для повышения эффективности рекламы в Google AdWords.

Все цели я настраивал в Яндекс Метрике. На этапе тестирования, целей было много. Цели покрывали всю систему продаж. Я замерял целями следующие действия посетителей: количество просмотров страниц, подтверждение подписки, переходы на нужные страницы, просмотр того или иного контента, а также многое другое.

Объёмы трафика Tactic.pro с 01.03.2013 по 31.12.2015 года в аккаунте Яндекс Метрики

Но со временем я обнаружил, что многие замеряемые мной цели ни на что не влияют. Поэтому я выявил те цели, которые действительно помогали понять, как повысить продажи, и ориентировался только на них. Это были такие цели, как: «Подписался», «Заказал», «Оплатил».

Но позже я обнаружил, что данные этих целей недостаточно точны, т. к. данные Яндекс Метрики расходились с более точными данными: GetResponse, где собиралась подписная база и E-autopay, где я проводил платежи и фиксировал оплативших. Такое же расхождение было и с Яндекс Директом, и с Таргетом Вконтакте, и с Google AdWords.

Поэтому в Яндекс Метрике я оставил только цель — «Подписался», — чтобы отслеживать общее число подписчиков по каналам. Для более точного сбора данных, я использовал реферальную ссылку и utm-метку сервиса E-autopay, которыми наделял каждый отдельный рекламный канал. Таким образом, мне было видно сколько пришло подписчиков с каждого рекламного канала и кто из них потом приобрёл курс.

Чтобы не путаться с данными, я сделал таблицу на Google Диске, куда включил только те показатели, которые отражают реальное положение дел в моей системе продаж. Раз в месяц я вручную собирал данные напрямую из сервисов и вносил их в таблицу. Так я получал наиболее точные данные с цифрами, конверсиями и ROI, разграниченные по рекламным каналам.

Таблица KPI с показателями проекта Tactic.pro за октябрь, ноябрь, декабрь 2014 года

Теперь поясню, что значит каждое поле:

«Каналы»: веб-сервис, с которого шёл трафик;
«Лид 0»: посетители;
«Лид 1»: подписчики;
«Подписка»: конверсия в подписку в %;
«Покупки»: количество покупок;
«Продажа»: конверсия в продажу в %;
«Прибыль»: доход в рублях;
«Расход»: расход в рублях (все затраты на проект, в т. ч. и по каналам);
«Цена подписчика»: во сколько мне обходится привлечение одного подписчика (в рублях);
«Цена покупки»: во сколько мне обходится привлечение одной покупки (в рублях);
«ROI»: коэффициент возврата инвестиций в %, иными словами, сколько я зарабатываю на каждый вложенный рубль.
«На автомате» (или «Органика»): показатели, которые проект генерирует без специальных вложений (справедливости ради, в это поле я вносил все расходы, которые не имели отношения к рекламным каналам, например, «оплата хостинга и продление домена»).

В Яндекс Метрике я брал общее количество посетителей и подписчиков по каналам. В GetResponse я брал общее количество подписчиков и сверял этот показатель с Яндекс Метрикой. В E-autopay я брал количество посетителей и оплат по каналам. В Яндекс Директе я брал рекламный расход, а также количество переходов, которые сверял с Яндекс Метрикой. В Таргете Вконтакте, в Google AdWords’е и в других рекламных каналах, я также брал рекламный расход и количество переходов, а потом также сверял их с Яндекс Метрикой.

Таким образом, собрав все данные в одной таблице, я видел полную картину того, что происходит в моей системе продаж.

Таблица KPI с показателями проекта Tactic.pro за июль 2014 года

На этом скриншоте сработал только один канал — Яндекс Директ. Это произошло потому, что запуск я делал только для сегмента подписчиков, которые пришли с Яндекс Директа.

Материалы для скачивания

Смотреть на YouTube

Урок 9. Продуктовый сайт

Смотреть схему сайта

Строение сайта, который принёс более 10 млн
h

Смотреть страницы сайта, v.1

Страницы первой версии продуктового сайта
h

Смотреть страницы сайта, v.2

Страницы второй версии продуктового сайта
h

Смотреть страницы сайта, v.3

Страницы третьей версии продуктового сайта

Слушать в аудиоформате

Урок 9. Продуктовый сайт