ウェブサイトのモニタリング

ウェブサイト監視は、エンドユーザー監視(EUM)やリアルユーザー監視(RUM)とも呼ばれ、デジタルユーザーエクスペリエンスを把握するための重要なツールです。

概念

Instana は、実際のブラウザーの要求時間とルートのロード時間を分析することにより、Web サイト・モニタリングをサポートします。 これにより、ユーザーの Web ブラウズ体験に対する詳細な洞察と、アプリケーション呼び出しパスに対する深い可視性が得られます。

図 1. Web サイト・モニターの概要
Web サイト・モニターの概要

エージェントは、Web サイトに非同期でロードされ、検出結果をビーコンの形式で Instana に報告します。 このビーコン・データは、Instana UI の Web サイト・ダッシュボード内に集約された形式で表示されます。 ダッシュボードは、ウェブサイトの動作や速度を調査するのに役立ちます。 幅広い対象者がアクセスでき、最も一般的な質問に回答できます。 分析機能を使用して、より具体的な質問や仮説に回答することができます。

以下の画面キャプチャーは、ページ・ロードについて収集されたデータを示しています。これは、ユーザーのブラウザー・アクティビティーとバックエンド・トレースへのリンクを結合したものです。

図 2. Web サイト・トレース
Web サイト・トレース

インストール

Instana Web サイト・モニター・ソリューションは、モニター対象 Web サイトに組み込まれている軽量の JavaScript エージェントを使用して機能します。 JavaScript エージェントをインストールするには、 Instana のUIにある 「Websites 」セクションにアクセスし、Webサイトのパフォーマンスデータの追跡を開始してください。 Instana のユーザーインターフェースが、インストール手順を順を追って案内します。

図 3. セットアップ・プロセスをガイドする Instana ユーザー・インターフェース
Instana セットアップ手順を案内するユーザーインターフェース

Subresource Integrity を有効にする

Instana ウェブサイト監視機能では、トラッキングスクリプトに対して Subresource Integrity ( SRI )を有効にするオプションが用意されています。 ユーザーは、トラッキングスクリプトに対して SRI を有効または無効にできるほか、 SRI を使用してエージェントの特定のバージョンを選択することもできます。 トラッキングスクリプトには、 JavaScript のエージェントバージョンが追加されており、 base64-encoded sha384 というハッシュを持つ新しいフィールド integrity が表示されます。

図 4. Webサイト監視におけるサブリソース整合性の有効化
Web サイト・モニターのための副次リソース保全性の使用可能化

Subresource Integrity が無効になっている場合、トラッキングスクリプトはデフォルトで JavaScript エージェントの最新バージョンを使用しますが、整合性フィールドは含まれません。

図 5. Webサイトの監視におけるサブリソース整合性の無効化
Web サイト・モニターのためのサブリソース保全性の無効化
注:SRI は、ブラウザが取得するリソースの正当性を確認できるようにするセキュリティ機能です。 セキュリティの観点からは SRI を有効にすることを推奨しますが、ドロップダウンメニューから最新バージョンのエージェントが選択されていることを、手動で確認する必要があります。 無効にすることにした場合は、エージェントの最新バージョンを使用していますが、セキュア・ネットワーク環境にあることを確認してください。

ページの遷移を自動的に検出するように設定する

ウェブサイトがシングルページアプリケーション(SPA)の場合、エージェントを設定して、ウェブサイト内のページ遷移を自動的に検出させることができます。 ページ遷移の自動検出を有効にすることで、ページ遷移時にエージェントへの呼び出しを追加するためにアプリケーションを修正する必要がなくなります。 シングルページアプリケーションでは、ページ遷移の自動検出がデフォルトで有効になっています。 このオプションを有効にするには、 「シングルページアプリケーション」 を選択し、「 ページ遷移の自動検出を有効にする 」を「 はい」 に設定してください。

図 6. シングル・ページ・アプリケーション
シングルページアプリケーションの選択

自動ページ遷移検出が有効になっている場合、エージェントはビーコンを送信し、そのページ名としてページのタイトルまたは URL のいずれかを使用します。 ウェブサイトのビーコンを分析する際、意味のあるページ名をつけておくと役立ちます。 すでに適切なページタイトルが設定されているウェブサイトについては、ビーコン内のページ名としてそのページタイトルを使用してください。

ページ名として「 URL 」を使用する場合、ビーコン内で「 URL 」をより意味のある名前に変換しておくと便利です。 URL のパターンをわかりやすい名前に変換する正規表現を指定できます。

正規表現を指定するには、以下の手順に従ってください:

  1. 正規表現マッピングを有効にする 」スライダーを選択します。
  2. ページのURLを表す正規表現を1つ以上入力し、それぞれにわかりやすい名前を付けてください。 正規表現に一致するページのURLは、ビーコン内の説明的な名前に変更されます。
  3. 正規表現の入力が完了したら、「すべて保存」をクリックして、設定をトラッキングスクリプトに反映させてください。
図 7. 正規表現マッピングを有効にする
正規表現マッピングを有効にする
注: 正規表現を含む自動ページ検出の設定は、Webサイトの設定とともに保存されません。 ウェブサイトの設定画面を離れる前に、必ずトラッキングスクリプトをコピーしてください。 トラッキングスクリプトには、正規表現を含む自動ページ検出の設定が含まれています。

また、ウェブサイトがシングルページアプリケーション(SPA)であり、自動ページ遷移検出が有効になっている場合、エージェントは自動的にページ遷移の所要時間を収集します。 この所要時間には、ページの視覚的な遷移にかかる時間(つまり、DOMの更新)と、その遷移によって呼び出される初期リソース( API の呼び出し、画像、スクリプトなど)の読み込みにかかる時間の両方が含まれます。 合計所要時間はミリ秒単位で測定され、ユーザーの視点から見たページ遷移がパフォーマンスに与える全体的な影響について、貴重な知見を提供します。

詳細については、 JavaScript agent API を参照してください。

ダッシュボード

Instana によるウェブサイト監視を始めるには、ウェブサイト名を入力し、 JavaScript のスニペットをコピーして貼り付ける必要があります。 ウェブサイトの監視についての詳細は、インストールのセクションを参照してください。

速度

「速度」タブでは、ページ・ロード時間を記述するスループット、待ち時間、およびメトリックを表示できます。

図 8. Web サイト・モニター速度
Web サイト・モニター速度

リソース

スクリプトやイメージなどのサード・パーティー・リソースは、多くの場合、ページのロードが遅くなる原因となります。 「リソース」タブには、Web サイトでアクティブに使用されているすべてのリソース・プロバイダーを示す表があります。

図 9. Web サイト・モニター・リソース
Web サイト・モニター・リソース

特定の起点をクリックすると、ロード時間の明細やキャッシュ・パフォーマンスなど、より詳細な情報を表示できます。 時間の経過に伴うキャッシュ統計の変化と、それがロード時間にどのように関係しているかを確認できます。

図 10. Web サイト・モニター・リソース
Web サイト・モニター・リソース

HTTP 要求

「 HTTP のリクエスト」タブでは、 HTTP へのリクエストのうち、処理が遅いものや問題のあるものを分析できます。 特定の送信元を選択すると、「 HTTP 」のメソッド別内訳、スループットとレイテンシ、およびエラー率とレイテンシの内訳に関する詳細情報が表示されます。

図 11. HTTP 要求詳細
HTTP 要求詳細

エラー

クリティカル・プロセスでエラーが発生する可能性があります。 たとえば、オンラインストアでの購入商品の決済プロセスにおいて、二重請求のエラーが発生することがあります。 その結果、顧客は不満を抱き、企業はクレジットカードの払い戻し処理などを行う必要が出てくる。

トレースでキャッチされていないエラーを確認すると役立ちますが、1 つの問題を気にしない場合もあります。 多くのチームが関与している場合、または多くのエラーが発生した場合、全体状況を把握する方がはるかに便利です。 Instana のUIでは、エラーの詳細な内訳が表示され、以下の情報が確認できます:

  • 発生しているエラーと存在するエラーの数
  • 影響を受けるユーザーの数
  • エラーが発生したブラウザー
  • エラーが発生するオペレーティング・システム
  • エラーが発生したページ

ユーザー情報が JavaScript エージェントで使用可能になると、影響を受けるユーザーに関する洞察が得られます。 詳しくは、 ユーザーの識別を参照してください。

図 12. エラーの内訳
キャッチされていないエラーの明細

カスタム・イベント

「カスタム・イベント」 タブでカスタム・イベントのリストを表示できます。 イベントを選択すると、関連するすべてのメトリックが表示されます。

図 13. カスタム・イベント
カスタム・イベント

カスタム・イベントのレポート方法について詳しくは、「 カスタム・イベントのレポート」を参照してください。

ページ

多くの場合、特定のページを分離してパフォーマンスを分析することが重要です。 このビューは、トラフィックが最も多いページ、または応答時間が最も遅いページを見つけるのにも適しています。

特定のページを選択すると、この単一ページのすべてのメトリックを表示できます。

図 14. ページ詳細
ページ詳細

ページの読み込みに加えて、 Instana でページの遷移を追跡する方法の詳細については、 「Page」を参照してください。

チームアソシエーション

特定のウェブサイトにチームを割り当てることができますが、選択できるのは自分がメンバーとなっているチームのみです。

チームがウェブサイトに関連付けられると、そのチームのメンバーのみがUI上でそのウェブサイトを閲覧できるようになります。 さらに、ウェブサイトへのアクセス権限は、そのチーム内であなたに割り当てられた役割によって決まります。

図 15. チーム所属
チーム所属

「チーム」の詳細については、 「チーム 」を参照してください。

スマート・アラート

構成されているすべてのスマート・アラートのリストが表示されます。 アラートをクリックして、その構成の表示、変更、または改訂履歴の表示を行います。 必要に応じて、アラートの無効化や削除も行うことができます。

「スマートアラート」リストおよび個々の設定には、そのスマートアラートが設定されている基盤となるSLOに関連付けられたチームが表示されます。

アラートの追加方法について詳しくは、 スマート・アラートを参照してください。

分析

Instana のトレースや呼び出しの分析機能と同様に、Webサイト監視データの分析ビューを使用すれば、あらかじめ設定されたダッシュボードではカバーされていない具体的な疑問に対する答えを得ることができます。 Web サイト・モニタリング・データ の単一ピースをビーコン と呼びます。 いくつかの ビーコン タイプがあります。つまり、ページ・ロード、HTTP 要求、リソース、および JavaScript エラーです。 便宜上、各ビーコン・タイプには、分析ビュー内に独自のメイン・ナビゲーション項目があります。

ビーコン・データは、フィルタリングおよびグループ化に使用できます。 デフォルトのグループ化は、選択したビーコン・タイプによって異なります。 グループ化を解除すると、フィルタに一致する個々のビーコンを確認できます。

グループ化されたビュー

グループ化された分析ビュー内で、ビーコン・データは特定のタグでグループ化されます。 デフォルトでは、ビーコン・データは以下のようにグループ化されます。

  • ページ名によるページ・ロード (beacon.page.name)。
  • リソース起点別のリソース (beacon.http.origin)。
  • HTTP 発信元ごとのリクエスト数(beacon.http.origin)。
  • エラー・メッセージ (beacon.error.message) ごとの JavaScript エラー

以下の画面キャプチャーは、ブラウザー名 (beacon.browser.name) でグループ化されたページ・ロードを示しています。グラフには、 Robotshopという Web サイトのブラウザー全体でのページ・ロード時間 (平均) の分布が表示されています。

図 16. ページ・ロードのグループ
ページ・ロードのグループ

メトリックの選択

分析テーブルには、ほとんどの場合に役立つすべてのビーコン・タイプのデフォルトのメトリック・セットが表示されます。 より具体的な質問にお答えするために、 Instana では、これらのテーブルのメトリクスの選択をサポートしています。 メトリクスの選択により、パーセンタイルなどのさまざまな集計方法を用いた分析や、「 TCP 」や「 SSL 」といった個別のメトリクスによる分析が可能になります。

フィルタリング、グループ化、メトリック選択、およびグラフ作成の組み合わせにより、Web サイト・ダッシュボード内にあるすべての表とグラフを分析ビューで再作成することができます。

図 17. メトリック選択
分析で選択可能な列

グループ化されていないビュー

グループ化されていないビューは、グループ化基準が削除された後にアクセス可能になります。 指定されたフィルターに一致するすべてのビーコンがリストされます。 グループ化されていないビューは、ページ・ロード・ビューへのゲートウェイでもあります。

図 18. グループ化されていないビュー
分析で選択可能な列

ページ・ロード・ビュー

トレースおよび呼び出しのトレース・ビューと同様に、ページ・ロード・ビューは Instana 内で最高の詳細レベルです。 ページ・ロードは、最初の HTML 文書と、次のフルページ・ナビゲーションまでのそれ以降のすべての文書の取得として定義されます。

ページ・ロード・ビューは、発生したページ・ロードに関する簡単な概要を提供するように設計されています。 さらに、ページの読み込み時に Instana が受信したすべてのデータを確認できるため、問題の分析を行う際に、常にその状況に関する情報が利用可能です。 たとえば、 JavaScript のエラーを分析する際、このビューを見れば、その直前に何が起きていたのかが把握できます。

ページ・ロード・ビューは、一般的な Web 開発者ツールのネットワーク・タブの後にモデル化されます。 フィルタリングおよび検索により、さらに多くのデータを処理することができます。 バックエンド・トレースへのナビゲーションでも、何かがそのように動作している理由を十分に理解することができます。

図 19. ページ・ロード・ビュー
分析で選択可能な列

Webサイトのサービス依存関係を確認する

[依存関係 ] タブには、選択した Web サイトが呼び出す直接的なサービスが表示されます。 ルートノードはウェブサイトを表し、第1レベルのノードはそのウェブサイトが依存するサービスを示しています。 この情報は、グラフと詳細な表の両方で確認できます。

グラフ内のWebサイトノードをクリックすると、サイドパネルに、そのWebサイトが行う呼び出しの総数、エラー率、平均レイテンシなどの詳細情報が表示されます。 サービスノードをクリックすると、サイドパネルに、そのサービスが受信した総コール数、選択したウェブサイトから発信されたコール数、および同様のコールメトリクス(コール数、エラー率、平均レイテンシ)が表示されます。

Webサイトまたはサービスレベルで検出された問題を、深刻度別に色分けして確認できます。

図 20. 依存関係ビュー
依存関係ビューのダッシュボード

トレース・ビューの統合

Web サイトに対して Web サイト・モニタリングを有効にすると、トレース・ビューも強化されます。 以下の画面キャプチャーに示すように、Web サイト・モニター・データによってトレース・ビューが強化されます。

図 21. トレース・ビューの統合
ページ・ロードの要約は、トレース・ビューに表示されます。

地理データ

Instana エンドユーザーのIPアドレスを、 MaxMind が提供する GeoLite2 データベースに基づいて地理的な詳細情報に紐付けます。 IP アドレスは、リバース・プロキシー・サーバーを使用して収集されます。

セルフホスト型インストールを行う場合は、エンドユーザー監視エンドポイントの URL を、エージェントのレポート先である URL として設定してください。 それ以外の場合、IP アドレスは収集されず、関連する地理的詳細情報は使用できません。