Angular-AppInsights is an angular module for using Microsoft's Application Insights within a SPA (Single Page Application).
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 s(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},r=document,f=window,e="script",o=r.createElement(e),i,u;for(o.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",r.getElementsByTagName(e)[0].parentNode.appendChild(o),t.cookie=r.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)s("track"+i.pop());return config.disableExceptionTracking||(i="onerror",s("_"+i),u=f[i],f[i]=function(config,r,f,e,o){var s=u&&u(config,r,f,e,o);return s!==!0&&t["_"+i](config,r,f,e,o),s}),t
};
({//<-- remove this
instrumentationKey:"your key here"//<-- remove this
})//<-- remove this
window.appInsights=appInsights;
appInsights.trackPageView(); //<-- remove this
</script>Remove the lines that have an comment like this:
//<-- remove thisYou 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 s(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},r=document,f=window,e="script",o=r.createElement(e),i,u;for(o.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",r.getElementsByTagName(e)[0].parentNode.appendChild(o),t.cookie=r.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)s("track"+i.pop());return config.disableExceptionTracking||(i="onerror",s("_"+i),u=f[i],f[i]=function(config,r,f,e,o){var s=u&&u(config,r,f,e,o);return s!==!0&&t["_"+i](config,r,f,e,o),s}),t
};
window.appInsights=appInsights;
</script>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');
}]);##Change Log
Please see CHANGELOG.md
##License
MIT. Please see LICENSE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent