ブラウザモニタリングのベストプラクティスガイド

すべてのユーザーが知っておくべきブラウザ監視のヒント

Browserモニタリングの機能をさらに活用して、ウェブサイトおよびそのユーザーに対する可視性を高めます。以下に、リアルユーザー監視（RUM）を使用して問題をすばやく探して顧客体験を向上させるための13のベストプラクティス。

1. Browser SPAエージェントを使用する

Browser SPAエージェントを使用して可視性を高める

最近のウェブサイトは、動的コンテンツと精巧なロジックによって複雑化しています。ユーザーインタラクションについての理解を深めるため、シングルページアプリケーション（SPA）エージェントを有効にし、ユーザーアクションとその背後の基礎となるウェブページイベントを可視化します。

このフレームワークに依存しないエージェントは、React、Angular、Ember、Backboneなどのシングルページアプリケーションフレームワークだけでなく、カスタムフレームワークおよびその他の動的コンテンツを含むすべてのページに使用できます。高度なタイミング分析機能によって、Navigation Timing Specification APIサブタイミングに、ページのレンダリングやDOM処理に関してより細かい粒度の情報を格納しています。これらはすべてのページのライフサイクルを理解するのに役立つ、詳細なパフォーマンスデータのフィルタリング機能を提供しています。

設定方法

これは、デフォルトでは、新しいブラウザエージェントのインストールに対して有効になっています。この設定を編集するには、BrowserアプリのApp settingsページに移動します。

2. APM自動インストゥルメンテーションを使用する

コピー／ペーストの代わりにAPMの自動インストゥルメンテーションを使用する

APMも使用している場合は、自動インストゥルメンテーションをできるだけ有効にすることをお勧めします。この機能は、BrowserモニタリングJavaScriptエージェントをフロントエンドに自動的に挿入します。この手法により、Browserエージェントは、最新の状態が自動的に維持されるだけでなく、これらの製品を一緒に使用することにより、フロントエンドからバックエンドまでの可視性を統一できます。

たとえば、フロントエンドのAJAX呼び出しを対応するバックエンドのトランザクションにリンクして、ダッシュボードでフロントエンドとバックエンドのデータを一緒に並べることができます。

設定方法

「Browserモニタリングの有効化」をご覧ください。

3. インストゥルメントされたページを確認する

ブラウザのアプリとページを見直し、New Relicに報告すべき内容がすべて実際に報告されていることを確認してください。

設定方法

ブラウザ監視UIのページビュータブを確認するか、次のNRQLクエリを実行します。

SELECT uniques(pageUrl) from PageView LIMIT MAX

結果が多すぎる場合は、リクエストIDまたはカスタマーIDを含むURLを除外してください。

4. データのグループ化

データを適切なカテゴリーにグループ化する

NRQLを介してクエリを実行する際に、New Relic UIと集計レベルの両方でユーザーエクスペリエンスのパフォーマンスを測定できるように、ブラウザセグメントが正しくキャプチャされていることを確認します。

セグメントとは、URL内の2つの/間、またはドメイン名の.間のテキストを指します。たとえば、URLwebsite.com/product/widget-nameでは、セグメントは次のようになります。

• website
• .com
• product
• widget-name

セグメントが多いURLが多い場合、URLはブリッジされるため、website.com/product/widget-nameはwebsite.com/またはwebsite.com/product/になります。この例では、第一の要約されたURLは特に有用ではありませんが、第二の要約されたURLは、製品の顧客体験データを集約する有用な方法になり得ます。

設定をどこから始めればよいかわからない場合ブラウザセグメント調査ダッシュボードを使用してみてください。

デフォルトのグループ分けによって生成されるデータが大まか分類で使いにくい場合は、URLグループを作成してデータを構成要素で分解して細分化すると使いやすくなります。例えば、以下によって分類できます。

• 異なるページタイプ：製品ページと検索ページ
• 異なるフォーム、API、またはユーザーグループ
• 認証済または未認証
• 異なるコンテンツ配信ネットワーク（CDN）

追加するセグメントを特定したら、New Relicのブラウザ監視UIのセグメント許可リストを使用して、それらのセグメントを追加できます。

設定方法

1. ブラウザモニタリングUIで、Settings > Segment allow listsの順に選択します。
2. Allow listed segmentsセクションで、+アイコンをクリックします。
3. ページビューとAJAXページのグループに表示するURLセグメントを入力します。

5. 適切なデータを取得する

データは必ず正しいソースから取得する

Browserデータは、JavaScriptエージェントのコピーが開発、ステージング、またはその他の環境などで重複している場合にも、エージェントがインストゥルメントされるすべての場所から生成されます。その結果、本稼動データに含めるべきではないデータがこれらのソースから追加されることがあります。ドメイン条件を使用すると、監視対象のウェブサイトのドメインからのデータを許可または拒否できます。

設定方法

1. ブラウザモニタリングUIで、Settings > Domain conditionsの順に選択します。
2. ドメイン条件が設定されていない場合は、Enable domain conditionsを選択します。条件が存在する場合は、Next, Choose your settingを選択します。
3. Deny OnlyまたはAllow Onlyを選択して、監視するドメインから収集するデータを指定します。次に、Next, Create conditionsを選択します。
4. データ収集を拒否または許可するドメインの条件文字列を入力します（10条件まで）。
5. ドメイン条件の設定を表示して確認します。

6. ソースマップをアップロード

ビルドプロセス中にパフォーマンスの最適化と縮小が行われたため、JavaScriptは、あなたとチームが作成したJavaScriptとは大きく異なる可能性があります。初代のJavaScriptファイルをアップロードして、初代のコードでのエラーが発生した場所を確認します。

設定方法

1. 当社のソースマップAPIを使用してJavaScriptをアップロードします。
2. CIパイプラインにステップを追加して、JavaScriptを更新するたびにソースマップを更新します。

7. サービスレベルの作成

Webパフォーマンスデータのサービスレベルを確立します。サービスレベルは以下の項目に役立ちます。

1. Webアプリケーションのパフォーマンスの標準レベルまたは望ましいレベルを決定します。
2. チーム、プロダクトオーナー、マネージャーとの間で、期待されるパフォーマンスレベルと目標パフォーマンスレベルを共有します。
3. チーム、プロダクトオーナー、マネージャーとの間で、異なる期間における実際のパフォーマンスと期待されるパフォーマンスを共有します。

設定方法

1. one.newrelic.com > Service levelsの順に移動します。
2. Add a service levelをクリックします。
3. エンティティタイプを「ブラウザ」にフィルタリングします。
4. ブラウザアプリを選択します。
5. サービスレベルを設定するSLIを選択します。少なくとも、成功率と最大視覚コンテンツの表示時間のサービスレベルを作成する必要があります。各SLIに個別のサービスレベルを作成する必要があります。
6. プロンプトに従って、閾値、コンプライアンス率、時間枠を設定します。過去の履歴に基づくデフォルト値は自動計算されますが、必要に応じて変更できます。

8. アラートを作成する

アラートポリシーを作成・評価する

Apdexスコアが閾値を超えると、どうなると思いますか？顧客を失う前に問題の原因を調査できるよう、閾値を越した際にアラートを受信できるようにしましょう。

New Relicには、常に内部の状況を把握できるように、Browserモニタリングを含むすべての製品に対して統一されたアラート機能があります。アラートは、Apdexスコアを監視するように設定することをお勧めします。以下のサンプルアラートを使用すると、すぐに作業を開始できます。

• Apdexスコア：スコアが5分間0.8未満になるとアラートを発令します。（Apdexスコアが0.8未満の場合は、20%以上のユーザーがウェブサイトの使用体験に「満足」していないことを意味します。）
• ページロードタイム：平均ページロードタイムが5分間10秒を超えるとアラートを発令します。（平均ページロードタイムのスパイクが始まると、ウェブページに何らかの不具合があり、その結果、処理速度が大きく低下していることを示しています。これは、Apdexスコアに対するアラートを補完します。
• JSエラー：エラー率が5分間5%を超えるとアラートを発令します。（フロントエンドのエラー率のスパイクが始まると（特にデプロイメント後）、フロントエンドに不良なJavaScriptを導入した可能性があり、修正が必要です）。

設定方法

1. one.newrelic.com > Alerts & AI > Alerts conditions（Policies）の順に移動します。
2. (+) New alert policyを選択して新規のアラートポリシーを作成し、意味のある名前を付けます。
3. Create a conditionをクリックして最初の条件を作成し、製品にBrowserを選択し、条件にMetricを選択します（デフォルト設定）。Nextをクリックして、エンティティを選択します。
4. アラートを発報するアプリケーションのチェックボックスをオンにし、Nextをクリックして閾値を定義します。
5. 目的のメトリックスを選択し、アラートをトリガーするタイミングを決定するための閾値を選択します。

9. 異常アラートの使用

異常な動作とイベントにアラートを発令する

単純に特定の閾値に対して検知できるメトリクスもありますが、周期性があったり、健全と見なされる範囲が変化するようなデータもあります。その良い例がトラフィックのスループットで、かなり周期性が変動しますが、トラフィックの低下やスパイクは、ユーザートラフィックを妨げている障害やDDoS攻撃によるトラフィックのスパイクを示す重要な指標である可能性があります。異常アラートは、正常な動作が期待される「帯域」を作成して、ノイズではなく重要なシグナルをアラートとして通知するのに役立ちます。

設定方法

1. one.newrelic.com > Alerts & AI > Alerts conditions（Policies）の順に移動します。
2. (+) New alert policyを選択して新規のアラートポリシーを作成し、意味のある名前を付けます。
3. Create a conditionをクリックして最初の条件を作成し、製品にBrowserを選択し、条件にMetric anomalyを選択します（デフォルト設定）。Nextをクリックして、エンティティを選択します。
4. アラートを発報するアプリケーションのチェックボックスをオンにし、Nextをクリックして閾値を定義します。
5. Page view throughputを選択し、アラートをトリガーするための正常範囲を定義します。

10. ワークフローにアラートを追加する

アラートをワークフローに統合する

異なるアラートポリシーを設定することにより、利用可能な異なるアラート通知チャネルを活用してチームのワークフローに統合できます。結局のところ、誰にも知られていないアラートには意味がありません。

アラートは、Slack、PagerDuty、Webhook、メールなどを介して送信できます。ChatOpsとのインテグレーションまたはアラートへのランブックのリンクなど、アラート通知を応答プロセスに連携させることもできます。アラートポリシーを定期的に評価して、常に有効であることを確認してください。

設定方法

1. one.newrelic.com > Alerts & AI > Alert conditions（Policies）> New alertの順に移動します。
2. Issue Creation Preferenceで、さまざまな通知チャネルを設定して、異なるアラートポリシーで使用できます。

11. ダッシュボードを作成する

独自のダッシュボードを作成

Browser監視は、自動的に必要な情報を収集して問題の優先順位を決定できますが、クエリビルダーを使用してフロントエンドデータのカスタムダッシュボードを作成することもできます。

New Relicチームは、数回クリックするだけでダウンロードできる人気の高いブラウザダッシュボードのコレクションを作成しました。

設定方法

ブラウザ例のクイックスタートから始める

1. ブラウザ例のクイックスタートに移動します。
2. 今すぐインストールをクリックします。
3. プロンプトに従ってダッシュボードをインストールします。
4. ダッシュボードの例を編集するか、クエリを使用してインスピレーションを得ます。

代わりに、ゼロから独自のBrowserデータチャートを作成することもできます。

1. one.newrelic.com > Query builderに移動します。
2. クエリビルダーのNRQLタブで、クエリをNRQL>クエリバーに貼り付け、Runをクリックします。
3. ウィジェットのタイトルを入力し、既存のダッシュボードまたは新しいダッシュボードのいずれかに追加します。
4. Dashboards UIに移動し、新しいダッシュボードを確認します。

詳細については、データのクエリとダッシュボードに関するドキュメントをご覧ください。

12. カスタムアトリビュートを追加してBrowserデータに価値を追加する

ユーザー、ビジネスなどでパフォーマンスを分析する

New Relic APIを活用することにより、技術、ユーザー、およびビジネスに関するパフォーマンスデータに不可欠なコンテキストを追加できます。モニタリングツールはすべて、New Relicにデータを送信します。これにより、ダッシュボードのカスタマイズ性と拡張性が大いに向上します。オムニチャネルエンゲージメントのために、さまざまなデータソース間（ブラウザとモバイル間など）でカスタムイベントとカスタム属性の命名を標準化してください。

以下に、測定できる対象の例をいくつか示します。

• ビルドID：バージョン間のA/Bテストの差にビルド番号を渡す。
• ユーザーID：VIP顧客を管理してその体験を追跡する。
• カート値：チェックアウト中にエラーが発生した場合に消失する可能性がある収益額を確認する。
• コンテンツタイプ：参照しているユーザーのコンテンツタイプを追跡する。
• ビデオ再生：ユーザーのメディアコンテンツの使用状況を確認する。

可能性は無限です。以上のように、この種のレポート機能は、アプリケーションのパフォーマンスがビジネスの他の領域に及ぼす影響の手がかりを提供します。

設定方法

• 当社のAPIを使用して、New Relicに人、もの、金額などに関するカスタムデータを渡します。
• one.newrelic.comを閲覧し、利用できるようになったカスタムデータを照会します。

詳細については、データのクエリとダッシュボードに関するドキュメントをご覧ください。

13. オブザーバビリティ成熟度ダッシュボードを使用してビジネスに合わせる

ウェブパフォーマンスはユーザーエクスペリエンスの鍵ですが、見過ごされることもあります。ユーザーエクスペリエンスを向上させるには、以下を行う必要があります。

1. パフォーマンスデータをユーザーが見る方法でグループ化します。ユーザーは平均や集計を体験しません。ユーザーセッションは1つの地域と1つのデバイスタイプに関連付けられます。通常、ユーザーはセッション中に1つ以上のユーザージャーニーを完了する際に、サイトの一部のみにアクセスします。
2. ユーザーのパフォーマンスに関するビジネスとの共有言語を作成し、優先事項と目標について協力できるようにします。

設定方法

• 品質の基礎ガイドで会話を始めてください。
• ファネル分析の下部でユーザーの成果を高めることに焦点を当てます。

ユーザー用の詳細なヒントが必要ですか？

• New Relic Universityでトレーニングビデオをご覧ください。
• ブラウザの監視に関するドキュメントをお読みください。
• チュートリアルウェブページをチェックしてください。
• 当社のコミュニティフォーラム、New Relicサポートフォーラムで質問する。