2

私は、ウェブサイト上のすべての訪問者のカーソル移動を追跡するための多くの分析ツールがあることを知っています。これらのツールは基本的に、貼り付けが必要なjavascriptコードウェブサイト上で彼らはすべて非常に高価ですウェブサイト上のすべての訪問者のカーソル移動を追跡する

私は自分のウェブサイトのためにそれを開発しようとしています - 私のウェブサイトにインストールされたトラッキングコードと他のページ/ウェブサイトで見られるカーソルの動き。

私はGoogleドキュメントで多くの人がドキュメントを開くと見ました。異なるカーソルが特定の訪問者にそれぞれ対応する異なる色で見える。私はウェブサイトのために同様の機能を開発したい。

私はGoogleにしようとしましたが、私はどこから開発を開始できるのかを知ることができません。

私をご案内ください。

答えて

2

(体?)と設定することにより、キャプチャ相を指定してくださいuseCaptureのパラメータをに電話してtrueに変更してください。詳細についてはDOM event modelを確認してください。diagarammeはかなり自明です。

迅速かつ汚いexempleは次のようになります。

もちろん
var coords=[]; 
var callback = function(e) { 
    // save your mouse coordinates somewhere 
    coords.push({x:e.clientX,y:e.clientY}); 
} 
document.body.addEventListener('mousemove',callback,true); 

ご使用のサーバーにいくつかの点でこれらの座標をプッシュする(そしておそらくただのサンプルを保存する方法を把握する必要があります座標)。

これが役に立ちます。

+0

"キャプチャフェーズを指定してください"なぜですか? – goat

+0

ある時点で他のリスナーが伝播を妨げる場合でも、チェーン内の他のリスナーの前でマウスイベントを取得するだけです。 – sitifensys

0

私はそれを行う正しい方法ではなかったことを認識したので、この投稿への私の答えを削除しました。

+0

正常にユーザーがウェブサイトを操作するために必要なすべてのマウスイベントもキャプチャするので、これについては完全にはわかりません。 'opacity:0'は' display:none'ではありません – sitifensys

+0

オーバーレイは悪い考えです。それはいくつかの素晴らしいコーディングなしで、下の項目をクリックするのを防ぎます。 $(document).mousemove(...)はこのトリックを行うべきです。 –

1

お試しくださいhttp://www.clicktale.com/ブログや小規模サイトには無料のオプションがあります。

分析を解読することは難しいことです。

jqueryでこれを行う場合は、$(document).mousemove(...)を使用します。別のタグが伝播を妨げない限り、ページ全体をマップすることができます。

警告:

私がテストしていませんでした$(文書).mousemove(...)、それは$( "身体")であってもよいのMouseMove(...)または$( "HTML 「).mousemove(...)

あなたのWebページのルート要素に のMouseMoveイベントリスナーを取り付けるれるためにどうあるべきか
関連する問題