EC CUBEへAnalytics Eコマース トラッキングタグの設置

EC CUBEにGoogleアナリティクス Eコマーストラッキングの導入する方法

ユニーバーサルアナリティクスでの導入方法です

アナリティクスのコードが下記でない方は、アナリティクス設定からユニバーサルアナリティクスに移行してください

参考サイト：Googleアナリティクスをユニバーサルアナリティクスに移行してみた

アナリティクス設定からeコマースの設定を有効にする


アナリティクス側の設定は以上です

続いてはEC CUBEでの設定となります
EC CUBEの購入完了ページにトラッキングコードを導入します

Googleのトラッキングコードのサンプルは下記の用になっています


上記をベースにEC CUBEの変数、商品が複数ある場合に対応する様にします。

注文完了ページのcomplete.tplを開きます

/data/Smarty/templates/default/shopping/complete.tpl

下記コードをページ最下部に追記します。

ecommerce:addTransactionで基本的な注文情報、ecommerce:addItemで注文された商品情報を渡しています。
{section name=cnt loop=$arrItems}で注文された商品全部を取得しています
affiliationとcategoryは入れていません

以上でアナリティクスに情報が送信されます

スマホ、モバイルの購入情報の取得はそれぞれのcomplete.tplに上記コードを追記して下さい。

/data/Smarty/templates/sphone/shopping/complete.tpl

/data/Smarty/templates/mobile/shopping/complete.tpl

どの検索キーワードや参照サイトが商品の購入につながっているのか、PC・スマホの転換率はいくつか等、EC CUBE側ではわからない情報が取得できるようになります

Read More

さくらVPS(CentOS)でEC-CUBEのPCのCSSをgulpでminifyする

EC-CUBEのPCのCSSをgulpを使ってminifyする。

サーバー：さくらVPS
OS:CentOS

初期インストール状態でGoogleのPageSpeed Insights結果





Consider Fixing:のMinify CSSをgulpを使って修正したいと思います。

まずはサーバーのECCUBEをインストールしたディレクトリへ

$ cd /var/www/html/eccube/

gulpをインストールします

$ npm install gulp

gulpのminify用のプラグインをインストール

$ npm install gulp-minify-css

gulpfile.jsに下記内容を記載して/var/www/html/eccube/へアップロード

gulpを実行

$ gulp

html/user_data/packages/default/minifycss/にminifyされたcssが出力されます

EC CUBEのimport.cssをminifyされたcssを読み込むように変更

html/user_data/packages/default/css/
変更前

変更後


修正後読み込むと、1点上がっています。


Minify CSSの項目が残っていますが、こちらはjqueryのcolorbox.cssなので今回はこれでOKです。

Read More