이벤트 로그 수집기를 향한 여정
사용자 이벤트 수집기 라는 프로젝트 주제에 맞춰,
이벤트 로그에 대한 정의와 구현까지의 과정을 담아 보았습니다 😉
음악을 플레이리스트에 담는 버튼 Click부터, 컨텐츠를 읽기위한 Scroll, Hover 등...
VIBE 서비스에는 수없이 많은 이벤트가 발생합니다.
이렇게 수많은 이벤트 중 로그에 담을만한 유의미한 이벤트가 어떤것일지 정의할 필요가 있었습니다.🤔
figma를 사용하여 페이지 별 발생 이벤트를 모두 기록해 보았습니다.
이벤트 로그 정의를 위해
로그 수집의 목적을 다음과 같이 정의해 보았습니다.
로그 수집의 목적
- 유저가 남긴 로그로 부터 유저의 경험을 추적함으로써, 서비스 개선에 필요한 인사이트 제공
- 특정 기능에 대한 성능 체크
- 에러 발생시 로그 수집
- 이슈 발생 후 롤백 및 대응 등에 대한 의사결정 판단의 근거로 활용
- 특정 기능에 대한 사용성 진단
- 배너/광고 마케팅 효과 측정
이와같이 로그 수집의 목적을 명확히 함으로써
이벤트의 유의미성에 대한 해답을 찾을 수 있었습니다.
이벤트 로그 정의시 고려할 점
- 이벤트 발생 시점을 명확히 함으로써 데이터 로드, 성능 확인 가능케 할 것
- 서비스의 수익성 창출과 관계되는 컴포넌트를 구현하고, 발생 이벤트를 기록
- 사용자의 서비스 flow가 드러나게끔 파라미터를 구성
- 유저의 적극적인 Action이 드러나는 시점 (ex 로그인 / 로그아웃) 기록
유저 정보는 개인정보 이슈가 발생할 수 있어 최소한의 정보만을 내포해야 합니다.
또한, 로그에 많은 내용을 담으면 당장에는 보기 편할 수 있지만, 분석에 어려움이 생길 수 있습니다.
수집된 로그는 데이터 유관자와의 협업을 통해 분석되고 재가공 된다는 점을 고려하여
로그를 명확하고 간결하며, 이해하기 쉬운 형태로 전달하는데 초점을 맞췄습니다.
그 결과 작성된 이벤트 로그 형식은 다음과 같습니다.
이벤트 발생 시점과 데이터 로드 시점 분리
클라이언트 측에서 바로 발생하는 이벤트와, 데이터가 로드되는 시점을 분리하여 로깅함으로써
페이지 로드 지연시점 및 성능 체크를 가능케 하였습니다.
ex) 페이지를 이동시키는 식별자를 클릭할 경우, ClickEvent, MoveEvent가 발생합니다.
- ClickEvent는 사용자가 클릭한 시점에 발생합니다
- MoveEvent는 페이지 이동 뒤 fetch 요청한 데이터가 로드된 직후 발생합니다.
referer을 통한 유저의 자취 분석
req.headers에 담긴 referer는 페이지를 요청시 이전 페이지가 무엇인지를 알려주므로
유저의 자취를 분석하는데 요긴한 정보를 제공합니다.
Next.js의 getServerSideProps를 통해 req.headers 객체에 접근할 수 있었습니다.
console.log(req.headers)를 통해 확인한 referer
페이지를 이동하거나, 새로운 페이지 로드 시에(새로고침 포함)
paramams/prev에 referer를 담아 이전 페이지 정보를 로그에 기록하였습니다.
❗️ 이때, referer가 존재하지 않거나 서비스 페이지가 아닌 곳에서 접근할 경우
referer대신 'external'이라는 상수를 담아 서비스 외부 페이지에서 접근했음을 명시하였습니다.
prev : 'external'
로그인 유저와 비로그인 유저 구분
- Naver OAuth
이벤트 로그에서 각각의 사용자를 구별하기 위해 네이버 아이디로 로그인을 구현했습니다.
- Context API를 사용한 유저 상태관리
유저 상태를 Context로 관리하고, state에 고유한 랜덤id를 부여하였습니다.
로그 전송시 비로그인 유저의 경우 해당 id를 로그에 기록함으로써, 비로그인 유저 식별을 시도하였습니다.
Mongoose 모델정의를 통한 데이터 품질 관리
eventName별로 요구되는 parameters가 상이하기 때문에,
기존에 정의한 대로 각 필드 및 파라메터에 적절한 형태의 로그가 수집될 수 있도록
Mongoose를 사용하여 로그 스키마를 정의하였습니다.
배너, 팝업 구현
마케팅 포인트와 관련된 컴포넌트 및 기능을 구현하고, 이벤트 로그를 수집하였습니다.
이벤트 로그 데이터는 배너/프로모션과 같은 광고 효과를 측정하는 마케팅 도구로 사용될 수 있습니다.
VIBE의 마케팅 포인트는 멤버십으로의 유도라고 판단하였고 이를 위해 아래의 기능을 구현하였습니다.
- 멤버십에 등록되지 않은 유저가 음악 재생을 시도할때 1분 미리듣기 팝업을 노출.
- 메인페이지 진입 시, 랜덤으로 팝업 광고를 띄움.
유저별로 해당 요소들의 빈도 및 구성을 변동시킨다면 향후 A/B 테스트 또한 가능할 것으로 예상됩니다.
