[구글 애널리틱스] React 구글 애널리틱스 적용하기(react-ga4)

React 프로젝트에 구글 애널리틱스 적용하기

---

 

구글 애널리틱스 접속

 

 

구글 애널리틱스 접속

데이터 스트림에서 측정 대상이 될 URL 입력합니다.

 

측정 ID 확인

측정 ID를 확인합니다.

 

 

react-ga4 설치

npm install react-ga4 --save

 

 

index.js 에 코드 삽입

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

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

 

RouteChangeTracker.js 파일 생성

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

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;

 

 

App.js 코드 추가

// App.js
import RouteChangeTracker from "./utils/RouteChangeTracker";
function App() {
  return (
    <BrowserRouter>
      <RouteChangeTracker />
    </BrowserRouter>
  );
}

 

 

 

결과