• English日本語한국어
  • Log inStart now

Install the browser agent

To get started with , you'll need to 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 app/site and sends that data to New Relic. You can add that code manually to your site, or use our APM agents to inject that code for you.

Before you begin

Before starting, you may want to check that your browser app meets our compatibility requirements.

Want to use our API to programmatically monitor your applications? See Browser monitoring with NerdGraph.

Install the agent

To install the browser agent: Go to one.newrelic.com > Add data > Browser and mobile > Browser monitoring and follow the instructions.

Install browser monitoring

If you have questions about the install process, see Install methods.

Look for your data in New Relic

When you're done installing the browser agent, wait a few minutes and look for the data in our browser monitoring UI.

If it's been more than 15 minutes and you're not seeing data, see Troubleshooting.

What's next?

Ideas for next steps:

Install methods

When it comes to adding the browser agent to your webpages, you have two deployment methods:

  • APM + browser monitoring: Use one of our APM agents to auto-instrument browser monitoring
  • Browser monitoring only: Add our browser agent manually as a JavaScript snippet to your front-end HTML

Here's some guidance on these two methods.

APM + browser monitoring

If you're using an APM (application performance monitoring) agent to monitor the backend of your browser app, then we'd recommend using this method. We recommend this option for non-SPA apps because the APM agent will automatically deploy the browser agent to every page of your website and you'll automatically get the latest version of the browser agent whenever you restart your APM agent.

If you want to customize APM agent behavior, you can use our APM agent APIs. Here are those docs:

Browser monitoring only

Use this method if you can't use APM for whatever reason, like if your APM agent isn't supported for auto-injection (as is true for Node.js and some Java apps). If you use this method, the UI provides you with a customized JavaScript snippet at the end of the install process that and you can add to the HTML of any pages you want to monitor on your site.

Paste the JavaScript snippet within the HTML <head> tag of your page. The head tag typically handles third party scripts, fonts, and other elements that load on all your app pages, so you only need to paste it into one place. Paste it as close to the top of the <head> as possible, but after any position-sensitive META tags (such as X-UA-Compatible and charset). For more about the snippet placement, see JavaScript placement requirements.

Alternatively, and while we STRONGLY recommend the inline script path, you can also use a src script to insert the agent in an async or defer manner. For caveats and details, continue below.

Delaying browser monitoring

Caution

Delaying instantiation causes the agent to miss information until it is 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 to load external third-party scripts.

To determine when you can start calling the newrelic API, subscribe to an event at the global scope:

window.addEventListener('newrelic', (evt) => {
if (evt.detail.loaded) {
// you can start using newrelic.interaction(), etc. now
}
})
<InstallFeedback />
export const _frontmatter = {"title":"Install the browser agent","tags":["Browser","Browser monitoring","Installation"],"translate":["jp","kr"],"metaDescription":"How to deploy browser monitoring in New Relic for your apps, including UI, copy/paste, and API options.","redirects":["/docs/browser/new-relic-browser/installation-configuration/adding-apps-new-relic-browser","/docs/browser/new-relic-browser/installation-configuration/add-apps-new-relic-browser","/docs/browser/new-relic-browser/installation/add-apps-new-relic-browser","/docs/browser/new-relic-browser/getting-started/adding-apps-new-relic-browser","/docs/browser/new-relic-browser/installation/install-new-relic-browser-agent","/docs/browser/new-relic-browser/installation/install-browser-monitoring-agent","/docs/browser/new-relic-browser/installation/monitor-amp-pages-new-relic-browser","/docs/monitor-amp-pages-new-relic-browser"],"freshnessValidatedDate":"never"}
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.