[블로그 만들기 #5] 구글 애널리틱스로 블로그 방문자 추적해보자 (feat. GA4, Google 태그)

Cover Image for [블로그 만들기 #5] 구글 애널리틱스로 블로그 방문자 추적해보자 (feat. GA4, Google 태그)
swhan
· 7 min read
#블로그 만들기 시리즈#구글 애널리틱스#구글 태그

구글 애널리틱스로 사용자의 페이지뷰, 클릭, 유입 경로를 분석해봅시다.

들어가며

이전 포스팅에서는 저희 블로그가 검색 결과에 잘 노출될 수 있도록 만드는 SEO 설정에 대해 알아보았습니다.

SEO 설정 후 하루정도 기다리니까 검색 결과에 나오기는 하는데, 진짜 방문자가 있는지 점검 한 번 해봐야 하지 않을까요? 이번 포스팅에서는 우리 구글 형님께서 무료로 제공해주는 트래픽 분석 툴인 구글 애널리틱스에 대해 알아보겠습니다.

구글 애널리틱스(Google Analytics)

GA4라고 불리는 구글 애널리틱스는 구글에서 웹사이트와 앱에서 일어나는 모든 사용자 활동을 추적, 분석하는 일종의 인터넷 CCTV 같은 존재입니다.

사용자의 행동을 추적해 딱 맞는 광고를 매칭하고, 클릭률이 0.1%만 올라가도 수익이 폭증하는 구조를 가진 구글이 만든 도구답게 강력한 기능들을 제공해주고 있습니다.

그럼 GA4가 얼마나 강력한 기능을 가지고 있는지, 가볍게 뜯어보겠습니다.

  1. 쿠키 기반 사용자 식별: Client ID, User ID를 이용해 브라우저나 계정 기준으로 사람을 구분합니다.
  2. 이벤트 기반 모델: 페이지뷰, 클릭, 스크롤 등 사용자의 모든 행동을 이벤트로 기록합니다.
  3. 크로스 플랫폼 분석: 웹사이트, 앱 데이터를 통합해서 하나의 사용자 흐름으로 추적할 수 있습니다.
  4. BigQuery 연동: 구글의 대규모 데이터 처리 플랫폼을 통해 페타바이트 단위의 데이터 분석이 가능합니다.
  5. 딥러닝 기반 예측 기능: 이탈 가능성, 구매 확률 등을 자동으로 예측하는 기능도 제공됩니다.

저희 블로그는 방문자도 없고, 페타바이트는커녕 메가바이트도 겨우 나올 수준이지만, 실리콘밸리 천재들이 인생을 갈아서 만든 이 미친 도구를 단순 방문자 카운터 용도로 사용해보겠습니다.

구글 애널리틱스(Google Analytics) 가입하기

뭐든 도구 사용의 시작은 회원가입, 초기화 설정이죠. 바로 시작해보겠습니다.

GA 계정 생성

GA 가입하기 클릭 후 계정 이름 입력해주고, 계정 데이터 공유 설정은 필수 제외하고 모두 체크 해제해준 다음에

GA 속성 설정

시설 세부정보에 사이트 식별할 수 있도록 블로그 도메인 주소 입력해주시고 보고 시간대는 보기 편하게 한국 시간대, 통화는 뭔가 있어보이게 달러로 설정

GA 비즈니스 세부 설정

비즈니스 정보는 해당되는 옵션으로 넣어주고

GA 비즈니스 목표 세부 설정

비즈니스 목표도 해당되는 옵션 선택해주시면 됩니다. 저희는 트래픽 파악이 목적이니 웹 트래픽 파악, 사용자 참여 발생 시간 옵션 선택하겠습니다.

GA 서비스 약관 동의 설정

서비스 약관도 야무지게 동의해주고

GA 데이터 수집 플랫폼 설정

저희는 웹사이트에서 데이터 수집 할거니까 수집 플랫폼은 웹으로 선택해주시면 됩니다.

GA 데이터 스트림 설정

데이터 스트림 설정은 저희 블로그 도메인 주소, 스트림 이름은 저희가 잘 알아볼 수 있도록 넣어주고(저는 그냥 블로그 타이틀로 설정했습니다) 뭔가 향상된 측정을 도와줄 것 같으니 향상된 측정 옵션도 켜놓겠습니다.

GA 데이터 스트림 측정 ID 발급

이제 저희 블로그를 구글에게 식별 가능하게 만들고, 방문자를 분석할 수 있는 모든 준비가 완료되었습니다.

구글은 저희를 측정 ID를 이용해서 식별하니 "G-xxxxx" 값 복사해주시고 저희 블로그에 바로 설치해보겠습니다.

Google 태그

Google 태그는 말 그래도 태그(tag)를 이용해서 저희 블로그에서 일어난 사용자 이벤트 데이터를 구글 애널리틱스에서 분석할 수 있게 도와주는 도구입니다.

내부적으로 gtag.js라는 JavaScript 프레임워크를 사용하여 동작하는데, 위에서 발급한 측정 ID를 gtag.js 호출할 때 쿼리스트링 값으로 넘겨주면 간단하게 Google 태그 사용할 준비 완료입니다.

설치하기

구글이 권장하는 설치, 사용하는 방법도 단순합니다.

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

이렇게 저희가 분석하고 싶은 웹사이트 html 파일마다 head 태그에 이렇게 복사 & 붙여넣기 해주면 끝입니다.

블로그에 적용하기

저희가 사용하는 blog-starter-kit에서는 src/app/layout.tsx 파일에서 html 공통 레이아웃을 관리하고 있으니 여기에만 추가하면 저희 블로그 전체에 적용 가능합니다. head 태그에 Next.js에서 요구하는 방식대로 next/script 모듈을 이용해서 추가해보겠습니다.

// src/app/layout.tsx 수정 전
import {...} from "...";

export const metadata: Metadata = {
  ...
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
        ...
        <!-- 각종 태그들 -->
      </head>
      <body className={xxxxx}>
        ...
        <!-- 페이지 내용들 -->
      </body>
    </html>
  );
}

// src/app/layout.tsx 수정 후
import {...} from "...";
import Script from "next/script"; // next/script 모듈 호출

export const metadata: Metadata = {
  ...
};

const GA_MEASUREMENT_ID = "G-XXXXX"; // 측정 ID 넣어주시고
const GA_SRC = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`;
const GA_SCRIPT = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_MEASUREMENT_ID}', {
  cookie_domain: 'none',
  cookie_flags: 'SameSite=None;Secure', // http://localhost:3000에서 사용할 땐 Secure 옵션 제거해주셔야 합니다.
  cookie_expires: 60 * 60 * 24 * 7,
  allow_google_signals: false
});
`; // script는 관리 편하게 따로 분리했습니다.

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
        ...
        <!-- 각종 태그들 -->
        <Script strategy="afterInteractive" src={`${GA_SRC}`} />
        <Script strategy="afterInteractive" id="ga4-init" dangerouslySetInnerHTML={{ __html: GA_SCRIPT }} />
      </head>
      <body className={xxxxx}>
        ...
        <!-- 페이지 내용들 -->
      </body>
    </html>
  );
}

이렇게 구글에서 권장하는 설치 방법을 Next.js 구조에 맞춰서 변경 후 적용해주시면, afterInteractive 옵션에 의해 페이지가 로딩 후 상호 작용 가능해질 때 gtag.js 파일이 로딩되면서 Google 태그 사용이 가능해집니다.

이벤트 정보 실시간 확인하기

저희 블로그에 Google 태그 적용이 끝났으니 이제 구글 애널리틱스에서 잘 인식하는지 바로 확인해보겠습니다.

한가지 주의할 점은 로컬 테스트에서는 https가 아닌 http 통신이니까 cookie_flags 옵션에서 Secure 값 제거해주셔야 합니다.

npm run dev

> dev
> next dev --turbopack

   ▲ Next.js 15.0.2 (Turbopack)
   - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 732ms

localhost:3000 접속 후, 네트워크 기록 확인해보시면

gtag 로딩 오류

엥? gtag.js 로딩이 막혔다고 나오네요. 사파리는 기본적으로 개인정보 보호 설정이 강력해서 googletagmaner.com 도메인을 차단하는 경우가 있습니다.

개인정보 보호 윈도우가 아닌 일반 윈도우에서 다시 실행해보겠습니다.

gtag 호출 성공

사파리가 정상적으로 gtag.js 파일 호출 하면서

ga 이벤트 전송

구글 애널리틱스 서버(google-analytics.com/g/collect?v=2&tid=G-12345&key=value)로 분석 정보 fetch 요청 보내는 것을 알 수 있고

ga 이벤트 실시간 개요-01

이제 구글 애널리틱스 홈에서 확인해보시면 이렇게 방금 도착한 따끈따끈한 수집 정보가 잘 표시되고 있습니다. 추가로 여러 포스팅 왔다갔다 해주시면

ga 이벤트 실시간 개요-02

실시간 개요 페이지에서 이렇게 뭔가 있어보이는 화면을 보실 수 있습니다.

마무리

이렇게 구글 애널리틱스를 활용해 간단한 페이지뷰 추적과 인기 게시글 확인 기능을 적용해봤습니다.

구글 애널리틱스는 전 세계 웹사이트의 데이터를 빨아들이는 괴물 같은 도구지만, 저희 블로그에선 아직 “페이지 뷰 하나”가 찍히는 정도의 존재죠.

개발자가 뭔가를 시작할 때 hello world 먼저 찍어보듯이, 구글 애널리틱스도 페이지 뷰 하나 찍어보는 것부터 시작하면 됩니다.

언젠가는 클릭률 기반 이벤트 수집, A/B 테스트, 콘텐츠 전략 개선까지 확장될 수 있기를 희망하며 다음 포스팅에서는 FFmpeg을 이용해서 썸네일, 게시글 첨부 이미지들을 예쁘게 보여주는 방법에 대해 알아보겠습니다.

← 이전 글
[블로그 만들기 #4] meta 태그와 SEO 설정으로 검색 엔진에게 내 블로그를 소개해보자 (feat. Open Graph)
다음 글 →
[블로그 만들기 #6] FFmpeg으로 블로그 썸네일, 이미지들을 예쁘게 다듬어보자.