Skip to content

Instantly share code, notes, and snippets.

@pchw
Last active December 16, 2015 07:58
Show Gist options
  • Save pchw/5402078 to your computer and use it in GitHub Desktop.
Save pchw/5402078 to your computer and use it in GitHub Desktop.

https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingEcommerce 意訳

eコマーストラッキング - ウェブサイトのトラッキング(ga.js)

Google アナリティクスでeコマースのアクティビティを見る前に,プロフィール設定ページからeコマーストラッキングを有効にする必要がある. その後,eコマーストラッキング関数のga.jsをショッピングカートページかeコマースサービス全体に実装する必要がある. eコマース関数群はGoogleアナリティクスにユーザトラッキング情報と一緒に送られる. この方法でGoogleアナリティクスは特定のソースからのコンバージョンや購入をリンクする. 多くのテンプレート志向のeコマースエンジンはこういう情報を隠しフィールドとして確認ページに埋め込める.

一般的な方法

基本的にGoogleアナリティクスを使ったeコマーストラッキングは3つのeコマーストランザクションをトラッキングする関数で行われる.

1.トランザクションオブジェクトを作る

_addTrans()を使ってトランザクションオブジェクトを初期化する. トランザクションオブジェクトは1つのトランザクションに関連する全ての情報を持つ. (トランザクションIDや送料,請求先住所など) このトランザクションオブジェクトに含まれる情報は商品にトランザクションIDによって結び付けられるため同じIDを付けるべき.

2. トランザクションに商品を追加する

_addItem()はユーザのショッピングカートに入ったそれぞれの商品の情報を追跡し,トランザクションとアイテムをtransactionIdフィールドによって結びつける. _addItem()はSKU・価格・商品カテゴリ・個数など特定の商品の詳細情報をトラッキングする.

3. Googleアナリティクスのサーバにトランザクションを送る

_trackTrans()は購入処理が走ったのを確認してトランザクションオブジェクトをファイナライズする.

この情報をeコマースエンジンから取得するには色んな方法がある. あるeコマースエンジンは購入情報を隠しフォームに入れて使えるようにしていたり, 他のeコマースエンジンではDBから取得できたり,クッキーで取得出来たりする. よく使われてるeコマースエンジンの中にははGoogleアナリティクスでトラッキングしやすいようになっているのもある.

ガイドライン

実装時に以下に挙げるのを頭に叩きこんでおけ.

SKUコードはトランザクションに追加する商品に必須で付ける必要がある

トランザクションに複数商品を追加する必要があって,全商品にSKUがない場合はGIFリクエストは最後にトランザクションに追加されたSKUが付いている商品に送られる. もし在庫に異なる商品に同じSKUが振られていて,購入者が両方の商品を買っちゃった場合は,一番後に追加されたやつのデータだけ見れる. こういうめんどくさいことになるから全商品にSKUを振れ.

_addTrans()_addItem()の引数は順番を間違えるな

全引数は必須じゃないけど,指定しない引数のところは空文字を入れておくとエラーを防げるよ. トランザクションID・SKU・価格・個数だけを指定した商品を追加する場合は,

_addItem("54321", "12345", "", "", "55.95", "1");

という感じで書く.

pricetotalの値は通貨フォーマットを意識するな

両方共コンマかピリオドが初めに出てきたやつを小数点として処理する. 1.996.00$1,996.00ではなくて$1.996として記録される. eコマースソフトっていうのはGoogleアナリティクスにデータを渡す前に色んな通貨の決済を取り扱わないといけないからね.

3rd-partyのショッピングカート機能を使ってる場合はcross-domainトラッキングを有効にしないといけない

詳しくはCross Domain Trackingを参照してね.

別に必要じゃないけど特定のページとトランザクションデータを結びつけるのを望んで_trackPageview()をレシートページで呼ぶのはいいアイデア

利用例

レシートページで3つの全関数を使うeコマーストラッキングの設定例. _trackPageview()Receipt for your clothing purchase from Acme Clothingのページとトランザクションを結びつける方法を示す.

非同期シンタックス(推奨)

<html>
<head>
<title>Receipt for your clothing purchase from Acme Clothing</title>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
  _gaq.push(['_addTrans',
    '1234',           // transaction ID - required
    'Acme Clothing',  // affiliation or store name
    '11.99',          // total - required
    '1.29',           // tax
    '5',              // shipping
    'San Jose',       // city
    'California',     // state or province
    'USA'             // country
  ]);

   // add item might be called for every item in the shopping cart
   // where your ecommerce engine loops through each item in the cart and
   // prints out _addItem for each
  _gaq.push(['_addItem',
    '1234',           // transaction ID - required
    'DD44',           // SKU/code - required
    'T-Shirt',        // product name
    'Green Medium',   // category or variation
    '11.99',          // unit price - required
    '1'               // quantity - required
  ]);
  _gaq.push(['_trackTrans']); //submits transaction to the Analytics servers

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body>

  Thank you for your order.  You will receive an email containing all your order details.

</body>
</html>

伝統的シンタックス

<html>
<head>
<title>Receipt for your clothing purchase from Acme Clothing</title>
</head>

<body>

  Thank you for your order.  You will receive an email containing all your order details.


<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol ) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
  var pageTracker = _gat._getTracker("UA-xxxxx-x");
  pageTracker._trackPageview();
  pageTracker._addTrans(
      "1234",            // transaction ID - required
      "Womens Apparel",  // affiliation or store name
      "11.99",           // total - required
      "1.29",            // tax
      "15.00",           // shipping
      "San Jose",        // city
      "California",      // state or province
      "USA"              // country
    );


   // add item might be called for every item in the shopping cart
   // where your ecommerce engine loops through each item in the cart and
   // prints out _addItem for each 
   pageTracker._addItem(
      "1234",           // transaction ID - necessary to associate item with transaction
      "DD44",           // SKU/code - required
      "T-Shirt",        // product name
      "Olive Medium",   // category or variation
      "11.99",          // unit price - required
      "1"               // quantity - required
   );

   pageTracker._trackTrans(); //submits transaction to the Analytics servers
} catch(err) {}
</script>
</body>
</html>

現地通貨

通常は,共通・国際通貨をGoogleアナリティクスのWEB UIで全てのトランザクションや商品を設定できる. 通常は,全ての商品やトランザクションは国際通貨を使われる. 複数の通貨を取り扱うウェブサイト用にga.jsのeコマーストラッキング機能はは特定の現地通貨を扱うように_tracktransを呼ぶ前に

_gaq.push(['_set', ‘currencyCode’, ‘EUR’]);

を呼ぶ出すことで設定できる.

現地通貨はISO 4217標準で策定されているもので指定する必要がある. Currency Codes Referenceにサポートしてる通貨がリストされている.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment