--- title: Install the browser agent source: https://docs.newrelic.com/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent --- To get started with browser monitoring, add our browser agent to the HTML of the views you want to monitor. The browser agent is a snippet of JavaScript code that monitors the performance of your site and sends that data to New Relic. ## Before you begin [#before-start] If you haven't done so, you may want to check that your browser app meets our [compatibility and requirements](https://docs.newrelic.com/docs/browser/new-relic-browser/getting-started/compatibility-requirements-browser-monitoring). ## Install the browser agent [#install] There are four ways to install the browser agent. Depending on your specific needs, you can: ### Install with 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](https://onenr.io/0KQXXZ6AaQa) 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. ### Get JavaScript via UI 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. [Get your browser snippet](https://onenr.io/0KQXXZ6AaQa) Once you have the snippet, paste it as close to the top of your `` tag as possible, but after any position-sensitive META tags (such as `X-UA-Compatible` and `charset`). For more detailed information about the placing the snippet, see [JavaScript placement requirements](https://docs.newrelic.com/docs/browser/new-relic-browser/page-load-timing-resources/instrumentation-browser-monitoring#javascript-placement). **Delay browser monitoring** > #### ⚠️ CAUTION > > Delaying instantiation causes the agent to miss information until it's fully loaded and initialized. The order of execution of these scripts does lead to some loss in instrumentation data from the start of page views. For possible performance or other reasons, you may wish to delay the initialization of the browser agent from the start of the page load cycle. You won't be able to use the `newrelic` API until the agent is fully initialized. This delay also creates incomplete data in your browser monitoring UI. Once the agent is fully initialized, it functions as expected. Any delay also affects when the agent wraps globals or subscribes to events relative to other libraries or code that affects captured data. You can delay the agent initialization in these ways: - Add a `script-src` tag with the `async` attribute. - Add a `script-src` tag with the `defer` attribute. - Use dynamic import or chronologically late placement of the loader code. Your page's `src` must point to a valid agent loader version in our CDN. For example, the URL that always contains our current Pro+SPA agent release is `https://js-agent.newrelic.com/nr-loader-spa-current.min.js`. [CSP is required](https://docs.newrelic.com/docs/browser/new-relic-browser/getting-started/compatibility-requirements-browser-monitoring#csp) to load external third-party scripts. To determine when you can start calling the `newrelic` API, subscribe to an event at the global scope: ```js window.addEventListener("newrelic", (evt) => { if (evt.detail.loaded) { // you can start using newrelic.interaction(), etc. now } }); ``` ### Install with APM 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 agent to monitor the backend of your browser app and you've got a non-[SPA](https://docs.newrelic.com/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: - [Go](https://docs.newrelic.com/docs/agents/go-agent/features/install-new-relic-browser-go-apps) - [Java](https://docs.newrelic.com/docs/agents/java-agent/instrumentation/page-load-timing-java) - [.NET](https://docs.newrelic.com/docs/agents/net-agent/features/page-load-timing-net) - [Node.js](https://docs.newrelic.com/docs/agents/nodejs-agent/supported-features/page-load-timing-nodejs) - [PHP](https://docs.newrelic.com/docs/agents/php-agent/features/page-load-timing-php) - [Python](https://docs.newrelic.com/docs/agents/python-agent/supported-features/page-load-timing-python) - [Ruby](https://docs.newrelic.com/docs/agents/ruby-agent/features/page-load-timing-ruby) ### Create JavaScript via NerdGraph If you'd prefer to create your browser snippet programmatically, you can do so via our NerdGraph, our GraphQL API. For more on this, see our [NerdGraph tutorial](https://docs.newrelic.com/docs/apis/nerdgraph/examples/browser-monitoring-config-nerdgraph/) to create a browser snippet and configure it. Once you have the snippet, add it to the `` tag of your app. > #### ⚠️ IMPORTANT > > 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](https://docs.newrelic.com/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). If it's been more than 15 minutes and you're not seeing data, see [troubleshoot your browser installation](https://docs.newrelic.com/docs/browser/browser-monitoring/troubleshooting/troubleshoot-your-browser-monitoring-installation/). Once you're seeing browser data in the UI, here are some next steps on how you can get the most out that data: - [View a high-level summary of your app data](https://docs.newrelic.com/docs/browser/browser-monitoring/getting-started/browser-summary-page). - [Monitor your core web vitals](https://docs.newrelic.com/docs/journey-performance/guide-to-monitoring-core-web-vitals). - [Learn how to optimize your browser monitoring experience](https://docs.newrelic.com/docs/new-relic-solutions/best-practices-guides/full-stack-observability/browser-monitoring-best-practices-guide).