구글 애널리틱스 적용하기 2편(react-ga4)

> 구글 애널리틱스 GA4 적용 (230710)

2023년 7월 1일부터 유니버셜 애널리틱스 속성이 데이터를 수집하지 않습니다.
대신 Google 애널리틱스 4 속성을 만드는 것이 좋습니다.

 

구글 애널리틱스가 드디어 결국 GA4를 사용해야 하는 날짜가 되었고

그에 따라 기존 유니버셜 ID를 추적했던 react-ga 라이브러리에서 react-ga4로 변경하였다.

https://www.npmjs.com/package/react-ga4

 

다행히도 변경사항이 그리 많지않아 기존 글에서 수정만 하였다!

 

1. 리액트와 구글 애널리틱스 연결하기

배포할 때 포함되는 dependencies에 설치

$yarn add react-ga4

$npm install react-ga4 --save

 

2. 추적 ID를 환경변수로 저장하기

구글 애널리틱스에서 계정 및 속성 추가를 통해 생성한 추적 ID를 복사하여 환경 변수로 관리해준다.

 

env production파일에만 환경변수를 추가하여 운영서버에서만 적용되도록 하였다.

# .env.prod
REACT_APP_GOOGLE_ANALYTICS=G-BQXxxxxxxx

 

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. react router와 통합하기

리액트는 SPA로 하나의 html만 로드하기 때문에 페이지별 방문자 수를 추적하기 어렵다.

그렇기 때문에 react-router-dom 라이브러리를 설치하여 내장된 HOC 기능으로 URL 변경을 감지하는 것이다.

이 정보를 구글 애널리틱스에 전달하면 추적이 가능해진다.

 

4-1. URL 변경을 감지하는 컴포넌트를 새로 생성

react-ga4에서 ReactGA.pageview()가 deprecated되었으므로 ReactGA.send("pageview")로 대체하자

/* 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;

 

4-2. 이 컴포넌트를 App.tsx에 연결하면 완성

/* App.tsx */
import { BrowserRouter, Routes, Route } from "react-router-dom";
import RouteChangeTracker from "./RouteChangeTracker";

const App = () => {
  RouteChangeTracker();

  return (
   <BrowserRouter>
    <Routes>
      <Route path="/" element={<MainPage />} />
    </Routes>
   </BrowserRouter>
  );
};

 

5. 완성은 개뿔.. 무조건 아래 오류가 뜬다

4-2에서의 이슈인데,

RouteChangeTracker.js에서 useLocation을 사용하려면

해당 컴포넌트가 반드시 BrowserRouter 안에 바인딩 되어야 한다는 뜻이다.

useLocation() may be used only in the context of a <Router> component.

 

6. 해결

에러 내용대로 App.tsx를 묶어주는 BrowserRouter를 한층 더 상위인 index.js로 이동해주어 해결..!

좀더 나은 해결책을 고민해 볼 예정이다 🤔

/* App.tsx */
import { Routes, Route } from "react-router-dom"; // BrowserRouter를 상위 index.js로 이동
import RouteChangeTracker from "./RouteChangeTracker";

const App = () => {
  RouteChangeTracker();

  return (
   // BrowserRouter를 상위 index.js로 이동
    <Routes>
      <Route path="/" element={<MainPage />} />
    </Routes>
  );
};

 

 

[참조 URL]

https://github.com/PriceRunner/react-ga4#readme

https://velog.io/@zero-black/Google-analytics-4-with-React

https://fromnowwon.tistory.com/entry/react-ga-google-analytics