react-ga 라이브러리를 가장 많이 쓰는 것 같길래 직접 코딩하는 것 보다 간편해 보여 연동했더니 어쩐 일인지 연동이 되지 않았다.
알고보니 구글 애널리틱스 이전 버전에는 추적 코드 형식이 UA-XXXXXXXXX-X인데 이번에 4로 버전업 되면서 코드 형식이 G-XXXXXXXXXX로 바뀌었는데, 최근 버전의 형식은 지원하지 않는다고 한다.
라이브러리가 업데이트될 때까지 마냥 기다릴순 없으니 방법은 두가지가 있다.
1. 추적코드를 UA-XXXXXXXXX-X 형식으로 만들어서 react-ga를 사용하기
왼쪽 사이드바 하단에 관리메뉴 - 속성 만들기를 누른 후 '고급옵션보기'에서 유니버설 애널리틱스 속성 만들기 토글을 켜준다.
설명에 나와있듯이 UA속성은 이전 버전이고, 웹 측정만 지원되므로 신규 사용자에게 권장되지 않는다.
둘다 만들기를 선택하면 아래 이미지와 같이 UA-XXXXXXXXX-X 형식과 G-XXXXXXXXXX형식 둘다 만들어지고, 유니버설 애널리틱스 속성만 만들기를 선택하면 UA-XXXXXXXXX-X만 만들어진다.
발급된 UA-XXXXXXXXX-X형식 코드를 가지고 아래처럼 react-ga로 initialize 하여 사용하면 연동 완료!
import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-01');
ReactGA.pageview(window.location.pathname + window.location.search);개인적으로는 되도록이면 deprecated 될 요소를 사용하고 싶지 않아서 아래의 방법으로 사용하였다.
2. G-XXXXXXXXXX 형식을 쓰면서 별도의 라이브러리 사용하지 않기
내 경우에는 Next.js를 사용한 SSR 프로젝트라 GoogleAnalyticsHOC.jsx 라는 HOC컴포넌트를 만들어 각 페이지 컴포넌트를 감싸주고 production 환경일 때만 tracking 되도록 조건을 주었다.
import React, { useEffect } from 'react';
import Head from 'next/head';
const GoogleAnalyticsHOC = ({ children }) => {
useEffect(() => {
if (process.env.NODE_ENV === 'production') {
window.dataLayer = window.dataLayer || [];
// eslint-disable-next-line
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX', {
page_location: window.location.href,
page_path: window.location.pathname,
page_title: window.document.title,
});
}
}, []);
return (
<>
<Head>
<script
async
src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX'
/>
</Head>
{children}
</>
);
};
export default GoogleAnalyticsHOC;
'React' 카테고리의 다른 글
| React.memo와 useMemo 차이점 (0) | 2020.10.07 |
|---|---|
| CRA로 만든 리액트 프로젝트에서 eject하지 않고 optional chaining 사용하기 (0) | 2020.04.17 |
| Webpack 간단 정리하기 (0) | 2020.04.12 |
| Next.js 프로젝트에서 .env 변수 사용하기 (0) | 2020.03.30 |
| React Router로 렌더링하는 컴포넌트에 prop 전달하기 (1) | 2020.03.03 |