Next.js 프로젝트에 Google Analytics 추가하고 버튼 클릭률 추적하기

Next.js로 만든 웹사이트나 애플리케이션에서 사용자 행동을 분석하기 위해 Google Analytics를 설정하고, 버튼 클릭률을 추적하는 방법을 알아보겠습니다.

1. Google Analytics 설정하기

1.1 기본 설정

먼저 Google Analytics 계정을 만들고 데이터 스트림을 설정하여 측정 ID(G-XXXXXXXXXX)를 받아야 합니다. 그 후 Next.js 프로젝트에 다음과 같이 Google Analytics를 설정합니다.

// components/GoogleAnalytics.js
import Script from 'next/script'

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

export default GoogleAnalytics

1.2 _app.js에 추가하기

// pages/_app.js
import GoogleAnalytics from '../components/GoogleAnalytics'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <GoogleAnalytics measurementId={process.env.NEXT_PUBLIC_GA_ID} />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

1.3 환경변수 설정

.env.local 파일을 생성하고 다음과 같이 설정합니다:

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

2. 버튼 클릭률 추적하기

2.1 기본 클릭 이벤트 추적

function TechStack() {
  const trackClick = (buttonName) => {
    window.gtag('event', 'button_click', {
      'event_category': 'engagement',
      'event_label': buttonName,
      'value': 1
    });
  };

  return (
    <div>

        href="/github"
        onClick={() => trackClick('github_button')}
      >
        Github
      </a>
      {/* 다른 버튼들도 동일하게 적용 */}
    </div>
  );
}

2.2 유입 경로별 클릭률 추적

유입 경로와 함께 클릭 이벤트를 추적하는 더 상세한 버전입니다:

import { useEffect } from 'react';

function TechStack() {
  const trackClick = (buttonName) => {
    const referrer = document.referrer || 'direct';
    const referrerDomain = referrer !== 'direct' ? new URL(referrer).hostname : 'direct';

    window.gtag('event', 'button_click', {
      'event_category': 'engagement',
      'event_label': buttonName,
      'referrer': referrerDomain,
      'custom_parameter': {
        'button_name': buttonName,
        'traffic_source': referrerDomain
      }
    });
  };

  // UTM 파라미터 추적
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const utmSource = urlParams.get('utm_source');
    const utmMedium = urlParams.get('utm_medium');
    const utmCampaign = urlParams.get('utm_campaign');

    if (utmSource || utmMedium || utmCampaign) {
      window.gtag('event', 'page_view', {
        'traffic_type': 'campaign',
        'utm_source': utmSource,
        'utm_medium': utmMedium,
        'utm_campaign': utmCampaign
      });
    }
  }, []);

  return (
    // ... 컴포넌트 내용
  );
}

3. UTM 파라미터 활용하기

각 유입 채널에 UTM 파라미터를 추가하여 더 정확한 추적이 가능합니다:

// 블로그 링크 예시
https://your-website.com?utm_source=blog&utm_medium=post&utm_campaign=tech_stack

// 소셜 미디어 링크 예시
https://your-website.com?utm_source=twitter&utm_medium=social&utm_campaign=profile_link

4. Google Analytics에서 데이터 분석하기

4.1 기본 데이터 확인

1. GA4 대시보드 접속
2. 왼쪽 메뉴에서 "이벤트" 선택
3. "button_click" 이벤트 확인
4. "event_label" 기준으로 데이터 분석

4.2 사용자 정의 보고서 만들기

• 차원: traffic_source, utm_source, button_name
• 지표: 이벤트 수, 사용자 수
• CTR 계산: (버튼 클릭 수 / 페이지 조회수) × 100

5. 주요 분석 지표

다음과 같은 인사이트를 얻을 수 있습니다:

1. 각 버튼별 클릭률
2. 유입 경로별 버튼 클릭 패턴
3. 캠페인 효과 측정
4. 소셜 미디어별 전환율
5. 직접 유입과 광고 유입의 행동 패턴 비교

주의사항

1. 개인정보 보호를 위한 쿠키 동의 배너 구현 필요
2. 개발 환경에서는 analytics 작동 방지
3. 페이지 로딩 성능을 위해 next/script의 strategy="afterInteractive" 사용

이렇게 설정하면 사용자들의 행동을 더 정확하게 추적하고 분석할 수 있습니다. 특히 유입 경로별 분석을 통해 어떤 채널이 가장 효과적인지 파악하고, 마케팅 전략을 개선하는 데 도움이 될 것입니다.