Как создать одностраничное приложение воронки продаж с использованием Node.js, Cosmic JS и Stripe

Что такое воронка продаж? И почему это важно? Воронка продаж — это путь, по которому проходят посетители вашего сайта перед покупкой продукта. Если вы не понимаете свою воронку продаж, вы не сможете ее оптимизировать. Создание отличной воронки продаж может повлиять на то, как посетители перемещаются по воронке и конвертируются ли они в конечном итоге. В этой небольшой демонстрации я покажу вам, как создать простую одностраничную воронку продаж с использованием Node JS, Cosmic JS и Stripe для обработки платежей по кредитным картам.

TL;DR

Почему я выбрал Cosmic JS

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

Как клонировать собственную версию этого приложения:

Чтобы вы могли клонировать это приложение и иметь свою собственную копию, вам необходимо выполнить следующие шаги:

• Зарегистрируйте бесплатную учетную запись Cosmic JS
• Войдите в учетную запись Cosmic JS
• Перейти к ведра страница
• Нажмите на Add New Bucket кнопка в правом верхнем углу страницы
• Выбирать Choose an app below option и перейдите к списку приложений
• Попробуйте найти Sales Funnel заявление
• После того, как вы откроете приложение, нажмите на кнопку Install Free кнопка
• Вы можете сохранить тот же заголовок и нажать Install App кнопка для подтверждения
• Затем вы попадете в корзину приложений
• Затем вам нужно клонировать репозиторий github. Откройте окно терминала и введите:

git clone 
cd crowd-pitch
npm install

• редактировать и изменять ключи API Cosmic JS и Stripe, расположенные в /crowd-pitch/.env.local файл

COSMIC_BUCKET=your-bucket-slug
COSMIC_READ_KEY=your-cosmic-read-key
COSMIC_WRITE_KEY=your-cosmic-write-key
STRIPE_KEY=your-stripe-api-key

• Запустите сервер приложений на вашем локальном компьютере

# start the app
npm run server

Как настроить содержимое приложения

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

• Авторизоваться Панель инструментов Cosmic JS
• Перейти к ведрам —> массовая презентация
• Перейдите на Страницы —> Банкомат Google
• Измените раздел страниц, отредактировав текст для каждой части веб-страницы, такой как заголовок страницы, заголовок….
• Измените изображения страницы, добавив свои собственные изображения. Обязательно сохраните тот же заголовок изображения и слаг.
• Нажмите сохранить и опубликовать
• Эта часть работает как любая система CMS, где вы вносите изменения в серверную часть, и сайт может измениться немедленно.

Как добавить новые функции в это приложение

Эта часть и ниже будут объяснением того, как разрабатывался интерфейс приложения и как вы можете копнуть глубже, чтобы настроить дополнительные параметры, такие как макет, css, цвета и какие поля собирать у пользователя. Это приложение было создано в основном с использованием Node JS и Stripe API. Итак, давайте посмотрим на файл server.js.

код

Как видно из приведенного выше кода, мы используем следующие компоненты Javascript:

Внутри server.js в основном есть две функции для обработки маршрутизации сервера:

• app.get(‘/’) для обработки запроса на получение, когда пользователь посещает приложение. Внутри этой функции мы просто вызываем Cosmic JS, чтобы получить все данные из нашей корзины и внедрить их как локальную переменную ответа сервера. Вторая часть — это просто рендеринг домашнего представления, которое является просто страницей шаблона HTML/Handlebars.
• app.post(‘/pay’) для обработки отправки платежной формы. Внутри этой функции есть всего один вызов API начислений Stripe для добавления одного платежа к указанной кредитной карте.

Как настроить макет и CSS для приложения?

Как упоминалось ранее, в этом приложении мы используем handlebars.js для создания шаблонов страниц. С сервера получаем функцию, которую мы рендерим views/home.handlebars страница, которая представляет собой просто html-страницу с некоторыми тегами handlebars для замены переменных сервера значениями из Cosmic JS CMS. Давайте взглянем:

суть

Как видите, мы ссылаемся на серверные переменные в двойных фигурных скобках. Например {{ cosmic.metadata.top_logo.url }} означает получить значение переменной из Cosmic JS, которая является URL-адресом изображения логотипа, и поместить его на главную страницу просмотра. Есть также аналогичный синтаксис для обработки if и цикла с использованием синтаксиса handlebars. Полную справку по синтаксису см. Документация пользователя руля.

Вы также можете изменить некоторые стили страницы на домашней странице просмотра, потому что мы просто используем Фреймворк начальной загрузки. Для некоторых других свойств стиля вы можете изменить их непосредственно из /public/css/styles.css

Для макета приложения есть файл /views/layouts/main.handlebars

суть

По сути, это основной HTML-шаблон для каждой страницы нашего приложения. Стоит отметить, что мы ссылаемся на пару библиотек со стороны клиента, например:

• JQuery
• Полоса
• Начальная загрузка
• Шрифт потрясающий
• Axios.js для обработки вызовов Ajax

Обработка платежей по кредитным картам с помощью Stripe и Axios

Чтобы принимать платежи по кредитным картам в нашем приложении, мы используем трехэтапный процесс.

сначала мы используем Полосатые элементы карты чтобы вставить элемент ввода кредитной карты в нашу html-форму.

суть

• Подтвердите информацию о кредитной карте, вызвав stripe.createToken, когда пользователь нажмет кнопку отправки платежа. Эта функция просто отправит информацию в Strip API и в случае успеха получит действительный токен. В противном случае он вернет недопустимый токен.

• Отправьте данные формы платежа в метод публикации сервера. Этот метод берет данные, отправленные из клиентской формы, и снова отправляет их в виде страйп-платы, вызывая stripe.charges.create. Взглянем:

суть

Как видите, как только платеж будет отправлен в Stripe, мы вернем клиенту успех, если от Stripe нет ошибок. В противном случае мы отправим клиенту сообщения об ошибках Stripe.

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

Как добавить многостраничную воронку в мое приложение.

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

А как насчет файла main.js?

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

const dealCountDown = {{ cosmic.metadata.deal_countdown }};

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

Подробные сведения о реализации см. в файле main.js.

Проверяйте вовлеченность пользователей с помощью A/B-тестирования

Как осознало большинство маркетологов, стоимость приобретения любого качественного трафика может быть огромной. A/B-тестирование позволяет максимально эффективно использовать существующий трафик и помогает повысить конверсию, не тратя средства на привлечение нового трафика. A/B-тестирование может дать вам высокую рентабельность инвестиций, поскольку иногда даже самые незначительные изменения могут привести к значительному увеличению конверсии.
Для целей этого приложения я добавлю два style.css файлы, и как только пользователь посетит сайт, я буду случайным образом выбирать одну таблицу стилей. Выбор таблицы стилей повлияет на то, как будет выглядеть цветовая тема. Таким образом, в основном пользователь может видеть либо версию A сайта, либо версию B.

суть

Затем мы загружаем либо стиль A, либо стиль B на main.handlebars такой файл:

суть

У нас также есть переменная javascript, которая будет использоваться в процессе оплаты, чтобы определить, с какой страницы переходит пользователь. Эта информация будет храниться вместе с информацией об оплате Stripe.

    const pageSource = {{#if pageB}} 'pageB' {{else}} 'pageA' {{/if}};

затем мы сохраняем исходный код страницы по страйпу в методе post сервера.

суть

Вывод

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

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

Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, свяжитесь с нами в Twitter а также присоединиться к беседе в Slack.