Как создать приложение воронки продаж с помощью Vue.js

Как создать приложение воронки продаж с помощью Vue.js

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

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

Если вы не хотите платить за подписку, вам придется создать воронку продаж самостоятельно. Исторически кодирование собственной воронки было более дорогостоящим и занимало много времени. Тем не менее, мы живем в 2019 году. Технологии, используемые веб-разработчиками, значительно улучшились за последние 10 лет.

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

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

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

В этом руководстве я покажу, как с помощью Vue построить собственную простую воронку продаж, которая поможет вам продвигать продукт или услугу. Мы создадим простую страницу воронки продаж для сбора лидов для списка рассылки.

Необходимый уровень навыков

В этой статье предполагается, что у вас есть хотя бы твердое понимание:

Современного JavaScript ES6+

Навыки новичка во Vue.js

Вам понадобится установить в системе современную версию Node.js и инструмент Vue CLI. На момент написания этой статьи текущим LTS был Node v10.15.1. Текущая версия Vue CLI — v3.4.1. Моя личная рекомендация — использовать npm для поддержания актуальности среды Node.js. Чтобы установить инструмент CLI Vue.js, выполните команду:

О проекте

Вы можете получить полный доступ к этому проекту на GitHub. Также доступна онлайн демо-версия этого проекта. Мы будем использовать Bootstrap-vue в качестве основного CSS-фреймворка. Пожалуйста, не забудьте прочитать документацию, если вы новичок в этой среде.

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

Как создать приложение воронки продаж с помощью Vue.js

Страница захвата фиксирует адрес электронной почты посетителя и сохраняет его в списке адресов электронной почты. В то же время она перемещает посетителя на следующую страницу. Это просто. Вы даже можете сделать это, используя обычный HTML, CSS и JavaScript. Почему же мы делаем это во Vue.js?

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

Vue.js — это идеальное решение, которое позволит нам создавать повторно используемые компоненты, которые будут просты в обслуживании и обновлении. Кроме того, мы можем упаковать компоненты и опубликовать их в реестре npm, сделав их доступными для всех наших будущих проектов воронки.

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

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

Таким образом, вы можете упаковать проект и позже установить из него другой проект воронки. Я также предоставлю дополнительные ссылки на источники по упаковке проекта Vue.js и его развертывания на частном сервере npm. Помня об этом, давайте продолжим и начнем строить наш проект библиотеки воронки продаж!

Настройка проекта

Откройте консоль терминала и создайте новый проект Vue.

Используйте следующие настройки:

Features: Babel, Router, Linter (опционально)

Router History Mode: Yes

Linter: ESlint + Prettier, Lint on Save, Lint and fix on commit (или выберите параметры по своему усмотрению)

config files: в выделенном файле конфигурации

Далее установите Bootstrap-Vue:

Далее откройте проект в своем любимом редакторе. Если у вас есть Visual Studio Code, вы можете запустить его следующим образом:

Обновите src\main.js следующим образом:

Это настроит в проекте фреймворк Bootstrap CSS. Затем обновите src\App.js следующим образом:

Переименуйте следующие файлы, как показано ниже:

src/views/Home.vue => Optin.vue

src/views/About.vue => Thank-you.vue

Замените существующий код src/views/Optin.vue, как показано ниже:

Обновите код src\router.js следующим образом:

Теперь вы можете запустить сервер проекта с помощью команды npm run serve. Откройте браузер и проверьте, чтобы адреса localhost:8080 и localhost:8080/thank-you работали нормально. Если это так, вы можете перейти к следующему разделу. Если нет, проверьте настройки.

Текстовое содержимое

Первый компонент, который мы создадим, — это текстовый компонент. Мы можем просто использовать теги <h1> и <p>. Однако нам нужны предустановленные элементы, к которым уже применяются стили. Нам нужно быстро, за 10 минут или меньше, создать страницу, не задумываясь о стилях.

Удалите компонент src/components/HelloWorld.vue и создайте на его месте TextComponent.vue. Скопируйте в него следующий код:

Давайте проверим это, внеся следующие изменения в src/views/Optin.vue:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Обновите страницу. Вы должны увидеть что-то вроде этого:

Как создать приложение воронки продаж с помощью Vue.js

Возможно, вы заметили, что тег абзаца будет отображать содержимое по-другому. Мы используем атрибут v-html, чтобы позволить пользователям передавать стили HTML, такие как <strong> и <u>. Вы можете проверить это, добавив этот фрагмент кода:

Мы создали простой текстовый компонент, который поставляется с готовым стилем. Реквизит variant используется для определения типа текстового тега, который должен быть отображен. У нас также есть свойство topMargin, которое позволит нам легко размещать текстовые элементы.

Предполагая, что все порядке, давайте перейдем к следующей задаче. Предположим, что нам нужны разные стили для заголовка и подзаголовка. Нам нужен способ указать компоненту TextContent изменить стили. Обновите код OptinForm.vue следующим образом:

Мы добавили новое свойство с именем theme. Нам нужно объявить это новое свойство в TextComponent.vue. Обновите код следующим образом:

Когда вы обновите страницу, у вас должно получиться что-то вроде этого:

Как создать приложение воронки продаж с помощью Vue.js

В этом примере мы объявили несколько объектов стиля red и blue. Пользователи могут указать, какую тему они хотят использовать. Вы можете добавлять другие свойства к объектам стиля и создавать больше объектов стиля.

Если вы хотите пойти дальше, вы можете вывести объекты стиля так, чтобы они были отделены от кода. Вы можете создать что-то вроде файла theme.css, который будет легче настроить. Давайте теперь рассмотрим следующий компонент.

Форма захвата

В форме захвата происходит действие по захвату лидов. Мы просим посетителей предоставить нам свой адрес электронной почты в обмен на ценный ресурс. Создайте файл src/components/OptinForm.vue и вставьте в него следующий код:

Просмотрите этот код, обратите особое внимание на использованное свойство. Чтобы продемонстрировать, как используется этот компонент, просто обновите src/views/Optin.vue следующим образом:

Обратите внимание, что мы заменили текст “put image here” на фактический тег изображения. Мы также указали в компоненте OptinForm событие @submit, которое будет обрабатываться функцией handleSubmit. Если вы посмотрите на код OptinForm.vue, то увидите, что событие вызывается через этот код: this.$emit(«submit», this.form);.

Таким образом, мы отделили компонент OptinForm.vue. Мы можем легко написать собственный код, который отправляет адрес электронной почты на любую маркетинговую платформу по вашему выбору. Мой текущий фаворит — MailerLite. Вот их документация API о том, как добавить нового подписчика.

Вы можете использовать библиотеку, например Fetch или Axios, чтобы отправить информацию через API REST. Обновите страницу браузер и убедитесь, что страница захвата работает:

Как создать приложение воронки продаж с помощью Vue.js

На данный момент мы используем валидацию HTML. После ввода валидного адреса электронной почты пользователь должен быть перенаправлен на страницу thank-you. На данный момент это не так. Давайте исправим это в следующем разделе.

Видео-контент

Прежде чем заполнить страницу Thank-You.vue, нам нужно создать компонент src/components/VideoContent.vue. Вставьте в соответствующий файл следующий код:

Компонент VideoContent позволит вставлять любое видео с таких сайтов, как YouTube и Vimeo. Вы должны получить ссылку для вставки, чтобы это работало. URL для встраивания YouTube выглядит примерно так: https://www.youtube.com/embed/xxxxxxxxx

После того, как вы сохранили компонент, мы можем приступить к работе с src/views/Thank-you.vue. Замените весь существующий код этим:

Если вы обновите страницу http://localhost:8080/thank-you, у вас должно появиться следующее представление:

Как создать приложение воронки продаж с помощью Vue.js

Так как мы закончили с этим, давайте создадим еще один компонент, который немного сложнее. Он предназначен для страницы Optin.

Компонент таймера обратного отсчета

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

Срок до указанной даты

Фиксированное время (обычно через час или несколько минут), которое сбрасывается каждый день или для каждого нового сеанса

В этом случае мы сосредоточимся на создании первого варианта. Мы не собираемся на самом деле кодировать этот таймер, а возьмем его из реестра npm. Сначала вам нужно выйти с сервера Vue.js. Установите его следующим образом:

Затем создайте файл src/components/Countdowntimer.vue и вставьте в него следующий код:

Затем добавьте компонент CountdownTimer на страницу src/views/Optin.vue:

После внесения изменений вы можете запустить сервер. Ваша страница должна выглядеть так:

Как создать приложение воронки продаж с помощью Vue.js

Если у вас нет обратного отсчета, измените дату и убедитесь, что она установлена в будущем. Давайте теперь выполним последние действия.

Упаковка и публикация

Пока что мы создали базу для библиотеки воронки продаж. Вы можете продолжить добавлять компоненты, каждый с более настраиваемыми параметрами. Сейчас самое время поговорить об упаковке и релизе готовой воронки. Хотя можно запустить только что созданную воронку из нашего проекта Vue, лучше всего запустить ее в проекте Nuxt.js.

Заключение

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

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

Автор: Michael Wanyoike

Источник: https://www.sitepoint.com

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий