티스토리 뷰
angular 8 버전 이상을 사용하신다면 프로젝트에 firebase analytics를 적용하기가 매우 쉽습니다
https://github.com/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 메뉴를 사용하시면 됩니다
이 크롬 확장 프로그램을 설치하시고 확장프로그램을 on 상태로 변경하면
구글 콘솔화면에서도 로그가 찍히는것을 확인할수 있고,
debugview 화면에서도 내 입력이 기록되는 것을 거의 실시간으로(수십초 이내) 확인할수 있습니다
'WEB2.0 > 프로그래밍' 카테고리의 다른 글
AWS lightsail VPC 피어링 (1) | 2021.05.22 |
---|---|
lightsail에서도 컨테이너서비스를 이용할수 있다고? (0) | 2021.05.19 |
webpack-manifest-plugin 을 활용해보자 (0) | 2021.05.16 |
css-loader에서 public root 경로를 그대로 사용하고 싶을때 (0) | 2021.05.15 |
mac에서 ssh 접속을 위해 ppk 파일을 pem 파일로 변환하기 (0) | 2021.05.15 |
- Total
- Today
- Yesterday
- 모바일
- 앱스토어
- 어플리케이션
- 아이디어
- 공모전
- JavaScript
- 아이폰
- 웹표준
- 안드로이드
- 앱
- 애플
- 게임
- iPhone
- 자바스크립트
- 대학생
- php
- android
- 경진대회
- 창업
- 네이버
- AWS
- Apple
- 구글
- 스마트폰
- 트위터
- CSS
- 벤처
- 소프트웨어
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |