GA4 전자상거래 (gtag.js): 유니버설 애널리틱스 및 GA4 이벤트 전송

이 가이드에서는 별도의 gtag.js 유니버설 애널리틱스Google 애널리틱스 4 전자상거래 구현을 유지하는 방법을 설명합니다.

개발자용 이전 센터에서 추가 업그레이드 가이드 및 리소스를 참고하세요.

결과

이 가이드를 따르면 새 GA4 속성에 Google 애널리틱스 4 전자상거래 이벤트를 구현하고 기존 유니버설 애널리틱스 전자상거래 구현을 변경하지 않습니다. 유니버설 애널리틱스 속성과 GA4 속성 모두에 별도의 전자상거래 이벤트를 전송합니다.

시작하기 전에

  1. 전자상거래 이전 도우미 도구를 사용하여 다음 설명이 현재 구현에 관한 설명인지 확인합니다.

    • 유니버설 애널리틱스 속성을 사용 중입니다.
    • 사이트에서 gtag.js 라이브러리를 사용하여 전자상거래 이벤트를 전송합니다.
  2. 각 옵션의 장단점을 알아보려면 전자상거래 구현의 업그레이드 옵션을 검토하세요. 이 가이드를 따르고 있는지 확인하고 유니버설 애널리틱스 속성과 Google 애널리틱스 4 속성에 하나씩 총 2개의 애널리틱스 구현이 있는지 확인합니다.

장단점 및 고려사항

유니버설 애널리틱스 속성과 Google 애널리틱스 4 속성마다 하나씩, 총 2개의 전자상거래 구현이 미치는 영향을 완전히 이해하려면 아래 정보를 검토하고 고려하세요.

장점 단점
  • GA4 및 유니버설 애널리틱스 보고서에서 전자상거래 데이터를 확인할 수 있습니다.
  • 유니버설 애널리틱스 속성에서 전자상거래 데이터를 수집 또는 보고하는 방식이 변경되지 않습니다.
  • GA4 이벤트 및 매개변수를 사용하여 완전한 GA4 전자상거래 보고서를 만들 수 있습니다.
  • GA4 전자상거래 이벤트를 구현해야 합니다.
  • 웹사이트에서 유니버설 애널리틱스 이벤트와 GA4에 각각 하나씩 2개의 이벤트 세트를 전송합니다. 이로 인해 성능이 저하될 수 있습니다.

구현

1. 새 GA4 속성 만들기 및 구성

Google 애널리틱스 4 속성을 만들고 구성하려면 다음 단계를 따르세요.

  1. 새 Google 애널리틱스 4 속성을 만듭니다.
    • GA4 설정 어시스턴트를 사용하여 새 GA4 속성을 자동으로 만들고 유니버설 애널리틱스 속성에서 속성 이름, 웹사이트 URL, 시간대, 통화 설정을 복사합니다. 하지만 연결된 사이트 태그 기능을 사용 중지하려면 기존 태그를 사용하여 데이터 수집 사용 옵션을 선택 해제합니다. 또는 유니버설 애널리틱스 속성에서 설정을 복사하지 않으려면 GA4 설정 어시스턴트를 사용하지 않고 Google 애널리틱스 4 속성을 만듭니다.
  2. Google 애널리틱스 4 속성의 측정 ID를 찾습니다. 다음 단계에서 이 값을 사용하여 GA4 속성을 구성합니다.
  3. GA4 속성 추가
    • 유니버설 애널리틱스 이벤트가 UA 속성으로만 전송되고 Google 애널리틱스 4 이벤트가 GA4 속성으로만 전송되도록 하려면 gtag.js에서 제공하는 데이터 라우팅 기능을 사용하세요. 에서 확인할 수 있습니다.
    • 기존 gtag.js 스니펫에 Google 애널리틱스 4 속성을 추가합니다. 이벤트가 유니버설 애널리틱스 속성과 별도로 GA4 속성으로 라우팅될 수 있도록 config 명령어와 groups 매개변수를 측정 ID와 함께 사용합니다.

다음은 GA4 그룹에 할당된 유니버설 애널리틱스 속성과 Google 애널리틱스 4 속성을 구성한 gtag.js 스니펫의 예입니다.

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

  gtag('config', 'UA-XXXXX-Y');  // Universal Analytics property.
  
  gtag('config', 'GA_MEASUREMENT_ID', { 'groups': 'GA4' });  // Google Analytics 4 property.
  
</script>

2 GA4 전자상거래 이벤트를 구현하고 GA4 속성으로 라우팅

새 Google 애널리틱스 4 속성을 만들고 구성한 후에는 GA4 전자상거래 이벤트를 구현할 수 있습니다. GA4 구현을 유니버설 애널리틱스 구현과 비교할 수 있도록 다음 리소스를 사용하세요.

다음 예시에서는 GA4 이벤트의 send_to 매개변수를 사용하여 별도의 속성으로 전송되는 유니버설 애널리틱스 및 Google 애널리틱스 4 전자상거래 purchase 이벤트를 보여줍니다.

// Universal Analytics.
// The original UA implementation remains unchanged.
gtag('event', 'purchase', {
  "transaction_id": "24.031608523954162",
  "affiliation": "Google online store",
  "currency": "USD",
  "shipping": 7.50,
  "tax": 1.80,
  "value": 33.30,
  "items": [
    {
      "id": "P12345",
      "name": "Android Warhol T-Shirt",
      "brand": "Google",
      "category": "Apparel/T-Shirts",
      "variant": "Black",
      "list_name": "Search Results",
      "list_position": 1,
      "quantity": 2,
      "price": 12.00
    }
  ]
});

// The new Google Analytics 4 ecommerce implementation.
// Uses `send_to` to route data to the GA4 group defined in the tag config.
gtag('event', 'purchase', {
  "send_to": "GA4",
  "transaction_id": "24.031608523954162",
  "affiliation": "Google online store",
  "currency": "USD",
  "shipping": 7.50,
  "tax": 1.80,
  "value": 33.30,
  "items": [
    {
      "item_id": "P12345",
      "item_name": "Android Warhol T-Shirt",
      "item_brand": "Google",
      "item_category": "Apparel/T-Shirts",
      "item_variant": "Black",
      "quantity": 2,
      "price": 12.00
    }
  ],
});