最近のいけてるサイトでよく使われているmixpanelを使ってみました。
やりたいことはWebサイトのイベント監視をシンプルにわかりやすくってだけです。
mixpanelの登録と料金
こちらから登録できます。
https://mixpanel.com
mixpanelはPVベースではなくイベントベースなので、課金もPVではなくイベント単位になります。イベントのことをデータポイントと呼んでいます。
データポイント数は、25,000まで無料となっています。
サイトにバナーを貼って申請すると、加えて175,000データポイント、合計200,000まで無料になります。
ちなみに無料プランの次は、500,000データポイントで$150です。ちょっと高いです。。
一見高すぎて使えねーや、と感じるかもしれませんが、PVではなくイベントでの課金なのですね。
なので本当に見たいイベントだけに絞って設定することで、無料の範囲内で使うのがいいと思います。
全体のPVとかはGoogle Analyticsを併用して見れば良いですね。
初期化スクリプトを埋め込む
mixpanelでデータを計測するためには、まずHTML内に初期化スクリプトを埋め込む必要があります。
以下の自動生成コード＋init呼び出しの2つを連続して、ページロード時に走る場所に貼り付けます。
(function(c,a){var b,d,h,e;b=c.createElement("script");b.type="text/javascript";
b.async=!0;b.src=("https:"===c.location.protocol?"https:":"http:")+
'//api.mixpanel.com/site_media/js/api/mixpanel.2.js';d=c.getElementsByTagName("script")[0];
d.parentNode.insertBefore(b,d);a._i=[];a.init=function(b,c,f){function d(a,b){
var c=b.split(".");2==c.length&&(a=a[c[0]],b=c[1]);a[b]=function(){a.push([b].concat(
Array.prototype.slice.call(arguments,0)))}}var g=a;"undefined"!==typeof f?g=a[f]=[]:
f="mixpanel";g.people=g.people||[];h=['disable','track','track_pageview','track_links',
'track_forms','register','register_once','unregister','identify','name_tag',
'set_config','people.set','people.increment'];for(e=0;e<h.length;e++)d(g,h[e]);
a._i.push([b,c,f])};a.__SV=1.1;window.mixpanel=a})(document,window.mixpanel||[]);
mixpanel.init("token", {
track_links_timeout: 2000
});
initの"token"の箇所は自分のアカウントのトークンを設定します。
トークンはこちらで確認できます。
https://mixpanel.com/account/
track_links_timeoutというのは、イベント記録の取りこぼし防止用のミリ秒設定です。
デフォルトは300msなのですが、実験中フォーム送信が記録されたりされなかったりで悩まされました。
とりあえず2秒くらいに設定してみました。
イベントを記録
イベントの記録はmixpanel.trackメソッドを呼び出します。
mixpanel.track("event name", {
key: value
});
上の例のように任意のデータをイベントに追加できます。ここで設定したキーで集計データを絞り込みしたりできるので、かなり便利です。
フォーム送信を記録
記録したいイベントって単なるボタンクリックではなくフォーム送信であることが多いと思います。
フォーム送信のイベント記録はtrackでもできますが、専用のtrack_formsというメソッドが用意されています。
mixpanel.track_forms('#formId', 'event name', function(form) {
return {
key: $("[name='key']", form).val()
};
});
第1引数は対象フォームのCSSセレクタ表現です。第2引数はイベント名。第3引数は追加で記録する情報を返す関数になります。
この関数で自由にフォーム内のフィールドを引っ張ってきてデータを設定します。
まとめ
以上、コードベースでのざっくりmixpanel紹介でした。
mixpanelの良さはGUIのデータ集計画面にあるので、ぜひぜひ登録していじってみてください。
あとGoogle Analyticsにもイベント機能はあるのですが、いまいちわかりにくいです。
そこでPVベースの自動集計はGoogle Analytics、イベント監視はmixpanelというように役割を分けて、両方使うというのがいいんじゃないかと思っています。
多分皆さんそうしてるんじゃないかな。