ユーザー定義イベントの収集

ブラウザーのモニタリングによって収集される基本情報だけでは、ウェブサービスの問題点を把握し、ユーザー体験を改善することが難しい場合があります。このような問題を解決するために、ウェブページで発生するイベントのうち、開発者と運営者が希望するイベントを追加で収集できるインターフェースを提供します。

ブラウザーエージェントが提供するインターフェースで、次のイベントタイプを追加で収集できます。

デバッグ目的での特定関数の呼び出し情報
売上に関するロジックの実行情報
売上に直接影響を与えるボタンのクリック情報

ユーザー定義イベントは、次のように活用できます。

ユーザー体験の理解と改善

特定のユーザーの行動や経路を追跡し、ユーザーがウェブページと相互作用する方法をより詳しく把握し、ユーザー体験を改善できます。例えば、ウェブページで特定ボタンのクリックやページ間の切り替え速度を測定することで、ユーザー体験の問題を発見し解決できます。
性能問題の識別と解決

カスタムイベントを利用すると、特定の機能やコンポーネントの性能の問題を把握できます。特定のタスクを実行する際にかかる時間を追跡し、関連の性能データを収集してボトルネックが発生する区間を把握できます。このような性能の問題を解決することで、ウェブサービスの全般的な性能を改善できます。
ビジネスインサイトの提供

ウェブアプリケーションやウェブサイトでユーザーとの相互作用を理解することは、ビジネスの意思決定に重要な情報を提供します。ユーザーが最も多く使用する機能が何か、ユーザーがウェブサービスでどんな経路を選ぶのかなどの情報を分析し、特定の機能開発やマーケティングの戦略に活用できます。
カスタマイズされた通知と警告の生成

特定のイベント条件の通知設定により、システムの異常状態や予期しないユーザーの行動をすばやく検出して対応できます。

収集データの形式

name：イベントを代表する名前です。乱数、製品番号などグループ化できない固有IDは含まない方がいいです。
duration：ページロードまたはページ切り替え後にイベントが発生した時点までの時間です。
custom_duration：ユーザーが定義したイベントの実行時間です。開始時刻と終了時刻を直接指定して、特定のイベントが実行された時間を設定できます。
contents：ユーザーが定義したイベント処理結果に関する内容です。

コードの適用と収集方法

ブラウザーエージェントが提供するインターフェースのうちaddCustomEventメソッドを使用して、ユーザー定義イベントをWhaTapに転送できます。

インタフェース

ブラウザーエージェントが提供するインターフェースは、windowのWhatapBrowserAgentオブジェクトに含まれています。 WhatapBrowserAgentで提供するaddCustomEventのインターフェースを参考にしてください。

Typescript
addCustomEvent: (
    eventName: string,
    option: {
      contents: string | undefined;
      customDuration: number | undefined;
    } | undefined,
) => void;

適用例

ブラウザーエージェントが提供するインターフェースを例示コードのように適用できます。

Typescript
function PurchaseProduct(payload) {
  const startTimestamp = new Date();

  ...

  const endTimestamp = new Date();

  const duration = endTimestamp - startTimestamp;

  window.WhatapBrowserAgent?.addCustomEvent('purchase product', {
    contents: JSON.stringify(payload),
    customDuration: duration,
  });
}

PurchaseProduct関数が動作すると、ユーザー定義イベントが指定したname値に転送されます。

収集データの照会

ユーザーセッションログ検索メニューの利用

Browser Monitoringプロジェクトを選択し、分析 > ユーザーセッションログ検索メニューに移動します。
フィルターオプションでtypeタグを選択して'custom'を入力します。
ボタンを選択してください。
照会された結果からnameタグを追加で選択し、特定の値でフィルタリングできます。
イベント発生までのユーザー行動を確認するには、照会された結果一覧のユーザーセッション分析カラムで分析ボタンを選択します。

ノート

ユーザーセッションの分析についての詳細は、次の文書を参照してください。

Flexボードからウィジェットで確認する

ユーザー定義イベントのデータは、Flexボードメニューからウィジェットを作成して確認できます。

カスタムイベントの件数：収集したユーザー定義イベントの推移を確認できます。
カスタムイベントのテーブル：収集したユーザー定義イベントの一覧を確認できます。

収集データの形式​

コードの適用と収集方法​

インタフェース​

適用例​

収集データの照会​

ユーザーセッションログ検索メニューの利用​

Flexボードからウィジェットで確認する​