Урок 8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Аккаунт Яндекс Метрики проекта за период с 01.03.2013 по 31.12.2015.
На главной странице сайта я описал преимущества онлайн-курса, технические характеристики и отзывы, а также разместил подписную форму на бесплатный мини-курс «Работа с наиболее опасными укрытиями». Это позволило рассказывать о продукте прямо с главной страницы сайта и одновременно собирать подписную базу.
Главная страница сайта, которая фокусировала посетителей на онлайн-курсе и за счёт этого давала более высокую конверсию в подписку. В нашу платформу уже встроены готовые главные страницы, сделанные по новым технологиям и имеющие более высокие показатели конверсии.
Конверсию в подписку главная страница давала благодаря комбинации подписных форм, которые стояли внизу страницы, а также открывались в поп-апе спустя 15-30 секунд после захода посетителя на сайт. Показатель конверсии при этом, колебался от 1 до 17,96%, в зависимости от привлекаемой аудитории.
Улучшенная версия главной страницы сайта, которая также фокусировала посетителей на онлайн-курсе и давала высокую конверсию в подписку (использовалась до конца 2015 года включительно), (ссылка на страницу целиком: https://drive.google.com/file/d/1tLec2pH34ibD0SrDGux8333Veg4y41VW/view?usp=sharing). В нашу платформу уже встроены готовые главные страницы, сделанные по новым технологиям и имеющие более высокие показатели конверсии.
В связи с тем, что позиционирование проекта менялось, то в конце 2015 года пришлось изменить сайт и методы продвижения проекта. Смена сайта и методов была вызвана необходимостью акцентировать внимание на развитии сообщества проекта, вместо развития онлайн-курса. Я уже занимался другим проектом и готовил текущий проект к передаче своим ученикам.
Версия главной страницы сайта с конца 2015 года, которая фокусировала посетителей на сообщество мужчин и проведение совместных учебных тактических операций (ссылка на страницу целиком: https://drive.google.com/file/d/1ypGO-D4jujKt_GaQK8WbgRbMbkxw_Lzp/view?usp=sharing). В нашу платформу уже встроены готовые главные страницы, сделанные по новым технологиям и имеющие более высокие показатели конверсии.
Смена сайта и методов отразилась на доходах проекта. Зато теперь в развитии проекта участвовало гораздо больше людей. Это позволяло мне думать, что построенное сообщество сможет добиться большего. Новый сайт отлично описывал принципы сообщества проекта и доносил его суть.

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

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

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

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

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

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

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

Статейная информационная страница в блоге (ссылка на страницу целиком: https://drive.google.com/file/d/1MiYfJ1nTq-rjYt1vaRgfpOQTILf3sKpt/view?usp=sharing). В нашу платформу уже встроены готовые статейные информационные страницы, сделанные по новым технологиям и имеющие более высокие показатели конверсии.
Блог также способствовал привлечению SEO-трафика. Но стоит отметить, что за 3 года я не обнаружил сильного прироста трафика благодаря блогу. Скорее это был вспомогательный трафик. Без этого трафика проект легко бы справился. Намного больше трафика давали рекомендации подписчиков и клиентов, которые пользовались продуктом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

База пользователей в административной части сайта проекта (ссылка на страницу целиком: https://drive.google.com/file/d/1d1RxWsEWwKEgVOogW0NwLivVos2Rj12J/view?usp=sharing). В нашу платформу уже встроены готовые системы управления базами данных пользователей и клиентов, сделанные по новым технологиям и более удобные.
Также прочтите тему «Страницы регистрации и авторизации».

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

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

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

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

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

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

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

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

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

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

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

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

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

С помощью нашей платформы можно продавать как цифровые, так и материальные товары. Можно продавать через корзину, через отдел продаж, с помощью подписки или любым другим способом. Более подробную информацию можно найти в разделе «Воронка продаж» или в других разделах нашего сайта.

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

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

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

Объёмы трафика проекта с 01.03.2013 по 31.12.2015 года в аккаунте Яндекс Метрики. В нашу платформу уже встроен готовый сервис аналитики, но вы также сможете использовать Яндекс Метрику, Google Аналитику или любой другой сервис.
Но со временем я обнаружил, что многие замеряемые мной цели ни на что не влияют. Поэтому я выявил те цели, которые действительно помогали понять, как повысить продажи, и ориентировался только на них. Это были такие цели, как: «Подписался», «Заказал», «Оплатил».

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

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

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

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

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

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

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

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

Получите платформу

С готовой трёхуровневой автоматизированной системой продаж нового поколения
Безрисковая гарантия возврата денег!