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

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

 

 

https://github.com/angular/angularfire

 

angular/angularfire

The official Angular library for Firebase. Contribute to angular/angularfire development by creating an account on GitHub.

github.com

 

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

Prints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript.

chrome.google.com

 

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

 

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

 

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

 

 

 

 

| 1 | ··· | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ··· | 1882 |