included insights service

Author: Dominik

src/src/app/app.component.ts

@@ -1,10 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ApplicationInsightsService } from './services/common/application-insights.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'insights';
+  private appInsights;
+
+  constructor(private router: Router) {
+    this.appInsights = new ApplicationInsightsService(router);
+  }
+
+  ngOnInit() {
+    this.appInsights.loadAppInsights();
+  }
 }

src/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { ApplicationInsightsService } from './services/common/application-insights.service';
 
 @NgModule({
   declarations: [
@@ -12,7 +13,9 @@ import { AppComponent } from './app.component';
     BrowserModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [
+    ApplicationInsightsService
+],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/src/app/services/common/application-insights.service.ts

@@ -1,9 +1,62 @@
-import { Injectable } from '@angular/core';
+import { Injectable, OnInit } from '@angular/core';
+import { ApplicationInsights } from '@microsoft/applicationinsights-web';
+import { ActivatedRouteSnapshot, ResolveEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ApplicationInsightsService {
 
-  constructor() { }
+  private routerSubscription: Subscription;
+
+  private appInsights = new ApplicationInsights({
+    config: {
+      instrumentationKey: '...'
+    }
+  });
+
+  constructor(private router: Router) {
+    this.appInsights.loadAppInsights();
+    this.routerSubscription = this.router.events.pipe(filter(event => event instanceof ResolveEnd)).subscribe((event: ResolveEnd) => {
+      const activatedComponent = this.getActivatedComponent(event.state.root);
+      if (activatedComponent) {
+        this.logPageView(`${activatedComponent.name} ${this.getRouteTemplate(event.state.root)}`, event.urlAfterRedirects);
+      }
+    });
+  }
+
+  setUserId(userId: string) {
+    this.appInsights.setAuthenticatedUserContext(userId);
+  }
+
+  clearUserId() {
+    this.appInsights.clearAuthenticatedUserContext();
+  }
+
+  logPageView(name?: string, uri?: string) {
+    this.appInsights.trackPageView({ name, uri });
+  }
+
+  private getActivatedComponent(snapshot: ActivatedRouteSnapshot): any {
+    if (snapshot.firstChild) {
+      return this.getActivatedComponent(snapshot.firstChild);
+    }
+
+    return snapshot.component;
+  }
+
+  private getRouteTemplate(snapshot: ActivatedRouteSnapshot): string {
+    let path = '';
+    if (snapshot.routeConfig) {
+      path += snapshot.routeConfig.path;
+    }
+
+    if (snapshot.firstChild) {
+      return path + this.getRouteTemplate(snapshot.firstChild);
+    }
+
+    return path;
+  }
 }