Воронка продаж — это онлайн-маркетинговый инструмент, созданный и предназначенный для сбора потенциальных клиентов и преобразования их в клиентов. Как правило, они конвертируются на 20-50% выше, чем обычные веб-страницы. Воронка продаж обычно состоит из страниц регистрации, форм заказа, корзин покупок, страниц оформления заказа и программного обеспечения для электронного маркетинга. Создание такой системы не прогулка в парке.
Обычный способ создания воронки продаж сегодня — это покупка ежемесячной подписки на платформе построения воронки продаж. Самый популярный провайдер в настоящее время взимает от 100 до 300 долларов. Есть и другие доступные варианты. Тем не менее, вы можете столкнуться с ограничениями или техническими проблемами с любым поставщиком, с которым вы работаете — некоторые более серьезные, чем другие.
Если вы не хотите платить за подписку, вам придется создать ее самостоятельно. Исторически кодирование собственной воронки было более дорогим и занимало много времени. Тем не менее, мы живем в 2019 году. Технология, используемая веб-разработчиками сегодня, значительно улучшилась за последние 10 лет.
Создать и развернуть веб-приложение проще и быстрее. У нас есть множество сторонних провайдеров, которые разрешают интеграцию на свои платформы через удаленные API. Это позволяет нам легко реализовывать мощные функции без необходимости писать код самостоятельно.
Преимущества владения собственным воронкообразным кодом означают, что ваш бизнес будет более устойчивым. Вы можете легко переключать серверы, если что-то не работает с вашим провайдером. Вы также можете легко расширить свой онлайн-бизнес, не встречая серьезных препятствий.
В этом уроке я покажу вам, как создать собственную простую воронку продаж с помощью Vue, которая поможет вам продвигать продукт или услугу, которую вы продаете потребителям. Мы создадим простую воронку сжимаемой страницы для сбора потенциальных клиентов для вашего списка рассылки.
Предпосылки
В этой статье предполагается, что у вас есть хотя бы твердое понимание:
Вам понадобится установить современную версию Node.js и инструмент Vue CLI в вашей системе. На момент написания этой статьи текущим LTS был Node v10.15.1. Текущая версия Vue CLI — v3.4.1. Моя личная рекомендация — использовать nvm для поддержания вашей среды Node.js в актуальном состоянии. Чтобы установить инструмент CLI Vue.js, выполните команду:
npm install @vue/cli О проекте
Вы можете получить полный доступ к этому проекту на GitHub . Также есть живая демонстрация этого проекта. Мы будем использовать Bootstrap-vue в качестве основного CSS-фреймворка. Пожалуйста, не забудьте прочитать документы, если вы новичок в этой среде.
Для этого проекта мы собираемся построить двухстраничную воронку, состоящую из дополнительной страницы — иначе говоря, страницы — и страницы благодарности. Настройка будет выглядеть примерно так:
Страница подтверждения фиксирует адрес электронной почты посетителя и сохраняет его в списке адресов электронной почты. В то же время он перемещает посетителя на следующую страницу. Это так просто. Вы даже можете сделать это, используя обычный HTML, CSS и JavaScript. Почему мы даже делаем это в Vue.js?
Причина в том, что мы могли бы захотеть создать разные типы воронок, рекламирующих один и тот же продукт или разные продукты. Мы не хотели бы повторять тот же код, который мы реализовали ранее, в другой последовательности.
Vue.js — это идеальное решение, которое позволит нам создавать повторно используемые компоненты, которые будут просты в обслуживании и обновлении. Кроме того, мы можем упаковать наши компоненты и опубликовать его в реестре npm, сделав его доступным для всех наших будущих проектов воронки.
Чтобы опубликовать нашу воронку, мы должны будем сделать это в рамках вроде Nuxt.js. Это потому, что Vue.js — это в основном технология слоя представления. Мы можем установить нашу библиотеку воронок продаж в проекте Nuxt.js. Nuxt.js — это более полный фреймворк, поскольку он позволяет запускать код как на стороне сервера, так и на стороне клиента. Он также поддерживает множество полезных функций, таких как SEO.
К сожалению, большинство шагов, упомянутых выше, невозможно выполнить в одном руководстве. Вместо этого мы создадим двухстраничную воронку. Я покажу вам, как спроектировать компоненты так, чтобы их было легко использовать повторно.
Таким образом, вы можете упаковать проект позже и установить его в другой проект последовательности. Я также предоставлю дополнительные ссылки в отношении упаковки проекта Vue.js и его развертывания на частном сервере npm.
Помня об этом, давайте продолжим и начнем строить наш проект библиотеки воронок!
Настройка проекта
Откройте консольный терминал и создайте новый проект Vue.
vue create vue-sales-funnel
Используйте следующие настройки:
- Особенности : Babel, Router, Linter (опционально)
- Режим истории маршрутизатора : Да
-
ESlint:ESlint+ESlint, Lint при сохранении, Lint и исправление при фиксации (или выберите нужные параметры) - файлы конфигурации : в специальных файлах конфигурации
Далее установите Bootstrap-Vue :
cd vue-sales-funnel npm install vue bootstrap-vue bootstrap
Далее откройте проект в вашем любимом редакторе. Если у вас есть код Visual Studio, вы можете запустить его следующим образом:
code .
Обновите src\main.js следующим образом:
import Vue from "vue"; import BootstrapVue from "bootstrap-vue"; import App from "./App.vue"; import router from "./router"; import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue/dist/bootstrap-vue.css"; Vue.config.productionTip = false; Vue.use(BootstrapVue); new Vue({ router, render: h => h(App) }).$mount("#app");
Это должно настроить фреймворк Bootstrap CSS в вашем проекте. Затем обновите src\App.js следующим образом:
<template> <div id="app"> <router-view /> </div> </template>
Переименуйте следующие файлы следующим образом:
-
src/views/Home.vue=>Optin.vue -
src/views/About.vue=>Thank-you.vue
Замените существующий код в src/views/Optin.vue следующим образом:
<template> <div class="optin"> <b-row> <b-col> <p>Squeeze Funnel Page</p> </b-col> </b-row> </div> </template> <script> export default { name: "optin" }; </script>
Обновите код в src\router.js следующим образом:
import Vue from "vue"; import Router from "vue-router"; import Optin from "./views/Optin.vue"; import ThankYou from "./views/Thank-you.vue"; Vue.use(Router); export default new Router({ mode: "history", base: process.env.BASE_URL, routes: [ { path: "/", name: "optin", component: Optin }, { path: "/thank-you", name: "thank-you", component: ThankYou } ] });
Теперь вы можете запустить сервер проекта с помощью команды npm run serve . Откройте браузер и проверьте ссылки localhost: 8080 и localhost: 8080 / thank-you работают как положено. Если это так, вы можете перейти к следующему разделу. Если нет, проверьте свою работу.
Текстовое содержимое
Первый компонент, который мы создадим, — это текстовый компонент. Мы можем легко использовать теги <h1> и <p> . Однако нам нужны предустановленные элементы, к которым уже применяется стиль. Нам нужно быстро создать страницу за 10 минут или меньше, не задумываясь о стилизации.
Удалите компонент src/components/HelloWorld.vue и создайте TextComponent.vue . Скопируйте следующий код:
<template> <div class="text-content" v-bind:style="{ marginTop: topMargin }"> <h1 class="header" v-if="variant === 'header'">{{ content }}</h1> <h2 class="subheader" v-if="variant === 'subheader'">{{ content }}</h2> <p class="paragraph" v-if="variant === 'paragraph'" v-html="content"></p> </div> </template> <script> export default { name: "TextContent", props: { variant: String, content: String, topMargin: String } }; </script> <style scoped> .header { color: rgb(50, 50, 50); text-align: center; } .subheader { font-size: 1.5rem; color: rgb(100, 100, 100); text-align: center; } p { color: rgb(124, 124, 124); } </style>
Давайте проверим это, внеся следующие изменения в src/views/Optin.vue :
<template> <div class="optin container"> <b-row> <b-col> <TextContent variant="header" content="Here's Your Attention Getting Headline" topMargin="50px" /> <TextContent variant="subheader" content="This is your sub-headline to increase credibility or curiosity" /> </b-col> </b-row> <b-row> <b-col> put image here </b-col> <b-col> <TextContent variant="paragraph" content="Here's where you write your compelling message, keep your sentences and paragraphs short." /> </b-col> </b-row> </div> </template> <script> import TextContent from "../components/TextComponent"; export default { name: "optin", components: { TextContent } }; </script>
Обновите свою страницу. У вас должно быть что-то вроде этого:
Возможно, вы заметили, что тег paragraph будет отображать содержимое по-другому. Мы используем атрибут v-html чтобы позволить пользователям передавать стили HTML, такие как <strong> и <u> . Вы можете проверить это, добавив этот фрагмент:
<TextContent variant="paragraph" content="Use <strong>*bold*</strong>, <u>underline</u> and <i>italics</i> to emphasize important points." />
Мы создали простой текстовый компонент, который поставляется с готовым стилем. Вариант prop используется для определения типа текстового тега, который должен отображаться. У нас также есть реквизит topMargin который позволит нам легко topMargin текстовые элементы.
Предполагая, что этот тест сработал для вас, давайте перейдем к следующему вызову. Давайте предположим, что нам нужны разные стили для заголовка и подзаголовка. Нам нужен способ дать указание компоненту TextContent изменить стиль. Обновите код OptinForm.vue следующим образом:
<TextContent variant="header" content="Here's Your Attention Getting Headline" topMargin="50px" theme="red" />
Мы добавили новую опору под названием theme . Нам нужно объявить этот новый TextComponent.vue в TextComponent.vue . Обновите код следующим образом:
<template> <h1 class="header" v-bind:style="getStyle()" v-if="variant === 'header'" > {{ content }} </h1> </template> <script> export default { ... props: { ... theme: String }, data: function() { return { red: { // style object color: "red" }, blue: { // style object color: "blue" } }; }, methods: { getStyle() { switch (this.$props.theme) { case "red": return this.red; case "blue": return this.blue; default: break; } } } }; </script>
Когда вы обновите свою страницу, у вас должно получиться что-то вроде этого:
В этом примере мы объявили несколько объектов стиля, red и blue . Пользователи могут указать, какую тему они хотят использовать. Не стесняйтесь добавлять больше свойств к объектам стиля и создавать больше объектов стиля.
Если вы хотите пойти дальше, вы можете вывести объекты стиля так, чтобы они были отделены от кода. Вы можете создать что-то вроде файла theme.css который будет легче настраивать.
Давайте теперь посмотрим на следующий компонент.
Форма согласия
В форме согласия происходит действие по захвату потенциальных клиентов. Мы просим посетителей предоставить нам свой адрес электронной почты в обмен на ценный ресурс, который поможет им.
Создайте файл src/components/OptinForm.vue и вставьте следующий код:
<template> <div class="optin-form"> <form @submit.prevent="onSubmit"> <b-form-group> <b-form-input type="email" v-model="form.email" size="lg" required placeholder="Enter email" /> </b-form-group> <b-button type="submit" v-bind:variant="submitColor" size="lg" block>{{ submitText }}</b-button> </form> </div> </template> <script> export default { name: "optin-form", props: { submitText: String, submitColor: String }, data() { return { form: { email: "" } }; }, methods: { onSubmit() { this.$emit("submit", this.form); } } }; </script> <style scoped> .btn { font-weight: bold; font-size: 1.5rem; } </style>
Пройдите по коду, обратите особое внимание на использованный реквизит. Чтобы продемонстрировать, как используется этот компонент, просто обновите src/views/Optin.vue следующим образом:
<template> <b-row style="marginTop:20px"> <b-col> <b-img src="https://images.unsplash.com/photo-1483032469466-b937c425697b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80" fluid /> </b-col> <b-col> <TextContent variant="paragraph" content="Here's where you write your compelling message, keep your sentences and paragraphs short." /> <OptinForm submitText="Free Download!" submitColor="warning" @submit="handleSubmit" /> </b-col> </b-row> </template> <script> import TextContent from "../components/TextContent"; import OptinForm from "../components/OptinForm"; export default { name: "optin", components: { TextContent, OptinForm }, methods: { handleSubmit(form) { console.log("Add New Subscriber", form.email); this.$router.push({ path: '/thank-you'}) } } }; </script>
Обратите внимание, что мы заменили текст «положить изображение» на фактический тег изображения. Мы также указали событие OptinForm компоненте OptinForm которое будет обрабатываться функцией handleSubmit . Если вы посмотрите на код OptinForm.vue , вы заметите, что через этот код запускается событие: this.$emit("submit", this.form); ,
И именно так мы отсоединили компонент OptinForm.vue . Мы можем легко написать собственный код, который отправляет адрес электронной почты на любую маркетинговую платформу по вашему выбору. Мой текущий фаворит — MailerLite. Вот их документация по API о том, как добавить нового подписчика.
Вы можете использовать такую библиотеку, как Fetch или Axios для отправки информации через REST API. Если вы новичок в этом, ознакомьтесь с учебником Введение в Axios, популярный HTTP-клиент на основе Promise .
Обновите свой браузер и убедитесь, что страница подтверждения работает:
На данный момент мы используем проверку HTML. Ввод действующего адреса электронной почты должен быстро перейти на страницу thank-you . На данный момент это не похоже на один. Давайте исправим это в следующем разделе.
Видеоконтент
Прежде чем заполнить страницу Thank-You.vue , нам нужно создать src/components/VideoContent.vue . Вставьте следующий код:
<template> <div class="video-content" v-bind:style="{ marginTop: topMargin }"> <b-embed type="iframe" aspect="16by9" :src="link" allowfullscreen /> </div> </template> <script> export default { name: "video-content", props: { link: String, topMargin: String } }; </script>
Компонент VideoContent позволит нам вставлять любое видео с таких сайтов, как YouTube и Vimeo. Вы должны получить ссылку для вставки, чтобы он работал. URL для встраивания для YouTube выглядит примерно так:
https://www.youtube.com/embed/xxxxxxxxx
После того как вы сохранили компонент, теперь мы можем начать работать с src/views/Thank-you.vue . Замените весь существующий код этим:
<template> <div class="thank-you container"> <b-row> <b-col> <TextContent variant="header" content="Here's Your Thank You Headline" topMargin="50px" theme="red" /> <TextContent variant="subheader" content="This is your sub-headline to increase credibility or curiosity" /> </b-col> </b-row> <b-row> <b-col> <VideoContent link="https://www.youtube.com/embed/m9q58hSppds" topMargin="30px" /> </b-col> </b-row> </div> </template> <script> import TextContent from "../components/TextContent.vue"; import VideoContent from "../components/VideoContent"; export default { name: "thank-you", components: { TextContent, VideoContent } }; </script>
Если вы обновите страницу http: // localhost: 8080 / thank-you , у вас должно появиться следующее представление:
Так как мы закончили с этим, давайте создадим еще один компонент, который немного сложнее. Этот пойдет на нашу страницу Optin .
Компонент таймера обратного отсчета
Таймер обратного отсчета является популярным маркетинговым инструментом, используемым для создания чувства срочности. Это побуждает посетителя принять меры уже сейчас, пока не истечет время. Есть в основном два типа таймеров обратного отсчета:
- Срок до указанной даты
- Фиксированное время (обычно через час или несколько минут), которое сбрасывается каждый день или когда сеанс новый
В этом случае мы сосредоточимся на создании первого варианта использования. Мы не собираемся на самом деле кодировать сам этот таймер, а возьмем его из реестра npm. Сначала вам нужно выйти из сервера Vue.js. Установите его следующим образом:
npm install vuejs-countdown
Затем создайте файл src/components/Countdowntimer.vue и вставьте следующий код:
<template> <div class="countdown-timer"> <Countdown :deadline="endDate"></Countdown> </div> </template> <script> import Countdown from "vuejs-countdown"; export default { name: "countdown-timer", components: { Countdown }, props: { endDate: String } }; </script> <style> .countdown-timer { padding: 15px; text-align: center; } .countdown-section { display: inline-block; margin-right: 25px; } .vuejs-countdown .digit { display: block; border: 4px solid orange; color: darkorange; padding: 10px; border-radius: 100px; width: 72px; margin-bottom: 10px; } .text { font-size: 0.7rem; font-weight: bold; color: gray; } </style>
Затем добавьте компонент CountdownTimer на страницу src/views/Optin.vue :
<template> ... <b-row> <b-col> <CountdownTimer endDate="March 3, 2020e" /> <TextContent variant="subheader" content="This is offer will soon expire" /> </b-col> </b-row> ... </template> <script> import CountdownTimer from "../components/CountdownTimer"; ... components: { ... CountdownTimer }, </script>
После внесения изменений вы можете запустить сервер. Ваша страница должна выглядеть так:
Если у вас нет обратного отсчета, измените дату и убедитесь, что она установлена в будущем. Давайте теперь доработаем урок.
Упаковка и Издательство
Пока что мы создали хорошую базу для библиотеки воронок продаж. Вы можете продолжать добавлять больше компонентов, каждый с более настраиваемыми параметрами. Сейчас самое время поговорить об упаковке и запуске готовой к производству воронки. Хотя можно запустить только что созданную воронку из нашего проекта Vue, лучше всего запустить ее в проекте Nuxt.js.
Вот несколько полезных ссылок, которые помогут вам выполнить задачи, которые мы обсуждали ранее:
Резюме
Я надеюсь, что вы узнали что-то полезное из этого урока. Как разработчик, вы имеете преимущество перед нетехническими людьми. Вы можете создавать и запускать свои воронки за часть стоимости, которую большинство маркетологов платят за весь срок службы при использовании услуги построения воронок. Это приведет к экономии тысяч долларов каждый год.
Кроме того, вы сможете продавать больше своих программных продуктов и услуг вместо использования стандартного веб-сайта. Дайте нам знать через социальные сети, если вы планируете создать версию воронки продаж с открытым исходным кодом, которая будет полезна для сообщества.