리액트 웹사이트에 구글 애널리틱스 도입하기

서론.
티키타자를 개발하면서 실제 사용자가 써봤으면 하는 마음이 컸다.
'특별한 목적이 있어야 한다', '로그인이 꼭 필요하다'와 같은 은근한 허들(?)이 없어서, 가볍게 접근할 수 있다는 것이 우리 서비스의 장점같았기 때문이다!!
그래서 매를 잔뜩 맞더라도 피드백 겸 QA를 받고 싶었다!
그리고 드디어 드디어 시도해보았다. (( 험난한 과정이었따....

구글 애널리틱스 ?

웹 사이트 사용자 분석 툴이다.
무료이고 가장 간단해서 첫 방법으로 선택하게 되었다.

구글 애널리틱스 세팅하기

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

위 사이트에 접속해 순서대로 가입을 진행한다.

이렇게 다섯단계가 있다

데이터 스트림 설정에 서 분석으로 이용할 웹사이트 url을 넣으면 된다.
[ 스트림 만들기 ] 를 누르면

프로젝트에 적용하기 위한 방법이 뜬다!
( 환경설정 > 데이터 수집 및 수정 > 데이터 스트림 > 태그 안내보기 ) 에서도 같은 화면을 볼 수 있다.

프로젝트에 세팅하기

위에서 처럼 스크립트를 이용하는 방법과 외부 다이어리를 사용하는 방법이 있다.

1. 스크립트 사용하기

측정 ID가 필요하다!
환경설정 > 데이터 수집 및 수정 > 데이터 스트림에서 정보 확인과 함께 측정ID를 볼 수 있다!
G-로 시작하는 측정 ID를 아래 코드에 사용하면 된다.

이 코드는 환경설정 > 데이터 수집 및 수정 > 데이터 스트림 > 제일 아래 '태그 안내 보기' 에 있다

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=추적아이디"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '추적아이디');
</script>

놀랍게도 끝이다 - !

2. 라이브러리 사용하기

직접설치도 할 수 있지만 라이브러리를 사용할 수도 있다.

왜?
여러 레퍼런스를 통해 알게 된 것인데,
특정한 측정 기준이나 이벤트로부터 측정을 하려는 경우, 라이브러리로 이를 커슽머 할 수 있는 것 같다!

대표적인 라이브러리로 react-ga4 가 있다.

• 설치

https://www.npmjs.com/package/react-ga4
https://classic.yarnpkg.com/en/package/react-ga4

yarn add react-ga4

라이브러리부터 모듈을 불러와 사용하는 형식은 이렇다

import ReactGA from "react-ga4";
ReactGA.initialize("your GA measurement id");

이 기본 코드를 통해 프로젝트에 적용해보자!

우선, 환경 변수를 설정해둔다.

// .env
VITE_GA_KEY = "G-..." 

url 변경시를 탐지하기 위해 다음과 같은 함수를 만든다.

//GATracker.ts
import { useEffect, useState } from 'react';
import ReactGA from 'react-ga4';
import { useLocation } from 'react-router-dom';

const GA_KEY = import.meta.env.VITE_GA_KEY;

const GATracker = () => {
  const location = useLocation();
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    if (GA_KEY) {
      ReactGA.initialize(GA_KEY);
      setIsInitialized(true);
    }
  }, []);

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

export default GATracker;

App에 연결한다

//App.tsx
...
import GATracker from './GATracker';

export const App = () => {
  GATracker();  // <- !! 추가 !

  return (
    ...
  );
};

2번 라이브러리를 적용했다가, 위에 말했듯 특정 이벤트 등 라이브러리를 활용하는 경우를 세팅하지 않아서, 기본의 스크립트로 적용했다.

뭘 볼 수 있지?

일단은 접속자 수를 볼 수 있다.
분석이 더 진행되면 더 많은 정보를 볼 수 있는 듯 하다?

히트맵 같은 섬세한 사용자 분석을 위해서 뷰저블, hotjar 등도 적용해보고 싶다.

우리 사이트는 플로우가 간단하지만은~
나중에 '연습모드'에 얼마나 접속하는지 언제쯤 로그인을 시도하는지 등을 파악할 수 있지 않을까?? 그걸로 어떤 비즈니스가 될지는 아직 모르겠다만!
재밌다!

https://classic.yarnpkg.com/en/package/react-ga4
url 변경 코드 참고 - '좌충우돌프론트엔드생존기 Tistory'
삽질을 지켜봐준 석주횽님께도 감사 🥹