[Next.js] 구글 애널리틱스 스크립트 : 페이지 라우터 vs 앱 라우터

소개

진화하는 웹 개발 환경에서 최적의 사용자 경험을 위해서는 올바른 라우팅 전략을 선택하는 것이 중요합니다. 이 문서에서는 Google Analytics 스크립트와 Next.js의 통합을 살펴보고 페이지 라우터와 앱 라우터 간의 차이점을 강조합니다. 두 가지 라우팅 접근 방식에 대한 Google Analytics 추적 구현을 설명하기 위해 코드 예제를 제공합니다.

[Next.js] 구글 애널리틱스 스크립트 : 페이지 라우터 vs 앱 라우터

Next.js를 사용한 Google 분석

Google Analytics를 Next.js 애플리케이션과 통합하려면 페이지나 앱 구성 요소에 필요한 추적 스크립트를 추가해야 합니다. Next.js 프레임워크는 기존 페이지 라우터와 최신 앱 라우터라는 두 가지 라우팅 시스템을 제공합니다. 페이지 라우터는 pages각 파일이 경로에 해당하는 디렉터리를 기반으로 하며, Next.js 버전 13에 도입된 앱 라우터는 디렉터리를 기반으로 하며 app공유 레이아웃 및 중첩 라우팅과 같은 기능을 지원합니다.

Next.js의 페이지 라우터(버전 13 이하)

페이지 라우터를 사용하여 Google Analytics를 추가하려면 next/script 구성요소를 사용하여 페이지(일반적으로 pages/_app.js 파일 또는 pages/index'와 같은 개별 페이지)에 Google Analytics 스크립트를 직접 포함할 수 있습니다. .js. 다음은 next/script 구성요소를 사용하여 Google Analytics 스크립트를 추가하는 방법의 예입니다.

// pages/_app.js or pages/index.js
import Script from 'next/script';

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

export default MyApp;

'YOUR_TRACKING_ID'를 실제 Google Analytics 추적 ID로 바꾸세요.

앱 라우터의 경우 'app' 디렉터리에 Google Analytics 스크립트를 유사하게 포함시켜 해당 스크립트가 애플리케이션의 각 페이지에 로드되도록 할 수 있습니다. 구현 세부 사항은 앱 라우터의 구조와 기능이 다르기 때문에 약간 다를 수 있습니다.

'YOUR_TRACKING_ID'를 실제 Google Analytics 추적 ID로 바꿔야 합니다. 또한 해당 지역에 적용되는 규정에 따라 사용자 동의 및 개인정보를 처리해야 합니다.

그리고 _document.jsx에 스크립트 코드를 작성하지 마세요. 그러면 Next.js 앱에서는 작동하지 않습니다.

Google Analytics 4(GA4)는 여러 가지 이유로 Next.js의 document.jsx 파일에서 직접 작동하지 않습니다.

 

1. SSR 제한

'document.jsx' 파일은 서버 측에서 렌더링되며 GA4에서는 분석 데이터를 초기화하고 수집하기 위해 JavaScript가 필요합니다. 서버 측 렌더링(SSR)은 GA4에 필수적인 자바스크립트 실행을 포함하여 브라우저 환경에 액세스할 수 없습니다.

 

2. 비동기 스크립트 동기

Next.js의 document.jsx 파일은 비동기식으로 로드되므로 GA4 통합이 더욱 복잡해질 수 있습니다. 로드의 비동기 특성은 초기 페이지 로드가 완료될 때 GA4 스크립트를 사용하지 못할 수 있음을 의미합니다. 이로 인해 추적 오류가 발생하고 분석 데이터가 불완전해질 수 있습니다.

 

3. 데이터 수집 문제

GA4 스크립트가 성공적으로 로드되더라도 데이터 수집 및 페이지뷰 추적에 잠재적인 문제가 있을 수 있습니다. 서버 측 렌더링 환경은 GA4가 페이지 조회수와 사용자 상호작용을 정확하게 추적하는 데 필요한 컨텍스트를 제공하지 않을 수 있습니다.

 

이러한 제한 사항을 극복하려면 클라이언트 측에서만 실행되고 JavaScript 실행 및 분석 데이터 수집에 더 적합한 환경을 제공하는 Next.js 앱 라우터를 사용하여 GA4를 통합하는 것이 좋습니다. 이 접근 방식을 사용하면 GA4 스크립트가 올바르게 로드되고 초기화되어 사용자 상호작용 및 페이지 조회수를 정확하게 추적할 수 있습니다.

 

요약하자면, Next.js의 document.jsx 파일에 GA4를 직접 통합하는 것은 SSR의 비동기 특성과 데이터 수집 문제의 가능성으로 인해 권장되지 않습니다. 대신 앱 라우터를 사용하면 GA4를 통합하고 Next.js 애플리케이션에 대한 의미 있는 분석 데이터를 수집하는 보다 안정적이고 정확한 방법이 제공됩니다.

Next.js의 앱 라우터(버전 13 이상)

앱 라우터를 사용하여 Google Analytics를 Next.js 애플리케이션과 통합하려면 레이아웃 구성 요소에 필요한 추적 스크립트를 추가해야 합니다. Next.js 버전 13에 도입된 앱 라우터는 'app' 디렉터리를 기반으로 하며 공유 레이아웃 및 중첩 라우팅과 같은 기능을 지원합니다.

앱 라우터를 사용하여 Google Analytics를 추가하려면 next/script 구성요소를 사용하여 일반적으로 app/layout.js 파일의 레이아웃 구성요소에 Google Analytics 스크립트를 포함할 수 있습니다. 다음은 next/script 구성요소를 사용하여 Google Analytics 스크립트를 추가하는 방법의 예입니다.

// app/layout.js
import Script from 'next/script';

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

export default Layout;

 

'YOUR_TRACKING_ID'를 실제 Google Analytics 추적 ID로 바꾸세요. 또한 useRouter 후크를 사용하여 경로 변경을 수신하고 페이지 조회 이벤트를 Google Analytics로 보낼 수 있습니다. 다음은 layout.js 파일의 useEffect 후크 내에서 이 작업을 수행할 수 있는 방법의 예입니다.

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function Layout({ children }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      window.gtag('config', 'YOUR_TRACKING_ID', {
        page_path: url,
      });
    };

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

  // ... include the Script components as shown above

  return {children};
}

export default Layout;

이 코드는 경로 변경을 수신하고 경로 변경이 완료될 때마다 Google Analytics에 페이지뷰 이벤트를 보냅니다.

'YOUR_TRACKING_ID'를 실제 Google Analytics 추적 ID로 바꿔야 합니다. 또한 해당 지역에 적용되는 규정에 따라 사용자 동의 및 개인정보를 처리해야 합니다.

결론

Next.js에서 페이지 라우터와 앱 라우터 중에서 선택하는 것은 프로젝트 요구 사항에 따라 다릅니다. Google Analytics 스크립트를 통합하면 귀중한 통찰력을 제공하여 전반적인 사용자 경험이 향상됩니다. 각 라우팅 접근 방식의 미묘한 차이를 이해하고 Analytics 스크립트를 최적화하면 강력하고 효율적인 웹 애플리케이션이 보장됩니다.

FAQs

1. Next.js 애플리케이션에는 Google Analytics 통합이 필수입니까?
   • 아니요, 필수는 아니지만 정보에 입각한 의사결정을 위한 귀중한 데이터를 제공합니다.
2. 프로젝트 중에 페이지 라우터와 앱 라우터 간에 전환할 수 있나요?
   • 가능하지만 일관성 및 유지 관리상의 이유로 권장되지 않습니다.
3. 폭주가 웹사이트 성능에 어떤 영향을 미치나요?
   • 버스트 현상은 예측할 수 없는 트래픽 급증으로 이어져 성능에 영향을 줄 수 있습니다. 효과적인 관리가 중요합니다.
4. 콘텐츠 제작에서 구체성이 중요한 이유는 무엇입니까?
   • 특정 콘텐츠가 청중의 요구에 직접적으로 부응하여 참여도와 충성도를 높입니다.
5. 대화체 글쓰기 스타일의 핵심 요소는 무엇입니까?
   • 인칭 대명사, 수사적 질문, 은유는 독자의 공감을 불러일으키는 대화 스타일에 기여합니다.