web-dev-qa-db-ja.com

JavaScriptによるユーザーアクティビティの追跡またはロギング

Webページ上のユーザーのすべてのアクションを追跡し、そのログを作成することは可能ですか？ AJAX=を介してユーザーアクションのログをサーバーに転送して保存します。各要素の各イベントで、コンソールにログを書き込むコード/ロジックを記述できますが、コピー、貼り付け、クリック、ダブルクリック、選択などのイベントやアクションを含むクライアント側のWebページのすべてのアクションを要素参照で記録できるライブラリ/ショートカットがあります。

javascriptjqueryhtmldomlogging
14
Rameez

既製のソリューションを使用できます。

Googleアナリティクスとそのイベントトラッカーを使用すると、すばらしいことができます。

カスタムメイドのソリューションを探している場合は、PHPおよびJavaScriptを使用して次のソリューションを試すことができます。

サードパーティのソリューションを使用するとパフォーマンスが向上することに注意してください。データベースにマウスの動きの座標をリアルタイムで書き込むには、多くのリソースが必要です。

17
Wissam El-Kik

この種類のJavaScriptライブラリが存在するとは思わない。jqueryで簡単に作成でき、すべてのイベント（blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error）

そして、それらを web sockets を使用してサーバー側に送信します

5
InvisibleUn1corn

Google Analytic Event Tracking をご覧になりましたか？

JavaScript内にトラッキング関数を埋め込む必要がありますが、使用すると非常に便利です。

// Google API
_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

// Example
_trackEvent('checkout' 'remove-item' 'poodle skirt')

更新：2017新しいアナリティクスAPI

// Api
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

// Example remove product id#27
ga('send', 'event', 'ecart', 'remove-item', 'poodle skirt', 27);
   // OR
ga('send', {
      hitType: 'event',
      eventCategory: 'ecart',
      eventAction: 'remove-item',
      eventLabel: 'poodle skirt'
   });
4
Du D.

個人的に私は嫌いサードパーティのようなgoogle analyticsおよび類似の会社です。私は彼らと私のウェブ分析を共有したくないので。とにかく、非常に軽量（約5KB縮小）と簡単に拡張可能JavaScriptライブラリ。

これがgitrepo： https://github.com/greenstick/interactor であり、プレビュー： http://greenstick.github.io/interactor/

提供されるデータは？

一般的なデータ：

  • ロードされているページ
  • ユーザーがページを読み込んだとき
  • ユーザーがページを離れたとき
  • ロードされたページのURL
  • 前のページの場所
  • ページのタイトル
  • ユーザーの言語設定
  • ユーザーのプラットフォーム
  • Webサーバーへのアクセスに使用されるポート
  • Webブラウザーの内側と外側の幅と高さ

インタラクション/コンバージョンデータ：

  • インタラクションタイプ（一般的なインタラクションまたはコンバージョン）
  • 相互作用の時間
  • インタラクションをトリガーしたイベント
  • ターゲットHTML要素タグ
  • ターゲットHTML要素クラス
  • ターゲットHTML要素のコンテンツ（テキストなど）
  • クライアントに対するカーソルの位置
  • 画面に対するカーソルの位置

例：

var elementsToTrack = [
{
    element: "element1",
    events : ["mouseup", "touchend"]
}, 
{
    element: "element2",
    events : ["mouseup"]
},
{ 
    element: "element3",
    events : ["mouseup"]
}
];

for (var i = 0; i < elementsToTrack.length; i++) {
var e = elementsToTrack[i];
new Interactor({
    interactionElement  : e.element,
    interactionEvents   : e.events
});
}

この情報がお役に立てば幸いです。

0
Kalyan Halder Raaz