믹스패널 데이터 수집 계획에 따라 개발하기

지난 글(믹스패널 도입(Mixpanel Implementation)할 때, 반드시 계획 문서는 만드세요)에서는 믹스패널에서 어떤 데이터를 수집할지 꼼꼼한 계획이 필요하다고 말씀드렸습니다. 이번 글에서는 작성된 데이터 수집 계획 문서에 따라 믹스패널 이벤트를 수집하는 방법에 대해 알아보겠습니다.

믹스패널 도입(Mixpanel Implementation)할 때, 반드시 계획 문서는 만드세요

 

*유의사항
Implementation은 애플리케이션의 소스 코드 수정을 필요로 하기 때문에, 개발자에게 맡기는 것이 좋습니다.

1.  데이터 수집 할 믹스패널 프로젝트 만들기

Mixpanel에서 Project를 만들 때는 test 데이터와 production 데이터가 섞이는 것을 방지하기 위해, Dev용과 Production용을 따로 만듭니다.

2. Mixpanel 라이브러리 설치하기

믹스패널 공식 문서를 통해, 사용하시는 환경에 적합한 문서로 들어갑니다.

웹 사이트에 Mixpanel을 설치한다면, javascript 문서를 참고하시면 됩니다. 위처럼, 믹스패널 설치 코드가 모든 페이지에 들어가 있으면 됩니다. (랜딩 페이지, Login 페이지, 회원가입 페이지...)

mixpanel.init("YOUR_TOKEN");

코드 중 YOUR_TOKEN부분을 프로젝트 토큰으로 바꿔주면 됩니다. (프로젝트 토큰은 믹스패널 화면 우측 상단의 Setting > Project Setting 창에서 확인 하실 수 있습니다.)

3.  사용자 행동 데이터(이벤트) 전송하기

믹스패널, 도입 절차 및 기본 정보글에서 Mixpanel의 Property는 Event Property와 People Property가 있다고 했습니다.
우선, Event Property를 추적하는 방법에 대해 알아보겠습니다.

mixpnel.track(
  "Login", 
  {"email": "chjune0205@gmail.com"}
);

head에 모든 설치 코드를 넣어주었다면 위 코드를 사용할 수 있게 됩니다. (반드시 이 코드가 호출되기 전에 Mixpanel 라이브러리 설치 코드가 먼저 호출 되어야 합니다)

위 코드는 "Login"이라는 이름으로 {} 안의 속성들을 추적한다는 뜻입니다.

 

또 다른 예로, Navigation Bar의 구매하기 버튼 클릭에 대한 Event 및 Event Property를 추적하기 위한 코드는 다음과 같습니다.

mixpanel.track(
  "click: CTA",
  {"location": "Navigation"}
);

해당 코드가 실행되면, Mixpanel의 Events에서 실시간으로 수집되는 데이터를 확인하실 수 있습니다. (믹스패널 서버 상태에 따라 1~2분 딜레이가 생기기도 합니다. 그 외에는 데이터가 믹스패널로 보내지지 않은 상황으로 볼 수 있습니다. 이 경우, 클라이언트 쪽에서 원인을 파악해야 합니다.)

4. Identity 관리하기

Login기능이 있는 서비스의 경우 identify를 통해 동일한 사용자를 통합할 필요가 있습니다.
한 사람이 PC로 해당 애플리케이션을 이용하다가 핸드폰으로 이용하는 경우가 존재할 수도 있고, 동일한 기기에서 다른 사용자가 로그인해서 사용할 수도 있는 등 여러가지 시나리오가 있을 수 있습니다. A라는 사용자의 행동 데이터들을 B라는 사람의 행동 데이터로 보는 일이 없도록, '누가 어떤 경험을 했는지' 명확하게 하기 위해 Identify를 활용합니다.

identify는 주로 회원가입(Sign Up) 이벤트와 로그인 이벤트에서 호출합니다. 또한, people 속성이 바뀔 때에도 identify를 호출합니다. 

function accountCreated(user){
  mixpanel.track("Sign Up");
  mixpanel.identify(user.email);
}

function login(user){
  mixpanel.identify(user.email);
}

위의 경우 회원가입 완료 시, "Sign Up"이라는 이벤트 데이터를 보내고, 해당 유저의 이메일을 활용하여 identify합니다.
login의 경우에도, 사용자가 로그인을 완료하면 해당 유저의 email을 통해 identify 합니다.

 

웹사이트의 경우 크롬 브라우저의 개발자 도구를 켜고, mixpanel.get_distinct_id()를 하면 현재의 distinct_id를 확인할 수 있습니다.

 

identify 한 뒤 mixpanel Events를 확인하면, identify에 전달한 값과 동일한 distinct_id를 확인하실 수 있습니다.

5. 사용자 정보 저장하기

이번에는 People Property에 정보를 저장해보겠습니다.

*참고로 people.set을 호출할 때는 마지막에 identify 호출도 함께 해주세요. 그래야 사용자 속성에 데이터가 온전히 보내집니다. (믹스패널에서 people.set으로 사용자 속성을 수집할 때에는 클라리언트의 Queue에 쌓아두었다가, identify 및 이벤트 추적이 될 때 함께 보내는 식으로 작동합니다. 정확한 정보는 사용하시는 SDK에 해당하는 소스 코드를 참고해보세요)

mixpanel.identify(identify에 사용한 유저 정보);

mixpanel.people.set

mixpanel.people.set({"Plan Type": "Premium"});

위와 같이 mixpanel.people.set을 이용하며, 나머지는 track을 사용할 때와 구조가 동일합니다.

회원가입을 완료한 경우를 예로 들어보겠습니다.

function accountCreated(user){
  mixpanel.track("Sign Up");
  mixpanel.people.set({
    "Plan Type": user.plan,
    "$name": user.name,
    "$email": user.email
  });
}

위의 경우 people property에 Plan Type, 이름, 이메일 속성을 넣어준 것을 알 수 있습니다.

 

mixpanel.people.set_once()

function landingPageView(){
  mixpanel.track("PageView");
  mixpanel.people.set_once({
    "First View Landing": new Date().toISOString()
  });
  mixpanel.people.set({
    "Last View Landing": new Date().toISOString()
  });
}

위 상황에서, 어떤 사람이 2021년 02월 26일 7시에 랜딩페이지를 처음으로 방문했습니다.
이때는 First View Landing과 Last View Landing 둘 다 21년 2월 26일 7시라는 것을 확인할 수 있습니다.
시간이 흘러, 동일한 사람이 8시에 한 번 더 접속하면 First View Landing은 7시, Last View Landing은 8시로 추적 됩니다.

 

mixpanel.people.increment()

이 속성은 +와 -를 통해 연산을 수행합니다.
이 사람의 포인트가 얼마나 남았는지, 몇 번이나 버튼을 클릭했는지 등을 알 수 있기 위한 속성입니다.

function purchaseItem(){
  mixpnael.people.increment("Purchased Counts");
  mixpnael.people.increment("Points Earned". 500);
  mixpnael.people.increment({
    "Money Spent": 2000,
    "Credits Remaining": -32
  });
}

첫 번째는 Purchased Counts라는 이름의 속성을 +1 해주는 역할을 합니다.
두 번째는 파라미터로 숫자를 직접 던져주어 해당 수만큼 +해줌을 뜻합니다.
세 번쨰는 여러 속성들을 increment를 할 수 있으며, -를 전달하면서 -연산을 수행하도록 합니다.

 

6. Super Property

매 이벤트마다 보내지도록 할 Super Property에 대해 알아보겠습니다.

이전 포스팅에서 사용했던 이벤트 기획 시트입니다.

구독 플랜이 존재하는 서비스라면, 사용자의 Plan Type에 따라 사용할 수 있는 권한이 다를 것이고, 다른 이벤트들이 발생합니다.
때문에 Plan Type은 매 이벤트마다 수집하는 것보다, Super Property로 지정해두고 Event 추적시 알아서 Event Property에 따라오도록 만드는 게 편리하겠죠? 이때 쓸 수 있는 게 Super Property입니다. (쿠키에 해당 값을 저장해뒀다가 event 수집시 함께 보내는 방식으로 작동합니다)

 

Super Property는 mixpanel.register({})로 가능합니다.

function accountCreated(user){
  //윗 부분 생략
  mixpanel.register({
    "Plan Type": user.plan
  });
}

이렇게 해주면, 다른 이벤트에서도 해당 속성이 확인 가능합니다.

만약 Plan Type을 유저가 Premium으로 업그레이드하는 경우, 동일한 속성에 register를 해주면 됩니다.

function planUpgraded(user){
  //윗 부분 생략
  mixpanel.register({
    "Plan Type": "Premium"
  });
}

*유의 사항

Super Property는 사용자의 쿠키에 저장되어 작동하는 방식입니다. 사용자가 쿠키를 삭제하면, 다시 register 함수가 호출되지 않는 이상 해당 속성은 추적되지 않습니다.