マウスカーソルの位置を表示するWeb画面を作成してみました

Web2.0 BI

先日の日記で紹介しましたマウスカーソルが移動した軌跡までトラッキング可能なウェブアクセス解析ツールの『Customer Experience Analytics』に影響されたので、私もマウスカーソルの位置を表示するWeb画面を作成してみました。(^o^)v

http://hnamaizawa.googlepages.com/OnMouseEventSample.html

やっていることは凄く簡単で、onmousemoveイベントが発生したらフォームの入力エリアにその時のマウスカーソルの座標を設定しているだけです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript Sample</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body onmousemove="document.form.text1.value = event.clientX;document.form.text2.value = event.clientY;">

<div>

<br>
マウスカーソルを移動するとその座標が表示されます。
<br><br>

<form name="form">
X座標：<input type="text" name="text1">　Y座標：<input type="text" name="text2">
</form>
</div>

</body>

</html>

『Customer Experience Analytics』は、こんな感じで取得したマウスカーソル位置と配置されているバナー広告や商品イメージの位置などから顧客動向を分析し、画面配置や表示する情報をどのように改善したら良いか支援してくれる製品のようですね。

それ以外にも動的にURLが変更されるページに関しても後から分析可能になるようにページデータそのものを収集させる機能も有るようです。Google Analyticsなら無料で利用可能ですが、商用製品なのでいろいろな機能が提供されるんですね。