리액트에 구글 애널리틱스를 연결해보자

1. 도입 이유

기존 프로젝트를 타입스크립트로 마이그레이션하는 과정에서 궁금한 부분들을 추적하고자 도입하기로 했다.

• 내 웹사이트에 방문한 사람의 수
• 데스크탑과 모바일 등 어느 기기에서 유입 비중이 높은가

구글 애널리틱스 외에도 여러 분석 툴들이 있었지만 다음과 같은 이유로 구글 애널리틱스를 사용하기로 판단했다.

1. 가격이 무료이다.
2. 어렵지않게 프로젝트에 도입할 수 있다.
3. 구글 애널리틱스를 이용하여 추후 확장할 수 있는 범위가 넓다.(광고 등)

2. 적용 방법

https://analytics.google.com/analytics/web/?authuser=4#/provision/create

해당 링크로 들어가 순서대로만 체크하면 된다.

단, 이 글에서는 react-ga4 라이브러리를 사용할 것이기 때문에 GA4 속성도 만들어야 한다.

연결할 도메인을 정하고 애널리틱스를 만들게되면 스트림 세부정보에 측정 ID(추적ID)를 확인할 수 있는데 해당 ID값을 활용하면 된다.

2-1. ID 값을 환경 변수로 저장하기

사용자의 정보를 관리하는 값이기 때문에 악용되지 않도록 환경 변수에 넣는다.
REACT_APP_GA_TRACKING_ID = 발급받은 ID

2-2. React-ga4 라이브러리 다운

yarn add react-ga4 혹은 npm install react-ga4를 설치

2-3. 리액트에 연결

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

// 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 (!window.location.href.includes("localhost")) { 
      ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_ID);
    }
    setInitialized(true);
  }, []);
  useEffect(() => {
    if (initialized) {
      ReactGA.set({ page: location.pathname });
      ReactGA.send("pageview");
    }
  }, [initialized, location]);
  return null;
};

export default RouteChangeTracker;

useLocation훅은 React Router의 일부로서 라우팅 정보를 가져오는 데 사용되는 훅이므로 사용할 때 Router컴포넌트로 둘러싸여 있어야한다.

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

따라서 위와 같이 코드를 컴포넌트화하여 만들었다.

• !window.location.href.includes("localhost")부분은 로컬 환경의 영향을 받지 않도록 하기 위해 설정하는 코드다.

3. 적용 결과

사진처럼 사용자를 트래킹하여 내가 원하는 데이터를 확인할 수 있다.

4. 참고자료

react-ga4 npm
time to wander