Next.js에서 next/script를 사용하여 Google Analytics 통합하기

왜 Next.js에서 Google Analytics를 사용해야 하나요?

Google Analytics를 사용하면 페이지 조회수, 사용자 상호작용, 전환 등 중요한 메트릭을 측정할 수 있어 데이터 기반의 결정을 내리는 데 도움이 됩니다. Next.js와 통합함으로써 서버 사이드 렌더링(SSR) 기능을 활용하면서도 원활한 분석을 유지할 수 있습니다.

 

※ Next Version 15 이상 사용할 경우, 아래 내용으로 진행하지 마세요.

• https://nextjs.org/docs/messages/next-script-for-ga
• https://www.npmjs.com/package/@next/third-parties

 

단계별 통합 방법

1. Google Analytics 계정 생성

   • 아직 계정이 없다면 Google Analytics 계정을 설정하고 웹사이트에 대한 속성을 생성하세요.

   • 추적 코드에 사용할 측정 ID(예: G-XXXXXXX)를 얻으세요.

2. next/script 설치

   • next/script는 타사 스크립트를 Next.js 앱에 추가하면서 적절한 로딩과 실행을 보장하는 내장 컴포넌트입니다.

3. _app.js 또는 _app.tsx에 Google Analytics 스크립트 추가

   • _app.js 또는 _app.tsx 파일을 엽니다. 이 파일에서 모든 페이지에 Google Analytics를 전역으로 추가할 수 있습니다.

import { useEffect } from 'react';
import Script from 'next/script';
function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.dataLayer = window.dataLayer || [];
      function gtag() { window.dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXX'); // 측정 ID로 대체하세요
    }
  }, []);
  return (
    <>
      {/* Google Analytics 스크립트 */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX`}
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){window.dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-XXXXXXX');
        `}
      </Script>
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

next/script를 사용하여 Next.js 애플리케이션에 Google Analytics를 통합하는 것은 사용자 상호작용에 대한 유용한 통찰을 수집하는 간단한 과정입니다. 위 단계를 따르면 효율적으로 메트릭을 추적할 수 있으며, 프로젝트에 대한 이해와 의사 결정을 개선할 수 있습니다.