Getting started

Getting started with Pulse - Real User Monitoring

1. Install the client library:

Using our CDN

Add this snippet to your markup, before the closing </head> tag:

<script type="text/javascript">
    !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
    (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
    f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
    h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
    e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

 

Or manually

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

2. Implementation

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);
</script>

3. Add user data

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

rg4js('setUser', {
  identifier: 'users_email_address_or_unique_id@domain.com',
  isAnonymous: false,
  email: 'users_email_address@domain.com',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'
});

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

Single Page Applications

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

Raygun.trackEvent('pageView', { path: '/' + foo });

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. Pulse 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.

jQuery

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

AngularJS

app.run([‘$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()
    });
  });
}

Documentation missing?

If we don't have documentation about your desired topic, send us a message and we'll create it for you.