Application Insights Click Analytics Auto-collection plugin in Angular
Letterhead
1
Reputation point
Hello Community,
Does anyone know how to implement the Click Analytics Auto-collection plugin in Angular?
I created a service for App Insights and I'm able to send events when I call logEvent
from a component, but the auto-collection plugin does not appear to be doing anything when I click on elements I've assigned the custom html tag data-click-
to.
Thank you!
//TelemetryService.ts
import { Injectable } from '@angular/core';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';
import { environment } from 'src/environments/environment';
@Injectable({ providedIn: 'root' })
export class TelemetryService {
appInsights: ApplicationInsights;
constructor() {
const clickPluginInstance = new ClickAnalyticsPlugin();
this.appInsights = new ApplicationInsights({
config: {
instrumentationKey: environment.appInsights.instrumentationKey,
extensions: [clickPluginInstance],
extensionConfig: {
[clickPluginInstance.identifier]: clickPluginConfig
}
}
});
this.appInsights.loadAppInsights();
}
logEvent(name: string, properties?: { [key: string]: any }) {
this.appInsights.trackEvent({ name: name}, properties);
}
}
// Click Analytics configuration
const clickPluginConfig = {
autoCapture: true,
dataTags: {
useDefaultContentNameOrId: true,
customDataPrefix: "data-click-",
}
};