Webサイトのエンドユーザーがブラウザ上でどのような体験をしているか気になりませんか？New RelicのBrowserエージェントを使うことで『体感として遅くないか？』『JSエラーが起きていて実は使えていないことはないか？』など把握することで開発運用ともにプロアクティブに気づいて対応しやすくなります。
こちらの記事では、Browserエージェントの4つのインストール方法を紹介します。データ連携後の使い方については別記事でご紹介します。
詳細は下記の公式ガイドを参照ください。
↓↓↓ 公式ガイドはこちら
4つのインストール方法
New RelicのBrowserエージェントには4つのインストール方法があります。
-
UIからJavaScriptスニペットを生成 -
APMエージェントを使用 -
NerdGraphでJavaScriptスニペットを生成 -
npmパッケージを使用
ちなみに、監視対象となるWebサイトがシングルページアプリケーション(SPA)かどうかでインストール方法として使用できるか決まるのでご注意ください。
|
|
|
|
|
|---|---|---|---|---|
| SPA |
 計装可能 |
 計装不可 |
計装可能 |
計装可能 |
| 非SPA |
計装可能 |
計装可能 |
計装可能 |
計装可能 |
UIからJavaScriptスニペットを生成
最も簡単な方法は、New RelicのUIを使用してJavaScriptスニペットを生成する方法です。
生成されたスニペットをHTMLの<head>タグのできるだけ先頭に配置します。
New Relicにログインして下記に移動します。
one.newrelic.com > Integrations & Agents > Browser monitoring
[Place a JavaScript snippet in frontend code]を選択して、画面の指示に従ってJavaScriptスニペットを生成したら、生成されたスニペットを、HTMLの<head>タグのできるだけ先頭に配置します。
詳細は下記を参照ください。
APMエージェントを使用
この方法はシングルページアプリケーション（SPA）では使用できません。
既にAPMエージェントを使用していて、かつ、非SPAの場合はこの方法が簡単になります。
手動でスニペットを追加する必要が無く、APMエージェントを再起動すると最新バージョンのBrowser Agentが自動的に使用されます。
各APMエージェントでBrowserエージェントのインストールの設定が異なるので公式ガイドを参照ください。
NerdGraphでJavaScriptスニペットを生成
NerdGraphを使用してJavaScriptスニペットを生成する方法です。
生成されたスニペットをアプリケーションの<head>タグに追加します。
この方法は、の方法と似ていますが、複数のアプリケーションに一括で導入する場合や、CI/CDパイプラインに組み込みたい場合に適しています。
詳細は下記を参照ください。
npmパッケージを使用
React、Angular、Vue.jsなどのモダンなJavaScriptフレームワークを使用したSPAに適した方法で、npmパッケージを使用してBrowserエージェントをインストールします。
詳細は下記を参照ください。
まとめ
Browserエージェントの4つのインストール方法を紹介しました。
監視対象とするWebサイトの特性に合わせてインストール方法を使い分けてください。
インストール後にエンドユーザーがブラウザでアクセスするとテレメトリーデータがNew Relicに送付され、New Relicのプレビルドの画面を使用して分析できます。左側のメニューから[Browser]を選択するか、もし、見つからない場合は[All Capabilities]から[Browser]を選択してください。
New Relicのプレビルドの画面の使用方法については別記事で紹介したいと思います。
また、New Relic Browserを含む デジタルエクスペリエンスモニタリング（DEM） に関する記事もありますので、参考にしてみてください。
その他
New Relicでは、新しい機能やその活用方法について、QiitaやXで発信しています！
無料でアカウント作成も可能なのでぜひお試しください！
New Relic株式会社のX(旧Twitter) や Qiita OrganizationOrganizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！