gaPlugin.js　経過時間計測：timeToCompleteの使い方

Posted on 2011年4月13日, 10:00 AM, by yosimox, under GoogleAnalytics.
このエントリーをはてなブックマークに追加

■Google Analyticsでタスク完了までの経過時間を計測できる

gaPlugin.jsを使うと、予め設定しておいたスタートページから終了ページまでの経過時間を測ることができます。先日のアップデートでクリック数も同時に取得できるようになりました。データはGoogle Analyticsのカスタムイベントを利用して、googleへと送信されます。
計測の仕組みを簡単に説明すると、スタートページに最初にアクセスした時間をcookie上に保存して、終了ページに到着した際、現在時と保存してある時間を引き算して、経過時間を算出しています。
途中スタートページと同じURLのページを踏んでも、特に計測には影響有りません。セッションの最初にスタートページを踏んだ時にcookieが発行されます。その後に初めて踏んだ終了ページで計測が完了し、データが送信されます。

■何が嬉しいのか？

大前提として、僕はパス系の分析はKPIにはなり得ないと考えています。だからといって、もちろん不要というわけではありません。ユーザーが制作側が描いたシナリオ通りに行動してくれているのかを計る上でパス分析は必要です。

導線評価の方法論としては、以下のエントリを参考にしてください。

http://web-analytics-or-die.org/2010/12/サイトの導線を評価する：基本編/

http://web-analytics-or-die.org/2010/12/サイトの導線を評価する：応用編1/

http://web-analytics-or-die.org/2010/12/サイトの導線を評価する：応用編2/

基本編では、セッションレベルの分析とページレベルの分析について述べています。
応用編では、ページレベルでの分析の応用編です。

タスク完了時間は、セッションレベルの分析での応用例として考えていただければ良いかなと思います。

例えば、リニューアルをして、インデックスページから商品詳細ページまでのナビゲーションを改善した場合、リニューアル前後でインデックスページから商品詳細ページ到達までにかかった時間、クリックした回数を評価することができます。
もし、リニューアル後、ナビゲーションが改善していたのであれば、経過時間もクリック数も減少しているはずです。そうでなれば、リニューアルは失敗だろうと考えられます。
このように、タスク完了までの時間を計測することはユーザビリティを評価する上で有効です。実際、ユーザーテストを行うときも、ストップウォッチを用いて、タスク完了時間を計測することもあります（あんまり良いとは思っていませんが）。

この機能の一番の使いどころは入力フォームだと思います。入力フォームの最初のページから、完了までにかかった時間、クリック数を計測することで入力フォームのユーザビリティを評価することができます。
逆に使うべきではない箇所も多くて、タスクが直線的ではない場合は、ほとんど意味がないデータになると思います。例えば、スタートページからサイトをたくさん回遊して、最終的にゴールページに辿り着かせるという設計方針の場合は、この機能は無意味です。

■設定方法

ここからは、機能の設定方法・有効化の方法を記載します。
まずは、gaPlugin.jsの最新版をダウンロードしてください。

https://github.com/yosimox/gaPlugin.js

＊設定ファイルの編集

設定はgaConf.jsというファイルで行います。
gaConf.jsをテキストエディタで開いて、下のように変更してください。

var gaConf = {}
gaConf.conf1 = {
     cnf : {
          //change here
          account : "UA-xxxxxxx-x",
          pageLevel : [1, 2]
     },

     //↓を追加してください。↑のカンマも忘れずつけてください。
     //timeToCompleteの設定
     timeToComplete : {
          //カスタム変数のアクション名を指定してください。
          action : "timeToComplete_TEST",
          //計測開始URLを配列で指定してください。
          startUrl : [/gaPluginV2/start1.html$/, /ga/start2.html$/],
          //計測終了URLを配列で指定してください。
          endUrl : [/gaPluginV2/end1.html$/, /ga/end2.html$/],
          //利用するcookie名を指定してください。
          cookieName : "_utmTimeToComp"
     }
}

タスク完了時間はtomeToComplete: { } の波カッコ内で設定しています。
まず、
action : “timeToComplete_TEST”,
はカスタムイベントのアクション名を指します。
わかりやすいアクション名を付けてください。
クリック数取得を有効化した場合は、クリック数のアクション名は_clcikを付けたものになります。
この場合だと、
timeToComplete_TEST_click
です。

また、カテゴリ名は全てtimeToCompleteで統一されます。
ラベル名が秒数、またはクリック数となります。

startUrlは計測を開始するスタートページのURLの設定です。
正規表現で一致したページがあると計測が開始されます。
上のサンプルの場合だと、
gaPluginV2/start1.html を含むURL
または、gaPluginV2/start2.html を含むURL
で計測開始します。
gaPluginV2/start1.html だけで良い場合は、
startUrl : [/gaPluginV2/start1.html$/]
としてください。

endUrlは終了ページのURL設定です。
設定方法はstartUrlと同様です。
上の例では
gaPluginV2/end1.html を含むURL
または、gaPluginV2/end2.html を含むURL
で計測が終了となります。

cookieNameは利用するcookieの名前です。この機能は30分間の有効期限を持ったcookieを利用して実現しています。cookie名の競合がないように指定してください。クリック取得を有効にした場合、_cを付けたcookieも作成されます。上の例では
_utmTimeToComp と
_utmTimeToComp_c
の２つのcookieが作成されます。

これで設定終了です。

＊機能の有効化

機能の有効化はgaPlugin_start.jsで行います。
window.onloadイベント内に
firstTracker.timeToComplete(gaConf1.timeToComplete, true);
を追加してください。

(function(){

/////////////////// TRACKING SETTING /////////////////////////////
     var gaConf1 = gaConf.conf1;
     var _gaTrackName = "_firstTracker";
     var firstTracker = new GaPlugin(gaConf1.cnf, _gaTrackName);

     firstTracker.dirGroup(1);
     firstTracker.dirGroup(2, 2);
     firstTracker.getParam(3);
     firstTracker.weekDay(4);
     firstTracker.dayTime(5);

     _gaq.push([_gaTrackName+'._trackPageview']);

     window.onload=function(){
          firstTracker.autoLink();
     //ここに追加
          firstTracker.timeToComplete(gaConf1.timeToComplete, true);
     };

})();

引数の
・gaConf1.timeToComplete
は設定ファイルの名前です。
・true
はクリック数取得可否の設定です。
trueにするとクリック数も取得されます。falseにすると経過時間のみ取得されます。
省略も可能で、
firstTracker.timeToComplete(gaConf1.timeToComplete)
とすると、経過時間のみでクリック数は取得されません。

これで設定完了です。

■２つ以上のタスクを計測したい！

2つ以上のタスクを計測したいという場合は、設定ファイル内でもう一つ設定を追加してください。
そして、その設定をgaPlugin_start.jsで読み込めばいくつでも追加できます。

gaConf.js

var gaConf = {}
gaConf.conf1 = {
     cnf : {
          //change here
          account : "UA-xxxxxxx-x",
          pageLevel : [1, 2]
     },

     //↓を追加してください。↑のカンマも忘れずつけてください。
     //timeToCompleteの設定
     timeToComplete : {
          //カスタム変数のアクション名を指定してください。
          action : "timeToComplete_TEST",
          //計測開始URLを配列で指定してください。
          startUrl : [/gaPluginV2/start1.html$/, /ga/start2.html$/],
          //計測終了URLを配列で指定してください。
          endUrl : [/gaPluginV2/end1.html$/, /ga/end2.html$/],
          //利用するcookie名を指定してください。
          cookieName : "_utmTimeToComp"
     },
     //↓2つ目の設定。↑のカンマも忘れずつけてください。
     //timeToComplete2の設定。
     timeToComplete2 : {
          //アクション名は1個目の設定と違うものに変更してください。
          action : "timeToComplete_TEST2",
          //計測開始URLを配列で指定してください。
          startUrl : [/gaPluginV2/start3.html$/],
          //計測終了URLを配列で指定してください。
          endUrl : [/gaPluginV2/end3.html$/],
          //利用するcookie名を指定してください。必ず1個目と被らないようにしてください。
          cookieName : "_utmTimeToComp2"
     }
}

gaPlugin_start.js

(function(){
/////////////////// TRACKING SETTING /////////////////////////////
     var gaConf1 = gaConf.conf1;
     var _gaTrackName = "_firstTracker";
     var firstTracker = new GaPlugin(gaConf1.cnf, _gaTrackName);

     firstTracker.dirGroup(1);
     firstTracker.dirGroup(2, 2);
     firstTracker.getParam(3);
     firstTracker.weekDay(4);
     firstTracker.dayTime(5);

     _gaq.push([_gaTrackName+'._trackPageview']);

     window.onload=function(){
          firstTracker.autoLink();
     //ここに追加
          firstTracker.timeToComplete(gaConf1.timeToComplete, true);
     //2つ目の計測
          firstTracker.timeToComplete(gaConf1.timeToComplete2, true);
     };

})();

これで2つの計測が可能になります。

そこまで難しくないと思いますので、ぜひお試しください。

Comment (RSS)  |  トラックバック

Leave a Reply

«
»