RSS

Tag Archives: application-insights

Application Insights Intrumentation Key in Web.config

When using Azure Application Insights in ASP.Net application, by default, Visual Studio insert IntrumentationKey in ApplicationInsights.config.

To allow multiple environments tracking, move IntrumentationKey to Web.config by following this steps:

  1. Remove IntrumentationKey from ApplicationInsights.config. If you have MVC application, don’t forget to modify ApplicationInsights’ script (usually in View\Shared\_Layout.cshtml), replace:

    {instrumentationKey:"your instrumentation key"}
    

    with:

    {instrumentationKey:"@Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration.Active.InstrumentationKey"}
    
  2. Add new app settings for IntrumentationKey in Web.config under <appSettings>

    <add key="InstrumentationKey" value="your instrumentation key" />
    
  3. In Global.asax.cs, Application_Start() method, add:

    Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration.Active.InstrumentationKey = System.Web.Configuration.WebConfigurationManager.AppSettings["InstrumentationKey"];
    

That’s it for the configuration changes. Everything else is the same including tracking custom event or page view.
With this configuration, you will be able to define InstrumentationKey in Release management for each environments.

Advertisements
 
1 Comment

Posted by on May 18, 2018 in General

 

Tags: , , , , , ,

Configuring Azure Application Insights for Angular 2+ App

1. Obtain InstrumentationKey from Azure.
-Create new Application Insights resource.
1

2

-Enter Name, Application Type (choose General for Angular app) and choose Resource Group.
3

-Wait for Azure to finish creating the resource.
-Go to the resource detail, by clicking name of the resource, select Overview menu and expand Essentials information to get the Instrumentation Key.
4

2. In Angular app, install applicationinsights-js package.

npm install applicationinsights-js --save --save-dev

3. In Angular component you want to track, add import statement and call AppInsights.downloadAndSetup() method in the constructor.
Normally, we only need to call AppInsights.downloadAndSetup() once in entire application lifecycle so it make sense to put this in app.component.ts.

4. To track each telemetry, call available methods in AppInsights class. In the example below, we track page view after the component initialized.

import {AppInsights} from 'applicationinsights-js';

@Component({
	selector: 'test-app',
	templateUrl: 'test-app.component.html',
	styleUrls: ['test-app.component.scss']
})
export class TestAppComponent {
	constructor() {
		// Download and setup Application Insights
		AppInsights.downloadAndSetup({instrumentationKey: 'xxxx-xxxx-xxxx-xxxx'});
		this.Init();
	}

	public Init(): void {
		// Example of how to track page view
		AppInsights.trackPageView('TestAppComponent');
	}
}

For more details on what Application Insights can track and methods to call, please see:
https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md

After everything is configured, browse your application for few minutes and let Azure Application Insights does its magic. You should be able to go back to Azure portal and see some activities, like this:
5

 
Leave a comment

Posted by on May 18, 2018 in General

 

Tags: , , ,

 
%d bloggers like this: