Google Analytics

Sentry 연동과 마찬가지로 Google Analytics 연동도 바로 사용할 준비가 되어 있습니다.

사전 준비

• Google Analytics 계정

Setup

./app/root.tsx 파일 하단에 페이지에 Google Tag Manager 스크립트를 추가하는 스크립트가 있습니다.

이를 활성화하려면 VITE_GOOGLE_TAG_ID 환경 변수를 설정해야 합니다.

VITE_GOOGLE_TAG_ID=""

Google Analytics 계정과 프로젝트를 생성한 후 Google 태그 ID를 얻을 수 있습니다.

Google Analytics vs. Google Tag Manager

./app/root.tsx, 에서 확인할 수 있듯이, 이 스크립트는 Google Analytics 자체를 추가하는 것이 아니라 Google Tag Manager를 추가합니다.

Google Tag Manager는 웹사이트의 태그를 관리할 수 있는 도구로, 태그는 코드 조각을 의미합니다.

예를 들어, Google Analytics 에는 자체 태그가 있고, Google Ads 에는 또 다른 태그가 있습니다.

만약 Google Ads를 활성화하고 싶다면 웹사이트의 코드를 변경하는 대신 Google Tag Manager에 Google Ads 태그를 추가하면 됩니다. 그러면 웹사이트에서 해당 태그가 활성화됩니다.

Google Analytics에 이벤트 전송하기

Google Analytics에 이벤트를 전송하면 웹사이트에서 유저의 행동을 추적할 수 있으므로 유용합니다.

예를 들어 버튼 클릭, 양식 제출 등을 추적할 수 있습니다.

Google Analytics에 이벤트를 전송하려면 './app/core/lib/analytics.client.ts'에 있는 trackEvent 함수를 사용하면 됩니다.

export default function trackEvent<T extends string>(
  eventName: T,
  properties?: Record<string, unknown>,
) {
  return window.gtag && window.gtag('event', eventName, properties)
}

이 함수는 다음과 같이 사용할 수 있습니다:

import { trackEvent } from '@/core/lib/analytics.client'

export function Button() {
  return (
    <button
      onClick={() => trackEvent('button_clicked', { button_name: 'Login' })}
    >
      Login
    </button>
  )
}

연동 디버깅

Google Analytics 연동을 디버깅하려면 /debug/analytics 페이지로 이동하세요.

테스트 이벤트를 트리거하는 버튼이 있습니다.

클릭하면 Google Analytics account > Reports > Realtime overview에서 테스트 이벤트가 표시되는 것을 확인할 수 있습니다.