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.

Untitled.png

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||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",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

 

Untitled2.png

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

Untitled3.png

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

appInsights.trackPageView();

Untitled1

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

(Javascript Syntax)

appInsights.trackEvent("MyEvent");

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.

Untitled4.png

Untitled5

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 :

C#

var tc = new TelemetryClient();
tc.TrackEvent("SampleEvent");

Java

TelemetryClient tc = new TelemetryClient();
tc.trackEvent("SampleEvent");

Node.js

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s