Custom Event isn't be tracked by using applicationInsight within vue

user_13673299 0
Viewed 621

I am using azure application-insight to track events of a self-built search engine written within VUE.

I wrapped the application-insight SDK as a service and export a function.

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

const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: "xxxx",
    autoTrackPageVisitTime: true,
    enableAutoRouteTracking: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true
  }
})

appInsights.loadAppInsights();
appInsights.trackEvent();

export function useAppInsights() {
  return appInsights
}

Then in my search-view page (search.vue), I call the service of application-insight and register two custom events to track.

`
<script>
  import {
    useAppInsights
  } from '../services/AppInsights'

  useAppInsights().trackEvent("search page loaded!");
  useAppInsights().trackPageView({
    name: 'search page'
  });

  export default {
    methods: {
      addQuery(key) {
        useAppInsights().trackEvent({
          name: 'SelectTag',
          properties: {
            searchInput: key
          }
        });
        this.searchInput = key;
        this.handleSearch();
      },
    }
  };
</script>

The search.vue is integrated into the main.js using the router.

import Search from './components/Search.vue'
import Product from './components/Product.vue'

const routers = [{
    path: '/search',
    name: 'Search',
    component: Search
  },
  {
    path: '/product',
    name: 'Product',
    component: Product
  },
]
export default routers

import Vue from "vue";
import VueRouter from "vue-router";
import "element-ui/lib/theme-chalk/base.css";
import routers from "./router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import axios from "axios";

Vue.config.productionTip = false;

Vue.use(VueRouter);
Vue.use(ElementUI);
Vue.use(axios);

const router = new VueRouter({
  mode: "history",
  routes: routers,
});

new Vue({
  el: "#app",
  router,
  render: (h) => h(App),
});

The catalogue of my project is

enter image description here

But in my azure application-insight portal, I cannot see any events at all. enter image description here

Does anyone have solutions to this condition? Many thanks!

azure-application-insights vue.js html javascript
1 Answers

I referred the following articles to realize trackevent codes:

In the second article, the sample of event tracking using application-insight is very clear:

appInsights.trackEvent({
  name: 'some event',
  properties: { // accepts any type
    prop1: 'string',
    prop2: 123.45,
    prop3: {
      nested: 'objects are okay too'
    }
  }
});

emmm...so I am trapped by the condition.

user_136732990
Related