• English日本語한국어
  • ログイン今すぐ開始

Install the browser agent

To get started with browser monitoring, you'll need to add our browser agent, a customized JavaScript code snippet, to your webpage HTML. Then the browser agent will monitor your app's performance and send that data to New Relic.

Follow the steps below to create a browser app in our UI, configure the browser agent, and then instrument your webpages with the agent.

Before you begin

Check to see if your browser app meets these compatibility requirements:

Step 1 of 6

Create a browser app in our UI

First, create a browser app in our UI by going to one.newrelic.com. Click Add data, then under Data sources select Browser monitoring.

Add your browser app in the UI

ヒント

Need to use an API to create a browser app? Check out this NerdGraph tutorial.

Step 2 of 6

Choose a deployment method

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

  • Method 1: Enable via New Relic APM (recommended for non-SPA apps)

    • If you're using an

      (application performance monitoring) agent to monitor the backend-side of your browser app, then you should use this APM option. 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.

    または

  • Method 2: Copy/Paste JavaScript code (recommended for SPA apps)

    • Use this method if you can't use the first option, due to reasons like you have a SPA app or your APM agent isn't supported for auto-injection ( Node.js, Java agents). If you choose this option, you'll copy the customized JavaScript snippet at the final step in the UI, once all configurations have been made, and paste it into your app's HTML.

    In the UI, select a deployment method and move on to the next step.

    choose a deployment method
Step 3 of 6

(Optional) Enable distributed tracing

Next, you can choose to enable distributed tracing to help understand how your app's frontend and backend activity are connected. Read more about distributed tracing here.

enable distributed tracing
Step 4 of 6

Name your browser app

When selecting a name for your browser app, you've got two options:

  • Select an existing app already monitored by an APM agent.

  • Create a new name for a standalone browser app.

    Choose one of these options and click Enable.

    name or connect an existing browser app
Step 5 of 6

(For copy/paste method only) Inject the JavaScript snippet

If you selected the copy/paste option, it's time to add the JavaScript snippet to your browser app's HTML.

In the UI, copy the JavaScript snippet that's been customized for your app instrumentation, and paste it into the <head> tag for your web app.

ヒント

The head tag typically handles third party scripts, fonts, etc., that load on all your app pages, so you'll only need to paste it into one place. Make sure to 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 information on the snippet placement, see JavaScript placement requirements.

copy and paste the js snippet from the UI

The JavaScript snippet is blurred in this screenshot because it contains sensitive data (account ID, license key, etc.). You must copy and paste your own unique JavaScript snippet from the UI.

ヒント

Need to use our APM agent's API to add the JavaScript snippet? Check out these agent-specific instructions:

Step 6 of 6

Generate traffic for your app

Congratulations, you're done installing the browser agent! Now you'll need to generate traffic for your app and wait a few minutes for data to appear in New Relic.

ヒント

Not seeing data?

It may take several minutes after enabling the browser monitoring agent before your webpage data appear in New Relic. If you're still not seeing data, check out common browser installation problems and solutions.

次のステップ

このドキュメントはインストールで役立ちましたか。

Copyright © 2023 New Relic Inc.

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