GoogleAnalytics4 연동

1. UserAgent 설정하기

1단계) 나쵸코드에게 UserAgent 설정 요청

UserAgent 설정은 베이직 플랜 이상의 고급 앱에서만 요청 가능하며, 한 번만 설정하면 이후 자동으로 적용됩니다.

2. 코드 삽입 및 이벤트 파라미터(매개변수) 포함

1단계) 웹 페이지에 아래 코드를 웹사이트<head>나 GA가 로드되기 전에 삽입해주세요.

Plaintext

let platform = 'web_desktop';

if (typeof navigator !== 'undefined') {
  const ua = navigator.userAgent.toLowerCase();

  if (ua.includes('nachocode_ios')) {
    platform = 'nachocode_ios';
  } else if (ua.includes('nachocode_android')) {
    platform = 'nachocode_android';
  } else if (
    ua.includes('mobi') ||
    ua.includes('android') ||
    ua.includes('iphone') ||
    ua.includes('ipad')
  ) {
    platform = 'web_mobile';
  }

  window.platform = platform;
}

이후 GA 이벤트 전송 시 platform: window.platform 값을 포함하면 자동 분류됩니다.

2단계) GA 이벤트를 보낼 때, Platform 파라미터(매개변수) 포함

gtag.js 사용 시 예시)

Plaintext

gtag('event', 'event_name', {
  platform: window.platform
});

react-ga4 사용 시 예시)

Plaintext

import ReactGA from 'react-ga4';

ReactGA.event({
  category: '카테고리',
  action: '행동',
  label: '레이블',
  value: 1,
  platform: window.platform
});

GTM (Google Tag Manager) 사용 시 예시)

Plaintext

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'event_name',
  platform: window.platform
});

3. GA4에서 맞춤 차원 등록하기

1단계) GA4 > 설정 > 데이터 표시 > 맞춤정의 클릭

2단계) [맞춤 측정기준 만들기] 클릭

3단계) 새 맞춤측정 기준 만들기 > [저장] 클릭

측정기준이름: platform
범위: 이벤트
설명 : 구분짓는 설명(자유)
이벤트 매개변수: platform️️️

5. 실제 데이터를 탐색 보고서에서 분석하기

1단계) GA4 > 탐색 > 비어있음 클릭

2단계) 측정 기준 [+] 클릭

3단계) 사용자 설정 > 맞춤 > platform > [확인] 클릭

4단계) 측정 기준 드롭

5단계) 측정 기준으로 데이터 조합해 확인