[React Native/Mixpanel] RN에서 믹스패널로 손쉽게 사용자를 트래킹 해보자! | How Mixpanel makes it easy to track users

 

요즘의 UX/UI 설계는 보통 사용자 기반의 의사결정으로 이루어집니다.

또 서비스의 비즈니스 모델을 명확히 하려면 앱이 얼마나 퍼널 구조로 되어 있는지가 중요하겠죠!

그렇기 위해서는 앱에 사용자 동작을 트래킹 할 수 있는 솔루션을 연동해야 합니다.

 

수많은 트래킹 솔루션 중 Mixpanel에 대해 알아보고자 하는데요!

믹스패널은 유료 플랜을 사용하지 않고도 웬만한 트래킹 함수들을 앱에 연동할 수 있다는 큰 장점이 있죠.

이번 포스팅에서는 RN 앱에서 믹스패널을 연동하고 간단히 사용자를 트래킹해보는 예제를 다뤄봅시다.

 

📌 1. 시작하기

SDK 설치 및 연동방법 공식문서에 더 잘 작성되어 있으니 참고해주세요!

1-1. mixpanel.ts 파일 생성하기

믹스패널 함수들을 사용하기 위해서는 믹스패널 토큰값으로 mixpanel 인스턴스를 생성해주어야 합니다.

다만 다른 서드파티 라이브러리와는 다르게 믹스패널은 파일마다 new Mixpanel()을 선언해주어야 동작하게 되는데요,

이러한 불편함을 해결하기 위해 별도의 mixpanel.ts 파일을 생성해줍시다.

mixpanel.ts

import {Mixpanel} from 'mixpanel-react-native';
import Config from 'react-native-config';

//# MIXPANEL INIT
const MIXPANEL_TOKEN =
  Config.ENV === 'PRODUCTION'
    ? PRODUCTION_MIXPANEL_TOKEN
    : STAG_MIXPANEL_TOKEN;
const mixpanel = new Mixpanel(MIXPANEL_TOKEN, false, false);

export {mixpanel};

 

정확한 사용자 트래킹을 위해 운영 환경과 테스트 환경을 분리했습니다 :)

1-2. mixpanel init

1-1을 통해 생성한 믹스패널 인스턴스를 반환하는 파일을 생성하였다면 app.js에 init 함수를 선언해줍니다.

app.js

...
mixpanel.init();

const App = () => {
...

기본적인 세팅은 끝났습니다! 참 쉽죠? 👍🏻

이제 트래킹 함수를 추가해봅시다.

📌 2. Mixpanel Identify

Mixpanel은 비회원일 때, 회원일 때 사용자 식별하는 방식이 다릅니다.

비회원일때는 Mixpanel Distinct ID(믹스패널ID)가 랜덤으로 생성이 되어 이벤트 데이터들이 쌓이고,

회원이 되면 내부 User ID(Client ID)와 맵핑되면서 비회원~회원 때의 행동 데이터들을 모두 볼 수 있게 됩니다.

 

웹은 비회원일때 브라우저가 변경되거나, 쿠키를 삭제하고 다시 방문하지 않는 한 계속 동일 인물로 인식합니다.

다시 말해 동일 브라우저, 동일 인물 체계입니다.

그리고 앱은 동일 디바이스라고 하더라도 비회원인 상태에서 앱을 삭제하고 다시 설치하면 다른 인물로 인식되어

다른 랜덤 ID값이 부여됩니다.

 

다만, 회원인 상태로 로그인하면 기존 데이터들을 다시 활용할 수 있습니다.

2-1. Identify 부여하기

login.tsx

const {mutate: onLogin, isPending: isLoginPending} = useMutation({
    mutationFn: (loginBody: ILoginParametersProps) =>
      userApis.login({loginBody}),
    onSuccess: (res: ILoginResponseProps) => {
			...
+      AsyncStorage.setItem('userId', USER_ID);
+      mixpanel.identify(USER_ID);
+      mixpanel.track('login success');
			...
    },

로그인 api가 success 되었을 때, mixpanel.identify 함수로 유저ID를 부여합니다.

한 번 부여된 Identify는 해당 함수를 재호출하거나 mixpanel.reset() 함수가 호출되기 전까지는

앱에서 실행되는 믹스패널 함수 전체에 유저ID가 할당되게 됩니다.

 

(선택사항) 저는 JWT 토큰을 로컬 스토리지에서 가져와 자동 로그인 기능을 구현하였기에

앱에 재인입 시 JWT 토큰 검증에 성공했을 때 위 믹스패널 함수를 동일하게 추가합니다.

2-2. Identify 초기화

앞서 언급했듯, mixpanel.reset() 함수를 선언하기 전까지 믹스패널 트래킹 함수를 실행하면 위 이미지처럼 Distinct ID에 유저ID가 들어가게 됩니다.

useCommonAlerts.ts

const onLogout = () => {
	...
+	mixpanel.reset()
	...
}

로그아웃 성공 콜백 함수에 mixpanel.reset() 코드 한 줄을 추가해주면 간단히 id값을 초기화할 수 있습니다.

이후 다시 identify를 선언해주기 전까지는 난수ID가 들어가게 됩니다.

📌 3. 트래킹 함수 추가하기

믹스패널에는 다양한 트래킹 함수가 있지만 이번 포스팅에선 간단히 track 과 timeEvent 함수를 다뤄보겠습니다.

3-1. mixpanel.track()

track 함수는 믹스패널의 가장 기본적인 트래킹 함수로서, 유저가 특정 버튼을 선택했을 떄를 감지하거나 특정 페이지에 인입했을 때 사용되는 함수입니다.

 

예를 들어 유저의 로그인 이벤트 호출을 감지하고싶다면 로그인 API success callback에 mixpanel.track(’login success’) 를 선언해줄 수 있고, 특정 페이지 인입을 감지하고 싶다면 mixpanel.track({특정_페이지명}) 으로 선언하면 됩니다.

3-2. mixpanel.timeEvent()

특정 페이지 인입시에 3-1에서 언급했던 track() 함수를 사용해도 되지만, 사용자가 해당 페이지에 얼마나 머물렀는 지 알기 위해서는 timeEvent() 함수를 사용해야 합니다.

 

❗  특정 페이지 인입 시 timeEvent({특정_페이지명})를 호출하고 이후 특정 페이지명을 키값으로 track 함수가 호출되었을 때 믹스패널 상에 로그가 찍히게 됩니다. 쉽게 말해 timeEvent 가 timer start, track이 timer end가 되겠죠!

 

예시 코드

// 인입된 페이지를 이탈할 때 track 함수를 호출한다
const onNavigate = () => {
	mixpanel.track({page_name});
  navigation.navigate({next_page});
};

// 페이지 인입 시 timeEvent를 호출한다
useEffect(()=>{
  if(isFocused) {
	  mixpanel.timeEvent({page_name});
  }
}, [isFocused]);

 

timeEvent로 트래킹된 로그는 track과는 다르게 ‘Duration’ 항목이 추가됩니다. (단위 : 초)

 

---

이렇게 간단하게 RN 앱에 Mixpanel을 연동하는 방법에 대해 알아보았습니다.

부족한 제 글을 읽어 주셔서 감사드리며,

혹시라도 따라오시다가 문의사항이나 틀린 부분이 있다면 댓글로 언제든지 남겨주세요 :)