[NextJS] NextJS Google Analytics 적용하기

Google Analytics

웹사이트의 방문자수, 여러 이벤트를 추적하고 결과를 보기 위해서 googla anayltics 를 사용한다. 이러한 ga를 nextjs 13 버전에 적용하는 방법을 알아보자

 

STEP 1 - env 에 ga 코드 추가하기

 코드를 상수로 관리하기 위해서 .env 파일을 루트 폴더에 만들고 아래 코드를 추가한다.

NEXT_PUBLIC_GOOGLE_ANALYTICS='G-*******';

 

STEP 2 - window 에 ga 추가하기

  /lib/ga.ts 파일에 ga tag를 사용할 수 있도록 window에 추가해주고, 여러 이벤트를 먼저 정의해준다.

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

export const pageview = url => {
  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
    page_path: url,
  });
};

export const event = ({ action, params }) => {
  window.gtag('event', action, params);
};

 

STEP 3 - _app 파일에 적용 및 이벤트 등록

 우리는 ga tag 를 등록할 뿐만 아니라 방문자가 어떤 route 에 들어간 것인지도 이벤트로 등록할 것이다. 따라서 useEffect 를 사용하여 다음과 같이 작성해준다.

_app.tsx

import App from 'next/app'
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Script from "next/script";

import * as ga from 'lib/ga';

function app({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = url => {
      ga.pageview(url);
    };
    router.events.on('routeChangeComplete', handleRouteChange);

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

  return (
    <>
      <Script
        strategy={"afterInteractive"}
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
      />
      <Script
        id='google-analytics'
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

app.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps }
}

export default app;

 

STEP 4 - 환경변수 설정하기

 이 부분은 어떤 환경에서 배포를 했느냐에 따라서 모두 다를 것이다. 필자는 vercel 을 통해서 배포를 했고, vercel invironment variable 에서 로컬 .env 파일에 작성한 값들을 설정해 주었다.

 

여기까지 모두 했다면 googla analytics 에 들어가보면 실시간 사용자로 확인할 수 있을 것이다.