Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Daily release/12 18 24 night #19574

Merged
merged 18 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
---
title: recordCustomEvent
type: apiDoc
shortDescription: Reports a custom browser event under a specified eventType with custom attributes.
tags:
- Browser
- Browser monitoring
- Browser agent and SPA API
metaDescription: Browser API call to report a custom browser event under a specified eventType with custom attributes.
redirects:
- /docs/browser/new-relic-browser/browser-agent-apis/browser-api-newrelicaddpageaction
- /docs/browser/new-relic-browser/browser-agent-api/browser-api-newrelicaddpageaction
- /docs/browser/new-relic-browser/browser-agent-spa-api/newrelicaddpageaction-browser-agent-api
- /docs/browser/browser-monitoring/browser-agent-and-spa-api
- /docs/browser/new-relic-browser/browser-agent-spa-api/view-all-methods
- /docs/browser/new-relic-browser/browser-agent-spa-api/add-page-action
freshnessValidatedDate: never
---

## Syntax [#syntax]

```js
newrelic.recordCustomEvent(string $eventType[, JSON object $attributes])
```

Reports a custom browser event under a specified eventType with custom attributes.

## Requirements

* Browser Pro or Pro+SPA agent (v1.277.0 or higher)
* If you're using npm to install the browser agent, you must enable the `generic_events` feature when instantiating the `BrowserAgent` class. In the `features` array, add the following:

```js
import { GenericEvents } from '@newrelic/browser-agent/features/generic_events';

const options = {
info: { ... },
loader_config: { ... },
init: { ... },
features: [
GenericEvents
]
}
```

For more information, see the [npm browser installation documentation](https://www.npmjs.com/package/@newrelic/browser-agent#new-relic-browser-agent).

## Description [#description]

This API call sends a custom browser event with your user-defined eventType and optional attributes to [dashboards](/docs/query-your-data/explore-query-data/dashboards/introduction-new-relic-one-dashboards), along with any custom attributes you may have set for your application. This is useful to track any event that is not already tracked automatically by the browser agent enhanced by rules and attribution you control.

* `custom` events are sent every 30 seconds.
* If 1,000 events are observed, the agent will harvest the buffered events immediately, bypassing the harvest cycle interval.

## Parameters [#parameters]

<table>
<thead>
<tr>
<th width="25%">
Parameter
</th>

<th>
Description
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
`$eventType`

_string_
</td>

<td>
Required. The eventType to store the event data under

Avoid using [reserved NRQL words](/docs/insights/event-data-sources/custom-events/data-requirements-limits-custom-event-data/#reserved-words) or pre-existing eventTypes when you name the attribute or value.
</td>
</tr>

<tr>
<td>
`$attributes`

_JSON object_
</td>

<td>
Optional. JSON object with one or more key/value pairs. For example: `{key:"value"}`. The key is reported as its own `PageAction` attribute with the specified values.

Avoid using [reserved NRQL words](/docs/insights/event-data-sources/custom-events/data-requirements-limits-custom-event-data/#reserved-words) when you name the attribute/value.
</td>
</tr>
</tbody>
</table>

## Important considerations and best practices include:

You should aim to limit the total number of event types to approximately five. Custom eventTypes are meant to be used to encapsulate high-level categories. For example, you might create an event type Gestures.

Do not use eventType to name custom events. Create eventTypes to house a category of data and attributes within that category to name an event or use the optional name parameter. While you can create numerous custom events, it's important to keep your data manageable by limiting the number of eventTypes reported.

## Examples [#examples]

### Record link clicks (JavaScript) [#example-link-click-js]

This example records a custom event whenever a user clicks the <DNT>**Submit**</DNT> button in a form. The event is recorded with an `eventType` of `FormAction`, which was used to contain many events related to actions taken on a form:

```html
<a href="/demo" id="try-me">Try Me!</a>
<script>
document.getElementById('submit').addEventListener('click', function(e) {
newrelic.recordCustomEvent('FormAction', { element: 'submit', action: 'click' });
})
</script>
```

You can then query the number of times the <DNT>**Submit**</DNT> button was clicked with the following NRQL query:

```sql
SELECT count(*) FROM FormAction WHERE element = 'submit' AND action = 'click' SINCE 1 hour ago
```

Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@ freshnessValidatedDate: never
---

<Callout variant="important">
This is an experimental browser feature and is subject to change. Use this feature with caution. It's available only with the browser agent installed via copy/paste or NPM.
This is an experimental browser feature and is subject to change. Use this feature with caution. Experimental features are available only for opt in manually with copy and paste or NPM implementations of the agent. To gain access for APM-injected applications, reach out to your support representative. For more information on opting in, refer to [experimental features](/docs/browser/new-relic-browser/configuration/experimental-features).
</Callout>


[Marks](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) and [measures](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure) are standard methods to observe and report on the performance of your webpages. They're generic events native to the browser. You can use them to measure the duration of any task. The New Relic browser agent can automatically track marks and measures as store them as `BrowserPerformance` events.

## Enable marks and measures monitoring [#enable-feature]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ freshnessValidatedDate: never
[Resource Assets](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming) are reported natively by all major browser and allows you to observe and report on the performance of the assets your webpages import. New Relic Browser can automatically track these assets as `BrowserPerformance` events.

<Callout variant="important">
This feature is currently experimental and available only for opt-in on manual copy and paste, or NPM implementations of the agent. For more information on opting in, refer [experimental features](/docs/browser/new-relic-browser/configuration/experimental-features). Note that these features are subject to changes before GA.
This is an experimental browser feature and is subject to change. Use this feature with caution. Experimental features are available only for opt-in manually with copy and paste or NPM implementations of the agent. To gain access for APM-injected applications, reach out to your support representative. For more information on opting in, refer to [experimental features](/docs/browser/new-relic-browser/configuration/experimental-features).
</Callout>

Page resources detected by the browser agent will be queryable through the `BrowserPerformance` event type. You can use this data to create custom queries and dashboards in [New Relic One](/docs/new-relic-one/use-new-relic-one/get-started/introduction-new-relic-one).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ metaDescription: "Opt-in to use experimental features in New Relic browser monit
freshnessValidatedDate: never
---

New Relic Browser features are exposed to customers in a controlled manner to ensure stability and reliability. However, some features are made available before they reach general availability. These are known as experimental features. To access them, you must opt in.
New Relic Browser features are released gradually to ensure stability and reliability. However, you can opt in to avail yourself of some features before their GA. These are known as experimental features.

## Current experimental features

Expand All @@ -14,12 +14,12 @@ The following experimental features are available in New Relic Browser:


<Callout variant="important">
Experimental features are available only for opt-in on manual copy and paste, or NPM implementations of the agent. These features are subject to change and should be used with caution.
Experimental features are available only for opting in manually with copy and paste or NPM implementations of the agent. To gain access for APM-injected applications, reach out to your support representative. Experimental features are subject to change and should be used with caution.
</Callout>

## Opt in to use experimental features
## Manually opt in to use experimental features

### Browser Performance - Marks, Measures & Resources
### Copy/paste implementation of Browser Performance - Marks, Measures & Resources
1. Ensure you are using a version of the New Relic Browser agent compatible with the experimental feature, on a pro or pro+spa equivalent build.
2. Find the New Relic browser agent code in your webpage HTML or JS application.
3. In the `init` configuration object, add the `performance` feature configuration. Here's an example that enables both marks and measures detection:
Expand All @@ -36,3 +36,37 @@ The following experimental features are available in New Relic Browser:
} }:
```
4. Deploy your app.

### NPM implementation of Browser Performance - Marks, Measures & Resources
1. Ensure you are using a version of the New Relic Browser agent compatible with the experimental feature.
2. Find the New Relic browser agent constructor in your application's implementation.
3. In the `init` configuration object, add the `performance` feature configuration. Here's an example that enables both marks and measures detection:
```js
import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'

// Populate using values in copy-paste JavaScript snippet.
const options = {
init: {
// ... other configurations
performance: {
capture_marks: true, // enable to capture browser performance marks (default false)
capture_measures: true // enable to capture browser performance measures (default false)
resources: {
enabled: true, // enable to capture browser peformance resource timings (default false)
asset_types: [], // Asset types to collect -- an empty array will collect all types (default []). See https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/initiatorType for the list of types.
first_party_domains: [], // when included, will decorate any resource as a first party resource if matching (default [])
ignore_newrelic: true // ignore capturing internal agent scripts and harvest calls (default true)
}
}
},
info: { ... },
loader_config: { ... }
}

// The agent loader code executes immediately on instantiation.
new BrowserAgent(options)
```
See the [NPM package documentation](https://www.npmjs.com/package/@newrelic/browser-agent) for more information on how to configure the agent via NPM.

## Opt in for APM injected applications
APM-served web applications can opt-in to experimental features by reaching out to your support representative, by filing a help ticket or by emailing `[email protected]` with a subject line starting with `[Experimental Features]: `.
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,7 @@ To enable and use custom attributes for APM, follow the procedure for your <Inli

## Browser monitoring: Record custom attributes [#collecting_browser]

The browser agent provides an API to specify extra details associated with a page view or browser interaction, either by [forwarding attributes from APM to browser monitoring](/docs/insights/insights-data-sources/custom-data/insert-data-via-new-relic-browser#custom-attribute-forward-apm) or by [specifying custom attributes through JavaScript](/docs/browser/new-relic-browser/browser-agent-spa-api/set-custom-attribute). Values forwarded from the APM agent are encoded and injected into browser attributes by our browser agent.
The browser agent provides an API to specify extra details associated with browser events across a page load, either by [forwarding attributes from APM to browser monitoring](/docs/insights/insights-data-sources/custom-data/insert-data-via-new-relic-browser#custom-attribute-forward-apm) or by [specifying custom attributes through JavaScript](/docs/browser/new-relic-browser/browser-agent-spa-api/set-custom-attribute). Values forwarded from the APM agent are encoded and injected into browser attributes by our browser agent.

## Infrastructure monitoring: Record custom attributes [#collecting_browser]

Expand Down
Loading
Loading