├── .gitignore ├── .babelrc ├── LICENSE ├── package.json ├── src └── index.js ├── dist └── vue-application-insights.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea/ 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "stage-2", "es2015" 4 | ], 5 | "plugins": ["transform-runtime"] 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Alexandre 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-application-insights", 3 | "version": "1.0.6", 4 | "description": "", 5 | "main": "dist/vue-application-insights.js", 6 | "files": [ 7 | "dist/vue-application-insights.js", 8 | "src" 9 | ], 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1", 12 | "build": "babel src/index.js --out-file dist/vue-application-insights.js" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/latelierco/vue-application-insights.git" 17 | }, 18 | "keywords": [ 19 | "vue", 20 | "vuejs", 21 | "application-insights" 22 | ], 23 | "author": "L'Atelier ", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/latelierco/vue-application-insights/issues" 27 | }, 28 | "homepage": "https://github.com/latelierco/vue-application-insights#readme", 29 | "dependencies": { 30 | "@microsoft/applicationinsights-web": "^2.4.4" 31 | }, 32 | "devDependencies": { 33 | "babel-cli": "^6.24.1", 34 | "babel-plugin-transform-runtime": "^6.23.0", 35 | "babel-preset-es2015": "^6.24.1", 36 | "babel-preset-stage-2": "^6.24.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { ApplicationInsights, Util } from '@microsoft/applicationinsights-web' 3 | 4 | /** 5 | * Install function passed to Vue.use() show documentation on vue.js website. 6 | * 7 | * @param Vue 8 | * @param options 9 | */ 10 | function install (Vue, options) { 11 | 12 | const config = options.appInsightsConfig || {}; 13 | config.instrumentationKey = config.instrumentationKey || options.id; 14 | 15 | if (options.appInsights) { 16 | Vue.appInsights = options.appInsights 17 | } else { 18 | Vue.appInsights = new ApplicationInsights({ config }) 19 | Vue.appInsights.loadAppInsights() 20 | if (typeof(options.onAfterScriptLoaded) === 'function') { 21 | options.onAfterScriptLoaded(Vue.appInsights) 22 | } 23 | } 24 | 25 | const router = options.router 26 | 27 | // Watch route event if router option is defined. 28 | if (router) { 29 | 30 | if (options.trackInitialPageView !== false) { 31 | setupPageTracking(options, Vue); 32 | } else { 33 | router.onReady(() => setupPageTracking(options, Vue)) 34 | } 35 | 36 | } 37 | 38 | Object.defineProperty(Vue.prototype, '$appInsights', { 39 | get: () => Vue.appInsights 40 | }) 41 | 42 | } 43 | 44 | /** 45 | * Track route changes as page views with AppInsights 46 | * @param options 47 | */ 48 | function setupPageTracking(options, Vue) { 49 | 50 | const router = options.router 51 | 52 | const baseName = options.baseName || '(Vue App)' 53 | 54 | router.beforeEach( (route, from, next) => { 55 | const name = baseName + ' / ' + route.name; 56 | Vue.appInsights.context.telemetryTrace.traceID = Util.generateW3CId(); 57 | Vue.appInsights.context.telemetryTrace.name = route.name; 58 | Vue.appInsights.startTrackPage(name) 59 | next() 60 | }) 61 | 62 | router.afterEach( route => { 63 | const name = baseName + ' / ' + route.name; 64 | const url = location.protocol + '//' + location.host + route.fullPath; 65 | Vue.appInsights.stopTrackPage(name, url); 66 | Vue.appInsights.flush(); 67 | }) 68 | } 69 | 70 | // auto install for navigator 71 | if (typeof window !== 'undefined' && window.Vue) { 72 | window.Vue.use(install) 73 | } 74 | 75 | export default install 76 | -------------------------------------------------------------------------------- /dist/vue-application-insights.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _applicationinsightsWeb = require('@microsoft/applicationinsights-web'); 8 | 9 | /** 10 | * Install function passed to Vue.use() show documentation on vue.js website. 11 | * 12 | * @param Vue 13 | * @param options 14 | */ 15 | function install(Vue, options) { 16 | 17 | var config = options.appInsightsConfig || {}; 18 | config.instrumentationKey = config.instrumentationKey || options.id; 19 | 20 | if (options.appInsights) { 21 | Vue.appInsights = options.appInsights; 22 | } else { 23 | Vue.appInsights = new _applicationinsightsWeb.ApplicationInsights({ config: config }); 24 | Vue.appInsights.loadAppInsights(); 25 | if (typeof options.onAfterScriptLoaded === 'function') { 26 | options.onAfterScriptLoaded(Vue.appInsights); 27 | } 28 | } 29 | 30 | var router = options.router; 31 | 32 | // Watch route event if router option is defined. 33 | if (router) { 34 | 35 | if (options.trackInitialPageView !== false) { 36 | setupPageTracking(options, Vue); 37 | } else { 38 | router.onReady(function () { 39 | return setupPageTracking(options, Vue); 40 | }); 41 | } 42 | } 43 | 44 | Object.defineProperty(Vue.prototype, '$appInsights', { 45 | get: function get() { 46 | return Vue.appInsights; 47 | } 48 | }); 49 | } 50 | 51 | /** 52 | * Track route changes as page views with AppInsights 53 | * @param options 54 | */ 55 | function setupPageTracking(options, Vue) { 56 | 57 | var router = options.router; 58 | 59 | var baseName = options.baseName || '(Vue App)'; 60 | 61 | router.beforeEach(function (route, from, next) { 62 | var name = baseName + ' / ' + route.name; 63 | Vue.appInsights.context.telemetryTrace.traceID = _applicationinsightsWeb.Util.generateW3CId(); 64 | Vue.appInsights.context.telemetryTrace.name = route.name; 65 | Vue.appInsights.startTrackPage(name); 66 | next(); 67 | }); 68 | 69 | router.afterEach(function (route) { 70 | var name = baseName + ' / ' + route.name; 71 | var url = location.protocol + '//' + location.host + route.fullPath; 72 | Vue.appInsights.stopTrackPage(name, url); 73 | Vue.appInsights.flush(); 74 | }); 75 | } 76 | 77 | // auto install for navigator 78 | if (typeof window !== 'undefined' && window.Vue) { 79 | window.Vue.use(install); 80 | } 81 | 82 | exports.default = install; 83 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-application-insights 2 | 3 | 4 | ## Installation 5 | 6 | 7 | ```console 8 | $ npm install vue-application-insights --save 9 | ``` 10 | 11 | ## Get started 12 | 13 | 14 | ```js 15 | import Vue from 'vue' 16 | import VueAppInsights from 'vue-application-insights' 17 | 18 | Vue.use(VueAppInsights, { 19 | id: 'XXXXXXXX--XXXX-XXXX-XXXXXXXXXXXX' 20 | }) 21 | ``` 22 | 23 | With vue router 24 | 25 | 26 | ```js 27 | import Vue from 'vue' 28 | import router from './router' 29 | 30 | import VueAppInsights from 'vue-application-insights' 31 | 32 | Vue.use(VueAppInsights, { 33 | baseName: 'My app name', // prefix to track route changes as page views with AppInsights 34 | id: 'XXXXXXXX--XXXX-XXXX-XXXXXXXXXXXX', 35 | router 36 | }) 37 | ``` 38 | 39 | Example with custom track event 40 | 41 | ```js 42 | Vue.extend({ 43 | 44 | methods: { 45 | custom_action() { 46 | this.$appInsights.trackEvent({ 47 | name: 'custom_action', 48 | properties: { value: 'ok' } 49 | }); 50 | } 51 | } 52 | 53 | }); 54 | ``` 55 | 56 | ## Options 57 | 58 | - **id** - The instrumentation key of your AppInsights resource on Azure. 59 | - **router** - The router instance, which events should be tracked as page views _(optional)_. 60 | - **baseName** String that will prefix the name of the tracked page _(optional, default is '(Vue App)')_ 61 | - **appInsights** Instance of the Application Insights client _(optional)_. 62 | - **trackInitialPageView** - Boolean that determines whether or not the initial page view should be tracked. _(optional, defaults to true)_ 63 | - **onAfterScriptLoaded** Callback function that will be invoked after AppInsights script have loaded. _(optional, defaults to undefined)_ 64 | - **appInsightsConfig** Object where you can put custom [AppInsights configuration](https://github.com/microsoft/ApplicationInsights-JS#configuration) _(optional, defaults to empty object)_ 65 | 66 | ## Initializing AppInsights from outside the Vue application 67 | 68 | Maybe you use server side code to include the javascript snippet that initializes AppInsights. In that case you want to provide the AppInsights instance to this Vue plugin and prevent it from tracking the initial page view. 69 | 70 | ```js 71 | import Vue from 'vue' 72 | import router from './router' 73 | 74 | import VueAppInsights from 'vue-application-insights' 75 | 76 | Vue.use(VueAppInsights, { 77 | appInsights: window.appInsights, 78 | trackInitialPageView: false, 79 | router 80 | }) 81 | ``` 82 | --------------------------------------------------------------------------------