728x90
반응형

“내 블로그, 누가 보고 있을까?”
단순한 궁금증에서 시작했지만, 트래픽 분석은 블로그 성장을 위한 가장 강력한 데이터 도구가 됩니다.

이번 글에서는 Next.js 블로그에 GA4(Google Analytics 4)를 연결해서
방문자 수, 페이지뷰, 클릭 흐름 등을 추적하는 방법을 소개할게요.

🔧 1. Google Analytics 4 속성 생성

  1. Google Analytics 접속
  2. 계정 생성 → 속성 생성 → 웹 선택
  3. 측정 ID (G-XXXXXXX) 복사

우리는 이 측정 ID를 Next.js 프로젝트에 삽입하게 됩니다.

🧩 2. gtag 스크립트 삽입하기

Next.js에서 페이지별 추적을 위해 _app.tsx와 _document.tsx에 아래 코드를 추가합니다.

1) _document.tsx에 스크립트 삽입

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
        <script dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXX', {
              page_path: window.location.pathname,
            });
          `
        }} />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

주의: 위 G-XXXXXXX는 본인의 실제 측정 ID로 바꿔야 해요.

🔁 3. 라우트 변경 추적 설정 (SPA 대응)

Next.js는 SPA 방식이기 때문에 페이지 이동이 클라이언트 사이드에서 일어납니다.
따라서 라우터 변경 시 수동으로 추적해야 해요.

// pages/_app.tsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';

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

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      window.gtag('config', 'G-XXXXXXX', {
        page_path: url,
      });
    };

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

  return <Component {...pageProps} />;
}

export default MyApp;

이제 페이지를 이동할 때마다 Google Analytics에 자동으로 기록됩니다!

🧪 4. 데이터 확인하기

GA4에서 실시간 탭 또는 이벤트 탭으로 들어가면 페이지 뷰, 접속자 수 등을 확인할 수 있어요.

Tip: 마케팅을 고려한다면 utm 파라미터 분석도 함께 배워보는 걸 추천합니다!

✅ 마무리하며

트래픽 분석은 단순히 수치를 보기 위한 게 아니라,
내가 쓴 글이 누군가에게 닿았는지 확인하는 방법이기도 해요.

“기록은 나를 위한 것이고, 분석은 모두를 위한 것이다.”

📌 다음 추천 주제

➡ Google Search Console 연동하기 — 검색 노출까지 완성!

728x90
반응형

'Next.js' 카테고리의 다른 글

SSG vs SSR vs ISR — 블로그에 어울리는 렌더링 방식 고르기  (0) 2025.07.02
Notion을 CMS처럼 활용해서 블로그 연결하기  (0) 2025.07.01
포스트 북마크 & 좋아요 기능 추가  (1) 2025.06.29
배포까지 한 번에! — Vercel로 CI/CD 구성하기  (1) 2025.06.28
댓글 기능 추가하기 — Disqus, GitHub Discussion, 자체 API  (6) 2025.06.27

티스토리툴바