diff --git a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx index f812a0577d5..e85a53f3145 100644 --- a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx +++ b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx @@ -32,6 +32,10 @@ There are four ways to install the browser agent. Depending on your specific nee + + Install with npm + + Get JavaScript via UI @@ -43,13 +47,25 @@ There are four ways to install the browser agent. Depending on your specific nee Create JavaScript via NerdGraph - - - Install via NerdGraph and npm - + + Go to **[one.newrelic.com](https://one.newrelic.com) > Integrations & Agents > Browser and mobile > Browser monitoring** and follow the instructions to generate the browser npm snippet in the UI. + + + + Get your browser snippet + + + + Once you have the snippet, paste it at the first line of your source file, before any other code. This ensures that the browser agent is loaded before any other scripts execute. + + Go to **[one.newrelic.com](https://one.newrelic.com) > Integrations & Agents > Browser and mobile > Browser monitoring** and follow the instructions to generate the browser JavaScript snippet in the UI. @@ -67,8 +83,6 @@ There are four ways to install the browser agent. Depending on your specific nee For more detailed information about the placing the snippet, see [JavaScript placement requirements](/docs/browser/new-relic-browser/page-load-timing-resources/instrumentation-browser-monitoring#javascript-placement). - (If you'd like to install the browser agent via npm, see our [`@newrelic/browser-agent` package](https://www.npmjs.com/package/@newrelic/browser-agent).) - With an APM agent, you can deploy browser monitoring without manually adding the snippet to your code. When you restart the agent, it automatically uses the latest version of the browser agent. - If you're using an APM (application performance monitoring) agent to monitor the backend of your browser app and you've got a non-[SPA](/docs/browser/single-page-app-monitoring/get-started/introduction-single-page-app-monitoring) app, then we recommend using this method. + If you're using an APM agent to monitor the backend of your browser app and you've got a non-[SPA](/docs/browser/single-page-app-monitoring/get-started/introduction-single-page-app-monitoring) app, then we recommend using this method. There are specific steps for each APM agent: @@ -125,14 +139,16 @@ There are four ways to install the browser agent. Depending on your specific nee Once you have the snippet, add it to the `` tag of your app. - - If you want to automate browser monitoring deployment across multiple web apps, you can use NerdGraph and our browser agent npm package to configure and deploy the agent as part of your application build process. - - For more on this, see [instrument multiple apps with npm and NerdGraph](/docs/apis/nerdgraph/examples/combining-npm-nerdgraph/). - + + + If you want to automate browser monitoring deployment across multiple web apps, you can use NerdGraph and our browser agent npm package to configure and deploy the agent as part of your application build process. + + For more on this, refer to [instrument multiple apps with npm and NerdGraph](/docs/apis/nerdgraph/examples/combining-npm-nerdgraph/). + + ## What's next? [#whats-next] When you've installed the browser agent, wait a few minutes and look for the data in [our browser monitoring UI](https://one.newrelic.com/nr1-core?filters=%28domain%3D%27BROWSER%27%20AND%20type%3D%27APPLICATION%27%29&state=1f7bae2d-dd3a-0027-3079-b60bcd19ded9&_gl=1*15f78ub*_ga*MTE0MTA2MTA5MS4xNzE4OTI0MDkw*_ga_R5EF3MCG7B*MTcyMTMxMzk2MC41Ny4xLjE3MjEzMTg2MzcuNDcuMS4xMDYwNTI3Njcw).