ReactGA 커스텀 훅

먼저 ReactGA를 설치하십시오

npm install react-ga --save
설치 후 프로젝트에 react-ga를 추가하면 원하는 대로 구성할 수 있습니다. 여기에 index.js의 예가 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactGA from 'react-ga';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactGA.initialize('UA-#########-#');

ReactDOM.render(<App />, document.getElementById('root'));

후크 코드

후크 코드 폴더/파일 예시utils/googleAnalytics.js .

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

export const makePageView = (pageName) => 
 ReactGA.pageview(pageName);

export const useAnalytics = pageName =>
  useEffect(() => {
    makePageView(pageName);
  }, [pageName]);

일부 구성 요소에서 사용

import React from 'react';
import { useAnalytics } from 'utils/googleAnalytics';

const SomePageComponent = () => {
 useAnalytics('some-page');
 return(...)
}

테스트

테스트가 중단되지 않도록 하려면 이 clearAnalytics 함수를 추가하십시오.

export const clearAnalytics = () => {
  ReactGA.initialize('dummy', { testMode: true });
  ReactGA.testModeAPI.resetCalls();
};

describe('SomePageComponent test', () => {
  beforeEach(() => {
    clearAnalytics();
    ...
  });

왜 그렇게 합니까?

이런 식으로 하면 작업이 조금 더 늘어날 수 있지만 구성 요소에 대한 특정 동작을 추가하고 제어할 수 있습니다. 예를 들어 사용자가 페이지에 머문 시간에 대한 메트릭을 만들고 싶습니다. 구성 요소가 마운트 해제될 때 알 수 있는 후크의 마운트 해제입니다.

export const useAnalytics = pageName =>
  useEffect(() => {
    makePageView(pageName);
    return () => getPageTime(pageName);
  }, [pageName]);

결론

이 후크를 늘릴 수 있는 가능성은 거의 무한합니다. 더 간단하기 때문에 이렇게 시연했습니다. 도움이 되었기를 바랍니다.