전자상거래 측정

이 가이드에서는 analytics.js를 사용하여 전자상거래 데이터를 수집하는 방법을 설명합니다.

개요

전자상거래 측정을 이용하면 웹사이트에서 발생하는 거래 횟수와 수익을 측정할 수 있습니다. 일반적인 전자상거래 사이트에서는 사용자가 브라우저의 '구매' 버튼을 클릭하면 사용자의 구매 정보가 거래를 처리하는 웹 서버로 전송됩니다. 거래가 성공적으로 처리되면 사용자는 '감사' 페이지나 거래 세부정보 및 구매 영수증이 제공되는 영수증 페이지로 리디렉션됩니다. analytics.js 라이브러리를 이용하면 전자상거래 데이터를 '감사' 페이지에서 Google 애널리틱스로 전송할 수 있습니다.

analytics.js를 사용하여 전송할 수 있는 전자상거래 데이터는 거래와 항목 데이터, 두 가지 유형으로 나뉩니다.

거래 데이터

거래란 사이트에서 발생하는 거래 전체를 의미하며, 거래에는 다음과 같은 값이 포함됩니다.

키 값 유형 필수 설명
id 문자 예 거래 ID입니다(예: 1234).
affiliation 문자 아니요 거래가 발생한 매장 또는 제휴입니다(예: Acme Clothing).
revenue 통화 아니요 거래와 관련된 총 수익 또는 총 합계를 지정합니다(예: 11.99). 이 값에는 배송비, 세금 또는 수익 계산에 포함하려는 기타 총 수익 조정 금액이 포함될 수 있습니다.
shipping 통화 아니요 거래에서 발생한 총 배송비를 지정합니다(예: 5).
tax 통화 아니요 거래의 총 세금을 지정합니다(예: 1.29).

항목 데이터

항목이란 장바구니에 있던 개별 제품을 의미하며, 항목에는 다음과 같은 값이 포함됩니다.

키 값 유형 필수 설명
id 문자 예 거래 ID입니다. 이 ID는 항목이 속한 거래에 해당 항목을 연결합니다. (예: 1234)
name 문자 예 항목 이름입니다(예: 복슬복슬한 분홍색 토끼).
sku 문자 아니요 SKU 또는 항목 코드를 지정합니다(예: SKU47).
category 문자 아니요 항목이 속한 카테고리입니다(예: 파티 완구).
price 통화 아니요 각 항목의 개별 단가입니다. (예: 11.99)
quantity 정수 아니요 거래에서 구매가 완료된 단위의 수입니다. 정수가 아닌 값이 이 필드로 전송되면(예: 1.5), 가장 가까운 정수값으로 반올림됩니다.

구현

일반적으로 사용자가 결제 프로세스를 완료하면 전자상거래 측정이 구현되며, 일반적으로 '감사' 페이지에서 이루어집니다. 측정을 구현하고 전자상거래 데이터를 Google 애널리틱스로 전송할 준비가 되면 다음과 같은 몇 가지 단계를 거쳐야 합니다.

전자상거래 플러그인 로드

analytics.js 라이브러리의 크기를 줄이기 위해 전자상거래 측정 기능은 기본 라이브러리에서 제공되지 않는 대신, 사용 전에 로드해야 하는 플러그인 모듈로 제공됩니다.

전자상거래 플러그인을 로드하려면 다음 명령어를 사용하세요.

ga('require', 'ecommerce');

이 명령어는 추적기 개체를 생성한 후, 그리고 전자상거래용 기능을 사용하기 전에 실행해야 합니다.

로드가 완료되면 전자상거래 측정과 관련된 몇 가지 새로운 명령어가 기본 추적기에 추가됩니다.

거래 추가

플러그인이 로드되면 투명한 장바구니 객체가 생성됩니다. 거래 및 항목 데이터를 장바구니에 추가할 수 있고, 구성이 완료된 후에는 모든 데이터를 한 번에 전송할 수 있습니다.

다음과 같이 ecommerce:addTransaction 명령어를 사용하여 거래 데이터를 장바구니에 추가합니다.

ga('ecommerce:addTransaction', {
  'id': '1234',                     // Transaction ID. Required.
  'affiliation': 'Acme Clothing',   // Affiliation or store name.
  'revenue': '11.99',               // Grand Total.
  'shipping': '5',                  // Shipping.
  'tax': '1.29'                     // Tax.
});

항목 추가

다음으로, 장바구니에 항목을 추가하기 위해 ecommerce:addItem 명령어를 사용합니다.

ga('ecommerce:addItem', {
  'id': '1234',                     // Transaction ID. Required.
  'name': 'Fluffy Pink Bunnies',    // Product name. Required.
  'sku': 'DD23444',                 // SKU/code.
  'category': 'Party Toys',         // Category or variation.
  'price': '11.99',                 // Unit price.
  'quantity': '1'                   // Quantity.
});

데이터 보내기

마지막으로, 장바구니에 모든 전자상거래 데이터를 구성한 후 ecommerce:send 명령어를 사용하여 데이터를 Google 애널리틱스로 전송합니다.

ga('ecommerce:send');

이 명령어는 장바구니의 각 거래와 항목을 검토하고 각 데이터를 Google 애널리틱스로 전송합니다. 완료되면 장바구니가 비워지고 새 거래를 위해 데이터를 전송할 수 있는 상태가 됩니다. 이전 ecommerce:send 명령어가 실행되면 새로운 거래와 항목 데이터만 전송됩니다.

데이터 삭제

모든 거래와 항목의 장바구니를 수동으로 삭제해야 할 경우에는 다음 명령어를 사용합니다.

ga('ecommerce:clear');

현지 통화 지정

기본적으로 Google 애널리틱스 관리 웹 인터페이스를 통해 모든 거래 및 항목에 대해 공통된 전체 통화를 구성할 수 있습니다. 기본적으로 전체 통화는 모든 항목 및 거래에 사용됩니다. 여러 통화로 거래를 수행하는 웹사이트의 경우, 전자상거래 플러그인을 사용하면 개별 제품뿐만 아니라 해당 거래의 현지 통화를 지정할 수 있습니다.

현지 통화는 ISO 4217 표준으로 지정해야 합니다. 지원되는 전환 통화의 전체 목록은 통화 코드 참조 문서를 참고하세요.

특정 거래 및 모든 항목의 현지 통화를 설정하려면 해당 거래의 통화만 지정하면 됩니다.

ga('ecommerce:addTransaction', {
  'id': '1234',
  'affiliation': 'Acme Clothing',
  'revenue': '11.99',
  'shipping': '5',
  'tax': '1.29',
  'currency': 'EUR'  // local currency code.
});

마지막으로 항목당 통화를 지정할 수도 있습니다.

  ga('ecommerce:addItem', {
    'id': '1234',
    'name': 'Fluffy Pink Bunnies',
    'sku': 'DD23444',
    'category': 'Party Toys',
    'price': '11.99',
    'quantity': '1',
    'currency': 'GBP' // local currency code.
  });

여러 추적기 지원

페이지에서 (이름이 지정된) 여러 개의 추적기를 구현한 경우에도 전자상거래 플러그인을 사용할 수 있습니다. 플러그인은 형식이 trackerName.pluginName:method인 것을 제외하고 기본 추적기와 정확히 동일하게 작동합니다. 예를 들어 myTracker라는 이름의 추적기를 생성하면 다음과 같습니다.

ga('create', 'UA-XXXXX-Y', 'auto', {'name': 'myTracker'});

다음을 사용하여 해당 추적기의 전자상거래 플러그인을 로드합니다.

ga('myTracker.require', 'ecommerce');

그런 다음, 거래를 전송하기 위해 다음과 같이 거래 객체를 만들어 해당 추적기에 전달할 수 있습니다.

var transaction = {
  'id': '1234',                    // Transaction ID.
  'affiliation': 'Acme Clothing',  // Affiliation or store name.
  'revenue': '11.99',              // Grand Total.
  'shipping': '5' ,                // Shipping.
  'tax': '1.29'                    // Tax.
};

ga('myTracker.ecommerce:addTransaction', transaction);

이 구문을 사용하면 거래 객체를 여러 추적기에서 사용할 수 있습니다.

마지막으로 거래 데이터를 다음과 같이 전송합니다.

ga('myTracker.ecommerce:send');

예시

대부분의 전자상거래 사이트는 서버에서 거래를 실행하는 반면, analytics.js 라이브러리는 브라우저에서 Google 애널리틱스로 데이터를 전송합니다. 따라서 전자상거래 데이터를 Google 애널리틱스로 제대로 전송하려면 서버와 클라이언트 간에 약간의 조율이 필요합니다.

대부분의 전자상거래 사이트는 서버 측 템플릿 엔진을 사용하여 '감사' 페이지를 렌더링합니다. 이 경우 전자상거래 측정 코드를 서버 측 템플릿에 추가하고 서버 로직을 사용하여 전자상거래 데이터 값을 최종 페이지에 동적으로 작성합니다. PHP에서 표시되는 모습을 보여주는 예시를 소개합니다.

일반적으로 PHP에는 전자상거래 데이터가 표시됩니다. 이 예시에서 데이터는 연관 배열에 다음과 같이 저장됩니다.

<?php
// Transaction Data
$trans = array('id'=>'1234', 'affiliation'=>'Acme Clothing',
               'revenue'=>'11.99', 'shipping'=>'5', 'tax'=>'1.29');

// List of Items Purchased.
$items = array(
  array('sku'=>'SDFSDF', 'name'=>'Shoes', 'category'=>'Footwear', 'price'=>'100', 'quantity'=>'1'),
  array('sku'=>'123DSW', 'name'=>'Sandals', 'category'=>'Footwear', 'price'=>'87', 'quantity'=>'1'),
  array('sku'=>'UHDF93', 'name'=>'Socks', 'category'=>'Footwear', 'price'=>'5.99', 'quantity'=>'2')
);
?>

첫 번째 단계는 전자상거래 데이터를 analytics.js에 필요한 JavaScript 문자열로 변환하는 몇 가지 로직을 작성하는 것입니다.

<?php
// Function to return the JavaScript representation of a TransactionData object.
function getTransactionJs(&$trans) {
  return <<<HTML
ga('ecommerce:addTransaction', {
  'id': '{$trans['id']}',
  'affiliation': '{$trans['affiliation']}',
  'revenue': '{$trans['revenue']}',
  'shipping': '{$trans['shipping']}',
  'tax': '{$trans['tax']}'
});
HTML;
}

// Function to return the JavaScript representation of an ItemData object.
function getItemJs(&$transId, &$item) {
  return <<<HTML
ga('ecommerce:addItem', {
  'id': '$transId',
  'name': '{$item['name']}',
  'sku': '{$item['sku']}',
  'category': '{$item['category']}',
  'price': '{$item['price']}',
  'quantity': '{$item['quantity']}'
});
HTML;
}
?>

그런 다음 <script> 태그에서 추가 PHP 로직을 추가하여 거래 및 항목 데이터를 동적으로 출력합니다.

<!-- Begin HTML -->
<script>
ga('require', 'ecommerce');

<?php
echo getTransactionJs($trans);

foreach ($items as &$item) {
  echo getItemJs($trans['id'], $item);
}
?>

ga('ecommerce:send');
</script>

PHP 스크립트 실행이 완료되면 analytics.js에 필요한 거래 및 항목 데이터가 페이지에 출력됩니다. 페이지의 JavaScript가 브라우저에서 렌더링되면 모든 전자상거래 데이터가 Google 애널리틱스로 전송됩니다.

통화 유형

기본 통화 유형은 관리 인터페이스를 통해 구성할 수 있습니다. analytics.js를 사용하여 통화 값을 전송할 때 해당 값은 통화의 총 가치를 나타냅니다.

소수점은 통화의 전체 부분과 소수 부분 사이의 구분 기호로 사용될 수 있습니다. 정확도는 소수점 아래 6자리까지입니다. 다음은 통화 필드에 유효한 설명입니다.

1000.000001

값이 Google 애널리틱스로 전송되면 첫 번째 자리인 - 문자 또는 .(소수점) 문자에 앞의 모든 텍스트가 삭제됩니다. 따라서

$-55.00

다음과 같이 변환됩니다.

-55.00