Plugin/Integration request: Microsoft AppInsights (Application Insights)

Hello,

Would it be possible to add AppInsights to the list of supported integrations? I think it’d be a “provider plugin”? The JS SDK is on github: https://github.com/Microsoft/ApplicationInsights-JS

The list of tracking methods (e.g. trackEvent, trackPageView, etc): https://github.com/Microsoft/ApplicationInsights-JS#sending-telemetry-to-the-azure-portal

API reference: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md

If I try to give you a headstart, assuming I understood your interface, some pseudo-code would be:

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

export default function applicationInsightsPlugin(userConfig) {
    let appInsights;
    return {
        name: 'application-insights-plugin',
        config: {
            /* See https://github.com/Microsoft/ApplicationInsights-JS#configuration */
        },
        initialize: ({ config }) => {
            const appInsights = new ApplicationInsights({
                config: {
                    instrumentationKey: 'INSTRUMENTATION_KEY_GOES_HERE'
                    /* ...Other Configuration Options... */
                }
            });
            appInsights.loadAppInsights();
        },
        page: ({ payload }) => {
            appInsights.trackPageView();
        },
        track: ({ payload }) => {
            appInsights.trackEvent({ name: 'some event' }, data);
        },
        identify: ({ payload }) => {
            appInsights.setAuthenticatedUserContext(authenticatedUserId, accountId, storeInCookie)
        },
        loaded: () => {
            // return boolean so analytics knows when it can send data to third party
            return !!appInsights
        }
    }
}

It is possible to load AppInsights as a script on the page like most trackers, but that’s not how we’ve used it. Hence my pseudo-code uses the npm module.

[DavidWells]

Hey @seriema

Happy to add this in and publish to something like @analytics/microsoft-app-insights

Can you open up a PR this and finish the client-side calls? I don’t use this tool myself and am unfamiliar with it.

Here are some pointers on getting this up in its own folder:

1. Make a new folder in packages named analytics-plugin-microsoft-app-insights
2. If you duplicate an existing plugin folder like google-tag-manager it will have everything wired up for build steps etc.
3. Add the browser-side code in https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-google-tag-manager/src/browser.js
4. Find/replace google-tag-manager in the package.json
5. Also, change the globalName in package.json here

Let me know if you have any questions.

Alternatively, you can use the code you have written inline in your apps.

Example:

import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'

// inline plugin in your app code
const applicationInsightsPlugin = (userConfig) => {
  let appInsights;
  return {
    name: 'application-insights-plugin',
    config: {
        /* See https://github.com/Microsoft/ApplicationInsights-JS#configuration */
    },
    initialize: ({ config }) => {
      const appInsights = new ApplicationInsights({
          config: {
              instrumentationKey: 'INSTRUMENTATION_KEY_GOES_HERE'
              /* ...Other Configuration Options... */
          }
      });
      appInsights.loadAppInsights();
    },
    page: ({ payload }) => {
      appInsights.trackPageView();
    },
    track: ({ payload }) => {
      appInsights.trackEvent({ name: 'some event' }, data);
    },
    identify: ({ payload }) => {
      appInsights.setAuthenticatedUserContext(authenticatedUserId, accountId, storeInCookie)
    },
    loaded: () => {
      // return boolean so analytics knows when it can send data to third party
      return !!appInsights
    }
  }
}

/* Initialize analytics */
const analytics = Analytics({
  app: 'awesome-app',
  plugins: [
    googleAnalytics({
      trackingId: '123-xyz',
      customScriptSrc: 'https://my-url.com/to-custom-ga.js'
    }),
    applicationInsightsPlugin({
        key: 'xyz'
    })
  ]
})

/* Track a page view */
analytics.page()

/* Track a custom event */
analytics.track('playedVideo', {
  category: 'Videos',
  label: 'Fall Campaign',
  value: 42
})

/* Identify a visitor */
analytics.identify('user-id-xyz', {
  firstName: 'bill',
  lastName: 'murray'
})

[DavidWells]

A consolidated issue has been created at https://github.com/DavidWells/analytics/issues/153 for plugin requests.

Feel free to comment/reopen this thread if you have begun active development on this plugin.