Рубрики
Без рубрики

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

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

Автор оригинала: Mohamed Termoul.

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

TL; доктор

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

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

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

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

  • Подпишитесь на бесплатный аккаунт Cosmic JS
  • Войти в Cosmic JS аккаунт
  • Перейти к Ведра страница
  • Нажмите на Добавить новое ведро Кнопка в правом верхнем углу страницы
  • Выберите Выберите приложение ниже опции и прокрутите список приложений
  • Попробуйте найти Продавец воронка заявление
  • Как только вы откроете приложение, нажмите на Установить бесплатно кнопка
  • Вы можете сохранить такое же название и ударить Установите приложение Кнопка для подтверждения
  • Тогда вы будете доставлены в ведро приложений
  • Тогда вам нужно клонировать repo github. Откройте окно терминала и введите:
git clone https://github.com/cosmicjs/nodejs-sales-page
cd crowd-pitch
npm install
  • Редактировать и изменить клавиши API Cosmic JS и API, расположенные в /crawd-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

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

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

  • Войдите в Dashboard Cosmic JS
  • Перейти к ведрам -> толпу
  • Перейти на страницы -> Google Cash Machine
  • Измените раздел «Страницы», отредактировав текст для каждой части веб-страницы, например, заголовок страницы, заголовок ….
  • Измените изображения страницы, добавив свои собственные изображения. Обязательно сохраните такое же название и слизни изображения.
  • Хит Сохранить и опубликовать
  • Эта часть работает как любая система CMS, где вы вносите изменения в задней части, и сайт может измениться немедленно.

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

Эта часть, а ниже было бы объяснением того, как был разработан в интерфейсе приложения, и как вы можете дрочить глубже, чтобы настроить больше параметров, таких как макет, CSS, цвета, и какие поля для сбора от пользователя. Это приложение было строению в основном с использованием узла JS и API полосы. Итак, давайте посмотрим на файл Server.js

код

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

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

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

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

Как упоминалось ранее, в этом приложении мы используем Handlebars.js для шаблона страницы. С сервера Get Function Мы видим Виды/home.handlebars Страница, которая – это просто HTML-страница с некоторыми тегами руль для замены переменных серверов со значениями из Cosmic JS CMS. Давайте взглянем:

суть

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

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

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

суть

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

  • Jquery
  • Полоса
  • Загрузка
  • Шрифт-потрясающий
  • Axios.js для обработки вызовов AJAX

Обращаясь за оплату кредитной карты с полосой и аксиосом

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

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

суть

  • Проверьте информацию о кредитной карте, вызывая STRIPE.CreateToken, когда пользователь ударит кнопку «Отправить платеж». Эта функция просто отправит информацию в Stop API и получить допустимый токен, если успех. В противном случае это вернется неверный токен.

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

суть

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

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

Как добавить несколько страниц вовлечения в мою заявку.

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

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

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

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

И тогда мы называем INATIVEIZECLOCK Функция, которая будет запустить подсчет до тех пор, пока эта переменная не достигнет нуля.

Посмотрите на файл main.js для полной детали реализации.

толпа-шаг-маленький.gif

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

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

суть

Тогда мы загружаем либо стиль A или B на Main.Handlebars файл, как это:

суть

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

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

Затем мы сохраняем источник страницы вдоль заряда полосы на методе Post Server.

суть

Заключение

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

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

Если у вас есть какие-либо комментарии или вопросы о создании приложений с космическими js, Обратитесь к нам в Twitter и Присоединяйтесь к разговору о Slack Отказ

Читайте ещё по теме: