React.js 구성요소의 Google 애널리틱스

소개

Struggling to use Google Analytics on a React-app?
Do you only get data on the landing page of your app, instead of every page?

This article will be about how to fix this problem!

문제:

Google 애널리틱스(GA)는 페이지 로드당 페이지뷰를 보냅니다. 즉, 웹사이트의 특정 페이지로 이동하면 서버에서 해당 페이지를 요청하고 사용자를 위해 로드합니다. 그것이 GA가 기록하고 데이터로 보내는 것입니다.
(단순 페이지 조회의 경우이므로 페이지 이벤트는 여기서 다루지 않습니다!)
그리고 이것은 또한 React-app(또는 any single-page applications )에서 GA를 사용하려고 할 때 문제가 되는 것입니다. React는 전체 앱을 한 번에 로드하고 브라우저 측에서 직접 구성 요소를 전환합니다.
GA는 실제로 새 페이지를 로드하지 않기 때문에 이를 새 페이지 로드로 보지 않고 동일한 페이지를 다시 로드합니다.

해결책:

이 문제에 대한 다양한 종류의 솔루션이 있었지만 하나를 찾으러 갔을 때 명확하고 최신 솔루션을 찾는 것이 혼란스러웠습니다. 그래서 여기에 내 자신의 추천을 공유합니다!

The idea would be that, as GA recognizes the page reload of the root URL (yourwebsite.com/path/to/page) but not the URI (That is the part after the root: yourwebsite.com/path/to/page), the trick would be to make it check that URI everytime it reloads. And send that as the whole location of the page.

이 솔루션을 사용하려면 다음과 같은 종속성을 사용해야 합니다.

react-router-dom 및 react-ga

npm -i react-router-dom react-ga --save
or
yarn add react-router-dom react-ga --save

소스 폴더에 파일을 만들고 useGaTracker.js와 같은 이름을 지정하고 원하는 이름을 지정할 수 있습니다.

1 단계

GA에서 UA 추적 코드를 받으십시오.

이미 GA 속성을 만든 경우 다음과 같은 코드를 찾을 수 있습니다.

관리자로 이동

사용 중인 속성을 선택하고 - Property Settings를 클릭합니다.

추적 ID 복사(UA-xxxxxxx-x로 시작해야 함)

2 단계

{ useEffect, useState }에서 가져오기react ; { useLocation }의 react-router-dom 및 ReactGA의 react-ga useGaTracker.js 파일 내부.

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

3단계

함수를 작성해 보겠습니다.

const useGaTracker = () => {
    const location = useLocation();
    const [initialized, setInitialized] = useState(false);

    useEffect(() => {
        if (!window.location.href.includes("localhost")) {
        ReactGA.initialize("UA-xxxxxxxxx-x");
        }
        setInitialized(true);
    }, []);

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

export default useGaTracker;

useLocation()는 라우팅을 위치로 가져오는 데 사용할 것입니다.
첫 번째useEffect()는 프로젝트가 로컬 호스트에서 실행 중인지 확인하고 그렇지 않은 경우 ReactGA에서 추적 ID를 초기화하고 상태initialized를 TRUE로 설정합니다.
두 번째useEffect()는 위치와 함께 페이지뷰를 GA에 보냅니다.
이것은 또한 initialized 또는 location가 변경될 때마다 해당 정보를 보내는 것을 알 것입니다.

4단계

이 함수를 라우팅 파일로 가져옵니다.

구성 요소를 라우팅하는 데 사용하는 파일로 이동하고 router-component에 기능을 추가합니다(제 경우 이것은 내 app.js 파일입니다.


App.js

import { Route, Switch, Redirect } from 'react-router-dom'
import useGaTracker from './useGaTracker'

const App = () => {

  useGaTracker();

  return (
    <div className="App">
       <Switch>
          <Route path="/" exact component={ Landing } /> 

          <Route path="/about" exact component={ About } />
          <Route path="/discord" exact component={ Discord } />

          <Route path="/404" component={ Error } />
          <Redirect to="/404" />
       </Switch>
    </div>
  );
}

export default App;

드디어

그게 다야!

라우팅 파일에서 사용하는 모든 다른 경로를 저장하고 보낼 작업 연결이 있어야 합니다!


Basile&Code