Webサイトのユーザー体験を把握！〜4つのインストール方法〜

Webサイトのエンドユーザーがブラウザ上でどのような体験をしているか気になりませんか？New RelicのBrowserエージェントを使うことで『**体感として遅くないか？**』『**JSエラーが起きていて実は使えていないことはないか？**』など把握することで開発運用ともにプロアクティブに気づいて対応しやすくなります。

こちらの記事では、**Browserエージェントの4つのインストール方法**を紹介します。データ連携後の使い方については別記事でご紹介します。

**詳細は下記の公式ガイドを参照ください。**

**↓↓↓ 公式ガイドはこちら**

https://docs.newrelic.com/jp/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent/

# 4つのインストール方法

New RelicのBrowserエージェントには4つのインストール方法があります。

- :one: UIからJavaScriptスニペットを生成
- :two: APMエージェントを使用
- :three: NerdGraphでJavaScriptスニペットを生成
- :four: npmパッケージを使用

ちなみに、監視対象となるWebサイトがシングルページアプリケーション(SPA)かどうかでインストール方法として使用できるか決まるのでご注意ください。

|  | :one: |:two: |:three: |:four:|
|:-|:-:|:-:|:-:|:-:|
| SPA  | :ok: 計装可能 | :no_entry_sign: 計装不可|:ok: 計装可能 |:ok: 計装可能|
| 非SPA | :ok: 計装可能| :ok: 計装可能 |:ok: 計装可能 |:ok: 計装可能|

# :one: UIからJavaScriptスニペットを生成
最も簡単な方法は、**New RelicのUIを使用してJavaScriptスニペットを生成する方法**です。
**生成されたスニペットをHTMLの\<head>タグのできるだけ先頭に配置**します。

New Relicにログインして下記に移動します。
one.newrelic.com > Integrations & Agents > Browser monitoring

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/14c1c189-c689-1c3e-7a70-807c4a678dcf.png)

[Place a JavaScript snippet in frontend code]を選択して、画面の指示に従ってJavaScriptスニペットを生成したら、生成されたスニペットを、HTMLの\<head>タグのできるだけ先頭に配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/d773a5be-5730-49c1-6e26-fb3674594d2b.png)

詳細は下記を参照ください。

https://docs.newrelic.com/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent/#1

# :two: APMエージェントを使用
:::note warn
この方法はシングルページアプリケーション（SPA）では使用できません。
:::
既に**APMエージェントを使用していて、かつ、非SPAの場合**はこの方法が簡単になります。
手動でスニペットを追加する必要が無く、**APMエージェントを再起動すると最新バージョンのBrowser Agentが自動的に使用**されます。

**各APMエージェントでBrowserエージェントのインストールの設定**が異なるので公式ガイドを参照ください。

https://docs.newrelic.com/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent/#2



# :three: NerdGraphでJavaScriptスニペットを生成
**NerdGraphを使用してJavaScriptスニペットを生成する方法**です。
生成された**スニペットをアプリケーションの\<head>タグに追加**します。
この方法は、:one:の方法と似ていますが、**複数のアプリケーションに一括で導入する場合や、CI/CDパイプラインに組み込みたい場合**に適しています。

詳細は下記を参照ください。

https://docs.newrelic.com/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent/#3

# :four: npmパッケージを使用
React、Angular、Vue.jsなどの**モダンなJavaScriptフレームワークを使用したSPAに適した方法**で、**npmパッケージを使用してBrowserエージェントをインストール**します。

詳細は下記を参照ください。

https://docs.newrelic.com/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent/#4

# まとめ
Browserエージェントの**4つのインストール方法を紹介**しました。
監視対象とする**Webサイトの特性に合わせてインストール方法を使い分け**てください。

インストール後にエンドユーザーがブラウザでアクセスするとテレメトリーデータがNew Relicに送付され、**New Relicのプレビルドの画面を使用して分析**できます。左側のメニューから[Browser]を選択するか、もし、見つからない場合は[All Capabilities]から[Browser]を選択してください。
**New Relicのプレビルドの画面の使用方法については別記事で紹介**したいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/1b334117-2ca0-7e6d-df12-7bd34e94ec4e.png)

また、New Relic Browserを含む **デジタルエクスペリエンスモニタリング（DEM）** に関する記事もありますので、参考にしてみてください。

https://qiita.com/ktst79/items/d445b0527007b748e99b

# その他

New Relicでは、**新しい機能やその活用方法**について、QiitaやXで発信しています！
**無料でアカウント作成**も可能なのでぜひお試しください！

:::note info
New Relic株式会社の[X(旧Twitter)](https://x.com/NewRelicJapan) や [Qiita OrganizationOrganization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::

:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::