Adding Custom Application Insights instrumentaiton to Web Pages

In my previous article, we explored how to configure Application Insights to your application. The configuration explained there applies to the entire application which is good. The immediate doubt for many would be – Is it possible to track specific pages or custom events in specific pages in my applicaion using Application Insights?  The answer is Yes.

If you are familiar using Google Analytics (note that the objectives for Azure AI and Google Analytics aren’t the same; hence no comparison intended here), it is similar method that we have to add custom instrumentation to your pages using Application Insight.

Before we start, here are the prerequisites

  • Windows Azure Account
  • An Application Insights resournce created in Azure (explained here)
  • A running web application (Azure or on-premise hosted)

Login to your Azure account and select the Application Insights resource that you want to use for instrumentaiton.


You will be provided with the code snippet below.

   var appInsights=window.appInsights||function(config){     function r(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=u.createElement(o),i,f;for(s.src=config.url||"//",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t     }({         instrumentationKey:"**********************************"     });             window.appInsights=appInsights;     appInsights.trackPageView();

To start with, copy this code and insert to HTML code of the web page that you want to track. Upload/redeploy your application and load the page few times to collect instrumentation data.

To view the metrics, go to Azure portal. Select the Application Insights resource. Use the “Add tiles” option  and drag the “Usage Timeline” and “Overview Timeline” charts from the default list



You can see the page views, sessions and users statistics.


Let us analyze this further. By default, you have an entry which tracks the page views.



If you want to track a custom event in your client page, you can use

(Javascript Syntax)


where the entry “MyEvent” stands for the custom event which can be tracked in the AI resource.

How to view and analyze custom events

As we did in the previous step, you can add default chart for “Custom Event” using the Add Tiles option or you can search for the event and add a custom chart.



So this will get you started. Some of the common APIs are listed below.

  • TrackPageView
  • TrackEvent
  • TrackMetric
  • TrackException
  • TrackRequest
  • TrackTrace
  • TrackDependency

There are various options to add custom tracking based on whether you are working on server side or client side code. The code syntax for doing the same in other languages are :


var tc = new TelemetryClient();


TelemetryClient tc = new TelemetryClient();


var AppInsights = require('applicationinsights');
var appInsights = new AppInsights({instrumentationKey: "<my instrumentation key>"});
appInsights.trackEvent("My event", { custom: "properties" });

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s