@koreacreditdata/yuhina NPM

Yuhina: 캐시노트 에러 및 이벤트 트래킹 도구

Prerequsites

Sentry를 사용한다면, sentry dsn이 필요합니다.
Greenfinch를 사용한다면, 환경별 write key와 serviceName이 필요합니다. (뭔지 모르면 데이터 엔지니어링 팀에 문의)
Segment를 사용한다면, write key가 필요합니다.
- Segment는 Segment측의 CDN을 사용하길 권장하므로 그들이 제공하는 code snippet이 index.html 등에 삽입되어 있을 것을 가정합니다. (i.e., initialize 시저에 window.analytics 가 존재해야 함)
react와 @koreacreditdata/pigeon이 설치되어 있다고 가정합니다.
- react는 MMP 광고 노출 이벤트를 intersection observer를 통해 자동 추적하는 custom hook에서 필요합니다.

사용법

가능한한 빠른 타이밍에 initializeTrackerInterface() 호출
- segment가 네트워크 bandwidth를 후순위로 차지하도록, 프로덕션 빌드에서는 segment initialize는 3초 뒤에 불리게 구현되어 있습니다.
페이지 이벤트 추적을 위해 page() 호출
유저가 회원 가입/로그인하면 identifyUser() 호출
유저가 회원 탈퇴/로그아웃하면 clearUser() 호출
identifyUser()와 별개로, 모든 이벤트에 항상 공통으로 추적되는 properties 중 유저와 사업장에 대한 정보를 updateCommonUserProps(), clearCommonUserProps()로 업데이트/리셋해줘야 합니다.
여러가지 이벤트를 trackSomething 형태로 미리 정의해두었는데 이들로 커버하지 못하는 케이스는 trackEvent를 직접 호출합니다.
- MMP 광고 노출 이벤트는 trackCreativeView()로 직접 추적할 수도 있고, useTrackCreativeView() hook을 이용해 뷰포트에 노출됐을 때 추적되게 할 수도 있습니다.
trackEvent 함수는 호출시 Segment가 초기화되지 않고 window.analytics가 없더라도 이벤트 추적 디버깅이 가능하도록, console.log 로 이벤트를 보여줍니다.

initializeTrackerInterface 예시

// src/index.tsx at merlin

if (process.env.REACT_APP_DEPLOY_ENV !== 'development') {
  initializeTrackerInterface({
    sentryConfig: {
      dsn:
        'https://YOUR_DSN.ingest.sentry.io/5867512',
      allowUrls: [
        /^https:\/\/app2\.cashnote\.kr/,
        /^https:\/\/app2-staging\.cashnote\.kr/,
      ],
      environment: process.env.REACT_APP_DEPLOY_ENV,
      release: process.env.REACT_APP_GIT_SHA,
    },
    greenfinchConfig: {
      writeKey: process.env.REACT_APP_GREENFINCH_WRITE_KEY as string,
      serviceName: 'kcd_cashnote',
      debug: process.env.REACT_APP_DEPLOY_ENV !== 'production',
    },
    analyticsConfig: {
      writeKey: process.env.REACT_APP_SEGMENT_WRITE_KEY as string,
      debug: process.env.REACT_APP_DEPLOY_ENV !== 'production',
    },
  });
}