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

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

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

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

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

ユーザーエクスペリエンスの理解と改善

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

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

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

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

収集データの形式

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値で転送することになります。

収集データの照会

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

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

ノート

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

Flexボードでのウィジェットによる確認

ユーザー定義のイベントデータをFlexボードメニューでウィジェットにして確認することができます。

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

収集データの形式​

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

インタフェース​

適用例​

収集データの照会​

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

Flexボードでのウィジェットによる確認​