GA4 파라미터 설정을 위한 gtag.js 코드 예시 및 실무 적용

GA4 파라미터 설정을 위한 gtag.js 코드 예시는 기본적으로 gtag('config', '측정ID', {...})로 설정하며, 이벤트 추적 시에는 gtag('event', '이벤트명', {파라미터}) 형태로 작성합니다. 실무에서는 GA4 측정 ID(G-XXXXXX)를 사용해 기본 설정을 하고, 사용자 ID, 쿠키 설정, 맞춤 이벤트 파라미터 등을 추가하여 세밀한 데이터 수집이 가능합니다.

기본 gtag.js GA4 설정 예시

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

  // GA4 기본 설정 및 user_id 설정
  gtag('config', 'G-XXXXXXX', {
    'user_id': 'USER_ID_12345'  // 사용자 ID 지정 (선택)
  });
</script>

이벤트와 파라미터 설정 예시

// 예: 상담하기 버튼 클릭 이벤트 추적
gtag('event', 'cta_click', {
  'button_text': '상담하기',
  'page_path': '/contact',
  'success': true
});

• 이벤트명은 자유롭게 지정 가능하며, 파라미터는 키-값 쌍으로 전달합니다.
• 이벤트 파라미터는 GA4 보고서에서 측정기준 및 측정항목으로 활용할 수 있습니다.

실무 적용 팁

• Google 태그 관리자(GTM) 연동: GTM에서 GA4 설정 태그를 만들고, 사용자 정의 이벤트 태그를 생성하여 파라미터를 설정 후 미리보기로 테스트 후 배포합니다.
• 이벤트 파라미터 활용: 버튼 클릭, 구매, 페이지뷰 등 주요 사용자 행동에 맞는 이벤트를 정의하고, 관련 파라미터(예: 상품ID, 가격, 카테고리 등)를 추가해 상세 분석이 가능하도록 합니다.
• 디버그 및 실시간 확인: GA4 디버그 모드와 실시간 보고서를 활용해 이벤트가 정상 수집되는지 확인합니다.
• 기존 UA(analytics.js)에서 gtag.js로 전환 시: ga('create', ...) 대신 gtag('config', ...)를 사용하며, 사용자 ID 등 설정도 user_id 파라미터로 변경합니다.

이처럼 GA4 gtag.js 코드는 기본 설정과 이벤트별 파라미터를 명확히 구분해 작성하며, GTM과 연동해 관리하면 실무에서 효율적으로 운영할 수 있습니다.