Next.js Blog Starter: Google Analytics(GA4) 연결

방문자가 몇 명인지 확인하고 싶다면? 🤔📊

블로그를 만들었고, SEO 최적화도 마쳤습니다.

이제 방문자가 얼마나 오는지, 어떤 글이 인기 있는지, 사람들이 어디서 유입되는지 궁금합니다.

그렇다면?

🔥 Google Analytics(GA4)를 연결해야 할 때! 🔥

하지만 GA4를 처음 접하면 머리가 아파집니다.

“이거 뭐야? 트래킹 ID? 속성? 이벤트?

그냥 내 블로그 방문자가 몇 명인지 알려줘!” 😭

걱정하지 마세요.

오늘도 초보자도 쉽게 따라 할 수 있는 Google Analytics 연결 방법을 설명해 드리겠습니다.

Google Analytics(GA4)란? 🧐

Google Analytics(GA4)는 웹사이트 방문자 데이터를 추적하는 도구입니다.

이걸 연결하면 블로그에 실제로 사람들이 오는지, 검색 유입이 있는지, 인기 글이 뭔지 확인할 수 있습니다.

📌 GA4로 알 수 있는 것

✅ 실시간 방문자 수 – 지금 내 블로그를 보고 있는 사람이 몇 명인지?

✅ 유입 경로 분석 – 구글 검색? SNS? 아니면 그냥 내가 100번 들어간 건지?

✅ 페이지별 조회 수 – 어떤 글이 인기인지?

✅ 체류 시간 & 이탈률 – 방문자가 글을 끝까지 읽는지, 클릭하고 바로 나가는지?

🔥 즉, 블로그의 ‘인싸력’(검색 유입력)을 측정하는 도구입니다.

Google Analytics(GA4) 가입 & 속성 생성 🏗

1️⃣ Google Analytics 계정 만들기

1. Google Analytics에 접속

무료 가입 후 측정 시작 클릭

3. 계정 이름 입력 (예: 내블로그_GA)

4. 다음 버튼 클릭

2️⃣ 속성(Property) 생성

이제 블로그 데이터를 저장할 공간(속성)을 만듭니다.

1. 속성 이름 입력 (예: My Blog Analytics)

2. 보고 시간대 & 통화 설정 (한국 시간(KST) 선택!)

3. 다음 클릭 후 비즈니스 정보 입력 (필수 아님, 대충 넘어가도 됨)

4. 웹(Web) 선택 후 도메인(예: myblog.com) 입력

5. 트래킹 ID(G-XXXXXXXXXX) 생성됨! 🎉


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PPW7EGEZMR"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXX');  // 트래킹 ID를 복사합니다.
</script>

🚀 이제 이 트래킹 ID를 내 블로그에 연결하면 끝!

Next.js 블로그에 GA4 연결하기 🛠

이제 생성된 GA4 트래킹 ID를 Next.js 블로그에 삽입해야 합니다.

방법은 2가지가 있습니다.

🔥 방법 1: _app.tsx 파일에 GA4 코드 직접 추가

📌 Next.js의 _app.tsx 파일에 Google Analytics 스크립트 추가!


import { useEffect } from 'react'
import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    window.dataLayer = window.dataLayer || []
    function gtag() {
      window.dataLayer.push(arguments)
    }
    gtag('js', new Date())
    gtag('config', 'G-XXXXXXXXXX') // GA4 Tracking ID 넣기
  }, [])

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX`}
      />
      <Component {...pageProps} />
    </>
  )
}

✔ 트래킹 ID(G-XXXXXXXXXX)를 내 ID로 변경하면 끝!

✔ 방문자가 생기면 GA4에서 자동으로 데이터 수집!

🔥 방법 2: next/script 활용해서 GA 삽입 (추천!)

Next.js에서 최적화된 방식으로 GA4 코드를 삽입하려면 **next/script**를 사용하면 됩니다.

📌 _app.tsx 파일에 추가!


import Script from 'next/script'

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

✔ 이렇게 하면 Next.js에서 GA 코드가 최적화된 방식으로 로드됨!

✔ 내 블로그 방문자가 감지되면 GA4에서 자동으로 데이터 수집 시작!

GA4 연결 확인

방문자 데이터 보이나요? 🔍

📌 GA4에 연결되었는지 확인하는 방법!

1️⃣ Google Analytics 대시보드 접속

2️⃣ “실시간(Realtime)” 메뉴 클릭

3️⃣ 내 블로그에 직접 접속해 보기

4️⃣ 방문자 수 1명(본인)이 감지되면 성공! 🎉

😨 근데 방문자가 0명이면?

✔ 블로그에 아직 아무도 안 왔을 가능성 높음

✔ SEO 최적화 후 검색 유입이 발생하려면 시간이 필요함

✔ 일단 블로그 글을 쓰고, 공유해보자!

GA4로 할 수 있는 것! (데이터 분석 시작) 📊

이제 Google Analytics가 블로그 방문자를 추적하고 있습니다.

이걸 활용하면 다음과 같은 것들을 알 수 있습니다.

✅ 실시간 방문자 수 – 현재 블로그를 보고 있는 사람 몇 명?

✅ 유입 경로 분석 – 구글 검색, SNS, 직접 방문?

✅ 페이지별 조회 수 – 가장 많이 읽힌 글은?

✅ 체류 시간 & 이탈률 – 방문자가 오래 머무나, 금방 나가나?

🔥 SEO 최적화 후, 실제로 검색 유입이 얼마나 되는지 측정할 수 있음!

이제 시작입니다! 🚀

Google Analytics를 연결했다고 해서 바로 방문자가 생기는 건 아닙니다.

이제는 SEO 최적화 + 꾸준한 블로깅이 필요합니다.

📌 GA4 연결 후 할 일 정리

✔ Search Console에서 색인 확인

✔ SEO 최적화된 첫 블로그 글 작성

✔ Google Analytics 실시간 방문자 체크

✔ 검색 유입 데이터 쌓이기 시작하면 분석 & 최적화 반복

🔥 블로그는 만들었고, GA4도 연결 완료! 이제 진짜 할 일은? 블로깅이다.

👉 지금 바로 첫 블로그 글을 작성하고 방문자 데이터를 확인해보세요! 🚀