【EC-CUBE2.13.5】eコマースのトラッキングをECCUBEに設置する

【EC-CUBE2.13.5】eコマースのトラッキングをECCUBEに設置する

GoogleアナリティクスeコマースのトラッキングをECCUBEに設置する、という作業があったのですが、あまりネットに情報がなかったので記入しておきます。

eコマースのトラッキングとは、どんな商品が購入されているか、その売り上げはいくらか、という情報を収集する機能です。
EC-CUBEの管理画面でもちろんその情報は見れるのですが、Googleアナリティクスだとグラフ化されてたりと色々便利です。

購入が確定された時でないと意味がないので、設置はショッピングの完了画面になります。

LC_Page_Shopping_Complete.phpを見てみると


public function process()
{
	parent::process();
	$this->action();
	$this->sendResponse();
	// プラグインなどで order_id を取得する場合があるため,  ここで unset する
	unset($_SESSION['order_id']);
}
	

$this->sendResponse();の後に受注情報を管理しているorder_idunsetされちゃってますね。
order_idを使いたいので、$this->action();を上書きしましょう。

マニュアルによると、必要な情報は「受注情報」「受注情報詳細」「購入商品と紐づくカテゴリ名」ですね。

LC_Page_Shopping_Complete_Ex.phpに下記を追加します。


public function action()
{
	$this->arrInfo = SC_Helper_DB_Ex::sfGetBasisData();

	// eコマースのトラッキング用データを取得する
	$order_id = $_SESSION['order_id'];

	$objPurchase = new SC_Helper_Purchase_Ex();
	$objProduct  = new SC_Product_Ex();
	$objDb       = new SC_Helper_DB_Ex();

	// 受注情報
	$this->orderData = $objPurchase->getOrder($order_id, $customer_id = null);
	// 受注情報詳細
	$this->orderDataDetail = $objPurchase->getOrderDetail($order_id, $has_order_status = false);

	// カテゴリIDからカテゴリ名を取得
	foreach ( $this->orderDataDetail as &$row ) {
		$cat = $objProduct->getCategoryIds( $row['product_id'], $include_hidden = false );
		if ( isset( $cat[0] ) && $cat[0] != '' ) {
			$catArr = $objDb->sfGetFirstCat( $cat[0] );
			if ( isset( $catArr['name'] ) && $catArr['name'] != '' ) {
				$row['cat'] = $catArr['name'];
			}
		} else {
			$row['cat'] = '';
		}
	}
}
	

shoppingcomplete.tplに下記を追加します。analytics.jsがすでに読み込まれている場合は、
<!– Google Analytics –>の部分は不要です。

skuの項目について、product_idで指定した場合、同一商品を規格を変えて複数購入した際、Googleアナリティクスの方で数量の取得が正しく取れていなかったので、product_class_idにすることをお勧めします。


<!-- Google Analytics -->
<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-XXXXX-Y', 'auto');
	ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

<!-- Google Analytics eコマース -->
<script>
	ga('require', 'ecommerce');

	ga('ecommerce:addTransaction', {
		'id': '<!--{$orderData.order_id}-->',
		'affiliation': '株式会社イッパイアッテナ',
		'revenue': '<!--{$orderData.total}-->',
		'shipping': '<!--{$orderData.deliv_fee}-->',
		'tax': '<!--{$orderData.tax}-->'
	});

	<!--{section name=cnt loop=$orderDataDetail}-->
	ga('ecommerce:addItem', {
		'id': '<!--{$orderData.order_id}-->',
		'name': '<!--{$orderDataDetail[cnt].product_name}-->',
		'sku': '<!--{$orderDataDetail[cnt].product_class_id}-->',
		'category': '<!--{$orderDataDetail[cnt].cat}-->',
		'price': '<!--{$orderDataDetail[cnt].price}-->',
		'quantity': '<!--{$orderDataDetail[cnt].quantity}-->'
	});
	<!--{/section}-->

	ga('ecommerce:send');
</script>
<!-- End Google Analytics eコマース -->
	

通貨についてはJSからではなく、Googleアナリティクスの管理 → ビューでの設定になります。