Angular Microsoft Application Insights

Utility library to easily configure Microsoft Application Insights into an Angular project.

Installation

Install dependencies first:

npm i @microsoft/applicationinsights-angularplugin-js @microsoft/applicationinsights-web

then install the package:

npm i @omaxel/angular-ms-app-insights

Usage

Configure the module in app.module.ts

AppInsightsModule.forRoot({
  connectionString: 'YOUR_CONNECTION_STRING',
  appName: 'YOUR_APP_NAME',

  // Optionals
  appVersion: 'YOUR_APP_VERSION',
  appBuildNumber: 'YOUR_APP_BUILD_NUMBER'
}),

In the app.component.ts file, call the init method:

import { Component } from '@angular/core';
import { AppInsightsService } from "@omaxel/angular-ms-app-insights";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(appInsightsService: AppInsightsService) {
    appInsightsService.init();
  }
}

Track custom events

You can call the trackEvent method of AppInsightsService to track a custom event:

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(private appInsightsService: AppInsightsService) { }

  onClick() {
    this.appInsightsService.trackEvent('my-event-name', { myProperty: 'my-value' });
  }
}