Windows 10 Universal JS with Application Insights

Man oh man oh man.  So much confusion around what is possible with Windows 10 Universal JS apps.  If you google around for what you can and cannot do or how to do things, you'll likely find references to Windows Phone 8 vs 8.1 and silver light and all kinds of stuff so I'm trying to track down what actually works and the proper way of including things in these new projects.

There are even articles that say you cannot do certain things in JS applications or that they are different than the XAML versions, but often no reference is even given to the JS applications.  Store Apps only have XAML references and often JavaScript is referred to as 'JavaScript Web Pages' which is even more confusing.

As of this article's writing, however, the following seems to be true about application insights with regards to Windows 10 Universal JavaScript Apps.

Yes, you can absolutely use Application Insights!

But how?

Normally, when creating a project, you'll have an option to automatically add application insights to your project.  However, this is not the case with Universal JavaScript Applications.  You simply get a blank slate with nothing really provided for you.

You will need to get a special version of the AI library, which can be found here on github.  There is also a minified version available in this repo.

Include this in your js folder, and add it to whatever page/s you want to track by adding a script reference in your HEAD section.

Go to the azure portal and create a new Application Insights Developer Service or locate the instrumentation key for an existing instance.

Then, in your app start code, initialize a new AppInsights object with your instrumentation key and specify the enpointUrl as 'http://dc.services.visualstudio.com/v2/track'.

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
 "use strict";

 var app = WinJS.Application;
 var activation = Windows.ApplicationModel.Activation;

 window.appInsights = window.appInsights || new Microsoft.ApplicationInsights.AppInsights({ instrumentationKey: '', endpointUrl: 'http://dc.services.visualstudio.com/v2/track' });
 window.appInsights.trackPageView();

 app.onactivated = function (args) {
  if (args.detail.kind === activation.ActivationKind.launch) {
   if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    // TODO: This application has been newly launched. Initialize your application here.
   } else {
    // TODO: This application was suspended and then terminated.
    // To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
   }
   args.setPromise(WinJS.UI.processAll().then(function () {
    // for debugging, keep global reference
    window.applicationViewModel = new ApplicationViewModel();
       ko.applyBindings(window.applicationViewModel);
   }));
  }
 };

 app.oncheckpoint = function (args) {
  // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
  // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
  // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
 };

 app.start();
})();

That's all there is to it!  You can now view page requests, dependencies, ... in the portal.  It seems that the Visual Studio integration does not work with this approach (at least not with the simulator) so you will not receive notifications or trace data in studio while running in the simulator.