ホバー/マウス・オーバー・イベント・トラッキング実装ガイド
ホバー/マウス・オーバー・トラッキング
ホバー/マウス・オーバー・トラッキングは、ユーザーがサイトをどのように使用しているかについて、特定の種類の質問に回答する際に非常に役立ちます。Oracle Infinityを使用して実装するのは比較的簡単ですが、この方法を使用する前に、いくつかの考慮事項があります。
ほとんどのサイトでは、これにより、収集されるイベントの数がデフォルト・ベースラインの5から15倍増加します。これは大量のデータであり、一部のレポートの読取りが困難になるという予想外の影響を及ぼす可能性があります。また、ライセンスされているイベント数にも直接影響します。
そのため、ホバー/マウス・オーバー・トラッキングの実装時には、いくつかの推奨事項があります。
- 関心のないデータや使用しないデータを収集しないように、特定のページ、または関心がある特定のページ要素にのみトラッキングを実装します。
- サイトを開発する際には、一意の要素とdiv IDを可能なかぎり使用します。これは、マウス・オーバー・トラッキングを特定の要素にバインドしようとする際に役立ちます。
- サイトの更新/設計に関する変更に対してトラッキング・レビューを実装し、サイト上の特定の要素またはdiv IDに関連付けられたトラッキングを中断しないようにします。
- 適切なホバー・オーバー・タイムアウトを設定します。デフォルトで、ここでのコードでは500msを使用します。より短いタイムアウトを使用すると、多くのホバー・イベントが追跡されるため、使用可能なデータ・クラスタを取得できなくなる場合があります。より長いタイムアウト時間を使用すると、操作が欠落する場合があります。サイトの動作方法によっては、適切なタイムアウトを得るために試行錯誤が必要な場合があります。
- ホバー・トラッキングを実行する期間を決定します。1回かぎりの質問を尋ねる場合は、その質問に回答するために必要なデータを収集してから、サイトのイベント収集コストを削減するために、ホバー・トラッキングを削除することを検討します。
サンプル・コード
マウス・オーバー・トラッキングを実行するには、様々な方法があります。次に、独自の実装を構成するために使用できる例を示します。この例では、Infinityタグ用のイベント・トラッキング・プラグインを使用し、カスタム・セレクタに基づくホバー・オーバー・トラッキング・イベントを実装します(つまり、このメソッドを使用するには、タグにInfinity Analyticsモジュールが含まれ、イベント・トラッキング・プラグインが有効になっている必要があります)。
このサンプルでは、500msの滞留時間を使用し(var dwellTime = 500;)、"#nav-xshop"というクラス名を検索して、ホバー・イベントをリスニングします。また、WT.dl値98が追加されますが、これは必要に応じてユーザーが変更できます。同様に、WT.ti (ページ・タイトル)値は、"HoverOver Tracking: [要素クラス名]"というカスタム文字列として挿入されます。また、コードはタイマーを使用してホバー時間を追跡し、ユーザーが定義されているターゲットからマウスを動かすとタイマーをクリアします。最後に、トラブルシューティングで役立つように複数のconsole.logが出力されます。
ホバー・トラッキング・コードの例は、次のとおりです。
{
"eventTrigger":"mouseover",
"selector":"#nav-xshop",
"eventCallback":
"var el = e[\"element\"] || e[\"srcElement\"] || {};
var payload = {};
var dwellTime = 500;
var handleTime = {};
var label = el.nodeName + el.id?'#'+el.id:el.className;
window.console.log(\"HoverOver: \"+label);
handleTime[label] = window.setTimeout(function()
{
window.console.log(\"HoverOver Tracking: \"+label);
payload['wt.ti'] = 'Hover Over ' + label;payload['wt.dl'] = 98;
ORA.click({ 'data':payload });
}, dwellTime);
var clearOurTimer = function(){
window.console.log(\"HoverOut: \"+label);
window.clearTimeout(handleTime[label]);
el.removeEventListener('mouseout', clearOurTimer);
};
el.addEventListener('mouseout', clearOurTimer);"
}
最後のノートとして、本番操作では、サイズをさらに削減し、ブラウザ・コンソールを無関係なメッセージのないクリーンな状態に保つために、console.logメッセージを削除できます。
この次のスクリーンショットでは、前述のコード・サンプルによって生成されたイベント・データを確認できます。ページ・タイトル(wt.ti)およびイベント決定ラベル(WT.dl)をノートにとります。これらは両方とも、これをホバー・オーバー・イベントとして識別します。これは提案される1つのスキーマにすぎませんが、レポート・ニーズに必要なすべてのパラメータを収集するよう、独自のホバー・オーバー・トラッキングを変更できます。
最後に
前述の例は、ニーズに適合するマウス/ホバー・オーバー・トラッキング・ソリューションの開発を開始する際に役立つ1つの足掛かりにすぎません。イベント・トラッキング・プラグインを使用するかわりに、前述のサンプル・コードを別のミューテーションまたは独自に考案したカスタム・プラグインに移動することもできます。