Monitor AMP pages with New Relic Browser

BETA

To collect performance data from HTML pages formatted for Google's Accelerated Mobile Pages (AMP) project, you must add New Relic Browser's AMP agent to your AMP pages. This agent leverages the amp-analytics agent to define the relevant New Relic events and send them to New Relic to be captured for reporting.

Compatibility and requirements

Browser's AMP agent is currently available as a public Beta. In addition to New Relic Browser's installation requirements, Browser's AMP agent requires:

Browser AMP requirements Comments
New Relic Browser

New Relic Browser requirements include Browser Pro account, which includes access to New Relic Insights data depending on your Browser subscription level.

Browser app ID

To capture AMP throughput, New Relic Browser needs the app ID for each app:

  1. Go to rpm.newrelic.com/browser and select an application from the index.
  2. Copy the numeric value that follows /browser/1234567890 in the URL.
Browser monitoring license key

To obtain only the browser monitoring license key:

  1. Go to rpm.newrelic.com/browser > Settings.
  2. Select and copy the generated JavaScript, and paste it into a text file.
  3. Delete everything in the text file except the browser monitoring license key (just above the ending </script> tag), and save.

Install Browser's AMP agent

New Relic has partnered with The Amp Project to incorporate New Relic Browser's AMP agent in with the AMP Analytics repo.

To install the Browser AMP agent into your AMP app:

  1. Add the attribute newrelic to your AMP analytics code. For more information, see the AMP site.
  2. Add the browser app ID and license key. To send data from one AMP page to multiple Browser apps, include quote marks and a comma to separate each Browser app ID. For example: "appId": ["123", "124", "125"]
<amp-analytics type="newrelic" id="newrelic">
<script type="application/json">
  {
    "vars": {
      "appId": "",
      "licenseKey": ""
    }
  }
</script>
</amp-analytics>

View reported AMP events in Insights

Currently, your AMP data will not appear in the New Relic Browser UI. This is intentional; any AMP data sent to the New Relic collector will be removed automatically from your Browser metrics.

In the meantime, use New Relic Insights to compare your AMP page to non-AMP pages. The dashboard data provides standard performance key metrics.

New Relic stores AMP events in the PageView and BrowserInteraction schemas. To view the AMP events, run the following Insights queries:

  • SELECT * FROM BrowserInteraction WHERE mobileOptimized = 'amp'
  • SELECT * FROM PageView WHERE mobileOptimized = 'amp'
New Relic Browser: AMP data in Insights
insights.newrelic.com > Event explorer: Here is an example of an Insights dashboard showing AMP event data after you install New Relic Browser's AMP JavaScript snippet into the body of your AMP pages.

AMP data dictionary

Here is a summary of the AMP data available in BrowserInteraction and PageView.

Insights variable AMP parameter

appId

The New Relic application ID.

Populated by NR AMP agent

asn

Autonomous System Number: A unique number identifying a group of IP networks that serves the content to the end user.

Derived from IP

asnLatitude

The latitude of the geographic center of the postal code where the Autonomous System Network is registered. This is not the end user's latitude.

Derived from IP

asnLongitude

The longitude of the geographic center of the postal code where the Autonomous System Network is registered. This is not the end user's longitude.

Derived from IP

asnOrganization

The organization that owns the Autonomous System Number. Often an ISP, sometimes a private company or institution.

Derived from IP

category

The type of interaction: Either initial page load, route change, or custom.

Value: Always page load

city

The city in which the event occurred; for example, Portland or Seattle.

From request

countryCode

The country from which the browser initiated the interaction. For a list of country codes, see ISO 3166-1 alpha-2.

From request

deviceType

The type of device that loaded the page: Either mobile, tablet, or desktop.

Value: Always mobile. Looking to derive device

duration

The total duration, in seconds, of the interaction event.

pageLoadTime

previousURL

The ungrouped URL in the browser at the start of the interaction.

Always blank (previousUrl is for route changes)

session

The unique ID for the session in which the event occurred.

clientId

targetUrl

The ungrouped URL in the browser at the end of the interaction.

ampdocUrl

timeToConnectStart

The time, in seconds, from the start of the interaction to the connectStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(connectStart)

timeToConnectEnd

The time, in seconds, from the start of the interaction to the connectEnd, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(connectEnd)

timeToDomComplete

The time, in seconds, from the start of the interaction to the domComplete, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(domComplete)

timeToDomContentLoadedEventStart

The time, in seconds, from the start of the interaction to the domContentLoadedEventStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(domContentLoadedEventStart)

timeToDomContentLoadedEventEnd

The time, in seconds, from the start of the interaction to the domContentLoadedEventEnd, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(domContentLoadedEventEnd)

timeToDomInteractive

The time, in seconds, from the start of the interaction to the domInteractive, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(domInteractive)

timeToDomLoading

The time, in seconds, from the start of the interaction to the domLoading, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(domLoading)

timeToDomainLookupStart

The time, in seconds, from the start of the interaction to the domainLookupStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(domainLookupStart)

timeToDomainLookupEnd

The time, in seconds, from the start of the interaction to the domainLookupEnd, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(domainLookupEnd)

timeToFetchStart

The time, in seconds, from the start of the interaction to the fetchStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(fetchStart)

timeToLoadEventStart

The time, in seconds, from the start of the interaction to the loadEventStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(loadEventStart)

timeToLoadEventEnd

The time, in seconds, from the start of the interaction to the loadEventEnd, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(loadEventEnd)

timeToRequestStart

The time, in seconds, from the start of the interaction to the requestStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(requestStart)

timeToResponseStart

The time, in seconds, from the start of the interaction to the responseStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(responseStart)

timeToResponseEnd

The time, in seconds, from the start of the interaction to the responseEnd, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(responseEnd)

timeToSecureConnection

The time, in seconds, from the start of the interaction to the secureConnectionStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

${navTiming(secureConnectionStart)

timeToUnloadEventStart

The time, in seconds, from the start of the interaction to the unloadEventStart, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(unloadEventStart)

timeToUnloadEventEnd

The time, in seconds, from the start of the interaction to the unloadEventEnd, as defined by the Navigation Timing API. This attribute exists for initial page load events, not route changes.

$navTiming(unloadEventEnd)

timestamp

The time (date, hour, minute, second) at which the interaction occurred.

timestamp

trigger

The cause of the route change or page load. The default values are click, submit, popstate, or initial page load. For a custom event created with the API, the default value for trigger will be api. This value can also be set via the API.

Possible values: Initial page load, click

userAgentName

The end user's browser type.

From request

userAgentVersion

The end user's browser version.

From request

userAgentOS

The end user's operating system.

From request

Replace copy/pasted agent with library reference

If you previously copy/pasted New Relic Browser's AMP agent JS Snippet onto your AMP pages, you can now pull the snippet from AMP Analytics instead. Remove New Relic Browser's AMP agent JS snippet from your AMP pages, and then follow the instructions to install Browser's AMP agent.

For more help

During the Beta period, email your AMP feedback to the New Relic Browser team.

Recommendations for learning more: