ECCUBE3正式版のインストール(さくらVPS)

さくらVPSサーバへ晴れて正式に3となったECCUBEをサーバーへインストールしていきす。

サーバーの構成とバージョンは下記
CentOS:6.6
Apache:2.2.15
PHP:5.6.10
PostgreSQL:9.4.1

phpPgAdminはインストールされているものとします。

EC-CUBE3のシステム要件は下記
Apache 2.2.x 以上 2.4.x 以上
PHP5.3.9以降
PostgreSQL 8.4.x以降 9.x以降
MySQL5.1.x以降 MySQL5.5.x以降

となっているので、sshでサーバーにログインし、各バージョンを確認してください。
Apacheの確認

httpd -v

phpのバージョンの確認

php -v

PostgreSQLのバージョンの確認

psql --version

MySQLのバージョンの確認
(Distribの方を見て下さい)

mysql --version

バージョンが要件を満たしていない場合は各自アップデートしてください。

さて、インストールにあたり、ECCUBE本体をダウンロードしてきます。
ECCUBEダウンロードページ
今回は3.0.1のバージョンでやっています。

ダウンロードしたものをzipのまま、FTPで/var/www/html/にアップロード。
SSHでアップロードした階層に移動

cd /var/www/html

解凍

unzip eccube-3.0.1.zip

zipファイルは消します。

rm eccube-3.0.1.zip

フォルダの名前を変更

mv eccube-3.0.1 eccube

インストールしていきます。
http://サイトURL/eccube/html へアクセス

インストールが始まります。
「次へ進むをクリック」

アクセス権のチェック。異常がある場合は、FTP等でパーミッションをチェックしてみて下さい。

お店の設定をします。

データベースの設定をします。

問題なければデータベースの初期化が始まります。

完了です！

ドキュメントルートを変更しましょう。

vi /etc/httpd/conf/httpd.conf

下記行を探して

DocumentRoot "/var/www/html"

下記に変更します。

DocumentRoot "/var/www/html/eccube/html"

下記URLでECCUBEのトップ画面が表示されるようになります。
http://サイトURL/

管理画面はインストール時に決めたURLでアクセス可能です。
http://サイトURL/★管理画面のURL★

インストールがうまく行かなければhttp://サイトURL/install.phpにアクセスすれば再インストール可能です。
インストール出来た後はhtml/install.phpのファイルを削除して下さい。

Read More

【ECCUBE】バナーやプラグインのクリック数を調べる

バナーを貼ったけど、どれ位クリックされてるの？？
新着商品やニュース、最近売れた商品やランキング等、販促系プラグインを色々入れてみたけど、どのプラグインが効果あるの？？

アナリティクスで解析しても、どのキーワードで検索されたか、どこから来たか、どの商品が人気かはわかるけど、自分たちの作ったバナーや導入したプラグインの効果がわからないんだよなぁ、という時は「Googleアナリティクスのイベントトラッキング」を使えば、どのバナーやリンクが何回クリックされたかわかっちゃいます。

時間かけて作ったバナーが実はクリックされていないとう事もわかっちゃいます。。。

効果のあるバナーやプラグインがわかれば、次の一手が見えてくるかもしれません。

※Googleアナリティクスがユニバーサルアナリティクスの場合の説明になります。

リンクや画像がクリックされる度に、googleにクリックされたよという事を伝える事になります。
下記の様な設定になります。

計測したい全てのバナー、プラグインのリンクにonClick="ga('send','event','カテゴリ','アクション','ラベル'); を追記します。


onClick="ga();"の部分がリンクがクリックされた時に処理されます。

onClick="ga();"の中身を左から順番に説明
1.'send' [必須] ここは固定です。変更しないで下さい。
2.'event' [必須] ここは固定です。変更しないで下さい。
3.'カテゴリ' [必須] バナーの名前やプラグイン毎に好きな様に設定してください。
4.'アクション'[必須] 訪問者の行動。今回の場合はクリック。何かダウンロードしてもらう場合はダウンロード等。
5.'ラベル' [省略可能] 細かく名称を設定したい場合に。

バナーの場合は、'category'と画像名を一緒にするとわかりやすいと思います。

アナリティクスの行動＞イベントで表示されます。

ECCUBEプラグインの場合の導入ケース

次はプラグイン導入の場合の説明をしていきます。
EC-CUBEのプラグインは、tplファイルでループして商品を取得している場合がほとんどです。
なので、tplで商品のリンクを生成している部分に上記onClick="ga('send','event','カテゴリ','アクション','ラベル'); を追記していきましょう。

試しに、「最近チェックした商品」に設定していきましょう。
このプラグインのtemplates/plg_checkeditems.tplを修正していきます。

aタグの部分に追記していきます
46行目を

下記に


49行目を

下記に


カテゴリにはプラグイン名、アクションにはクリック、ラベルにはプラグイン名+PCと設定しています。
スマホの場合はラベルにプラグイン名+SP等と設定するとよいでしょう。
パソコンとスマホではよくクリックされるプラグインに差異が出てきたりします。

上記で最近チェックした商品がクリックされた回数がアナリティクスに蓄積されていきます。

他のプラグインも設定する事で、効果のあるプラグインはどのページでも目につきやすい所に移動したり、あまりクリックされずパフォーマンスの悪いプラグインは外したり等、改善に役立つと思います。

是非活用してみてください。

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