iXora Custom Software Development Blog

Read | Practice | Advance

How easily integrate Application insight in web application

Posted by on in Blog
  • Font size: Larger Smaller
  • Hits: 3307

In this article i will discuss regarding Application insight and how developer can integrate application insight in there web application easily.

What is application insight 

Microsoft has provided application performance monitoring service to monitor Azure web application named Application Insights(AI). It is lightweight and extensible analytics platform which records the performance and usage of a live web applications. Preparing different reports from this records app developer can take decision about the direction of the design in each development life-cycle.  Though it is Microsoft product it supports a wide variety of platforms including .NET, Node.js and J2EE, hosted on-premises or in the cloud. 


To get analytical data regarding web application, it needs to integrate AI in web application. When developer integrate AI in web application than web application pushes different telemetry to azure application insight resource for analysis. Web can push data from three sources

  1. Web page
  2. Web service
  3. Background service


Different feature of AI

Using Application Insights we can get idea how an app is performing and how it's being used. we can get following information from AI

  • Request rates, response times, and failure rates : Here we can see which page has visited when and from where.
  • Dependency rates, response times, and failure rates: We can easily identify performance of internal and external services performance. 
  • Exceptions:  It trace server and browser exceptions. Drilling down into the stack trace and related requests developer can get idea regarding problem.  
  • AJAX calls from web pages:   Now developer prefer to use REST AP it trace request rates, response times, and failure rates. 
  • User and session counts
  • Performance counters: It monitor CPU, memory, and network usage. 
  • Host diagnostics: It gets this information from Azure. 
  • Diagnostic trace logs: It gets this information app so that developer can correlate trace events with requests. 
  • Custom events and metrics: AI SDK pushed different Telemetry to azure, to trace business flow developer can write custom events to track business events. 

How to Integrate Application insight 

There are several ways to integrate application insight in web application. I will show the easiest way.

Developer have to do following task integrate 

  1. Create application insight resource in azure. 
  2. Collect application insight resource information (resource name, Instrumentation Key). 
  3. Add JavaScript code in html page to push telemetry from web page. 
  4. Add Application insight NuGet in web project. 
  5. Add C# code to push telemetry from service. 

1. Create application insight resource in azure.

We can create application insight resource in azure from two places 

  • Portal label. 
  • Web app label. 

As it is application specific data so I will show how to create in application label so that we can monitor from both places. 

NB:Here I consider you have created web application in azure. 

  1. Login to azure and enter to the web application where want to integrate AI
  2. In the search box type "application insight" and click on the result.
  3. Create a new resource providing resource name and location.
  4. It will take little time to complete than following screen will come

2. Collect application insight resource information 

From the above screen click on "view more in application insights". Following screen will show the different information's

3. Add JavaScript code in html page

Developers need to add JavaScript following in html page. If application have muster page then add there otherwise have to add in each page. 

To collect end-user usage analytics about your application,  
insert the following script into each page you want to track. 
Place this code immediately before the closing </head> tag, 
and before any other scripts. Your first data will appear  
automatically in just a few seconds. 
<script type="text/javascript"> 
var appInsights=window.appInsights||function(config){ 
function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t 


4. Add NuGet 

To push server telemetry add the application insight SDK from NuGet.

5. Add C# code 

You can collect this code from azure. Here you will also get code sample for c# push and custom matrices.


Rate this blog entry:

Samaresh Das has not set their biography yet


  • Guest
    SusheelLeion Friday, 31 May 2019

    Thanks for this post.I need more details for Socket Programming?

  • Guest
    SusheelLeion Monday, 20 May 2019

    Thanks for this post.I need more details for Add NuGet ?

  • Guest
    Cloudi5 Technologies Tuesday, 18 December 2018

    SO much incredible information Grant. Thanks for doing this, especially for some of us who haven’t had experience at all. This is a great way to “give back” integration of application insight with web application.

  • Guest
    tapati Thursday, 10 May 2018

    Is there any scripting languages used rather than java script

Leave your comment

Guest Thursday, 28 January 2021