Mixpanel을 활용한 사용자 행동 패턴 분석
부스트캠프에서 6주간 블록 코딩을 기반으로 정적 웹사이트를 만들 수 있는 BooLock을 만들었다. 서비스를 완성한 후 캠퍼분들에게 서비스를 사용한 후 피드백을 부탁드렸었다. 여러 피드백을 바탕으로 서비스를 개선해 나갔지만 사용자는 자신의 행동 중 어디가 불편한지 잘 모르는 경우도 있고 데이터를 이용해서 행동 속에서 사용자의 불편함을 객관적으로 도출해보고 싶다는 생각이 들었다.
mixpanel을 사용하면 사용자의 행동 흐름을 파악할 수 있도록 플로우 리포트를 제공한다. 사용자의 행동 흐름을 수집해서 보여줌 모두가 직관적으로 데이터를 보고 직접 분석도 할 수 있어야 설득력이 생긴다고 생각했다.
우선 mixpanel을 사용하려면 서비스에 설치한다.
npm install --save mixpanel-browser
공식 문서에 프로젝트 별로 설정하는 방법이 나와있고 javaScript 환경에서 어떻게 설정해야 하는지 참고해 진행했다. 앱초기에 initMixpanel을 호출하고 이후 track하고 싶은 사용자 action이 수행될 때 실행되는 함수에서 trackEvent를 호출했다.
import mixpanel from 'mixpanel-browser';
const isProduction = import.meta.env.MODE === 'production';
export const initMixpanel = () => {
const MIXPANEL_TOKEN = import.meta.env.VITE_MIXPANEL_TOKEN;
mixpanel.init(MIXPANEL_TOKEN, { debug: true });
_connectUser();
};
const _connectUser = () => {
const userId = localStorage.getItem('userId');
if (userId) {
mixpanel.identify(userId);
}
};
export const trackEvent = (eventName: string, properties?: Record<string, any>) => {
const baseProperties = {
debug: !isProduction,
userId: localStorage.getItem('userId') || 'anonymous',
timeStamp: new Date().toISOString(),
};
mixpanel.track(eventName, {
...baseProperties,
...properties,
});
};사용자 행동 하나하나를 event라는 데이터로 수집한다. event는 고객이 웹사이트에서 특정 행동을 취할 때 발생하며, 해당 이벤트를 local storage에 여러 번 모아 전송하는 batch 형태로 작동하고 있음을 확인했다.
mixpanel에서 flow는 이러한 이벤트의 연속적인 흐름을 나타낸다. 연속된 이벤트 흐름에서 어떤 사용자가 이탈하는지도 파악 가능하다.
우선 1차적으로 사용자가 워크스페이스에 진입한 후 작업 흐름이 어떻게 되는지 분석해보고 싶어 사용자의 행동을 정의하였다. 예전에 학교 수업을 들으면서 맥락질의 인터뷰로 직접 작업 흐름을 분석하던 때와 비교해보면 더 많은 사용자로부터 데이터를 수집할 수 있고 또한 서비스 내에서 이를 시각적으로 잘 정리해서 보여주기 때문에 정보 수집과 정리 과정에 들어가는 시간을 훨씬 단축할 수 있다는 사실을 알게 되었다.
| 이벤트 이름 | 영문명 | 추가 전송 데이터 |
|---|---|---|
| 블록 드래그 | block_drag_completed | type: block type |
| 블록 삭제 | block_deleted | type: block type |
| CSS 클래스 생성 | css_class_created | item: classname |
| CSS 클래스 선택 | css_class_selected | item: classname |
| CSS 클래스 종류 선택 | css_category_selected | item: category |
| CSS 클래스 항목 체크 | css_category_item_checked | item: category itemvalue: value |
| CSS 클래스 값 입력 | css_category_item_inputted | item: category itemvalue: value |
| 프리뷰 탭 전환 | preview_tab_clicked | item: tab |
| 블록 자체 값 변경 | block_content_changed | item: block namevalue: value |
| 저장 | workspace_saved | |
| 블록 생성 | block_created |
mixpanel에서 flow report를 선택해 유저의 행동 흐름을 볼 수 있는 보드를 선택했고 이벤트의 흐름을 어떻게 보여주는지 파악했다. 추가로 어떤 이벤트가 가장 많이 발생하는지도 확인할 수 있었다.
이제 대시보드 분석을 통해 어떤 점을 개선할 수 있는지 질문을 명확히 정의해보고자 한다. 우선 UX를 개선해볼 수 있는 지점은 다음과 같다. 다음 글에서는 해당 질문에 맞게 MixPanel의 분석 대쉬보드를 편집하는 방법에 대해 알아보고자 한다.
- 사용자가 블록 조립을 완료하는 데 걸리는 시간은 얼마나 되는가?
- 블록 조립 중 특정 작업(추가, 삭제, 편집)에서 이탈하는 사용자가 많은가?
- 특정 블록 유형의 사용 빈도는 어떤가?
- 초보 사용자와 숙련 사용자의 행동 패턴에 차이가 있는가?