[Vue] firebase logEvent 연동하기 + Realtime

최근 하이브리드 앱을 적용하면서 기존에 사용하던 firebase 에 web 이벤트도 트래킹을 적용해야 했다.

사실 겉만 보면 좀 어렵게만 느껴지겠지만 개념만 간단하게 생각하면 매우 간단하다. (그냥 로그 찍는거다)

추후 서비스 업데이트를 위해 사용자들이 어떤 이벤트, 어디로 검색했는지를 보는것이 가능하다.

해당 코드는 Vue 내에 적용하기 쉽게 작동하도록 만들었다.

 

👉 firebase 설치

npm install firebase

 

</> 버튼을 클릭해서 web 전용 key를 생성해준다

 

👉 main.js

  const app = initializeApp(firebaseConfig(/* firebaseConfig key */));
  const analytics = getAnalytics(app);
  
  const AnalyLog = (value) => {
    logEvent(analytics, value);
  };
  
  Object.defineProperty(Vue.prototype, "$logEvent", {
    value: AnalyLog,
  });

firebase key 는 web 프로젝트 추가 시 발급되므로, 다른 경로에 지정해놓고 사용하거나 env 환경변수로 바꿔서 사용해주는것을 권장한다.

 

 

👉 프로젝트 내에서는 이렇게 사용하면 된다.

 

this.$logEvent(`list_click`);

 

해당 소스를 사용자들이 이벤트를 실행할 때 적용해주면 logEvent 가 발생되고, 해당 프로젝트 firebase 에 들어가서 log가 찍히는것을 보며 확인이 가능하다!

 

Events 는 입력된 로그확인이 가능하고 , Realtime 은 실시간으로 쌓이는 로그 확인이 가능하다

Events 의 경우 log가 찍히고 나서 꽤 시간이 지난 뒤 찍히므로 개발하실땐 Realtime 으로 확인하면석 개발하는것을 추천한다.