반응형
① Firebase에 프로젝트 추가
https://console.firebase.google.com/
로그인 - Google 계정
하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인
accounts.google.com
② 추가한 프로젝트에서 웹 추가
③ fbconfig.js
생성한 프로젝트에 들어간 후 설정(톱니바퀴) 버튼을 클릭하고 33
CDN을 가져온다
fbconfig.js
CDN에서 아래 부분만 넣어준다
var firebaseConfig = {
...
}
④ Firebase에서 이벤트 추가하기
Analytics=>Custom Definitions=>맞춤 측정항목=>맞춤 측정항목 만들기
이벤트가 잘 생성이 된 것을 볼 수 있다
⑤ HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/asset/script/fbconfig.js"></script>
<!-- firebase 경로 가져오기 -->
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-analytics.js"></script>
</head>
<body>
<div>
<button class="btn"></button>
</div>
<script>
// firebase 초기화
firebase.initializeApp(firebaseConfig);
const analytics = firebase.analytics();
// firebase 버튼 클릭 시 이벤트 발생
$(".btn").on("click", function() {
analytics.logEvent("test_event");
});
</script>
</body>
</html>
⑥ Analytics=>Realtime에서 이벤트 확인하기
이벤트 탭 인기 있는 이벤트/사용자를 클릭하면 발생 이벤트 count를 확인할 수 있다
반응형
'ETC' 카테고리의 다른 글
| [#. VSCode] Visual Code에서 파일 수정 시 Insufficient permissions. Select 'Retry as Sudo' to retry as superuser. 해결하기 (0) | 2021.11.16 |
|---|---|
| [#. AWS] Mac에서 ssh로 AWS EC2 접속하기 (0) | 2021.11.09 |
| [#. ETC] Github와 Slack 연동하기 (0) | 2021.06.24 |
| [#. ETC] modulo 연산 사이트, 약수 구하기 사이트, 확장된 유클리드 알고리즘 사이트 (0) | 2021.05.24 |
| [#. ETC] ERD(Entity Relationship Diagram) 개념 및 그릴 때 필요한 사이트 (0) | 2021.04.19 |
