e コマース測定

このガイドでは、analytics.js を使用して e コマース関連のデータを収集する方法について解説します。

概要

e コマースの測定では、トランザクション数とウェブサイトの収益を測定できます。一般的な e コマースサイトでは、ユーザーがブラウザ上で [購入] ボタンをクリックすると、そのユーザーの購入情報がウェブサーバーに送信されてトランザクションが発生します。処理が成功するとユーザーは手続き完了ページまたは領収ページにリダイレクトされ、購入内容の詳細および領収書が表示されます。analytics.js ライブラリを使用すると、e コマース関連のデータが手続き完了ページから Google アナリティクスに送信されます。

analytics.js で送信できる e コマース関連のデータには、トランザクションとアイテムの 2 種類があります。

トランザクション データ

トランザクションにはサイトで発生したトランザクション全体の情報が含まれ、 次の値で構成されます。

キー 値の型 必須 説明
id テキスト 必須 トランザクション ID（例: 1234）
affiliation テキスト 省略可 このトランザクションの発生源となった店舗またはアフィリエイト（例: Acme Clothing）。
revenue 通貨 省略可 トランザクションで発生した合計収益額か合計販売額（例: 11.99）。 この値には送料や税金など、合計収益の計算に含める調整額を設定できます。
shipping 通貨 省略可 トランザクションに伴う送料の総計を指定します（例: 5）。
tax 通貨 省略可 トランザクションに伴う税金の総計を指定（例: 1.29）。

アイテムデータ

アイテムは、ショッピング カートに入れられた個々の商品を表し、 次の値で構成されます。

キー 値の型 必須 説明
id テキスト 必須 トランザクション ID。この ID によってアイテムと関連するトランザクションが リンクされます（例: 1234）。
name テキスト 必須 アイテム名（例: Fluffy Pink Bunnies）。
sku テキスト 省略可 SKU または アイテムコードを指定します（例: SKU47）。
category テキスト 省略可 アイテムが属するカテゴリ（例: Party Toys）。
price 通貨 省略可 それぞれのアイテムの個々のユニット価格（例: 11.99）。
quantity 整数 省略可 トランザクションで購入されたユニット数。 1.5 などの整数以外の値がこのフィールドに渡された場合は、小数点以下を四捨五入して最も近い整数値が割り当てられます。

実装

通常は決済手続きの完了後に e コマース測定を設定します。手続き完了ページに設定するのが一般的です。 設定を終え、Google アナリティクスにデータを送信する準備が整ったら、以下の手順を済ませる必要があります。

e コマース プラグインの読み込み

analytics.js ライブラリのサイズを減らすため、デフォルトでは e コマース測定はライブラリ内に含まれていませんが、プラグインとして利用することになるので、使用前に読み込む必要があります。

e コマース プラグインを読み込むには、次のコマンドを使用します。

ga('require', 'ecommerce');

このコマンドは必ずトラッカー オブジェクトの作成後、かつ e コマース用の機能を使用する前に実行してください。

プラグインを読み込むと、e コマース測定専用の新しいコマンドがデフォルトのトラッカーにいくつか追加されます。

トランザクションの追加

プラグインを読み込むと空白のショッピング カート オブジェクトが作成され、トランザクションとアイテムのデータを追加できるようになります。設定完了後に、すべてのデータをまとめて送信します。

トランザクションは、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.
});

データの送信

ショッピング カート内のすべての e コマースデータを設定したら、最後に ecommerce:send コマンドでデータを Google アナリティクスに送信します。

ga('ecommerce:send');

このコマンドによってショッピング カート内の個々のトランザクションとアイテムが解析され、それぞれのデータが Google アナリティクスに送信されます。データの送信後、ショッピング カートは空になり、新しいトランザクションのデータを送信できるようになります。以前の ecommerce:send コマンドが実行された場合は、新しいトランザクションとアイテムのデータのみが送信されます。

データの消去

ショッピング カート内のすべてのトランザクションとアイテムを手動で消去する必要がある場合は、以下のコマンドを使用します。

ga('ecommerce:clear');

ローカル通貨の指定

デフォルトでは、Google アナリティクスの管理画面から一般的なグローバル通貨を設定でき、設定したグローバル通貨はすべてのアイテムとトランザクションで使用されます。複数の通貨でトランザクションが行われるウェブサイトの場合は、e コマース プラグインを使用すればトランザクションに加え個々の商品に対してもローカル通貨を指定することができます。

ローカル通貨は 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.
  });

複数のトラッカーの利用

複数の（名前付きの）トラッカーをページ上に設定した場合にも、e コマース プラグインを使用できます。このプラグインは、形式が trackerName.pluginName:method である点を除き、デフォルトのトラッカーと機能はまったく同じです。たとえば、myTracker という名前のトラッカーを作成した場合は以下のようになります。

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

その後、以下の構文でこのトラッカー用の e コマース プラグインを読み込みます。

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');

例

ほとんどの e コマースサイトではサーバー上でトランザクションが処理されますが、analytics.js ライブラリでは、ブラウザから Google アナリティクスにデータが送信されます。そのため、e コマースデータを適切に Google アナリティクスに送信するには、サーバーとクライアント間での連携が必要になります。

多くの e コマースサイトでは、サーバー側のテンプレート作成エンジンを使用して手続き完了ページを表示しています。この場合は e コマース測定コードをサーバー側のテンプレートに追加し、サーバー側のロジックによって動的に e コマースデータの値が最終的なページに書き込まれます。たとえば PHP の場合は以下のようになります。

PHP では、e コマースデータに複数の表記があるのが一般的です。この例では、データを連想配列に保管しています。

<?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')
);
?>

まず以下のように、いくつかのロジックを記述して e コマース データを 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 がブラウザで処理されると、すべての e コマースデータが Google アナリティクスに送信されます。

通貨の種類

デフォルトの通貨の種類は管理画面から設定できます。 analytics.js で通貨の値を送信すると、その値によって通貨の総計が表記されます。

通貨の整数部と小数部の区切りとして小数点が使用され、小数第 6 位までが有効となります。 通貨フィールドでは、次のような値が有効です。

1000.000001

値が Google アナリティクスに送信されると、最初の数字、「-」、または「.（小数点）」までのすべてのテキストが削除されます。たとえば、次のとおりです。

$-55.00

この場合、値は次のように変換されます。

-55.00