# Install the JavaScript tag

Install the Better Stack JavaScript tag to start collecting real user monitoring data: website analytics, web vitals, session replays, user events, and frontend errors. Install the snippet once. All collection features are managed remotely from the Better Stack UI, no redeploys needed.

## Install the snippet

1. [Connect an application](https://rum.betterstack.com/team/0/applications ";_blank") or open an existing one.
2. Open your application's **Frontend** tab and copy the `<script>` tag.
3. Place it before the closing `</head>` tag on every page you want to monitor:

```html
[label Install JavaScript tag]
<script>
  !function(b,e,t,r){
    b[t]=b[t]||function(...args){(b[t].q=b[t].q||[]).push(args)};
    b[t].l=+new Date;
    var s=e.createElement('script'); s.async=1; s.crossOrigin='anonymous';
    s.src='https://betterstack.net/b.js?t='+r;
    (e.head||e.getElementsByTagName('head')[0]).appendChild(s);
  }(window,document,'betterstack','$APPLICATION_TOKEN');
  betterstack('init', { environment: 'production' });
</script>
```

The snippet loads asynchronously and won't block page rendering. You never need to update it, as the remote script is always generated with your latest configuration.

## Initialize

The `betterstack('init', opts)` call starts data collection. You can pass the following options:

| Option | Type | Default | Description |
|---|---|---|---|
| `environment` | `string` | `undefined` | Environment name, e.g. `'production'` or `'staging'`. |
| `release` | `string` | `undefined` | App version or release identifier. |
| `autoPageview` | `boolean` | `true` | Automatically track page views. Set to `false` to track navigation manually. |
| `debug` | `boolean` | `false` | Log internal activity to the browser console. Useful during development. |

## What's collected by default

All collection features are enabled out of the box. Each can be toggled individually in the **Frontend** tab, see [Configure the JavaScript tag](https://betterstack.com/docs/rum/js-tag/configuration/).

![Application Frontend tab with the JavaScript tag snippet and collection toggles](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/67199db3-3250-47c6-8550-bffd365adb00/orig =2080x2124)

| Feature | Description |
|---|---|
| **Collect frontend errors** | Unhandled exceptions and promise rejections. |
| **Record web vitals** | Performance metrics like TTFB, FCP, and LCP. |
| **Collect console.logs** | `console.log`, `console.warn`, and `console.error` output. |
| **Record JS heap memory (Chrome)** | JavaScript heap memory usage. |
| **Record website analytics** | Page views, page leaves, and navigation events. |
| **Auto-capture anonymous user events** | Clicks, form submissions, and rage clicks for anonymous visitors. |
| **Record session replays** | DOM changes replayed visually. |
| **Auto-capture identified user events** | Interactions for users identified with `betterstack('user', ...)`. |
| **Collect browser fingerprint** | Browser fingerprint for cross-session user identification. |

## Track page views manually

Page views are tracked automatically. To send them yourself, set `autoPageview: false` in `init`, then track a page view on each navigation with `betterstack('track', ...)`:

```javascript
[label Track a page view manually]
betterstack('track', 'page-load', {
  url: window.location.href,
});
```

Use `'page-change'` for in-app navigation in single-page applications, and `'page-leave'` when the visitor leaves the page.

## Track custom events

Use `betterstack('track', eventName, data)` to send custom events with an arbitrary payload:

```javascript
[label Track a custom event]
betterstack('track', 'cta-button-click', {
  button_id: 'signup_cta',
  page: '/pricing',
  variant: 'blue',
});
```

Events appear in [Events](https://rum.betterstack.com/team/0/explore-events ";_blank") and can be used in [event funnels](https://betterstack.com/docs/rum/using-the-product/event-funnels/) and dashboards. The full event schema is documented in [JavaScript tag events](https://betterstack.com/docs/rum/js-tag/events/).

## Verify installation

1. Open your website in a browser.
2. Go to your application's **Frontend** tab and check the **Verify data collection** section that shows whether data has been received.
3. Open [Sessions](https://rum.betterstack.com/team/0/sessions ";_blank") to see your first sessions arriving.

## Next steps

- [Identify signed-in users](https://betterstack.com/docs/rum/identify-users/): link sessions, events, and replays to your users.
- [Configure the JavaScript tag](https://betterstack.com/docs/rum/js-tag/configuration/): collection toggles, sampling, session replays, privacy settings, and more.
- [JavaScript tag events](https://betterstack.com/docs/rum/js-tag/events/): schema of all captured events.