Google Analyticsにサーバーサイドのイベントを記録したい!
Analytics

Google Analyticsにサーバーサイドのイベントを記録したい!

このエントリーをはてなブックマークに追加

こんにちは、浅井です。

みなさまGoogle Analyticsはお使いでしょうか。弊社でも使っています。導入が簡単で、(ちょっと操作がもたつきますが)良い解析画面とAPIを持っているので非常に便利ですね。

WebアプリケーションにおけるGoogle Analyticsの仕組みは単純で、ブラウザでJavaScriptが動いて、Googleのサーバーに(__utm.gif経由で)リクエストが送られます。

このブラウザで動作する、というのがポイントで、ブラウザサイドでのアクションやイベントを記録するのはとっても簡単になっています。例えば以下のように。

// 画像の送信を行うイベントを記録
_gaq.push(['_trackEvent', 'image_search', 'commit', 'rank1']);
var onError = function(jqXHR, textStatus, errorThrown) {
  // 成功をイベントとして記録
  _gaq.push(['_trackEvent', 'image_search', 'upload_failed', 'rank1']);
};
var onSuccess = function(data, textStatus, jqXHR) {
  // 失敗をイベントとして記録
  _gaq.push(['_trackEvent', 'image_search', 'upload_success', 'rank1']);
  //... 
};

なんてことができます。Google Analyticsのトラッキングコードの詳細はドキュメントを参照してください。いろんなことが任意のタイミングで記録できます。

サーバーサイドのイベントを記録する

これに対して、サーバーサイドで発生するイベントを記録するにはひと手間必要になります。Google Analyticsのサーバーがブラウザに対して発行しているCookieによってユーザーが識別される仕組みのため、サーバーから直接Google Analyticsに情報を送ることはできません。

例えばトップページからTwitterログインを経由してマイページに遷移するケースを考えてみましょう。画面遷移ととしては、以下のようになります。

  1. トップページのログインボタンをクリック
  2. oauth認証が行われ、許可された場合はコールバックURLにリダイレクトされる
  3. 登録済みユーザーの場合はログイン処理が行われ、マイページにリダイレクトされる
  4. 未登録ユーザーの場合は新規登録処理が行われ、マイページにリダイレクトされる

ここで、3と4の処理はサーバーサイドで行われ、ブラウザは同じURLにアクセスすることになります。この際に、Google Analyticsに「ログイン」と「新規登録」を記録するためにはどうしたら良いでしょう。

単純にマイページ内でページビューやイベントを記録してしまうと、ただのマイページへのアクセスとしてしか記録できません。サーバーサイドのプログラムも見る人であればわかるかと思いますが、マイページまでセッションかCookieかパラメータで状態を引き継ぐ必要があります。

こんな感じのキュー(ただのリストですが)をセッションに持ってしまい、ビューで中身を取得してJavaScriptを埋め込み、セッション内のキューをフラッシュする。とか。

https://gist.github.com/5411250

(Javaでごめんなさい・・・)

3, 4のコールバック処理では、このキューを利用して以下のようにイベントを記録します。

gaq.addEvent("user", "login", "twitter", 1);

ビュー側では、このキューを取り出して中身があればJavaScriptに埋め込む処理を共通で用意しておきます。

https://gist.github.com/5411285

(JSPでごめんなさい・・・)

と、こんな感じでGoogle Analyticsに記録できるようになります。

analytics

すごく・・・少ないですね。


名無しのエンジニア
Unityでスクリプトを記述するエディタを変更する方法(Mac編)
UnityWebPlayerとCSSの表示問題と解決策まとめ