리액트 프로젝트에 구글 애널리틱스 적용하기(react-ga4 사용)

 

최근 개인 프로젝트에 구글 애널리틱스를 적용한 내용을 정리해보려고 한다. 😎 😎

 

구글 애널리틱스(google analytics)

구글 마켓팅 플랫폼 브랜드 내의 플랫폼으로 웹사이트 트래픽을 추적하고 보고하는 웹 애널리틱스 서비스

 

웹 애널리틱스(web analytics)

웹 사용률을 이용하고 최적화하기 위해 웹 데이터를 측정, 수집하고 분석하여 보고 하는 것

웹 트래픽을 측정하는 과정일뿐 아니라 비즈니스와 시장 연구의 도구로서 사용이 가능하다.

웹사이트 효율성을 측정하고 개선 할 수 있다.

 

 

나는 개인 프로젝트로 진행했던 나와 맞는 고양이 찾기(심리테스트) 사이트의 사용률을 측정해보고 싶어서 시도해보았다.
💫 프로젝트 바로가기 : https://find-my-cat.netlify.app/

 

 

✔️ 참고

2023년 7월 1일부터는 GA4를 사용해야한다고 한다.

2023년 7월 1일부터 표준 유니버설 애널리틱스 속성에서 데이터 처리가 중단되었습니다. 2023년 7월 1일 이후에 일정 기간 동안 유니버설 애널리틱스 보고서를 볼 수 있습니다. 그러나 새 데이터는 Google 애널리틱스 4 속성으로만 전달됩니다. 

 

 

 

구글 애널리틱스 시작하기 

나는 이미 예전에 계정을 만들어둔 상태여서 속성만 추가해주면 됐다. 

 

속성 만들기

✅ 애널리틱스를 적용하려는 웹사이트 및 앱에 대한 속성 이름, reporting time zone, 통화를 선택한다.

 

✅ URL 주소와 어떤 속성을 만들지 선택한다.

GA4 속성 생성을 권고하길래 그렇게 선택함!

 

 

✅ 알맞는 비즈니스 옵션을 선택한다.

 

이후 다음으로 넘어가면 속성 생성이 완료된다.

 

 

생성한 속성에 대한 정보는 이런식으로 되어있다.

 

 

리액트 프로젝트에 GA4 적용하기

구글 애널리틱스를 리액트 프로젝트에 적용하기 위해선 라이브러리가 필요하다.

참고로 나는 react-ga4라는 라이브러리를 사용했다.

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

node-fetch

 

react-ga4 설치하기

// npm
npm install react-ga4 --save

// yarn 
yarn add react-ga4

운영 배포시 포함이 되어야하기 때문에 dependencies에 추가되도록 설치해야한다!

 

✔️ 주의

react-ga 아님!!! GA4를 적용하기 위해선 react-ga4 라이브러리를 설치해야한다.

 

GA4 트래킹 ID 환경 변수에 설정하기

.env 파일에 트래킹 ID를 세팅해준다.

# .env

REACT_APP_GOOGLE_ANALYTICS_ID=''

 

✔️ 참고

CRA로 리액트 프로젝트를 생성했다면 .env 파일에 환경변수를 추가할 때 지켜야할 규칙이 있다.

바로 'REACT_APP_' 접두사를 붙여야한다는 것!

저런 접두사가 필요한 이유는 CRA는 보안상의 이유로 .env 파일에 있는 모든 변수를 자동으로 로드하지 않고, REACT_APP 접두사가 있는 변수만 로드하기 때문이다. 

 

 

GA4 초기화 및 적용하는 코드

 

RouteChangeTracker 컴포넌트를 생성

// RouteChangeTracker.ts 

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_GOOGLE_ANALYTICS_ID as string);
      setInitialized(true);
    }
  }, []);

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

export default RouteChangeTracker;

 

 

해당 컴포넌트를 App.tsx에 적용

// App.tsx

import RouteChangeTracker from 'RouteChangeTracker';
...
const App = () => {
	...
	RouteChangeTracker();

    return (
        <Routes>
            <Route path="/" element={<Home />}></Route>
            ...
        </Routes>
    );
}

export default App;

 

 

netlify 환경변수 설정하기

 

나는 netrify를 사용해서 배포했기 때문에 환경변수 설정을 다시 해줘야했다.

✅ Site configuration > Environment variables 에서 설정가능 

 

 

보고서 확인하기

 

운영 배포후 실시간으로 데이터를 확인할 수 있고, 24시간이 지나면 보고서도 확인 가능하다! 진짜 신기했음..😲

이 날 프로젝트 피드백을 위해 이곳 저곳에 링크를 뿌리고 피드백을 요청드렸더니 일일 사용자 162명을 기록했다. 😮😮

구글 애널리틱스를 잘 활용하면 사용자들이 정확히 어떤식으로 사이트를 이용하는지 일일이 데이터로 확인할 수 있다.

앞으로 이 데이터들을 잘 활용할 수 있도록 계속해서 공부해봐야겠다! 😎

---

Reference

 

 

https://whoyoung90.tistory.com/61

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