Amplitude 사용자 트래킹 코드 고도화 #979
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 task
Todari
approved these changes
Jan 28, 2025
Comment on lines
+94
to
+150
| // 참여자가 전체 지출내역을 확인하는지 체크 | ||
| const trackCheckStepList = () => { | ||
| trackEvent('전체 지출 내역 클릭'); | ||
| }; | ||
|
|
||
| // 6. 참여자 입금관리 | ||
| // 한 번에 몇 명의 사용자를 입금처리하는지 확인 (수정완료 할 때 요청) | ||
| // 한 번에 입금확인처리 vs 여러 번 입금확인처리 | ||
| const trackChangeDepositStatus = (numOfChangeDeposit: number) => { | ||
| trackEvent('참여자 입금 상태 변경', {'참여자 입금 변경 수': numOfChangeDeposit}); | ||
| }; | ||
|
|
||
| // 참여자 이름을 몇 명 바꾸는 지 확인 | ||
| // 자주 변경되는지, 처음부터 사람들이 잘 입력해서 이 기능은 잘 쓰이지 않는지 분석하기 위해 | ||
| const trackChangeMemberName = (numOfChangeMemberName: number) => { | ||
| trackEvent('전체 참여자 이름 변경', {'참여자 이름 변경된 수': numOfChangeMemberName}); | ||
| }; | ||
|
|
||
| // 7. 이벤트 이름 변경 이벤트 | ||
| const trackChangeEventName = (newEventName: string) => { | ||
| trackEvent('행사 이름 변경', {newEventName}); | ||
| }; | ||
|
|
||
| // 8. 계좌번호 관련 | ||
| // 은행 선호도 조사 -> 어떤 은행을 많이 사용하는지 파악하여 선호가 높은 은행을 상위로 올려도 좋을 듯 | ||
| // 계좌번호를 설정하고 '확인' 버튼을 누를 때 사용할 예정 | ||
| const trackBankName = (bankName: BankName) => { | ||
| trackEvent('은행 설정', {bankName}); | ||
| }; | ||
|
|
||
| // 9. 사진 | ||
| // 참여자가 행사 이미지를 확인하는 것은 Page viewed로 체크할 수 있음 | ||
| // 또한 관리자가 행사 이미지를 등록하러 많이 방문하는지 역시 Page Viewed로 체크할 수 있음 | ||
| // 관리자가 행사 이미지를 많이 등록하는지를 확인하고 싶어서 | ||
| const trackUploadImageCount = (imageCount: number) => { | ||
| trackEvent('행사 이미지 등록', {imageCount}); | ||
| }; | ||
|
|
||
| // 10. 메인페이지 | ||
| // 본인의 이름을 얼마나 변경하는지 확인하기 위함 | ||
| const trackChangeUserName = () => { | ||
| trackEvent('유저 이름 변경'); | ||
| }; | ||
|
|
||
| // 11. 주최했던 행사 | ||
| // 행사 삭제를 단일, 복수 어떤 방식으로 많이 하는지 궁금합니다. (사실 행사 삭제도 많이 할 지 의문이기도 합니다.) | ||
| // 복수 : 편집하기 -> 체크박스 선택 -> 삭제완료 | ||
| // 단일 : 행사 진입 -> 행사 삭제 | ||
| const trackEventDelete = (method: 'single' | 'multi') => { | ||
| trackEvent('행사 삭제', {'삭제 방법': method}); | ||
| }; | ||
|
|
||
| // 12. 설정 페이지 | ||
| // 탈퇴를 누르는 이벤트 (우리에겐 매우 좋지 않은 이벤트) | ||
| const trackWithdraw = () => { | ||
| trackEvent('회원 탈퇴'); | ||
| }; |
There was a problem hiding this comment.
디테일한 tracking 코드들 매우 훌륭합니다...
There was a problem hiding this comment.
다만, 대부분의 함수명이 track + 동사 + 동사의 목적어 형태이다 보니, trackEventDelete 보다는 trackDeleteEvent가 조금 더 통일성 있을 것 같긴 해요!
|
|
||
| const onDeleteClick = async () => { | ||
| trackEventDelete('multi'); |
There was a problem hiding this comment.
deleteEvent가 성공하고 나서야 tracking 되어야 하지 않나 싶어요!!
Comment on lines
+9
to
+25
| const TrackThisPageView = ({sectionRef, children}: TrackThisPageViewProps) => { | ||
| const {trackLandingPageBottomView} = useAmplitude(); | ||
|
|
||
| useEffect(() => { | ||
| if (sectionRef.current) { | ||
| const observer = new IntersectionObserver( | ||
| ([entry]) => { | ||
| if (entry.isIntersecting) { | ||
| trackLandingPageBottomView(); | ||
| if (sectionRef.current) { | ||
| observer.unobserve(sectionRef.current); | ||
| } | ||
| } | ||
| }, | ||
| {threshold: 0.3}, | ||
| ); | ||
|
|
There was a problem hiding this comment.
뭔가 다양한 곳에서 사용될 것 같은 이름인 TrackThisPageView 인데, 사실 이 친구는 내부에 trackLandingPageBottomView에 결속되어있어서 결국 landingPageBottomView에 트랙되는 곳만 사용가능하고 폭넓게 사용될 수가 없는 애인 것 같아요!
tracking 코드와 함수 자체를 넓게 사용하도록 바꾸던지, 이친구의 이름을 바꿔주는게 헷갈리지 않을 것 같습니둥
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
issue
구현 사항
비효율적인 Amplitude Store 삭제
이전의 방식은 @amplitude/analytics-browser의 전부를 zustand store로 초기화하여 useAmplitude에서 사용하는 방법을 사용했습니다. 하지만 @amplitude/analytics-browser에서 주어지는 메서드 중 init, track만을 사용합니다. 두 개의 메서드만 사용하는데
import * as amplitude from '@amplitude/analytics-browser'를 사용하여 전체를 저장하고 있을 필요가 없다는 생각이 들었습니다.따라서 amplitudeStore를 삭제하고 amplitude sdk가 필요한 곳에서 필요한 메서드만 사용하는 방식으로 변경했습니다.
사용자 트래킹 코드 추가
추가한 트래킹 코드를 설명하겠습니다.
trackChangeDepositStatus
trackChangeMemberName
중점적으로 리뷰받고 싶은 부분
제 생각에 행동대장에서 사용자 행동을 트래킹하는 이유는 유저의 불편함을 찾고 개선 시켜나가는 것이고, 궁극적인 목표는 사용자 늘리기라고 생각해요.
위 메서드들이 이 목적을 달성할 수 있을지, 또한 문제점을 찾아 사용자를 늘릴 수 있는데 도움이 될 수 있는 지표일지 평가 부탁드려요. 부족한 부분이 있다면 어떤 메서드를 추가하면 좋을지 추천 부탁 드립니다!
논의하고 싶은 부분
레벨 4때 행동대장의 KPI에 대해서 논의한 적이 있어요! 관리자와 참여자의 조건과 WAU 목표를 설정했었어요.
이제 7기 유저를 모으기 전에 KPI를 다시 설정해봐도 좋지 않을까 생각합니다.
🫡 참고사항