[React] How to use Google Analytics with React

react에서 google analytics 다는 법

주의해야할 사항

• google analytics의 이전 버전인 (2021.12.09 기준) 유니버셜 애널리틱스를 사용해야 한다.
• 아래 코드를 사용하면 GA에 연결 가능하다. 단, 최상단인 App.js에서 사용하려면 react-router-dom V5 의 useLocation을 사용해야하므로 index.js 를 Router로 감싸주든지 다른 곳에서 써야 한다.

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

const TRACKING_ID = process.env.REACT_APP_GA_TRACKING_ID;

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

  /* localhost는 인지 못하게  */
   useEffect(() => {
     if (!window.location.href.includes('localhost')) {
       ReactGA.initialize(TRACKING_ID);
    }
    setInitialized(true);
    }, []);

  useEffect(() => {
    if (initialized) {
      ReactGA.pageview(location.pathname + location.search);
    }
  }, [initialized, location]);
  
  // 개발용
  useEffect(() => {
    ReactGA.initialize(TRACKING_ID);
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
};

export default useGAPageTracking;

// https://stackoverflow.com/questions/34836500/how-to-set-up-google-analytics-for-react-router
// App.js에서 쓰려면 index에서 react-router-dom의 Router로 둘러싸야해서 BaseTemplate에 넣었음

위의 방법으로 페이지 이동을 감지한다.
구글 애널리틱스 보고서 - 실시간 - 개요 를 들어가면

접속을 확인 할 수 있다.

만약 click 등의 event를 감지하고 싶다면

ReactGA.event({
  category: GAEvents.Category.auth,
  action: GAEvents.Action.auth.signup,
});

위 함수를 넣어주면 된다. (onClick = {() => {func()}})

Typescript를 안 쓰기에 자동완성을 위해서

// import ReactGA from 'react-ga';
// import GAEvents from 'lib/GA';

const Category = {
  auth: 'Auth',
  userProfile: 'User Profile',
  gameProfile: 'Game Profile',
  relation: 'Relation',
  matching: 'Matching',
  chat: 'Chat',
  search: 'Search',
};

const Action = {
  auth: {
    login: 'Login', // login api submit
    signup: 'Signup', // Signup button click
    guestSignup: 'Guest Signup', // start with guest button click
    signupCloseModal: 'Signup Close Modal', // close modal during sign up
  },
  userProfile: {
    profileEdit: 'Profile Edit', // profile page edit profile click
    personalityEdit: 'Personality Edit', //profile page edit personality click
    gamelistEdit: 'Gamelist Edit', // profile page edit gamelist click
  },
  gameProfile: {
    gamelistDragDrop: 'Gamelist Drag Drop', // game account modal drag and drop
    accountEnrollSelectGame: 'Account Enroll Select Game',
    accountEnrollStart: 'Account Enroll Start', // game account enroll button click
    accountEnrollEnd: 'Account Enroll End', // close account enroll modal during process
    accountCertificationStart: 'LOL Account Certification Start', // start lol certification
    accountCertificationEnd: 'LOL Account Certification End', // stop lol certification during process
  },
  relation: {
    follow: 'Follow', // follow button click
    block: 'Block', // profile page block button click
    mannerEdit: 'Manner Edit', // profile page manner edit button click
    report: 'Report', // profile page block report click
  },
  search: {
    searchLinkClick: 'Search Result Link Click',
  },
};

const Label = {
  maple: 'maple',
  lol: 'lol',
  pubg: 'pubg',
  others: 'others',
};

const GAEvents = {
  Category,
  Action,
  Label,
};

export default GAEvents;

이처럼 정리해서 썼다.