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.
Step 1: Install the Raygun4JS package
NPM
npm install raygun4js
Yarn
yarn add raygun4js
Bun
bun add raygun4js
Step 2: Enable Real User Monitoring
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('enableRealUserMonitoring', 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.