angular 프로젝트에 firebase analytics 적용하기

angular 8 버전 이상을 사용하신다면 프로젝트에 firebase analytics를 적용하기가 매우 쉽습니다

 

 

https://github.com/angular/angularfire

angular/angularfire

 

angularfire를 사용하면 현재 사용하는 angular 프레임워크에 매우 쉽게 적용이 가능합니다

 

아주 좋은 점은 angular의 라우터를 인식한다는 점입니다.

 

라우터 화면마다 직접 firebase event를 호출하지 않아도,

 

자동으로 router가 변경될때마다 firebase screen_view 이벤트를 호출합니다

 

 

1. 설치

 

ng add @angular/fire

 

 

 

2. firebase의 환경변수 수정

 

firebase console에서부터 제공받은 정보를 environment.ts 파일에 넣어줍니다

 

 

 

3. NgModule을 설정합니다

 

angular 앱 전체에서 사용할것이기때문에 app.module.ts 파일에 아래와 같이 세팅합니다

 

firebase core 를 설정하는 과정입니다

 

 

AngularFireModule.initializeApp(environment.firebase)

 

이 부분이 시작과 함께 호출되면서 firebase의 사용준비가 끝납니다

 

 

4. analytics 세팅

 

firebase는 analytics 부터 시작해서 auth, database 등 굉장히 많은 기능이 있죠

 

그래서 선택적으로 사용할 기능을 넣어주어야 합니다

 

analytics를 사용할것이기때문에

 

AngularFireAnalyticsModule을 넣고,

 

라우터에 의해 자동으로 screen_view 이벤트가 호출되도록 하기 위해

 

ScreenTrackingService도 함께 불러옵니다

 

그리고 이렇게 설정해주면 완료가 됩니다

 

 

 

firebase analytics가 잘잡히는지 확인하려면 firebase의 메뉴중 debugview 메뉴를 사용하시면 됩니다

 

https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=ko 

Google Analytics Debugger

 

이 크롬 확장 프로그램을 설치하시고 확장프로그램을 on 상태로 변경하면

 

구글 콘솔화면에서도 로그가 찍히는것을 확인할수 있고,

 

debugview 화면에서도 내 입력이 기록되는 것을 거의 실시간으로(수십초 이내) 확인할수 있습니다