[Next.js + TypeScript] Google Analytics 적용 방법

Google Analytics(GA) 란?

구글 애널리틱스는 현재 구글 마케팅 플랫폼 브랜드 내의 플랫폼으로서, 웹사이트 트래픽을 추적하고 보고하는 구글이 제공하는 웹 애널리틱스 서비스이다. 

간략하게 말하자면 구글에서 제공하는 분석 도구이다.

내가 제작 중인 서비스에 적용하여 트래픽이나 사용자 수를 파악하기 위하여 이 도구를 사용하기로 했다.

---

적용 방법

Next.js + TypeScript 환경에서 개발을 하였으므로 참고바랍니다.

---

파일 구조

src
│── lib
└──── gtag.ts
│── pages
└──── App.tsx

---

코드

아래의 명령어를 터미널에 입력해 타입을 설치해주고

yarn add -D @types/gtag.js

---

tsconfig.json에 아래와 같이 타입을 추가한다.

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

---

다음과 같이 환경 변수를 추가한다. ('G-'로 시작하는 GA ID)

NEXT_PUBLIC_GA_ID = 'G-.........'

---

nextjs에서 환경변수를 사용하기 위해 next config에 추가한다

const nextConfig = {
  ...
  env: {
  	...
    NEXT_PUBLIC_GA_ID: process.env.NEXT_PUBLIC_GA_ID,
  },
};

module.exports = nextConfig;

---

lib / gtag.ts 에 아래와 같이 코드를 작성한다.

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: URL) => {
  window.gtag('config', GA_TRACKING_ID as string, {
    page_path: url,
  });
};

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = (
  action: Gtag.EventNames,
  { event_category, event_label, value }: Gtag.EventParams
) => {
  window.gtag('event', action, {
    event_category,
    event_label,
    value,
  });
};

---

pages / app.tsx 에 아래와 같이 script 태그를 사용하여 위에서 제작한 gtag를 사용하면 끝이다.

import React, { useEffect } from 'react';
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import * as gtag from 'lib/gtag';
import Script from 'next/script';

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: URL) => {
      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]);

  return (
    <>
      {/* Global Site Tag (gtag.js) - Google Analytics */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <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_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
};

export default MyApp;

---

사용 후기

이런식으로 어느 지역에서 사용 했는지도 알 수가 있고, 사용자 수, 페이지 접속량 등을 확인할 수 있어 좋은 분석 도구라고 생각된다.

---

Ref.

https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics

GitHub - vercel/next.js: The React Framework