Google Analytics(GA) 적용해보기🔬

임동현·2022년 5월 10일

이번에 프로젝트를 하면서 페이지마다 사용자가 들어오는지 통계를 내야 했었습니다.. 그래서 어떻게 할까 고민하다가 Google Analytics를 알게 되었고, 한번 사용해봤습니다.
🙋‍♂️※참고로 저는 Next 환경에서 적용해보았습니다.

✌️시작

먼저 google analytics를 들어가줍니다.

계정이름을 적고 '다음'을 눌러줍니다.

속성이름(아무 이름이나 적으셔도 됩니다!)을 적고 나라에 맞게 선택해준 다음 '고급 옵션 보기'를 선택해줍니다.

'유니버셜 애널리틱스 속성 만들기'를 허용해주고 웹사이트 주소를 적어줍니다. 그리고 밑에 보면 'Google 애널리틱스 4 속성과 유니버셜 애널리틱스 속성 둘 다 만들기` 와 '유니버셜 애널리틱스 속성만 만들기' 2개가 있는데요, 간단하게 설명 드리면 유니버셜 속성은 페이지 조회, 이벤트 조회, 전자상거래 조회, 소셜 상호작용 조회 같은 것들을 지원합니다. 이와 다르게 google analytics 4는 모든 사용자의 행동이 event로 측정됩니다. 저는 위에 옵션을 추천드립니다!

정보를 알맞게 잘 입력해주시고 '만들기'를 눌러줍니다.

그러면 다음과 같은 폼이 뜹니다. 만약 안뜨셨다면 홈 -> 태그 지정 도움말 얻기 -> 데이터 스트림 으로 가시면 됩니다. 폼에서 측정 ID를 복사해준 후 env파일이나 gitignore파일에 넣어 숨겨줍니다.

💻코드

이제 세팅은 다 끝났고, 코드를 쳐보도록 합시다!

lib/ga/gtag.ts
declare global {
  interface Window {
    gtag: (param1: string, param2: string, param3: object) => void;
  }
}

export const pageView = (url: URL) => {
  window.gtag("config", process.env.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID!, {
    page_path: url,
  });
};

먼저 구글 애널리틱스에서 값을 받아야 하기 때문에 값을 쏘는 함수를 작성해줍니다.
값을 쏠 때 윈도우 객체에 gtag라는 프로퍼티를 추가해주고 그 프로퍼티를 사용해서 값이 쏴지는데요, 이때 gtag에 타입을 지정 해주지 않으면 에러가 납니다.(js라면 안해주셔도 괜찮습니다!)
그래서 전역 타입으로 확장해줍니다.

pages/_document.tsx
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', '${process.env.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

측정코드를 이용해 다음과 같은 script코드를 document안에 Head 태그 안에 넣어줍니다.

pages/_app.tsx

import * as ga from "../lib/ga/gtag";
import { useRouter } from "next/router";

function App({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient());

  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: URL) => {
      ga.pageView(url);
    };

    router.events.on("routeChangeComplete", handleRouteChange);

    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <RecoilRoot>
          <ThemeProviderContainer Component={Component} pageProps={pageProps} />
        </RecoilRoot>
      </Hydrate>
    </QueryClientProvider>
  );
}