Application Insights

This module provides a plugin to use and initialize application insights within your vue application.

Dependencies

• @microsoft/applicationinsights-web: 3.x.x

initApplicationInsights

Before application insights can be used it needs to be initialized by calling this function with. The following options are available to configure the initialization:

Option	Type	Description
connectionString	string	Application Insights connection string
enabled	boolean	Enable Application Insights after initialization, defaults to false
router	Router	The router to use for automatic page tracking.
config	IConfig & IConfiguration;	Application Insights configuration overrides.

INFO

Note that enabled is by default false, this is to prevent accidental logging of data to application insights in regards of the GDPR rules.

In order to use application insights, you first need to call the initApplicationInsights function with a valid connectionString.

The initApplicationInsights function also has an optional config parameter that can be used to extend or override the default configuration.

When the initialization takes place depends on your application needs and cookie policies that apply. We identified 3 different scenarios:

enableApplicationInsights

This function can be used to enable application insights after initialization. This can be useful when you want to enable application insights after the user has given consent to use cookies. Depending where you trigger this, you can choose to track the current page through the trackCurrentPageView parameter. This defaults to true when not provided.

Implementation examples

1. No cookie policy, no config, just go

This is the easiest way to try out application insights. As you don't need any config setup, you can just call initApplicationInsights with the connection string straight in your code. This does however doesn't make it possible to change the connection string between environments.

// App.vue
import { initApplicationInsights } from "@xerius/codey-core/modules/application-insights";

initApplicationInsights({
  connectionString: "your-connection-string",
  enabled: true,
  router,
});

2. No cookie policy, but config

When there are no cookie policies and you just need the config for your aiConnectionString, you can get this from the configStore provided by your application.

// App.vue
import { storeToRefs } from "pinia";
import { initApplicationInsights } from "@xerius/codey-core/modules/application-insights";
import { useConfigStore } from "./store/config.store";

const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
configStore.$subscribe((mutation, state) => {
  if (state.config?.aiConnectionString) {
    initApplicationInsights({
      connectionString: state.config.aiConnectionString,
      enabled: true,
      router,
    });
  }
});

3. with cookie policy and config

The initialization happens like in the case above, but here we set enabled: false or omit this parameter. This will prevent application insights from tracking any data until it is enabled. Within the cookiebot setup, call the enableApplicationInsights within the onStatisticsAccept callback.

// libs/cookiebot.ts
import { enableApplicationInsights } from "@xerius/codey-core/modules/application-insights";

setupCookiebot({
  // ...
  onStatisticsAccept() {
    enableApplicationInsights();
  },
});

useApplicationInsights

useApplicationInsights returns the instance of the application insights client. This can be used to manually track events, page views, etc. This is not a ref but because the init takes place in the App.vue it will always be initialized before other components use it.