addPageAction

Syntax

newrelic.addPageAction(string $name[, JSON object $attributes])

Reports a browser PageAction event along with a name and optional attributes.

Requirements

• Browser Pro or Pro+SPA agent (v593 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:

  import { GenericEvents } from '@newrelic/browser-agent/features/generic_events';
  
  const options = {
    info: { ... },
    loader_config: { ... },
    init: { ... },
    features: [
      GenericEvents
    ]
  }

  Copy

  For more information, see the npm browser installation documentation.

Description

This API call sends a browser PageAction event with your user-defined name and optional attributes to dashboards, along with several default attributes. This is useful to track any event that is not already tracked automatically by the browser agent, such as clicking a Subscribe button or accessing a tutorial.

• PageAction 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

Examples

Record link clicks (JavaScript)

This example records a PageAction event whenever a user selects the Try Me link. The event is recorded with an actionName of clickedTryMe:

<a href="/demo" id="try-me">Try Me!</a>
<script>
  document.getElementById('try-me').addEventListener('click', function (e) {
    newrelic.addPageAction('clickedTryMe');
  });
</script>

You can then query the number of times the Try Me button was clicked with the following NRQL query:

SELECT count(*) FROM PageAction WHERE actionName = 'clickedTryMe' SINCE 1 hour ago

Record link clicks (jQuery)

This example sends a PageAction event when a user clicks on an element with the class copy-text. The actionName is copy-text-button and the value is reported as another attribute called Result that corresponds to methods named success and error that handle the outcome.

$('.copy-text').click(function() {
    var clipboard = new Clipboard('.copy-text');
    clipboard.on('success', function(event) {
        // Do stuff
        // Report data to New Relic
        if (typeof newrelic == 'object') {
            newrelic.addPageAction('copy-text-button', { result: 'success' });
        }
    });
    clipboard.on('error', function(event) {
        // Do stuff
        // Report data to New Relic
        if (typeof newrelic == 'object') {
            newrelic.addPageAction('copy-text-button', { result: 'error' });
        }
    });
});

Then in the query builder, you can create a pie chart to see the breakdown of how many button clicks resulted in success versus error over the past 30 days:

SELECT count(*) AS 'Clicks' FROM PageAction WHERE actionName = 'copy-text-button' FACET result SINCE 30 days ago

Or you can create a query to see what pages have the most copy button clicks in the last 30 days:

SELECT count(*) AS 'Clicks' FROM PageAction WHERE actionName = 'copy-text-button' FACET currentUrl SINCE 30 days ago

Capture form input

This example captures user input (email addresses) from a form called Signup. The event is recorded with an actionName of userSignup:

<form action="/signup" id="myform">
  <input id="email" name="email" />
  <input type="submit" value="Signup" />
</form>
<script type="text/javascript">
  document.getElementById('myform').addEventListener('submit', function (e) {
    var email = e.target.elements['email'].value;
    newrelic.addPageAction('userSignup', { email: email });
  });
</script>

You can then see the emails that you gathered with the following NRQL query:

SELECT uniques(email) FROM PageAction WHERE actionName = 'userSignup' SINCE 1 hour ago