Angular-AppInsights

Angular-AppInsights is an angular module for using Microsoft's Application Insights within a SPA (Single Page Application).

Usage

Get your regular Microsoft's Application Insights

<!--
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
    }({
        instrumentationKey:"your key here"//<-- optionally remove this to apply in 'start'. See 'Note' below
    });
    
    window.appInsights=appInsights;
    appInsights.trackPageView(); //<-- remove this
</script>

You tag should look like this when modified:

<!--
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
    }({});
    window.appInsights=appInsights;
</script>

Note: You can apply other settings here for application insights if you choose. See the Microsoft documentation for IConfig for possible parameters.

Include the following script tag

<script type="text/javascript" src="angular-appinsights.js"></script>

on your SPA shell page (perferrably at the bottom of the <body>). Now all we need to do is initialize the angular-appinsights module and we're done. The best place to initialize angular-appinsights is in your application bootstrap. Below is sample of what this might look like. Make sure to take note that the application now has a dependency on angular-appinsights.

angular.module('insightsApp', ['ngRoute', 'angular-appinsights'])
    .config(['$routeProvider', 'insightsProvider', function ($routeProvider, insightsProvider) {

        $routeProvider
            .when('/', {
                templateUrl: "page1.html",
                controller: 'page1Controller'
            })
            .when('/page2', {
                templateUrl: "page2.html"
            });

        // Add application insights id here
        insightsProvider.start('Application Insights Application Id');
    }])

You angular application will now log all page views defined by subscribing to the event locationChangeSuccess within angular. You're up and logging page views now.

To log custom events you just need to have a dependency on insights and Angular's DI will deliver you the object. From there it is pretty simple. You will call insights.logEvent() passing your event data. For a complete definition of the method please refer to Microsoft's document on logEvent. You can also log page views by calling insights.logPageView(). For a complete definition of the method please refer to Microsoft's document on logPageView. Below is a sample where the page1Controller is logging it's activation.

angular.module('insightsApp', ['ngRoute', 'angular-appinsights'])
    .config(['$routeProvider', 'insightsProvider', function ($routeProvider, insightsProvider) {

        $routeProvider
            .when('/', {
                templateUrl: "page1.html",
                controller: 'page1Controller'
            })
            .when('/page2', {
                templateUrl: "page2.html"
            });

        // Add application insights id here
        insightsProvider.start('Application Insights Application Id');

    }])
    .controller('page1Controller', ['$scope', 'insights', function($scope, insights) {

        insights.logEvent('Page 1 Controller Activated');

    }]);

API

start(appId, appName)

Initializes the Application Insights object with default settings using the provided appId and optional appName.

appId (string) - The key of your Application Insights resource in Azure.
appName (string) - Optional. Text that is prepended to the path information when the angular page is changed. Default: (Application Root)

Example

insightsProvider.start('00000000-0000-0000-0000-000000000000', 'MyApp');

start(options)

Initializes the Application Insights object with settings applied from an options object.

Example

var options = {
    appId: '00000000-0000-0000-0000-000000000000',
    appName: 'MyApp'
};
insightsProvider.start(options);

##Change Log Please see CHANGELOG.md

##License MIT. Please see LICENSE

johnhidey / angular-appinsights Goto Github PK