[회사소개페이지]사후관리 - 구글애널리틱스 연동

2023년 7월 부터 더이상 유니버셜 애널리틱스를 데이터 추적을 지원하지 않지만
react-ga4를 통해서 같은 기능을 계속 사용할 수 있는 것 같다.
참고 문서는 npm 공식 문서 - React Google Analytics 4
다른 블로그

1. 먼저 npm 설치를 해준다.

npm i react-ga4

2. 환경 변수 안에 G-로 시작하는 측정 ID를 저장해준다.

REACT_APP_GOOGLE_ANALYTICS=G-xxxxxxxxxx

3. index.js 초기화 코드 작성

/* index.js */
import ReactGA from "react-ga4";

// 구글 애널리틱스 운영서버만 적용
if (process.env.REACT_APP_GOOGLE_ANALYTICS) {
  ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS);
}

4. 리액트-라우터를 통해 페이지 변환을 감지하는 컴포넌트를 작성한다.
   리액트는 싱글페이지어플리케이션이라 하나의 html을 로드하기 때문에
   방문자 수를 추적하기 어렵기 떄문이다.

   /* src/RouteChangeTracker.js */
   import { useEffect, useState } from "react";
   import { useLocation } from "react-router-dom";
   import ReactGA from "react-ga4";

/**

• uri 변경 추적 컴포넌트

• uri가 변경될 때마다 pageview 이벤트 전송
  */
  const RouteChangeTracker = () => {
  const location = useLocation();
  const [initialized, setInitialized] = useState(false);

  // 구글 애널리틱스 운영서버만 적용
  useEffect(() => {
  if (process.env.REACT_APP_GOOGLE_ANALYTICS) {
  ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS);
  setInitialized(true);
  }
  }, []);

  // location 변경 감지시 pageview 이벤트 전송
  useEffect(() => {
  if (initialized) {
  ReactGA.set({ page: location.pathname });
  ReactGA.send("pageview");
  }
  }, [initialized, location]);
  };

export default RouteChangeTracker;

      
5. 마지막으로 위의 컴포넌트를 App.js에 import 해준다. 이 때 주의 사항은
BrowserRouter 를 상위 컴포넌트인 index.js에 이동해주어야 한다.