Строительство (и поддержание) воронки приобретения – это то, что большинство команд разработчиков попросят сделать в какой -то момент. Это не небольшая задача, так как эта воронка часто будет основной точкой входа для продуктов или услуг компании. Это означает, что такая воронка должна быть полностью надежной, чтобы не терять клиентов из -за ошибок, и полностью гибкая, чтобы позволить команде маркетинга оптимизировать коэффициент конверсии.
В этой статье из двух частей мы увидим, как легко это сделать, используя сильную шаблон программирования: конечный штат машина. Мы будем использовать React и Xstate для реализации, но принципы могут быть применены к любому стеку.
Сегодня, в части 1, мы увидим, как реализовать государственную машину, которая питает воронку, и создание фактических шагов и обработка данных пользователей будет рассмотрено в части 2.
Вы можете найти код [в этом репозитории] (вы можете найти полную реализацию Здесь Анкет Я призываю вас клонировать проект и поиграть с ним!
Вариант использования
Как всегда, когда дело доходит до программирования, лучший способ узнать что -то – это испачкать руки.
Допустим, мы работаем в командной строительной компании, и маркетинговая команда хочет, чтобы мы построили воронку приобретения, которая позволяет нашим клиентам выбирать деятельность и зарегистрировать кучу людей.
Им нужно, чтобы мы внедрили следующую воронку:
- Шаг 1: список выбора, чтобы выбрать тип деятельности;
- Шаг 2: Форма для регистрации человека. Клиент должен иметь возможность пройти через этот шаг в любое количество времени. Мы должны быть в состоянии перейти прямо к шагу 4 с этого шага.
- Шаг 3 (необязательно): форма для предоставления дополнительной информации;
- Шаг 4: Оплата: 💰
В части 1 мы постараемся выполнить различные шаги туннеля, фактически не отправляя ничего. Посмотрим, как мы справимся с этой частью 2: D
Слово о конечных государственных машинах
Примечание. Хотя я рекомендую прочитать его, этот раздел не является строго необходимым, чтобы иметь возможность реализовать наше решение. Так Если вы хотите прыгнуть в действие. Реализация
Прежде чем мы приступим к этому, я хотел бы оправдать наш выбор моделирования: конечное состояние. Я расскажу более подробно в отдельной статье, но сейчас давайте просто получим быстрый обзор этого шаблона.
Что такое конечный штат Машина?
Давайте возьмем ярлык и процитируем Википедия статья :
Конечный автомат (FSM) или конечный автомат (FSA, множественное число: Automata), конечный автомат или просто состояние состояния, является математической моделью вычислений. Это абстрактная машина, которая может быть точно в одном из конечных состояний в любой момент времени. FSM может перейти от одного состояния на другое в ответ на некоторые входные данные; Переход от одного состояния в другое называется переходом.
По сути, это надежный, читаемый и детерминированный способ моделирования. Например, здесь, как мы моделируем светофорный свет, используя государственную машину:
Легкий !
Зачем использовать государственную машину
Важным битом в определении выше состоит в том, что машина является гарантированно Быть только в одном штате за раз. Эта гарантия является огромным шагом вперед в решении нашего варианта использования.
Также очень легко применить эту модель к воронке, просто отображая каждый шаг в состояние, потому что она делает именно то, что мы хотим: Отображение одного шага в любой момент времени.
Кроме того, состояние нашей воронки будет определяться последовательности событий, запускаемых пользователями, и будет полностью детерминированным.
Это означает, что если мы нарисуем правильную диаграмму состояния и передам ее компоненту, способному выполнять статускую машину, мы можем быть уверены, что воронка будет вести себя так, как мы хотим.
Различные типы государственной машины
Есть два разных типа конечного состояния машины:
- Moore Machine : Где текущий выход машины напрямую соответствует состоянию.
- Mealy Machine : Где выход зависит как от текущего состояния, так и от последнего входа.
Вы выбираете тип для использования в зависимости от вашего варианта использования. Мужья машина позволяет уменьшить количество состояния для одинакового количества различных выходов, в то время как машина Moore часто более простой и прост в чтении.
Помимо конечный Штаты Машины есть и другие виды машины:
- Машина Тьюринга: нам понадобится отдельная статья для этого;)
- StateChart : Это использует функции языка программирования (в данном случае JavaScript): чтобы выйти за рамки возможностей «нормального» конечного состояния машины. Это будет удобно во второй части, когда нам нужно обрабатывать пользовательский ввод:)
На данный момент, поскольку нашей единственной заботой является последовательность шагов воронки, будет достаточно машины Moore!
Моделирование воронки
Возвращаясь к нашим требованиям, моделирование нашей воронки приобретения теперь совершенно просто:
Этот игрок генерируется с помощью Xstate Visualizer Из реализации машины, найденной в этой статье
Строительство воронки
Теперь, когда мы уверены в надежности нашей модели, давайте реализуем ее!
Настройка проекта
- Установите пряжу
- Создайте приложение:
пряжа создать react-app-template typescript - Установить зависимости:
пряжа добавить xstate - Создайте каталог для хранения нашей воронки и компонентов:
Mkdir Src/Acquisition-Funnel
Написание машины
Давайте начнем с перевода нашей государственной диаграммы в код. Забавная вещь, хотя: диаграмма выше была на самом деле сгенерирована из кода xstate Vizualizer. Автоматическая документация! Ура !
Сначала давайте создаем src/aquisition-funnel/types.ts Где мы типы событий:
# types.ts export const SELECT_ACTIVITY = "SELECT_ACTIVITY"; export const SUBMIT_ATTENDEE = "SUBMIT_ATTENDEE"; export const ADD_ATTENDEE = "ADD_ATTENDEE"; export const ADD_INFO = "ADD_INFO"; export const SUBMIT_ADDITIONNAL_INFORMATION = "SUBMIT_ADDITIONNAL_INFORMATION";
Это всегда хорошая идея – хранить константы в переменной.
Теперь давайте доберемся до самой машины. Создайте файл с именем State-machine.ts в SRC/Acquisition-Funnel и добавьте к нему приведенный ниже код.
# state-machine.ts
import { Machine } from "xstate";
import {
SELECT_ACTIVITY,
SUBMIT_ATTENDEE,
ADD_ATTENDEE,
ADD_INFO,
SUBMIT_ADDITIONNAL_INFORMATION,
} from "./types";
export const stateMachine = Machine({
id: "funnel-state-machine",
initial: "activity",
states: {
activity: {
on: {
[SELECT_ACTIVITY]: "register_attendee",
},
},
register_attendee: {
on: {
[ADD_ATTENDEE]: "register_attendee",
[ADD_INFO]: "additional_information",
[SUBMIT_ATTENDEE]: "payment",
},
},
additional_information: {
on: {
[SUBMIT_ADDITIONNAL_INFORMATION]: "payment",
},
},
payment: {
type: "final",
},
},
});
export default stateMachine;
Как вы можете видеть, каждое состояние нашей диаграммы перечислено, и доступный переход для каждого состояния описан на атрибут.
Строительство воронки
Теперь, когда наша государственная машина готова, нам нужно спроектировать компонент, который обрабатывает рендеринг компонентов шага, связанных с каждым штатом. Для этого мы будем использовать Составной компонент шаблон.
FurnelProvider будет держать текущее состояние в контексте, сделав его доступным для детей Государство составные части.
Каждый компонент состояния будет рендеринг только в том случае, если текущее состояние соответствует, получение рендеринга и государственного аппарата синхронизирована!
Сначала добавьте файл с именем Furnelprovider.ts к SRC/Acquisition-Funnel и добавьте в него следующий код:
import React, { useContext } from "react";
import { StateMachine, State } from "xstate";
import { useMachine } from "@xstate/react";
// We use a generic type to be able to handle
// any shape of context with type checking
interface FunnelProviderProps {
stateMachine: StateMachine;
children: React.ReactNode;
}
interface FunnelContextValue {
currentState: State;
send: (state: string) => void;
}
const FunnelContext = React.createContext({} as FunnelContextValue);
function FunnelProvider({
stateMachine,
children,
}: FunnelProviderProps): React.ReactElement {
const [current, send] = useMachine(stateMachine);
return (
{children}
);
}
// This is a common patter to avoid import
// the constext in every consumer
export const useFunnel = () => useContext(FunnelContext);
export default FunnelProvider;
Затем создайте Staterenderer.tsx Файл в SRC/Acquisition-Funnel и добавьте следующий код в ID:
import React from "react";
import { useFunnel } from "./FunnelProvider";
interface StateProps {
state: string;
children: (send: any) => React.ReactNode;
}
const StateRenderer: React.FunctionComponent = ({
state,
children,
}) => {
const { currentState, send } = useFunnel();
return currentState.matches(state) ? (
{children(send)}
) : (
);
};
export default StateRenderer;
Здесь мы используем Рендеринг реквизита шаблон, чтобы разрешить передачу имущества SED на компоненту в состоянии. Мы зачем это полезно на следующем шаге
Сделать все это вместе
Теперь, когда у нас есть наша государственная машина и наш составной компонент FurnelProvider и Статерендерер , все, что осталось сделать, это выбор того, что делать.
Добавьте следующий код в App.tsx :
# App.tsx
import React from "react";
import FunnelProvider from "./acquisition-funnel/FunnelProvider";
import StateRenderer from "./acquisition-funnel/StateRenderer";
import RegistrationStep from "./acquisition-funnel/RegistrationStep";
import { stateMachine } from "./acquisition-funnel/state-machine";
import {
SELECT_ACTIVITY,
SUBMIT_ATTENDEE,
ADD_ATTENDEE,
ADD_INFO,
SUBMIT_ADDITIONNAL_INFORMATION,
} from "./acquisition-funnel/types";
import "./App.css";
function App() {
return (
{(send) => {
return (
Activity Step
);
}}
{(send) => (
send(ADD_ATTENDEE)}
additional_information={() => send(ADD_INFO)}
proceed_to_payment={() => send(SUBMIT_ATTENDEE)}
/>
)}
{(send) => {
return (
Additional information
);
}}
{() => {
return payment
;
}}
);
}
export default App;
Благодаря всей работе, которую мы проделали этот шаг, действительно прост: мы просто используем StateRenderer внутри нашего поставщика, чтобы сделать активный шаг. Статерендерер проходит необходимые обратные вызовы, чтобы перейти в воронку, используя нашу рендеринговую опору.
Шаг регистрации немного сложнее, потому что я хотел, чтобы мы могли увидеть цикл на этапе регистрации. Вот почему он определен в своем собственном компоненте:
import React, { useState } from "react";
interface RegistrationProps {
add_participant: () => void;
additional_information: () => void;
proceed_to_payment: () => void;
}
const RegistrationStep: React.FunctionComponent = ({
add_participant,
additional_information,
proceed_to_payment,
}) => {
const [counter, setCounter] = useState(1);
return (
Register participant number {counter}
);
};
export default RegistrationStep;
Мы просто увеличиваем счетчик каждый раз, когда называем add_participant
И мы закончили! Воронка, которую мы построили, полностью детерминированная и соответствует требованиям. Если нам нужно изменить поток, все, что нам нужно сделать, это обновить State-machine.tx Анкет Разве это не здорово?
Попробуйте!
Вывод
Вот и все на сегодня! Надеюсь, вам понравилась часть 1, мы уже многое достигли! Конечно, мы пока ничего не можем отправить, мы посмотрим, как это сделать в части 2:)
Оригинал: “https://dev.to/jbrocher/building-an-acquisition-funnel-in-react-with-xstate-4hna”