[React] react-ga로 리액트와 구글 애널리틱스 연결하기

리액트 프로젝트를 구글 애널리틱스와 연동하여 방문자 추적 등 여러 데이터를 수집하고 활용해보자.

 

 

목차

1. 웹사이트 분석이 필요한 이유
2. 리액트와 구글 애널리틱스 연결하기

 

 

 

 

웹사이트 분석이 필요한 이유

• 방문자가 사는 지역에 대한 정보를 얻을 수 있다.
• 내 비즈니스에 더 관심이 있는 연령대를 이해할 수 있다.
• 방문자가 평균적으로 얼마나 많은 시간 동안 머무르는지 알 수 있다.
• 신규 사용자를 추적할 수 있다.
• 애플리케이션에 버그가 있는지 추적할 수 있다.
• 사용자의 관심에 따라 최적화 할 수 있다.

 

 

 

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

1. 계정 & 속성 생성

1-1. 구글 애널리틱스 페이지에서 계정을 생성한다.

 

1-2. 홈-관리로 들어가서 속성 만들기를 클릭한다.

 

Google analytics

 

 

 

1-3. 속성 이름, 보고 시간대, 통화를 설정하고 '고급 옵션 보기'를 클릭한다.

 

Google analytics

 

 

 

 

1-4. 유니버설 애널리틱스 속성 만들기를 활성화하고 적용할 웹사이트 URL을 입력한 다음 '유니버설 애널리틱스 속성만 만들기'를 선택한다.

 

Google analytics

 

 

 

 

1-5. 비즈니스 정보를 대충 선택한 후 속성 만들기를 완료한다.

 

Google analytics

 

 

 

 

1-6. 관리 페이지에서 방금 생성한 속성을 선택하고 속성 설정으로 들어간다.

 

Google analytics

 

 

 

 

1-7. 해당 속성의 추적 ID을 확인할 수 있다. 복사해둔다.

 

Google analytics

 

 

 

 

 

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

민감한 정보 관리를 위해 환경 변수로 추적 ID를 관리한다. 

 

2-1. 리액트 프로젝트 루트 경로에 .env 파일을 생성하고 아래와 같이 작성한다.

 

REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID=발급받은추적ID

 

 

 

 

 

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

3-1. 구글 애널리틱스 npm 패키지를 설치한다.

 

npm install react-ga --save

 

 

 

3-2. index.js에 다음 코드를 작성해 구글 애널리틱스를 초기화한다.

 

import ReactGA from 'react-ga';
const TRACKING_ID = process.env.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID; // 발급받은 추적ID를 환경 변수로 불러온다.
ReactGA.initialize(TRACKING_ID);

 

 

 

 

 

4. react router와 통합하기

리액트는 SPA로 하나의 html만 로드하기 때문에 페이지별 방문자 수를 추적하기 어렵다. 그러나 react-router-dom 라이브러리가 설치되어 있다면 내장된 HOC 기능으로 URL 변경을 감지할 수 있다. 이 정보를 구글 애널리틱스에 전달하면 추적이 가능해진다.

 

 

4-1. 우선 URL 변경을 감지하는 컴포넌트를 새로 생성하고 아래와 같이 작성한다.

 

(RouteChangeTracker.js)

 

import { useEffect, useState} from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

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

    useEffect(() => {
        if (initialized) {
            ReactGA.pageview(location.pathname + location.search);
        }
    }, [initialized, location]);
}

export default RouteChangeTracker;

 

 

 

 

4-2. 이 컴포넌트를 App.js에 연결하면 된다.

 

(App.js)

 

import React, { useEffect } from 'react';
import RouteChangeTracker from './components/RouteChangeTracker';


const App = () => {

    RouteChangeTracker();

    return (
        <div className="App">
            ...
        </div>
    );
}

export default App;