{"id":17531376,"url":"https://github.com/johnhidey/angular-appinsights","last_synced_at":"2025-04-23T20:13:53.680Z","repository":{"id":57178001,"uuid":"21408668","full_name":"johnhidey/angular-appinsights","owner":"johnhidey","description":"An Angular module for using Microsoft's Application Insights within a SPA","archived":false,"fork":false,"pushed_at":"2017-07-23T00:09:34.000Z","size":29,"stargazers_count":49,"open_issues_count":6,"forks_count":17,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-23T20:13:41.331Z","etag":null,"topics":["angular","angular-appinsights","application-insights","microsoft-application-insights","spa"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnhidey.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-02T02:16:18.000Z","updated_at":"2023-01-19T16:21:21.000Z","dependencies_parsed_at":"2022-09-14T02:01:09.972Z","dependency_job_id":null,"html_url":"https://github.com/johnhidey/angular-appinsights","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnhidey%2Fangular-appinsights","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnhidey%2Fangular-appinsights/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnhidey%2Fangular-appinsights/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnhidey%2Fangular-appinsights/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnhidey","download_url":"https://codeload.github.com/johnhidey/angular-appinsights/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250506141,"owners_count":21441723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-appinsights","application-insights","microsoft-application-insights","spa"],"created_at":"2024-10-20T17:23:46.295Z","updated_at":"2025-04-23T20:13:53.639Z","avatar_url":"https://github.com/johnhidey.png","language":"JavaScript","readme":"[![Stories in Ready](https://badge.waffle.io/johnhidey/angular-appinsights.png?label=ready\u0026title=Ready)](https://waffle.io/johnhidey/angular-appinsights)\n[![Stories in Progress](https://badge.waffle.io/johnhidey/angular-appinsights.png?label=in%20progress\u0026title=In%20Progress)](https://waffle.io/johnhidey/angular-appinsights)\n[![Known Vulnerabilities](https://snyk.io/test/npm/angular-appinsights/badge.svg)](https://snyk.io/test/npm/angular-appinsights)  \n\nAngular-AppInsights\n===================\n\nAngular-AppInsights is an angular module for using Microsoft's Application Insights within a SPA (Single Page Application).\n\n## Usage\nGet your regular Microsoft's Application Insights\n```HTML\n\u003c!--\nTo collect end-user usage analytics about your application,\ninsert the following script into each page you want to track.\nPlace this code immediately before the closing \u003c/head\u003e tag,\nand before any other scripts. Your first data will appear\nautomatically in just a few seconds.\n--\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    var appInsights=window.appInsights||function(config){\n    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\u0026\u0026f(config,i,u,e,o);return s!==!0\u0026\u0026t['_'+r](config,i,u,e,o),s}),t\n    }({\n        instrumentationKey:\"your key here\"//\u003c-- optionally remove this to apply in 'start'. See 'Note' below\n    });\n    \n    window.appInsights=appInsights;\n    appInsights.trackPageView(); //\u003c-- remove this\n\u003c/script\u003e\n```\n\nYou tag should look like this when modified:\n```HTML\n\u003c!--\nTo collect end-user usage analytics about your application,\ninsert the following script into each page you want to track.\nPlace this code immediately before the closing \u003c/head\u003e tag,\nand before any other scripts. Your first data will appear\nautomatically in just a few seconds.\n--\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    var appInsights=window.appInsights||function(config){\n    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\u0026\u0026f(config,i,u,e,o);return s!==!0\u0026\u0026t['_'+r](config,i,u,e,o),s}),t\n    }({});\n    window.appInsights=appInsights;\n\u003c/script\u003e\n```\n\n**Note**: You can apply other settings here for application insights if you choose. See the Microsoft documentation for [IConfig](https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md#config) for possible parameters.\n\nInclude the following script tag \n\n```HTML\n\u003cscript type=\"text/javascript\" src=\"angular-appinsights.js\"\u003e\u003c/script\u003e\n```\n\non your SPA shell page (perferrably at the bottom of the `\u003cbody\u003e`).  Now all we need to do is initialize the `angular-appinsights `\nmodule and we're done.  The best place to initialize `angular-appinsights` is in your application bootstrap.  Below is sample of \nwhat this might look like. Make sure to take note that the application now has a dependency on `angular-appinsights`.\n\n```JavaScript\nangular.module('insightsApp', ['ngRoute', 'angular-appinsights'])\n    .config(['$routeProvider', 'insightsProvider', function ($routeProvider, insightsProvider) {\n\n        $routeProvider\n            .when('/', {\n                templateUrl: \"page1.html\",\n                controller: 'page1Controller'\n            })\n            .when('/page2', {\n                templateUrl: \"page2.html\"\n            });\n\n        // Add application insights id here\n        insightsProvider.start('Application Insights Application Id');\n    }])\n```\n  \nYou angular application will now log all page views defined by subscribing to the event `locationChangeSuccess` within angular.\nYou're up and logging page views now.  \n\nTo 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 \npretty simple.  You will call `insights.logEvent()` passing your event data.  For a complete definition of the method please refer to\nMicrosoft's document on [logEvent](http://msdn.microsoft.com/en-us/library/dn614099.aspx).  You can also log page views by calling\n`insights.logPageView()`. For a complete definition of the method please refer to Microsoft's document on\n[logPageView](http://msdn.microsoft.com/en-us/library/dn614096.aspx). Below is a sample where the `page1Controller` is logging it's activation. \n\n```JavaScript\nangular.module('insightsApp', ['ngRoute', 'angular-appinsights'])\n    .config(['$routeProvider', 'insightsProvider', function ($routeProvider, insightsProvider) {\n\n        $routeProvider\n            .when('/', {\n                templateUrl: \"page1.html\",\n                controller: 'page1Controller'\n            })\n            .when('/page2', {\n                templateUrl: \"page2.html\"\n            });\n\n        // Add application insights id here\n        insightsProvider.start('Application Insights Application Id');\n\n    }])\n    .controller('page1Controller', ['$scope', 'insights', function($scope, insights) {\n\n        insights.logEvent('Page 1 Controller Activated');\n\n    }]);\n```\n\n## API\n\n### start(appId, appName)\n\nInitializes the Application Insights object with default settings using the provided `appId` and optional `appName`.\n\n* `appId` (string) - The key of your Application Insights resource in Azure.\n* `appName` (string) - *Optional.* Text that is prepended to the path information when the angular page is changed. **Default:** `(Application Root)`\n\n#### Example\n\n```JavaScript\ninsightsProvider.start('00000000-0000-0000-0000-000000000000', 'MyApp');\n```\n\n### start(options)\n\nInitializes the Application Insights object with settings applied from an options object.\n\n#### Example\n\n```JavaScript\nvar options = {\n    appId: '00000000-0000-0000-0000-000000000000',\n    appName: 'MyApp'\n};\ninsightsProvider.start(options);\n```\n\n##Change Log\nPlease see [`CHANGELOG.md`](CHANGELOG.md)\n\n##License\nMIT. Please see [`LICENSE`](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnhidey%2Fangular-appinsights","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnhidey%2Fangular-appinsights","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnhidey%2Fangular-appinsights/lists"}