ブラウザモニタリングを開始するには、監視対象ビューのHTMLにBrowserエージェントを追加する必要があります。Browserエージェントは、アプリケーション/サイトのパフォーマンスを監視し、そのデータをNew Relicに送信する、JavaScriptコードのスニペットです。そのコードをサイトに手動で追加するか、APMエージェントを使用してそのコードを注入できます。
開始する前に
開始する前に、お使いのブラウザアプリが当社の互換性要件を満たしているかご確認ください。
当社のAPIを使用して、プログラムによるアプリケーションのモニタリングをご希望ですか？NerdGraphによるブラウザモニタリングを参照してください。
エージェントのインストール
Browserエージェントをインストールするには、one.newrelic.com > Add data > Browser and mobile > Browser monitoringに移動し、指示に従います。
インストールプロセスについてご質問がある場合は、インストール方法を参照してください。
New Relicでのデータ検索
Browserエージェントのインストールが完了したら、数分待って、ブラウザモニタリングUIでデータを検索します。
15分以上経ってもデータが表示されない場合は、トラブルシューティングを参照してください。
次のステップ
次の手順の概要：
- 概要ページでアプリのデータを表示します。
- Browserエージェントのインストゥルメントが完了したので、ウェブサイトの改善チュートリアルでデータを詳しく見てみましょう。
- ブラウザモニタリングのベストプラクティスガイドで、ブラウザモニタリング体験を最適化する方法を説明します。
インストール方法
Browserエージェントをウェブページに追加するには、次の2つのデプロイメント方法があります。
- APM + ブラウザモニタリング：当社のAPMエージェントのいずれかを使用して、ブラウザモニタリングを自動インストゥルメントする
- ブラウザモニタリングのみ：BrowserエージェントをJavaScriptスニペットとしてフロントエンドHTMLに手動で追加する
以下に、この2つの方法に関するガイダンスをご紹介します。
APM + ブラウザモニタリング
APM（アプリケーションパフォーマンス監視）エージェントを使用してブラウザアプリのバックエンドを監視している場合は、この方法を使用することをお勧めします。APMエージェントは、ウェブサイトのすべてのページにBrowserエージェントを自動的にデプロイし、APMエージェントを再起動するたびに最新バージョンのBrowserエージェントを自動取得するため、SPA以外のアプリにはこのオプションが最適です。
APMエージェントの動作をカスタマイズする場合は、APMエージェントAPIを使用できます。以下がそのドキュメントです。
ブラウザモニタリングのみ
SPAアプリがある場合や、APMエージェントが自動インジェクションに対応していない場合（Node.jsや一部のJavaアプリに該当）など、何らかの理由でAPMを使用できない場合に、この方法を使用します。この方法を使用すると、New Relic UIインストールプロセスの最後にカスタマイズされたJavaScriptスニペットを受け取り、それをアプリケーション/サイトで監視対象ページのHTMLに追加します。
JavaScriptスニペットは、アプリのビューの<head>タグに貼り付ける必要があります。通常、headタグはアプリのすべてのページに読み込まれるサードパーティのスクリプト、フォントなどの要素を扱うので、1つの場所に貼り付けるだけで済みます。これを<head>のできるだけ先頭近く、ただし、位置に依存するMETAタグ（X-UA-Compatibleやcharsetなど）の後に貼り付けてください。スニペットの配置について詳しくは、JavaScriptの配置要件を参照してください。