Next.js에서 GA 부착하기

.env

구글 애널리틱스 페이지에서 애널리틱스를 하나 만들고, 생성된 코드를 env에 입력한다.

NEXT_PUBLIC_GOOGLE_ANALYTICS=G-0000000000

gtag.ts 파일 생성

gtag.ts 파일을 생성해서 아래와 같은 코드를 입력한다.

src/lib/gtag.ts

const GA_KEY = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;

export const pageview = (url: URL) => {
  window.gtag("config", GA_KEY, {
    page_path: url,
  });
};

interface GTagEvent {
  action: string;
  category?: string;
  label?: string;
  value?: string;
}

export const event = ({ action, category, label, value }: GTagEvent) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

_app.ts

_app.tsx 파일에 아래와 같은 코드와 스크립트를 추가한다.

import * as gtag from '../lib/gtag';

const GA_KEY = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = (url: any) => {
      gtag.pageview(url);
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    router.events.on('hashChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
      router.events.off('hashChangeComplete', handleRouteChange);
    };
  }, [router.events]);
  // GA 설정 끝

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

만약 'Window & typeof globalThis' 형식에 'gtag' 속성이 없습니다.ts(2339) 에러가 발생한다면

error message

"@types/gtag.js" 모듈이 없어 발생하는 오류로,
npm 이나 yarn을 이용해 "@types/gtag.js"를 설치하고,

tsconfig.json 파일에 "@types/gtag.js"라는 타입을 추가한다.

tsconfig.json

{
  "compilerOptions": {
		...
    "types": [
      "@types/gtag.js" // 추가
    ]
  },
  ...
}