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

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

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

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

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

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

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

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

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

Вам понадобится установить в системе современную версию Node.js и инструмент Vue CLI. На момент написания этой статьи текущим LTS был Node v10.15.1. Текущая версия Vue CLI — v3.4.1. Моя личная рекомендация — использовать npm для поддержания актуальности среды 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

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

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

cd vue-sales-funnel
npm install vue bootstrap-vue bootstrap

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

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/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>

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

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

<TextContent variant="paragraph" content="Use <strong>*bold*</strong>, <u>underline</u> and <i>italics</i> to emphasize important points."
/>

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

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

<TextContent variant="header" content="Here’s Your Attention Getting Headline" topMargin="50px" theme="red"
/>

Мы добавили новое свойство с именем theme. Нам нужно объявить это новое свойство в 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>

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

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

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

На данный момент мы используем валидацию 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.

Заключение

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

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

Автор: Michael Wanyoike

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

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