WINGS ブログ
ITやWEBに関するブログを書いています。

低コストでネット繁盛店をつくる〜EC-CUBE編その4〜

投稿者:munenori-iwai | 2012年/08月/29日

こんにちは、いわいです。

もう夏休みも終わりだというのにまだまだ暑い日々が続きますね。皆さんもお体など壊されないようにしてくださいね。

少し前の話になっちゃいますが、楽天の電子ブックリーダー“コボ・タッチ”の初期設定の不備について、少しネットで話題になりました。企業のサービスにトラブルが発生した際、マスコミや顧客に対する経営トップの立ちまわり方が非常に重要で、そのハンドリングを誤った結果、一夜にして企業に対する信頼が失墜してしまう例は今までに何度となく繰り返してきました。

今回批判の対象となった楽天の対応にはいくつかあるようですが、「騒いでいるのは少数派。大したことない。」との三木谷氏の発言はもとより、批判的な口コミを自らの手で削除するというようなことは、決してやってはならなかったのでないでしょうか。

FACE To FACE のコミュニケーションが容易でないネットショップでは、実際に使ってみた生の声の影響力が大きく、口コミ効果を期待して、「商品レビューを書いてくれたら送料無料」というようなサービスを行なうこともよくあります。もちろん、いい事ばかりを書いてくれる保証はなく、厳しい内容の口コミもあります。だからと言って、加盟店は都合の悪い口コミを削除することはできません。

今回、口コミサイトを運営する立場の楽天が批判的な口コミを削除したというのは、公平さの観点からも暴挙としかいいようがないように思います。まるで高速鉄道脱線事故で事故車両を埋めて隠ぺいしようとした中国当局を彷彿するような、後味の悪さが残る一件でした。

EC-CUBEでのエラーページのハンドリング

話変わって、EC-CUBEでのエラーページはちゃんと処理されていますか?少し踏み込んでお話しますと、EC-CUBE上に存在しないページ(ファイル)がリクエストされた場合は、どんなエラーページが表示されますか?もちろんEC-CUBEにはれっきとしたエラーページが用意されていますが、これはEC-CUBE上で処理が実行されている最中にエラーが発生した際にのみ機能します。逆に言うと、EC-CUBE上で処理が実行される前段階で発生したエラーは、Webサーバーのハンドリングでエラーページが表示されることになります。

[存在するページの例(商品が存在しない)]

http://wings-shop.com/products/
detail.php?product_id=XXX
EC-CUBEのエラーページ

ちゃんとEC-CUBEのエラーページが表示される。


[存在しないページの例]

http://wings-shop.com/products/aaaa.php
Webサーバーのエラーページ

EC-CUBEのエラーページは表示されない。

エラーページ対策の重要性

『Google検索エンジン最適化 スターターガイド』にはこのようにあります。

役に立つ404エラーページを用意しよう

時にユーザーはリンク切れしたリンクをたどったり、間違った URL を入力したりして、サイトに存在しないページを訪れてしまうことがあります。このようなとき、ユーザーをちゃんとしたページに導くための便利な 404 ページを作っておくと、ユーザーエクスペリエンスを飛躍的に高めることができます。

※詳しくは、『「Google検索エンジン最適化 スターターガイド」を読んでみよう!その3』をご覧ください。

つまり何らかの理由でエラーステータスが返された際、ユーザーの離脱に繋がってしまわないよう最善の対策を施すことの重要性を、Googleはこの中で述べているのです。またリンクが設定されたページを削除したことに気づかずデッドリンクが発生してしまっている場合など、これをいち早く察知し、対策を施すことも重要であると、私たちは考えます。ということで、今回は、以下の2機能をEC-CUBEに盛り込むようカスタマイズしてみたいと思います。

  1. 存在しないページがリクエストされた際もEC-CUBEのエラーページを表示する。
  2. ユーザーにエラーコードが返されたページを追跡する。

今回のレシピです。

修正を加えるファイルは以下のとおりです。

+data
   +class_extends
       +page_extends
           -LC_Page_Index_Ex.php
   +Smarty
       +templates
           +default
               -error.tpl
+public_html
   -.htaccess

Webサーバーにエラーページを設定

EC-CUBE(PHP)に処理が渡される以前に発生したエラーは、Webサーバーが処理すると先ほど言いましたが、まずはこのエラーもEC-CUBEに渡して処理するようにWebサーバー側の設定を変更することにします。設定を変更するには、.htcaccess というファイルにエラーハンドリングの定義を追加します。以下の定義は、エラーステータス404(Not Found)をindex.phpページにerror=404パラメータを付けてリダイレクトという内容です。”index.php”の前の”/”(スラッシュ)を忘れないように注意してください。

ErrorDocument 404 /index.php?error=404
エラーステータス一覧

XServerでは、エラーステータスごとにページを指定できますが、ファイルの設置場所は変更できない模様。

エラーステータスはこの他にもいくつか定義されており、4XX系のクライアントエラー、5XX系のサーバーエラーに大別されます。※Wikipedia「HTTPステータスコード」参照

あるいは契約中のレンタルサーバーによって、.htaccess を変更できない場合もあるかもしれませんが、エラーコードごとのエラーページのURLをパラメータ付きでEC-CUBEのURLにしてやれば、うまく動作すると思います。

今回の例では404エラーのみを扱っていますが、以下のようにこの一覧表にならって、発生頻度の高いステータスエラーすべてを網羅した処理にすることもできると思います。

ErrorDocument 400 /index.php?error=400 ←Bad Request(リクエスト不正)
ErrorDocument 401 /index.php?error=401 ←Unauthorized(認証が必要)
ErrorDocument 403 /index.php?error=403 ←Forbidden(アクセス禁止)
ErrorDocument 404 /index.php?error=404 ←Not Found(未検出)
ErrorDocument 500 /index.php?error=500 ←Internal Server Error(サーバ内部エラー)
ErrorDocument 510 /index.php?error=510 ←Not Extended(拡張できない)

エラーページを呼び出す処理を実装

次は、上記でindex.pnpにリダイレクトした処理をエラーページに転送してやる処理を記述します。エラーの種類は、errorパラメータで付加するように定義してあるので、パラメータ値を判断して適切にエラーメッセージを表示するように、プログラムに手を加えてやります。

[php title=”LC_Page_Index_Ex.php”]
function init() {
/*>> ここから >>*/
if ($_GET[‘error’] == ‘404’) {
SC_Utils_Ex::sfDispSiteError(PRODUCT_NOT_FOUND);
}
/*<< ここまで <<*/
parent::init();
}
[/php]

これで、このサイト上で何らかのエラーステータスが返された時は、すべて同じエラーページが表示されるようになりました。

もし404以外のステータスコードをハンドリングする場合は、errorパラメータの条件分岐を増やして、SC_Utils_Ex::sfDispSiteError(定数);を記述すればよいでしょう。この際に使用する定数は、SC_Initial.phpのdefineConstants()に定義されているものを使用すれば(該当がなければ自分で追加する)、LC_Page_Error.phpのaction()で適切にメッセージとエラーステータスが出力されます。

+data
   +class
       -SC_Initial.php
       +pages
           +error
               -LC_Page_Error.php

エラーページをAnalyticsに送信する処理を実装

エラーページがユーザーに適切に表示されたとしても、サイトのメンテナンスが行き届いておらず、2回も3回もエラーページが表示されるようでは、上記までで取り組んできた努力も報われません。そこで次は、エラーページが表示された際、「どのページを開こうとしてエラーステータスが返されたか」を追跡するしくみを実装することにします。これには、Google Analytics のサービスを応用することにします。

プラグインに対応した2.12以降のバージョンで、「Google Analytics 非同期Eコマースタグ対応プラグイン」を使用している場合の想定になりますが、この場合EC-CUBEはエラーページにリダイレクトされた時、Google Analytics トラッキング用のJavaScriptを出力しないので、エラーページにリダイレクトされた時にだけ出力されるエラーページトラッキング用のJavaScriptをエラーページのテンプレートに埋め込んでやります。

※もし環境が異なる場合、エラーページのHTMLソースを開いて、Google Analytics トラッキング用のJavaScriptが出力されているかを確認し、エラーページでは出力されないように修正を行なってください。トラッキング用のJavaScriptが2重に出力されると期待どおりの結果にならなくなりますので注意ください。

[js title=”error.tpl” htmlscript=”true”]
<!–{*>> ここから >>*}–>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-33257791-1’]);
_gaq.push([‘_trackPageview’, ‘/error.html?type=<!–{$type}–>&page=’ + document.location.pathname + document.location.search + ‘&from=’ + document.referrer]);

(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>
<!–{*<< ここまで <<*}–>
<div id="undercolumn">
<div id="undercolumn_error">
<div class="message_area">
<!–★エラーメッセージ–>
<p class="error"><!–{$tpl_error}–></p>
</div>

<div class="btn_area">
<ul>
<li>
<!–{if $return_top}–>
<a href="<!–{$smarty.const.TOP_URLPATH}–>" onmouseover="chgImg(‘<!–{$TPL_URLPATH}–>img/button/btn_toppage_on.jpg’,’b_toppage’);" onmouseout="chgImg(‘<!–{$TPL_URLPATH}–>img/button/btn_toppage.jpg’,’b_toppage’);"><img src="<!–{$TPL_URLPATH}–>img/button/btn_toppage.jpg" alt="トップページへ" border="0" name="b_toppage" /></a>
<!–{else}–>
<a href="javascript:history.back()" onmouseOver="chgImg(‘<!–{$TPL_URLPATH}–>img/button/btn_back_on.jpg’,’b_back’);" onmouseOut="chgImg(‘<!–{$TPL_URLPATH}–>img/button/btn_back.jpg’,’b_back’);"><img src="<!–{$TPL_URLPATH}–>img/button/btn_back.jpg" alt="戻る" name="b_back" id="b_back" /></a>
<!–{/if}–>
</li>
</ul>
</div>
</div>
</div>
[/js]

404 Pages Tracking のページ

アカウントIDを入力すれば、JavaScriptを生成してくれる。非同期のコードに対応したサイトは意外と少ない。

エラーステータスの種類とエラー発生時の参照元ページをAnalyticsにプッシュするこの方法の情報提供元は、このサイト「Google Analytics Setup and Configuration Tool」を参考にさせてもらいました。今回も情報提供してくださる方に感謝しつつ、その知恵を拝借させてもらうことにします。

エラーの発生をアラートメールで知らせよう

Analytics設定画面

アナリティクス設定からプロファイルのカスタムアラートを設定。

毎日マメにAnalyticsの画面を眺めていれば、エラーページの呼び出しを発見して、即座に対応できるのでしょうが、これもなかなか骨の折れる作業ですから、最後にこういったものはコンピュータに任せて、エラー発生時にちゃんとメール送信してくれるようにしておきたいと思います。

EC-CUBEにも受注メールなどを送信する機能は備わっていますが、注文管理の担当者とサイト管理の担当者が同じでないというような業務要件を想定して、EC-CUBEとは切り分けて、Google Analytics側でシステム管理者にメール送信するようにしたいと思います。

Analytics設定画面

アラート条件を設定して、メールアドレスを指定します。

きっとこれでちゃんと動いてくれると思います。

今日はここまで。ばいばい。