Install the client library

Using our CDN

Add this snippet to your markup, before the closing tag:

<script type="text/javascript">
    h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({

Or manually

Download the production script (minified), the development script (full source) or see our documentation for installing with Bower, NPM or NuGet.


Add the following lines to your JS site code and paste in your API key (from Raygun), to set up the provider to automatically send session data to your Raygun account:

<script type="text/javascript">
  rg4js('apiKey', 'paste_your_api_key_here');
  rg4js('enablePulse', true);

Add user data

Set up the library to transmit data for the currently logged-in user:

rg4js('setUser', {
  identifier: '',
  isAnonymous: false,
  email: '',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'

You can then browse to pages on your site, and data will be transmitted and appear in your Real User Monitoring dashboard.

Single Page Applications

Real User Monitoring also supports SPAs built with client-side technologies like Angular, Ember, Backbone etc. You can track SPA view change events through the trackEvent function:

rg4js('trackEvent', {
  type: 'pageView',
  path: '/' + window.location.pathname // Or perhaps window.location.hash

When a route or view change is triggered in your SPA, this function should be called with pageView as the first parameter and an object with a path key set to a path representing the new view or route. Real User Monitoring will collect up all timing information that is available and send it to the dashboard. These are then viewable as ‘virtual pages’.

The following are a couple of configuration examples that you can use or adapt for your client-side view library/framework. Naturally, if you are using a more full-featured routing system, you should trigger a pageView inside there when the route changes.


$(window).hashchange(function() {
  Raygun.trackEvent('pageView', {
    path: '/' + location.hash

AngularJS['$rootScope', '$window', '$location', trackPageView]);

function trackPageView($rootScope, $window, $location){
  // watch for successful state transitions
  $rootScope.$on('$locationChangeSuccess', function (event, current) {
    $window.Raygun.trackEvent('pageView', {
      path: $location.url()

tip: Set up your path segment rules in Real User Monitoring Settings to group URLs based on your routing scheme.