React-Router에서 Google Analytics 4 설정하는 방법
React-Router를 사용하여 React 사이트에 Google Analytics 4를 설정하려고 한다면, 특히 이전에 react-ga 라이브러리를 사용하고 있었다면 어려움을 겪을 수도 있습니다. 현재 react-ga는 Google Analytics 4를 지원하지 않으므로 다른 접근 방식을 사용해야 합니다. 이 가이드에서는 외부 라이브러리를 의존하지 않고 React-Router에서 Google Analytics 4를 설정하는 단계를 안내해 드리겠습니다.
단계 1: index.html에 전역 사이트 태그(gtag.js) 추가하기
첫 번째 단계는 index.html 파일에 전역 사이트 태그를 추가하는 것입니다. 전역 사이트 태그는 Google Analytics 라이브러리를 로드하고 추적 코드를 초기화하는 역할을 합니다. index.html 파일을 열고 <head> 섹션을 찾으세요. 다음 코드를 <head> 태그 내에 넣어 주세요:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>G-XXXXXXXXXX를 사용자 고유의 Google Analytics 4 속성 ID로 바꿔 주세요.
단계 2: React-Router를 사용하여 수동 페이지 추적 구현하기
React-Router는 React 애플리케이션 내에서 라우팅을 담당합니다. Google Analytics 4로 정확한 페이지 조회를 추적하려면 라우트 변경이 있을 때마다 window.location과 document.title을 업데이트해야 합니다. 이렇게 하면 올바른 페이지 위치와 제목이 Google Analytics로 전송됩니다.
수동 페이지 추적을 구현하는 한 가지 방법은 라우트를 랩핑하는 고차 컴포넌트를 생성하는 것입니다. 이 컴포넌트 내에서 라우트가 변경될 때마다 window.gtag('send', 'page_view', ...) 메소드를 호출할 수 있습니다. 다음은 withTracker 고차 컴포넌트를 설정하는 예시입니다:
export default function withTracker(WrappedComponent, options = {}) {
const trackPage = (page) => {
window.gtag('send', 'page_view', {
page_location: window.location.href,
page_path: window.location.pathname
});
};
const HOC = (props) => {
useEffect(() => {
trackPage(window.location);
}, [window.location]);
return <WrappedComponent {...props} />;
};
return HOC;
}withTracker 컴포넌트를 사용하려면 라우트를 해당 컴포넌트로 랩핑하세요:
import withTracker from './withTracker';
// 라우트 설정
const App = () => {
// 라우트 선언
};
export default withTracker(App);withTracker 고차 컴포넌트로 라우트를 랩핑함으로써 각 라우트 변경이 trackPage 함수를 트리거하고, 이 함수는 페이지 조회 데이터를 Google Analytics 4로 전송합니다.
대체 방법: ga-4-react NPM 패키지 사용하기
수동 페이지 추적 구현을 직접 처리하는 것이 싫다면, ga-4-react라는 타사 패키지를 사용할 수 있습니다. 이 패키지는 React-Router 애플리케이션에 Google Analytics 4를 통합하기 위한 간편하고 편리한 방법을 제공합니다. ga-4-react 패키지에 대한 자세한 정보와 설치 지침은 NPM 웹사이트에서 확인할 수 있습니다.
이러한 단계를 따라 Google Analytics 4를 React-Router에 설정할 수 있습니다. Google Analytics 대시보드에서 페이지 조회가 정확히 추적되는지 테스트하고 확인하는 것을 잊지 마세요.
이 가이드를 읽어 주셔서 감사합니다. 추가 질문이나 추가 도움이 필요하신 경우에는 아래에 댓글을 남겨 주세요.
