Angular

The following docs are applicable to Angular 2+ only. Angular 1 (also known as AngularJS) has reached its EOL in January 2022 which, therefore, we no longer support.


Install Raygun via NPM.

NPM

npm install raygun4js

Yarn

yarn add raygun4js

Bun

bun add raygun4js

Add the following configuration into app.module.ts to enable Real User Monitoring.

import rg4js from 'raygun4js';

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enablePulse', true);

In the same file, extend your AppModule component to subscribe to Router events. Using Angular's NavigationEnd event we can track the exact pages a user has viewed.

import { Component, OnInit } from '@angular/core';
import { Router, NavigationError, NavigationEnd } from '@angular/router';

export class AppModule implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.subscribe(event => {
      // Track page views when the NavigationEnd event occurs
      if (event instanceof NavigationEnd) {
        rg4js('trackEvent', {
          type: 'pageView',
          path: event.url
        });
      }
    });
  }
}

This is just a simple example of tracking one type of Router Event, see the Angular Router Event documentation for all of the types of events you can track.

The provider is open source and available at the Raygun4js repository.