analytics

react-ga를 통한 적용

1. 구글 애널리틱스 계정 생성

   • 구글 애널리틱스 사이트 에서 계정 설정 진행
   • 속성을 최신버전이 아닌 유니버셜 버전으로 진행해야 react-ga 라이브러리를 사용할 수 있다.
   • 최신버전은 직접 설정해줘야함

2. App.js 에 react-ga 적용

import { Switch, Route, useLocation } from "react-router-dom";
import ReactGA from "react-ga";

ReactGA.event({
  category: "User",
  action: "Created an Account",
});
ReactGA.exception({
  description: "An error ocurred",
  fatal: true,
});

const App: React.FC = () => {
  const location = useLocation();
  useEffect(() => {
    if (import.meta.env.MODE !== "development") {
      ReactGA.initialize(import.meta.env.VITE_GA_ID);
      ReactGA.set({ page: location.pathname }); // Update the user's current page
      ReactGA.pageview(location.pathname); // Record a pageview for the given page
    }
  }, [location]);
  return (

ReactGA.Initialize

• 각종 속성 및 추적ID를 심어 초기화 진행

• useEffect 로 한번만 진행

• 추적 ID 는 env파일로 관리

• 실제 배포모드일때만 GA를 활성화했다. 개발모드에서 보기 위해서는

  ReactGA.initialize("",{debug: true}) 로 진행하면 콘솔에서 데이터를 볼 수 있음.

🚩 페이지네이션 감지

• 리액트는 페이지네이션이 웹앱 기반. 즉 window로 페이지네이션이 감지되지 않아서 react-router가 제공하는 페이지네이션 객체인 location 을 사용해야함.
• location 객체는. useLocation() 훅을 react-router-dom 으로부터 가져와서 사용해야한다.
• useLocation을 가져오기 위해서는 App.tsx의 상위 객체인 Main.tsx에서 App을 Router로 감싸줘야 사용할 수 있음

---

참고

[react] react google analytics 연동