15

自分で管理している Web サイトでのユーザー インタラクションを追跡しようとしています。追跡とは、ユーザーがどのボタンまたはウィジェットを押したか、いつ、どのくらいの時間をユーザーが費やしたかなどを追跡したいという意味です。そのようなことと起こりうる落とし穴を行います。

4

4 に答える 4

9

この質問が投稿されてからしばらく経ちましたが、これを行うための単純な JavaScript モジュールに取り組んできました。

画像を使用するのではなく、ユーザーが指定した HTML 要素からイベント データを取得し、サイト訪問者のブラウザー構成に関する基本的な情報も取得します。データは、 beforeunload イベントでトリガーされた XHR を使用して、指定されたサーバー エンドポイントに送信されます。

GitHub プロジェクトへのリンクとサンプルページを次に示します。

コードに関して、HTML がどのように見えるかの例を次に示します。

<!DOCTYPE html>
<html>
    <head>
        <title>Interaction Tracker Example</title>
    </head>
    <body>
        <div class="someElement"></div>
        <div class="someOtherElement"></div>
        <div class="conversion"></div>
        <script src="interactor.min.js" type="application/javascript"></script>
        <script>
            // An example instantiation with custom arguments
            var interactions = new Interactor({
                interactions        : true,
                interactionElement  : "someElement someOtherElement",
                interactionEvents   : ["mousedown"],
                conversions         : true,
                conversionElement   : "conversion",
                conversionEvents    : ["mouseup"],
                endpoint            : '/usage/interactions',
                async               : true
            });
        </script>
    </body>
</html>

このアーキテクチャにより、複数のインスタンス化を通じて複数の要素を簡単に追跡できるため、さまざまな対話が送信されるエンドポイントをカスタマイズできます。これにより、データをデータベースに保存する前に、サーバー側の前処理を完全に分離できます。

var elementsToTrack = [
    {
        element  : "cssClass1",
        events   : ["mouseup", "touchend"],
        endpoint : "/interactions/c1"
    }, 
    {
        element  : "cssClass2",
        events   : ["mouseup"],
        endpoint : "/interactions/c2"
    },
    { 
        element  : "cssClass3",
        events   : ["mouseup"],
        endpoint : "/interactions/c3"
    }
];

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

最後に、非常に軽量 (約 5KB 縮小) で、ほとんどのニーズに合わせて簡単に拡張できます。

于 2015-08-06T23:25:58.757 に答える
2

サーバーから値を返す必要がない場合、ajax は少しオーバーヘッドになります。画像の ping を使用します (スクリプトをソースとして使用し、送信するパラメーターを使用して画像要素を作成します)。

イベントの場合は、それらをドキュメントにバインドし、イベント ターゲットを確認します (注意 - ぼかし、フォーカス、および変更はバブリングしません)。

document.body.addListener(event, function() {
    var i = new Image();
    i.src = 'script.php?target=' + event.target;
}, false);

時間測定の場合、要素のイベント間で経過する時間を確認できます。

于 2013-09-12T22:23:10.603 に答える
1

mixpanelのようなものを調べることをお勧めします。統合は非常に簡単で、大量のデータを解析するためのグラフィック ツールを提供します。基本的な前提はあなたが言ったことに似ています。特定のユーザー インタラクションで非同期イベントを発生させ、一連のオプションを渡します。これを Python コードに統合することもできます。これにより、サーバー側のアクションがいつ実行されるかを簡単に追跡できます。例：

$("#my_button").click(function() {
  // This sends us an event every time a user clicks the button
  mixpanel.track("Button clicked"); 
});

ドキュメントを自分で調べることができます。https://mixpanel.com/docs/integration-libraries/javascript

Mixpanel は 1 つのオプションにすぎませんが、前提はすべて同じです。考慮する必要があるのは、収集後のデータの管理です。mixpanel のような企業は、頭痛の種を軽減するための優れた GUI を提供しています。

于 2013-09-12T22:26:16.600 に答える