Google Analytics and react?

Intro.

"그게 좋은 건 알지만, 그걸 실현 하는건 시니어 소프트웨어 엔지니어 수준은 되어야 하지 않을까?"

라고 생각을 하고 있었습니다. 정말 막막했죠. 오로지 블로그에서나 Google Anlytics 를 도입하고, 이를 기반으로 해서 구글 창에서 열람 하는 건 알아도, 이걸 어떻게 백엔드 부분이며 설정을 하고, 또 어떻게 현황판을 설계해서...

 

잠깐. 그러고 보니 Google Analytics 가 현황판인데, 이 것도 블로그 분석을 무슨 크게 잘 한게 아니라 그저 몇가지의 설정만 부여해서 해낸 것이었습니다. 너무 어렵게 생각 한 건지도 모르겠다는 생각이 들었던 저는,

 

"지금이라면, 그 의문에 해답을 찾을 수 있을 것 같다"

 

라고 생각하며 찾은 정보가 있습니다. 이 부분을 기록해둘까 합니다. 쓸일이 있을지도 모르니까요.

만약 Google Analytics 안 씀! 이라고 한다면, 다른 서비스를 그때 알아보면 될 테고. 만에하나 '자체 개발한 상황판에서 우린 웹페이지 데이터를 읽어들이도록 해야한다' 라 해도, 이젠 문제가 없을 듯 하네요.

 

자, 그럼 봅시다. React.js 웹 어플리케이션 에서도 요리조리 tracking 을 monitoring 해보는 것.

요약하자면 다음과 같습니다.

 

1. Google Analytics 로 tracking ID 를 확보가 목표 (이 과정은, create new property 부터 시작)

2. 따라서 Google Analytics 는, 페이지를 먼저 호스팅 한 이후에 작업을 해야 하는 것으로 보임.

3. Tracking ID 를 복사한 후, 이제 본격적으로 작업을 시작.

 

다행히도 react hook 를 추가로 설치 해서 google analytics 설정 또한 마칠 수 있어 보입니다.

import React from "react";
import ReactGA from "react-ga";

const useAnalyticsEventTracker = (category="Blog category") => {
  const eventTracker = (action = "test action", label = "test label") => {
    ReactGA.event({category, action, label});
  }
  return eventTracker;
}
export default useAnalyticsEventTracker;

...

ReactGA.event 를 구성 함으로써 tracking process 가 연결 되어 작동할 수 있습니다.

이 후, Google analytics 현황판으로 가서 확인 해 보면 정상 작동하는 모습을 볼 수 있습니다.

 

(개인 메모)

# Did you open up this link to implement this feature?

Be sure to check out the official guidance of ReactGA first before jumping on and using this immediately. Also, it is required to briefly test out whether the above code block way works out once you plan to follow it as guidance.

 

Source.

How to integrate Google Analytics with React JS application?