ブラウザエージェント収集データ
WhaTapブラウザエージェントは、ユーザーのブラウザで発生したイベントを収集し、収集したデータを再処理してモニタリングを使用します。 すべての収集データは、ユーザーセッションに依存します。
タイプ(Type)
以下は、WhaTapブラウザエージェントによって収集されるデータタイプです。
- Long：long to string32までの形式の固有IDのデータタイプです。
- TimeStamp：ms(millisecond) 単位で、測定時間のタイムスタンプです。
- HighResolutionTime：ms単位の所要時間です。
- TimeSet：タイムライン表示のために開始タイムスタンプと所要時間を表示します。
- ResourceType：「document」、「xhr」、「fetch」、「beacon」、「css」、「script」、「image」、「font」、「media」、「other」のいずれかを意味します。
- ErrorType：「console」、「onError」、「promiseRejection」、「fetchError」、「xhrError 」、 「messageError」のいずれかを意味します。
共通収集データ
イベント発生時の基本的に収集されるデータは次のとおりです。
| データ名 | タイプ | 説明 | 例 |
|---|---|---|---|
| sessionID | Long | ウェブアプリケーションのユーザーがウェブアクセスを開始する際に発行される固有IDです。 セッションの保持期間は最大4時間で、15分間続くと、ID の有効期限が切れます。 ブラウザクッキーに保存します。 | x7dbvq64ga80sd |
| userID | Long | ウェブアプリケーションユーザーが初めて接続するときに発行される固有IDで、有効期限がありません。 ブラウザクッキーに保存します。 | z7eqnnitlc19j9 |
| sendEventID | Long | イベント発生後に収集サーバーへのデータ送信時に発行するリクエストの固有IDです。 | x4rp4tnuq25i0h |
| page.url | String | イベントが発生したページのURLです。 | https://site.whatap.io/8/dashboard?dataKey=abcd |
| page.host | String | イベントが発生したページのURLのドメイン名です。 | site.whatap.io |
| page.path | String | イベントが発生したページのURLのパスです。 | /8/dashboard |
| page.query | String | イベントが発生したページのURLのパラメータです。 | dataKey=abcd |
| page.protocol | String | イベントが発生したページのURLのプロトコルです。 | HTTPS |
| page.title | String | イベントが発生したページの文書タイトルです。 | SaaSモニタリングNo.1のWhaTapモニタリング | WhaTap |
| userAgent | String | イベントが発生したブラウザのuseragentです。 | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36 |
ページロードイベント
ユーザーがウェブアプリケーションにアクセスし、ページのコンテンツを完全に読み込んだときに発生するイベントです。 基本的な収集データは次のとおりです。
| データ名 | タイプ | 説明 | 例 |
|---|---|---|---|
| navigationTiming.startTimeStamp | TimeStamp | navigationStartのタイムスタンプです。 ページを読み込みが開始された時 間のタイムスタンプ値です。 | 1658057382311 |
| navigationTiming.eventID | Long | ページを読み込むイベントの発生時に発行する固有IDです。 | x7mkg24tags307 |
| navigationTiming.redirect | TimeSet | httpリダイレクションの所要時間です。 | {duration: 10, start: 315} |
| navigationTiming.cache | TimeSet | app cacheリソースを読み込みにかかる時間です。 | {duration: 5, start: 325} |
| navigationTiming.dns | TimeSet | ウェブサイトのドメイン検索にかかった時間です。 | {duration: 5, start: 330} |
| navigationTiming.connect | TimeSet | TCP接続設定の所要時間です。 | {duration: 6, start: 335} |
| navigationTiming.ssl | TimeSet | ssl handshakeプロセスの所要時間です。 | {duration: 5, start: 336} |
| navigationTiming.download | TimeSet | documentダウンロードの所要時間です。 | {duration: 100, start: 341} |
| navigationTiming.firstByte | TimeSet | ブラウザがサーバーにdocumentをリクエストし、最初のバイトを受信するまでの所要時間です。 | {duration: 10, start: 341} |
| navigationTiming.domInteractive | HighResolutionTime | navigationStartからブラウザがdocumentのパーシングを完了した時刻です。 DOMが用意されているステータスです。 | 441 |
| navigationTiming.domContnentLoaded | TimeSet | DOMツリーを生成するのにかかる所要時間です。 | {duration: 50, start: 441} |
| navigationTiming.domComplete | HighResolutionTime | 「navigation Start」からdocumentおよび下位リソースの読み込みを完了した時間です。 | 491 |
| navigationTiming.domLoad | TimeSet | 「onload」イベントの所要時間です。 | {duration: 1, start: 491} |
| navigationTiming.backendTime | HighResolutionTime | 「navigationStart」からリソースのダウンロードまでの所要時間です。 | 126 |
| navigationTiming.frontendTime | TimeSet | ブラウザがパーシングを完了した時間からloadイベントが完了するまでの所要時間です。 | {duration: 51, start: 441} |
| navigationTiming.loadTime | HighResolutionTime | 「navigationStart」から「loadEventEnd」までの所要時間です。 | 492 |
| totalDuration | HighResolutionTime | 「navigation Start」から最終ページロードを完了した時間です。 | 550 |
Visually Complete
Visually Complete(VC) は、ユーザーの画面に見える領域(ビューポート)のコンテンツが視覚的にすべて描画された時点を測定した値です。
ページロード時間がすべてのリソースを読み込んだ時点だとすれば、Visually Completeはユーザーの目に画面がすべて描画された時点に近い値です。 バックグラウンドで読み込むリソースが残っていても、画面が安定して見えれば、ユーザーはページが用意できたと感じます。 実際の体感パフォーマンスを補完する指標です。
| Name | Type | Description | Example |
|---|---|---|---|
| visuallyComplete | HighResolutionTime | navigationStart基準のビューポートコンテンツのレンダリング完了時刻です。 単位はms | 1820 |
ページロード時間
ページロード時間はウェブブラウザで、特定ページのURLを要請した瞬間からページのすべてのリソース(HTML、CSS、JavaScript、画像など)がダウンロードおよび処理され、ブラウザがページを完全にレンダリングして使用可能な状態になるまでの合計時間を意味します。
ページロード時間を収集するために、ブラウザエージェントはブラウザで提供するWeb API中の一つであるNavigation Timing APIを通じて収集します。 このAPIを通じて各 段階別の時間(例: リクエストの開始、応答、レンダリングの開始と完了)を測定して提供します。
Navigation timing
PerformanceTimingインターフェースを通じてアクセスできるミリ秒単位の測定イベントがあります。 以下は、これらのイベントが発生する順に表示した一覧です。
| イベント | 説明 | 備考 |
|---|---|---|
navigationStart | ページの探索開始時点です。 | - |
redirectStart | 最初のHTTPリダイレクトの開始時点です。 | リダイレクトがなければ値は0です。 |
redirectEnd | 最後のリダイレクトの応答受信完了の時点です。 | リダイレクトがなければ値は0です。 |
fetchStart | ブラウザがリソースを読み込むプロセスを開始する時点です。 | キャッシュ照会が始まる時点でもあります。 |
domainLookupStart | ドメイン名に対するDNS照会の開始時点です。 | ブラウザがURLのホスト名をIPアドレスに変換し始めます。 キャッシュされたDNS情報があるか、ローカル_hosts_ファイルに情報があればfetchStartと同じ値になります。 |
domainLookupEnd | DNS照会完了の時点です。 | ブラウザがドメインのIPアドレスを正常に取得します。 DNS照会に失敗しても、この時点で記録します。 |
connectStart | サーバーとの接続開始時点です。 | TCP接続を開始します。 もし持続的な連結(persistent connection)を再利用する場合、domainLookupEndと同じ値になります。 |
connectEnd | サーバーとの接続が完全に設定された時点です。 | TCPハンドシェイクを完了します。 HTTPSの場合、SSL/TLS ハンドシェイクもこの時点までに完了します。 接続が失敗しても、この時点で記録します。 |
secureConnectionStart | HTTPS接続開始時点です。 | 該当する場合のみ記録します。 |
requestStart | サーバーにリソースを要請し始めた時点です。 | - |
responseStart | サーバーから応答の最初のバイト(byte)を受け始めた時点です。 | HTTP応答ヘッダーの最初のバイト(byte)を受信した時点であり、サーバーの初期応答時間(Time to First Byte、TTFB)を計算するのに使用します。 |
responseEnd | サーバーから最後のバイト(byte)を受け取った時点 | 全体応答(ヘッダーと本文)をすべて受け取った時点です。 リダイレクト応答があれば、最終応答の最後のバイト(byte)を受け取った時点です。 |
domInteractive | DOMパーシングが終わり、スクリプト実行の準備ができた時点です。 | - |
domContentLoadedEventStart | DOMContentLoadedイベントが発生した時点です。 | こ の時は、HTML文書のローディングとパーシングが完了し、DOMツリーが完全に構築されたことを意味します。 |
domContentLoadedEventEnd | すべてのDOMContentLoadedイベントハンドラーの実行が完了した時点です。 | - |
domComplete | DOMローディングと下位リソースローディングが完了した時点です。 | - |
loadEventStart | loadイベント発生直前の時点です。 | DOMが完全に構成され、すべてのリソースをロードした直後です。 window.onloadイベントハンドラーが実行される直前の時点です。 |
loadEventEnd | すべてのloadイベントハンドラーの実行が完了した時点です。 | ページとすべての従属リソースを完全にロードした状態です。 |
ルーター変更イベント
ユーザーがSingle Page Application(SPA) の形式のウェブアプリケーションでページ移動時に発生するイベントです。 基本的な収集データは次のとおりです。
| データ名 | タイプ | 説明 | 例 |
|---|---|---|---|
| loadTime | HighResolutionTime | ルーター変更の所要時間です。 | 500 |
| startTimeStamp | TimeStamp | ルーター変更開始時間のタイムスタンプです。 | 1658057382311 |
| endTimeStamp | TimeStamp | ルーター変更終了時間のタイムスタンプです。 | 1658057382811 |
| pageLocation | String | ルーター変更イベントが発生したページのURLです。 | https://site.whatap.io/8/dashboard?dataKey=abcd |
| host | String | ルーター変更イベントが発生したページのURLのドメイン名です。 | site.whatap.io |
| path | String | ルーター変更イベントが発生したページのURLのパスです。 | /8/dashboard |
| query | String | ルーター変更イベントが発生したページのURLのパラメータです。 | dataKey=abcd |
| protocol | String | ルーター変更イベントが発生したページのプロトコルです。 | HTTPS |
| isComplete | Boolean | ルーターの変更が完了していない状態でルーターを別のページに変更する場合の区切り値です。 | true |
リソースロードイベント
ユーザーがウェブアプリケーションを使用中にリソースを読み込みしたときに発生するイベントです。 基本的な収集データは次のとおりです。
| データ名 | タイプ | 説明 | 例 |
|---|---|---|---|
| startTime | HighResolutionTime | 「navigationStart」からリソースリクエスト開始までの時間です。 | 1000 |
| startTimeStamp | TimeStamp | リソースリクエスト開始のタイムスタンプです。 | 1658057382321 |
| eventID | Long | リソースを読み込むたびに発行する固有IDです。 | x280or4ok0kqo0 |
| type | ResourceType | リソースタイプです。 | image |
| url | String | リソースURLです。 | https://unpkg.com/purecss@2.0.3/build/pure-min.css?dataKey=abcd |
| urlHost | String | リソースURLのドメイン名です。 | unpkg.com |
| urlPath | String | リソースURLのパスです。 | /purecss@2.0.3/build/pure-min.css |
| urlQuery | String | リソースURLのパラメータです。 | dataKey=abcd |
| urlProtocol | String | リソースURLのプロトコルです。 | HTTPS |
| is3rdParty | Boolean | 3rd partyにリクエストしたリソースを区分するための値です。 | false |
| timing.duration | HighResolutionTime | リソースのダウンロード完了までにかかる時間です。 | 61 |
| timing.size | Number | リソースのエンコードサイズです。 | 20 |
| timing.redirect | TimeSet | httpリダイレクションの所要時間です。 | {duration: 10, start: 315} |
| timing.cache | TimeSet | app cacheリソースを読み込みにかかる時間です。 | {duration: 5, start: 325} |
| timing.dns | TimeSet | リソースドメインにかかった時間です。 | {duration: 5, start: 330} |
| timing.connect | TimeSet | TCP接続設定の所要時間です。 | {duration: 6, start: 335} |
| timing.ssl | TimeSet | ssl handshakeプロセスの所要時間です。 | {duration: 5, start: 336} |
| timing.firstByte | TimeSet | ブラウザがサーバーにリソースをリクエストし、最初のバイトを受信するまでの所要時間です。 | {duration: 10, start: 341} |
| timing.download | TimeSet | リソースダウンロードの所要時間です。 | {duration: 100, start: 341} |
| resourceInfo.method | String | リソースリクエストのメソッドです。 | POST |
| resourceInfo.status | Number | リソースリクエストのステータスです。 | 200 |
エラーイベント
ユーザーがウェブアプリケーションの使用中にブラウザで発生したエラーです。 基本的な収集データは次のとおりです。
| データ名 | タイプ | 説明 | 例 |
|---|---|---|---|
| message | String | エラー発生時のメッセージ情報です。 | SyntaxError: Unexpected end of JSON input |
| stack | String | エラー発生時のスタック情報です。 | at printWarning (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:60:7) |
| timestamp | TimeStamp | エラー発生時のタイムスタンプです。 | 1658057382321 |
| type | ErrorType | エラータイプです。 | onError |
| status | Number | エラータイプが「xhr」、「fetch」の場合に収集するエラーステータス値です。 | 501 |
| url | String | エラータイプが「xhr」、「fetch」の場合は、AJAXリクエストURLです。 | https://site.whatap.io/yard/api?pcode=8&type=summary |
コアウェブバイタルイベント
コアウェブバイタル(Core Web Vitals)は、ウェブコンテンツ利用者の使用経験に影響を与えるさまざまな測定値の中でグーグルを重要視する3つのメトリクスです。 基本的な収集データは次のとおりです。
| データ名 | タイプ | 説明 | 例 |
|---|---|---|---|
| lcp | HighResolutionTime | Largest Contentful Paint(LCP)、ページを最初に読み込み始めた時間を基準にビューポート内の最大の画像またはテキストブロックのレンダリング時間を報告します。 | 12334 |
| fid | HighResolutionTime | First Input Delay(FID)、ユーザーがページと初めて操作したとき(例：リンクをクリックしたり、ボタンをタップしたとき、カスタムJavaScriptベースのコントロールを使用するとき)からその操作にレスポンスしてブラウザがイベントハンドラー処理を開始するまでの時間を測定します。 | 7 |
| cls | Number | Cumulative Layout Shift(CLS)は、動的に読み込まれたコンテンツによる予期せぬレイアウト移動を数値化して表現した点数 です。 | 2 |
SPAのビュー別CLS/INP測定
Single Page Application(SPA)では、一度ページを読み込んだ後に画面遷移が起きても、ブラウザが新しいページを再び読み込みません。 このような画面遷移をsoft navigation(ソフトナビゲーション)といいます。
従来は、最初に進入したページ一つだけを基準にCLSとINPを測定していました。 これからはSPAの画面遷移を一つのビュー(view)として区分し、遷移したビューごとにCLSとINPを別々に測定します。 どの画面でレイアウトが揺れたり、ユーザー入力へのレスポンスが遅いのかをより正確に確認できます。
一緒に収集するINP指標は次のとおりです。
| Name | Type | Description | Example |
|---|---|---|---|
| inp | HighResolutionTime | Interaction to Next Paint(INP)。 ユーザーの操作に画面が次に反応するまでの時間です。 単位はms | 180 |