Google Analytics 적용기

1. 프롤로그

 


🤔리액트에서는 트래픽 추적을 어떻게 해야 할까?

고민을 하게된건
다음과 같은 상황이었다.

(전체회의 중)
CEO : 이번에 ΔΔ기업에서 우리 서비스를 인수하고 싶다네요?
CTO : 그쪽에서 트래픽도 요구할 수 있겠네요
CEO : 예 어려운 작업인가요?
CTO : 간단합니다😙

구글, 알렉사, 시밀러웹 등 트래픽 추적 기능을 제공하는 플랫폼 덕분에
실제로 개발자가 처리해야 할 내용은 비교적 단순하다

2. 트래픽 추적

우리 서비스는 구글에서 제공하는 Google Analytics를 이용해서
트래픽을 추적하기로 결정했다

 
싱글페이지 환경의 리액트에서 Google Analytics를 도입하기 앞서
일반적인 멀티페이지 환경에서는 기존에 어떻게 적용했고 어떠한 방식으로
동작했었나를 확인해 보아야 한다

2-1. 멀티페이지 환경의 트래픽 추적

멀티페이지 환경의 트래픽 추적은
Google Analytics에서 속성을 생성하면 환경설정에서
추적코드를 자동으로 생성해준다

📁 public/index.html

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

 gtag('config', 'XXXXXXXX');
</script>

추적코드를 HEAD 태그안에 넣어주면 완료!

이때 주의할 점은
로컬 혹은 테스트서버에도 코드가 들어가면 자동으로 ID값을 인식하므로
반드시 실서버에만 적용해야 한다

2-1. 싱글페이지 환경의 트래픽 추적

싱글페이지 환경의 트래픽 추적을 지원하는 react-ga 라이브러리를
적극 활용해볼 수 있다

📁 src/Analytics.js

import {useEffect} from "react";
import ReactGA from "react-ga";

const Analytics = () => {
  const pathName = window.location.pathname;
  useEffect(() => {
    if(process.env.NODE_ENV === "production") {
      ReactGA.initialize("UA-XXXXXXX-1");
      ReactGA.set({page: pathName});
      ReactGA.pageview(pathName);
    }
 }, [pathName]);
  return <></>;
}

export default Analytics;

initialize: 추적ID를 초기화하여 적용한다
set: 페이지를 설정한다
pageview: 설정된 페이지에 사용자가 보낸 요청의 수를 세어 준다

로컬 환경에서는 카운팅이 안되도록 조건을 주었다
if(process.env.NODE_ENV === "production")

📁 src/App.js

import {Switch, Route} from "react-router-dom";
import Analytics from "./Analytics";

const App = () => {
  return (   
    <>
      <Analytics />  
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />    
      </Switch>  
    </> 
  );  
}

export default App;

전체 페이지를 추적하고 싶다면
window 객체를 이용해서 App에 한번만 선언 할 수 있고

특정 경로 혹은 특정 페이지에만 적용하고 싶다면
Route로 지정된 컴포넌트에서 history 객체를 받아서
연결해 줄 수도 있다.

3. 이벤트

만약 서비스 내에서 이벤트를 진행하는중에
특정 버튼을 사용자가 클릭하는 지 알고 싶을 때

사용자의 행동을 추적하는 이벤트를 직접 걸어줄 수도 있다

📁 src/Event.js

import ReactGA from "react-ga";
import Button from "./Button";

<Button onClick={()=>{
  ReactGA.event({
    category: "Event",
    action: "Press play button",
    label: "Watch Video",
  });
}}>

확인은 좌측 메뉴의 [행동-이벤트-개요-이벤트 카테고리]에서!!

4. 정리

✔ Google Analytics를 이용하여 트래픽 추적을 할 수 있다
✔ 싱글페이지환경의 서비스에서는 현재위치를 직접 전달해야 한다
✔ ReactGA로 이벤트를 직접 조작할 수 있다