エスキュービズム ラボ Blog

simple mouse tracking(以下smt）とは、マウスの軌跡を記録し、再現するツールです。

(公式サイト )

javascriptを埋め込むだけで、記録が出来るので非常に簡単です。

記録した内容は、元のページに重ねて再現されユーザの動きが手に取るようにわかります。

ユーザの動きを分析することで、ユーザビリティの向上にも繋がるかもしれません。

smtにはver1とver2があり、ver1はデータの受け渡しをxmlで行い、ver2はMySQLを使用して行います。

今回は、ver2を使用してみたので、簡単にインストール方法と使用方法を解説したいと思います。

smt(ver2)の仕組みは、マウスの軌跡をjavascriptで送信し、サーバ側のphpプログラムで解析し、データベースに記録します。

また、サーバ側のプログラムでurlからhtmlを取得し、cacheとして保存します。

1.インストール方法

①公式サイトからダウンロードしたファイルをサーバに置きます。

②smt用のデータベースを作成します。

③配置したディレクトリの直下にあるconfig.phpを編集します。
編集箇所

配置したパス(ABS_PATH)

作成したデータベース名(DB_NAME)

データベースのユーザー(DB_USER)

データベースのパスワード(DB_PASSWORD)

④http://自分のドメイン/配置したディレクトリ/admin/sys/install.phpにアクセスします。

MySQLとphpのチェックを行ます。

問題がなければ、メールアドレスを入力し、installが行われます。

テーブルが作成されると、管理者のパスワードが表示されるので、記録しておきます。

2.使用方法

トラッキングしたいサイトに下記のスクリプトを埋め込みます。

<script type=”text/javascript” src=”/smt2/core/js/smt-aux.min.js”></script>
<script type=”text/javascript” src=”/smt2/core/js/smt-record.min.js”></script>

また、オプションとして下記の引数を渡すことができます。

// 1秒間あたりの描画速度
fps: 24,
// 記録時間(単位：秒)
recTime: 60,
//smtをインストールしているパス
smtPath: “/smt2″,
//ログを記録していることを最初に表示するか(true：表示する false：表示しない)
warn: false,
// 上記がtrueの場合の表示する文言
warnText: “Your mouse movements are going to be logged.\nDo you agree?”,
//取得する頻度 disabled: falseの場合、すべてのアクセスを記録します。
disabled: Math.round(Math.random())

実際の使用例は下記になります。

<script type=”text/javascript”>
var smtRecordingOptions = {
recTime: 500,
disabled: false,
warn:true,
warnText: “We are going to record your mouse movements for a remote usability study.”
};
</script>
<script type=”text/javascript” src=”/smt2/core/js/smt-aux.min.js”></script>
<script type=”text/javascript” src=”/smt2/core/js/smt-record.min.js”></script>

3.記録した内容の確認

①http://自分のドメイン/配置したディレクトリ/adminにアクセスします。

②ユーザとパスワードを聞かれますので、初期設定ではユーザは”root”、

パスワードはinstallしたときに表示されたパスワードです。

③タブにある”trackinig report”を選択すると記録されたレコードが表示されます。

④再生方法として、flashとjavascriptがあります。いずれかを選択すると再生されます。

再生されたときの表現は下記のようになります。

スタート地点を緑：矢印

止まっていた時間：オレンジの円の大きさ(javascriptのみ)

クリックした箇所：×印

終点：オレンジの矢印

クラスター分析の結果：青色の円

⑤analizeをクリックすると、アクセスしたos,ブラウザ、マウスが通ったタグのパーセンテージが表示されます。

以上で、インストール方法と使用方法になります。

自分のサイトでユーザがどのように閲覧しているのか気になる方はインストールしてみてはいかかがでしょうか？