ETC

[#. Firebase] Firebase Analytics 파이어베이스 애널리틱스 HTML script에 기본 설정하기, event 설정하기

shab 2021. 7. 22. 15:12
반응형

 

 

 

 

 

 

 

 

① 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를 확인할 수 있다

 

 

 

 

 

 

 

반응형