俺でもできた!EC-CUBEでGoogle Analyticsのeコマース機能設定

EC-CUBEで構築したサイトにGoogle Analyticsのeコマース機能を導入しようと思い、導入方法を色んなブログやサイトで調べましたが、中途半端にソースが間違っていたり、情報が欠けていたりするので、プログラマーでもシステムエンジニアでもない素人同然の自分にはなかなか分かりませんでした。


もっと親切に1~10まで教えてほしいと思いつつも試行錯誤してたらできたので、同じお悩みを持つ素人の方々へ参考までにメモしておきます。


※Google Analytics自体は既にタグ埋め込みなど終わっているものとします。

まだの方はこちらのブログに親切に書かれていますのでご参考にして下さい。

開発ノウハウwiki


Google Analyticsのeコマース機能を設定するために必要なカスタマイズはたった2ファイルに少々ソースコードを追記するだけなので何も難しいことはありません。

では早速説明します。

FTP接続でサーバーにアクセスして、下記のファイルに「ソース①」を追記します。

■/data/class/pages/shopping/LC_Page_Shopping_Complete.phpの132行目前後?( TradeSafe連携用のあたり)に以下のタグを追加

ソース①

$sql_item = "SELECT product_name,product_code,price,quantity FROM dtb_order_detail WHERE order_id = ?";
$arrItems = $objQuery->getall($sql_item, array($order_id));
$this->arrItems = $arrItems;
$sql_order = "SELECT total,tax,deliv_fee,order_pref FROM dtb_order WHERE order_id = ?";
$arrOrder = array_shift($objQuery->getall($sql_order, array($order_id)));
$this->orderId = $order_id;
$this->total = $arrOrder['total'];
$this->tax = $arrOrder['tax'];
$this->deliv_fee = $arrOrder['deliv_fee'];
$this->order_pref = $objQuery->get("mtb_pref", "pref_name", "pref_id = ? ", array($arrOrder['order_pref']));



続いて下記のファイルに「ソース②」を追記します。

■/data/Smarty/templates/default/shopping/complete.tplの最下部に下記を追記する

ソース②

 
<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-XXXXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();
pageTracker._addTrans(
"<!--{$orderId}-->", // Order ID
"", // Affiliation
"<!--{$total}-->", // Total
"<!--{$tax}-->", // Tax
"<!--{$deliv_fee}-->", // Shippin
"", // City
"<!--{$order_pref}-->", // State
"JP" // Country
);
<!--{section name=cnt loop=$arrItems}-->
pageTracker._addItem(
"<!--{$orderId}-->", // Order ID
"<!--{$arrItems[cnt].product_code}-->", // SKU
"<!--{$arrItems[cnt].product_name}-->", // Product Name
"", // Category
"<!--{$arrItems[cnt].price}-->", // Price
"<!--{$arrItems[cnt].quantity}-->" // Quantity
);
<!--{/section}-->
pageTracker._trackTrans();
} catch(err) {}
</script>



※08行目の UA-XXXXXXX-X には個別に発行されたGoogle AnalyticsのIDを入れてください。



これで設定は完了です。ファイルを上書きしてテスト購入をしてみてください。

購入完了ページのソースに正しく購入商品データが反映されていれば成功です!

Google Analytics/EC-CUBE Eコマース連携ソース


数十分後には下図のようにGoogle Analytics上に購買データが反映されます。

Google Analytics Eコマース機能表示

以上、簡易的ではありますが、EC-CUBEでGoogle Analyticsのeコマース機能を導入する方法をご紹介させていただきました。

私と同じお悩みを持った方々の一助となれば幸いです。



▼その他参考サイト

http://ramutei.jp/admin/archives/2008/08/ent_206.lasso

http://sasukechop.com/net-service/258/



 



▼合わせて読みたい関連記事


  1. コメントはまだありません。

  1. 2010年 9月 26日
    トラックバック先 :EC情報館
  2. 2010年 9月 27日
    トラックバック先 :酒井亮平