프로젝트를 위한 가장 간단한 Firebase Analytics 가이드

참고: 프로젝트에 대해 생성하려는 이벤트를 Firebase Analytics 콘솔에 표시하는 방법에만 초점을 맞추고 있기 때문에 이 게시물에는 Firebase 콘솔에서 웹 앱을 생성하는 방법이 포함되어 있지 않습니다.

프로세스의 결과는 다음과 같은 관점으로 이끌어야 합니다.


나는 오늘 이것이 어떻게 작동하는지 알아내려고 꽤 많은 시간을 보냈고 당신이 시간을 잃을 게시물이 많기 때문에 내 경험을 공유하려고 생각했습니다.

Vite 프레임워크와 TypeScript를 사용하고 있습니다.

firebase 콘솔과 firebase.ts 구성 파일에 앱을 추가했습니다.

위의 그림에서 오른쪽에 로그인 이벤트를 볼 수 있습니다.
아래는 Firebase 라이브러리에서 signInWithEmailAndPassword() 메서드를 만들고 저장한 방법과 로그인 후 분석 메서드를 추가하는 방법에 대한 예입니다.

const signIn = (
    email: string,
    password: string,
  ): Promise<firebase.auth.UserCredential> => {
    return auth.signInWithEmailAndPassword(email, password).then((user) => {
      analytics.logEvent('login')
      return user
    })
  }

코드의 해당 부분에서 login 이벤트가 firebase 분석 라이브러리 및 문서에서 사용되고 있습니다.
https://developers.google.com/gtagjs/reference/event#page_view

그런 다음 콘솔의 이벤트가 24시간이 지날 때까지 표시되지 않으므로 디버깅 보기에서 확인해야 한다는 것을 깨달았습니다.

먼저 Chrome에서 Google Analytics 디버거를 다운로드합니다.
https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en
활성화했습니다.

그런 다음 Firebase 프로젝트에서 대시보드 ->로 이동하고 DebugView Report를 클릭합니다.

https://firebase.google.com/docs/analytics/debugview#web
그러면 다른 페이지가 열리고 마지막으로 해야 할 일은 localhost 링크를 복사하여 붙여넣는 것입니다. 그러면 연결됩니다.

이는 분석을 위해 점점 더 많은 이벤트를 생성할 수 있도록 하는 간단하고 쉬운 예입니다.

즐기다!