Mixpanel + vue 연동

데이터팀에서 믹스패널 적용에 대한 요청이 왔다.

 

믹스패널은 아래에 페이지에 잘 설명되어 있다.

https://docs.mixpanel.com/docs/what-is-mixpanel

What Is Mixpanel? - Mixpanel Docs

 

간단히 얘기해보자면  우리 서비스에서 사용자가 어떻게 행동하는지 분석해주는, 사용자 행동기반의 제품 데이터 분석 툴(Product Data Analystics Tool)이다.

믹스패널은 좀 더 쉬운 의사결정을 위해, 또 사용자의 편의를 위해 기본 리포트인 인사이트, 퍼널, 플로우, 리텐션 리포트 이외에도 대시보드, 코호트 등 다양한 기능을 제공한다.

 

 

 

Vue.js 기반 프로젝트에서 믹스패널 연동한 과정

 

1. package 설치

npm install --save mixpanel-browser

 

 

2. import

import mixpanel from 'mixpanel-browser'

 

3. init

🔗 support / adaptor / mixpanel / index.ts

const MIXPANEL_TOKEN = import.meta.env.VITE_MIXPANEL_TOKEN

mixpanel.init(MIXPANEL_TOKEN, { debug: true, persistence: 'localStorage' })

참고: https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#mixpanelinit

Javascript - Mixpanel Docs

 

4. track

🔗 support / adaptor / mixpanel / tracking.ts

 

유저가 페이지를 방문할 때 마다 추적하기

import mixpanel from 'mixpanel-browser'

// page 이동을 인지하여 page_view:url을 보내줍니다.
export const pageView = (page: string) => {
  mixpanel.track(`page_view:${page}`, { page })
}

 

 

5. 이벤트 확인하기

 

페이지를 방문한 유저의 이벤트 확인 가능하다.