Track Page Views using Application Insights

To track page views in an Angular application using Azure Application Insights, you typically integrate the Application Insights JavaScript SDK and hook it into Angular routing events.
Below is a clean, production-friendly approach tailored for Angular apps.

Step-by-Step Implementation

1️⃣ Install Application Insights SDK

npm install @microsoft/applicationinsights-web

2️⃣Create an App Insights Service

Create a reusable service to initialize telemetry.

// app-insights.service.ts
import { Injectable } from '@angular/core';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';

@Injectable({
  providedIn: 'root'
})
export class AppInsightsService {
  appInsights: ApplicationInsights;

  constructor() {
    this.appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY',
        enableAutoRouteTracking: false // we'll manually track
      }
    });

    this.appInsights.loadAppInsights();
  }

  logPageView(name?: string, uri?: string) {
    this.appInsights.trackPageView({
      name,
      uri
    });
  }
}

3️⃣Hook into Angular Router Events

Angular SPAs don’t reload pages, so you must manually track navigation changes using the Router.

TypeScript// app.component.ts
// app.component.ts
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { AppInsightsService } from './app-insights.service';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {

  constructor(
    private router: Router,
    private appInsightsService: AppInsightsService
  ) {
    this.monitorRouting();
  }

  monitorRouting() {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {

        this.appInsightsService.logPageView(
          event.urlAfterRedirects,
          window.location.href
        );
      });
  }
}

✅ Result

Each route change (e.g., /home → /dashboard) will:

• Trigger NavigationEnd
• Send a pageView telemetry event to Application Insights

🚀 Alternative (Automatic Tracking)

You can enable auto tracking:

config: 
{  
 instrumentationKey: 'YOUR_KEY', 
 enableAutoRouteTracking: true
}

✅ Pros:

Minimal setup

⚠️ Cons:

Less control over naming and metadata
Harder to enrich telemetry

🔍 Enhancements (Highly Recommended)

✅ Add Custom Properties

this.appInsights.trackPageView({
  name: event.urlAfterRedirects,
  uri: window.location.href,
  properties: {
    userRole: 'Admin',
    feature: 'SearchModule'
  }
});

✅ Track Logged-in User
TypeScriptthis.appInsights.setAuthenticatedUserContext('user-id');

✅ Track API calls, errors, and events

this.appInsights.trackEvent({ name: 'ButtonClicked' });

this.appInsights.trackException({ exception: error });

👉 Best practice:

• Use App Insights Web SDK in Angular
• Use Application Insights SDK in .NET API
• Correlate telemetry via operationId

🧾 Summary

• Install App Insights SDK
• Create telemetry service
• Subscribe to NavigationEnd
• Call trackPageView()
• (Optional) Add custom telemetry

✅ Final Takeaway

Angular does not trigger full page reloads, so you must manually track page views using Router events to get accurate telemetry in Application Insights.