• 2012
  • Apr
  • 6

訪問ユーザの可視化

ウェブサイトに訪問したユーザーの導線を可視化できるサービスがあったので少しだけ設定してみました。

サービスを提供しているのはhttps://mixpanel.com/

アクセスするとTRY IT FOR FREE というボタンがあるのでクリック!

アカウント作成画面がでる
名前とemailとpasswordを入れ

次へすすむ。

オプションの登録項目が出てくるので
適当に入力。オプションなので、空のままでもOKみたいでした。
次にsignupボタンを押す。

次画面は可視化するためのスクリプトと
その手順の説明ページがでてきます。

これをページに貼り付けて
(実際ミニファイされていますので、読んで理解しようとしてはいけませんよ!)

<!-- start Mixpanel -->
<script type="text/javascript">
(function(d,c){var a,b,g,e;a=d.createElement
("script");
a.type="text/javascript";
a.async=!0;
a.src=("https:"===d.location.protocol?"https:":"http:")
+'//api.mixpanel.com/site_media/js/api/mixpanel.2.js';
b=d.getElementsByTagName("script")[0];
b.parentNode.insertBefore(a,b);
c._i=[];c.init=function(a,d,f){var b=c;
"undefined"!==typeof f?b=c[f]=[]:f="mixpanel";
g="disable track track_pageviewtrack_links
 track_forms register register_once unregister identify name_tag set_config".split(" ");
for(e=0;e<g.length;e++)(function(a){b[a]=function()
{b.push([a].concat(Array.prototype.slice.call(arguments,0)))}})(g[e]);
c._i.push([a,d,f])};window.mixpanel=c})(document,[]);
mixpanel.init("登録時生成されるtokenが入る");
</script>
<!-- end Mixpanel -->

収集したいページに以下の感じでjavascriptを埋め込む
CSSセレクタはjQuery利用時は次の指定方法で実行。

mixpanel.track("ここはページ名などを入れるのでしょう");

リンク

mixpanel.track_links('#header a', 'clicked header link');

そのほか

mixpanel.track_links('#header a', 'clicked header link', {
    'page_id': 123,
    'topic': 'Frogs'
});

UserIdなどの追尾

mixpanel.identify('90876ughbjknl097896t86fvbjlkj');

とても簡単そうなんだけど結局のところ無料利用範囲のこのカウント基準が不明なので躊躇
DataPoints
25,000
とあるので一旦ここまでで止めて、時間が空いたら自分のサイトで試してみたい。