Это вторая частью учебника по созданию аналитического веб-приложения с Cube.js. . Ты можешь найти первая часть здесь . Он ожидает, что читатель будет знаком с JavaScript, Node.js, реагирует и иметь базовые знания SQL. Конечный исходный код доступен здесь и Живая демонстрация здесь . Примерное приложение неверно и работает на aws lambda. Он отображает данные о своем собственном использовании.
В этой части мы собираемся добавить анализ воронка в наше приложение. Анализ воронки, наряду с удерживающим анализом, имеет жизненно важное значение для анализа поведения в путешествии клиента. Воронка – это серия событий, которые пользователь проходит в приложении, например, для завершения потока бортового. Пользователь считается преобразованным через шаг в воронке, если она выполняет событие в указанном порядке. Расчет того, сколько уникальных пользователей, сделанных каждое событие, может показать вам скорость преобразования между каждым шагом. Это поможет вам локализовать проблему до определенного этапа.
Поскольку наша заявка отслеживает свое собственное использование, мы построим Furenels, чтобы показать, насколько у пользователя пользователи перемещаются через использование ворон. Довольно мета, верно?
Вот как это выглядит. Вы Проверьте живую демонстрацию здесь Отказ
Строительство SQL для ворон
Просто быстрый раздел частью I-мы собираем данные с трекером снегоочистителя, сохраняя его в S3, а запросу с Athena и Cube.js. Афина построена на Presto и поддерживает стандартный SQL. Итак, чтобы построить воронку, нам нужно написать код SQL. Реальный воронку SQL может быть довольно сложным и медленным от перспективы производительности. Поскольку мы используем Cube.js для организации схемы данных и генерировать SQL, мы можем решить обе эти проблемы.
Cube.js позволяет строить пакеты, которые представляют собой коллекцию схем многоразовых данных. Некоторые из них специфичны для наборов данных, таких как Пакет полоса Отказ Другие предоставляют полезные макросы для общих преобразований данных. И один из них мы собираемся использовать – пакет Fubnels.
Если вы новичок в схеме данных Cube.js, я настоятельно рекомендую вам проверить это или тот Учебник сначала, а затем возвращайтесь, чтобы узнать о пакете Fubnels.
Лучший способ организовать воронки – создать отдельный куб для каждой воронки. Мы будем использовать EventFunnel из пакета воронки. Все, что нам нужно сделать, это пройти объект с требуемыми свойствами для EventFunnel функция. Проверьте документацию по пакету FUNNELS для получения подробной информации о его конфигурации.
Вот как этот конфиг может выглядеть. В производственных приложениях вы, скорее всего, будут генерировать схему Cubes.js динамически. Вы можете прочитать больше о том, как это сделать здесь.
import Funnels from "Funnels";
import { eventsSQl, PAGE_VIEW_EVENT, CUSTOM_EVENT } from "./Events.js";
cube("FunnelsUsageFunnel", {
extends: Funnels.eventFunnel({
userId: {
sql: `user_id`
},
time: {
sql: `time`
},
steps: [
{
name: `viewAnyPage`,
eventsView: {
sql: `select * from (${eventsSQl}) WHERE event = '${PAGE_VIEW_EVENT}`
}
},
{
name: `viewFunnelsPage`,
eventsView: {
sql: `select * from (${eventsSQl}) WHERE event = '${PAGE_VIEW_EVENT} AND page_title = 'Funnels'`
},
timeToConvert: "30 day"
},
{
name: `funnelSelected`,
eventsView: {
sql: `select * from (${eventsSQl}) WHERE event = '${CUSTOM_EVENT} AND se_category = 'Funnels' AND se_action = 'Funnel Selected'`
},
timeToConvert: "30 day"
}
]
})
});
Вышеуказанная, 3-ступенчатая воронка, описывает поток пользователя с просмотра любой страницы, такой как домашняя страница, для перехода на воронки, а затем в конечном итоге выбирая воронку из раскрывающегося списка. Мы устанавливаем TimeToconvert до 30 дней на 2-й и 3-й шаги. Это означает, что мы даем пользователю окно 30-дневного окна, чтобы она завершила целевое действие, чтобы сделать его в воронку.
В нашем примере приложение мы генерируем эти конфиги динамически. Вы можете проверить код на GitHub здесь.
Материализация воронок SQL с предварительными скобами
Как я уже упоминал ранее, в Cube есть встроенный в Cube.js, чтобы ускорить производительность запросов. Cube.js может материализировать результаты запроса в таблице. Это держит их в курсе и запрашивает их вместо необработанных данных. Предварительные агрегации могут быть довольно сложными, включая многоступенчатую и управление зависимостями. Но для нашего дела простейший OriginalSQL Предварительная агрегация должна быть достаточно. Это материализует базу SQL для куба.
Узнайте больше о предварительных агрегациях здесь.
import Funnels from 'Funnels';
import { eventsSQl, PAGE_VIEW_EVENT, CUSTOM_EVENT } from './Events.js';
cube('FunnelsUsageFunnel', {
extends: Funnels.eventFunnel({ ... }),
preAggregations: {
main: {
type: `originalSql`
}
}
});
Визуализировать
Есть много способов визуализации воронки. Cube.js – это визуализация-агностическая, поэтому выберите тот, который работает для вас, и хорошо подходит к вашему приложению. В нашем примере приложение мы используем гистограмму из библиотеки Recharts.
Пакет Fubnels генерирует куб с преобразования и Обращение Меры и шаги и время Габаритные размеры. Чтобы построить воронку гистограммы, нам нужно запросить Конверсии Мера сгруппирована шаг измерение. время Размер следует использовать в фильтре, чтобы пользователи выбрали определенный диапазон дат воронки.
Вот код (мы используем React и Cube.js React Client):
import React from "react";
import cubejs from "@cubejs-client/core";
import { QueryRenderer } from "@cubejs-client/react";
import CircularProgress from "@material-ui/core/CircularProgress";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";
const cubejsApi = cubejs(
"YOUR-API-KEI",
{ apiUrl: "http://localhost:4000/cubejs-api/v1" }
);
const Funnel = ({ dateRange, funnelId }) => (
{
if (resultSet) {
return (
);
}
return "Loading...";
}}
/>
);
export default Funnel;
Если вы запустите этот код в CodeSandbox, вы должны увидеть что-то вроде этого.
Приведенный выше пример подключен к Backend Cube.js из нашего приложения Analytics.
В следующей части мы пройдем, как построить приборную панель и динамический построитель запроса, как один в микпане или амплитуде. Часть 4 будет охватывать анализ удержания. В последней части мы обсудим, как развернуть все приложение в режиме без сервеса, чтобы AWS Lambda.
Вы можете проверить полный исходный код приложения здесь.
И живая демонстрация доступна здесь.
Оригинал: “https://dev.to/cubejs/building-open-source-mixpanel-alternative-part-2-conversion-funnels-4hm0”