[Xcode][SwiftUI] MixPanel로 앱 내 사용자 events 추적하기

 

📚 MixPanel 사용

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

What is Mixpanel? - Mixpanel Docs

 

 

사이드 프로젝트가 거의 마감이 되어가고, 배포하기 전인데 

앱 내에서 사용자가 사용하는동안의 Events를 추적해보라라는 조언을 얻었고, 

그것을 적용하기 위해 MixPanel 이라는것을 추천받았습니다.

 

( Firebase같은 것들도 되지만, 인사이트로 통계를 확인하는데에 있어서 MixPanel이 편하다고 하네요 ! ) 

 

그런데, 정작 구글링을 해보면 MixPanel에 대한 정보가 많이 안나왔습니다 ! 

따로 테스트용 프로젝트 파일을 만들어서 테스트를 시도했고, 원하는대로 성공해서 기록하여 남겨봅니다.

 

 

 

 

 

1. 일단 MixPanel 사이트에서 프로젝트 파일을 만들면 MixPanel을 Settting하는 화면이 나옵니다. 

나중에 따로 들어 갈 경우, 우측 상단 메뉴에서 Set Up MixPanel을 선택하면 됨 ! 

 

2. SetUp 시작 

STEP 1에서 SetUp을 시작하는데, 저는 PersonalizeSetup을 선택해서 넘어가줬습니다.

 

그럼 두번째 단계가 나오는데, 어떤 Events들을 추적할건지 정해주면 됩니다. 

Sign Up, ContentView, Share, Purchase 가 적혀있는건 기본적으로 채워져있는 것들이고

 

저는 프로젝트 내에서 3개의 버튼이 얼마나 Tapped되냐를 추적할 것이었기 때문에, 3개의 버튼 Events로 바꿔줄게요.

 

이렇게 수정을하고, Next를 누르면 

 

각 이벤트에 어떠한 프로퍼티명을 연결해줄건지 설정하는 화면이 나옵니다.

 

여기서 프로퍼티는, 프로젝트내에서 해당 이벤트가 발생하면 이를 프로퍼티로 나의 MixPanel 프로필에 전달해서, 수치를 어떻게 증가시킬건지 설정하기 위한 것으로 보면 됩니다. ( 아마 ? )

 

저는 이렇게, Marker1에 해당하는 프로퍼티명을 TappedMarker1으로 해줄게요. 

 

그리고 한개의 Events에 여러개의 Properties를 할당할 수 있으므로, 각 이벤트마다 클릭해서 넘어가면 됩니다.

이렇게요.

 

모든 프로퍼티 또한 설정이 끝났다면, Next를 눌러 넘어갑니다.

 

이런 화면이 나오면서, 설정했던 이벤트와 프로퍼티를 확인하고

Connect your data를 클릭하면 

 

이렇게 MixPanel 셋팅은 끝났습니다. !

 

우측 상단을 보면, token 이 나와있는데 이 token이 프로젝트 파일 내에서 나의 Mixpanel프로젝트와 연결시킬 토큰 값이 되므로, 

공개되지 않게 잘 복사해서 사용하시면 됩니다. ( 물론 MixPanel 사이트내에서 수시로 확인 가능 )

 

그리고 아직 감지되는 데이터가 없기때문에, 현재 STEP 3에서 왼쪽 하단의 Skip for Now로 일단 설정화면을 나가줍니다.

 

 

 

Xcode

자 이제 Xcode에 프로젝트 파일을 생성해주고, MixPanel 라이브러리를 추가시켜줘야합니다.

Add Package에서 https://github.com/mixpanel/mixpanel-swift 이 값을 URL에 넣어서 라이브러리를 추가해줍니다.

 

( 추가 후, MixPanel이 제대로 import가 안될 수도 있는데 Xcode를 종료시켰다가 다시 실행을 해줍니다. )

 

Mixpanel이 잘 추가가 되었다면

 

@main 파일에서 Mixpanel을 연결시키기 위해, 토큰값을 통해서 초기화 시켜 줍니다.

( **  trackAutomaticEvents: true 이 값은.. 없으면 에러가 떠서 넣어놨었는데, 실제로 제가 프로젝트에 적용할때는 없어야 하더라고요 ? 조금 더 찾아봐야 할 것 같긴한데.. 없어도 되어보입니다 ! )

 

 

 

그리고 내가 추적할 이벤트가 있는 뷰 ( 현재 포스팅에선 ContentView ) 에서, 이벤트를 추적하는 함수를 생성하고 적용해주면 됩니다.

import SwiftUI
import Mixpanel

struct ContentView: View {
    var body: some View {
        VStack(spacing: 30) {
            Button {
                trackButtonTapped1()
            } label: {
                Text("MixPanelTapped1")
                    .background(.blue)
                    .foregroundColor(.white)
            }

            Button {
                trackButtonTapped2()
                print("ButtonTapped")
            } label: {
                Text("MixPanelTapped2")
                    .background(.blue)
                    .foregroundColor(.white)
            }
            
            Button {
                trackButtonTapped3()
                print("ButtonTapped")
            } label: {
                Text("MixPanelTapped3")
                    .background(.blue)
                    .foregroundColor(.white)
            }
        }
        .padding()
    }
    
    func trackButtonTapped1() {
        Mixpanel.mainInstance().track(event: "Marker1")
        
        Mixpanel.mainInstance().people.increment(property: "TappedMarker1", by: 1)
    }
    
    func trackButtonTapped2() {
        Mixpanel.mainInstance().track(event: "Marker2")
        
        Mixpanel.mainInstance().people.increment(property: "TappedMarker2", by: 1)
    }
    
    func trackButtonTapped3() {
        Mixpanel.mainInstance().track(event: "Marker3")
        
        Mixpanel.mainInstance().people.increment(property: "TappedMarker3", by: 1)
    }
}

 

함수를 간단히 설명해주자면 ..

 

✅ Mixpanel.mainInstance().track(event: "Marker2")

    내가 Mixpanel 사이트에서 추적할 이벤트를 정해주는 것입니다.

✅ Mixpanel.mainInstance().people.increment(property: "TappedMarker2", by: 1)

    그리고 추적하는 해당 이벤트의 프로퍼티는 무엇이었고, 해당 이벤트가 발생하면 어떤 수치를 변화시킬건지 ? 

    by: 1 이라 함은 해당 이벤트가 발생할때 해당 프로퍼티의 수치를 1증가시키겠다는 것입니다. 

 

 

 

일단 뷰 자체는 간단하게 이렇게 만들어줬었고,,

 

이제 실행시켜서 각 버튼을 눌러보면, 어떻게 추적되고 보여지는지 확인해볼까요 ? 

 

아 그전에 !!!

요 화면이 아까 Mixpanel만 세팅할때는 Finish and Close가 활성화가 안될텐데,

실질적으로 추적하는 이벤트가 없고, 프로젝트에 연결되어있지 않기 때문입니다.

방금처럼 개발Tool에서 연결시키고, 실행시키면 바로 Data detected가 뜨면서 바뀝니다.

 

이벤트가 발생했으니, View Events를 눌러서 확인해볼까요 ?

( 혹은 사이트 내에 왼쪽 상단 Events를 눌러서 확인할 수도 있음 ) 

이렇게 나옵니다 ! 

 

시간, device, city 등등 ..

근데 city는 생각보다 정확하진 않고, 시간이 좀 지나야 정확히 처리되긴 한다는데 아직 확인해보진 못했네요 ㅎㅎ

 

 

 

그리고 mixpanel 찾아볼때 관련된 레퍼런스들을 같이 올려둡니다 ! 

https://mixpanel.mfitlab.com/blog/mixpanel-userflow-analysis-guide-advanced

[믹스패널 사용법] 사용자 행동 패턴을 믹스패널로 발견하고 분석하기 - 플로우 차트 활용 심화 -

 

https://flowkater.tumblr.com/post/131485056320/embed

Tumblr