sessanの日記

主に開発技術関連でお勉強したことをまとめていくサイトです。

Slash-7を使って、KPIの分析を行う(2)

Slash-7を使って、KPIの分析を行う(1) - sessanの日記の続き。
今回は、ひとまずJavaScriptクライアントを使ってページロードのイベントをSlash-7に送る。

イベントを送るために自分で書くコードは、1行だけでよい。今回は、まだユーザーを特定するIDは送らない。ログイン前のランディングページなどに設定するようなコードをイメージしている。

手順

  1. Slash-7のクライアントライブラリのロード
  2. イベントログをSlash-7に送る

1. Slash-7のクライアントライブラリのロード

以下のスクリプトをイベントログを送る前までにロードしておく。
[YOUR TRACKING CODE]は、Slash-7を使って、KPIの分析を行う(1) - sessanの日記の時にもらったやつ。

<script type="text/javascript">
var slash7=slash7||[];(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===document.location.protocol?"https":"http")+"://d9nbmxmbhbtmj.cloudfront.net/v1/slash7.min.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);for(var a=function(a){return function(){slash7.push([a].concat(Array.prototype.slice.call(arguments,0)))}},b=["init","identify","track","register"],c=0;c<b.length;c++)slash7[b[c]]=a(b[c])})();
slash7.init("[YOUR TRACKING CODE]");
</script>

slash7.initのところは、Herokuとかの場合、以下のように本番環境やステージング環境それぞれに環境変数を登録しておいて、

$ heroku config:add SLASH7_CODE ="hogehoge"

次のようにENV['SLASH7_CODE']を使うのが良いかも。

//・・・省略・・・
slash7.init("<%= ENV['SLASH7_CODE'] %>");
//・・・省略・・・

この場合、ローカルの開発用マシンに環境変数を定義しておかないとローカルで動かないので注意。
.bash_profileとか適当な設定ファイルに、開発環境用のトラッキングコードを書いておく

export SLASH7_CODE="hogehoge"

2. イベントログをSlash-7に送る

とりあえず、パラメータなしでイベント名だけ送るなら、以下の1行を適当なところでJavaScriptで書く。引数はイベント名。

slash7.track("hogehoge_page_load");

これだけ。

この後、SLASH-7にログインすると、送ったイベントが届いているかどうかが確認できる。(イベントが反映されるのに10分程度はかかった。反映時間は常に変わるのではないかと思う。)

ログインして、Trendのグラフで「条件を選択」を選ぶと
f:id:sessan:20130221122244p:plain

おくったイベントが選べるので、ここで確認できる。(この図中では、イベント名は隠しました。)
f:id:sessan:20130221122629p:plain

ちなみに、その後条件に名前を付けて保存して、実行とかすると次のようなイベント発生のグラフをかける。

f:id:sessan:20130221122449p:plain