Application Insights Click Analytics Auto-collection plugin in Angular

Letterhead 1 Reputation point
2021-09-22T21:46:58.787+00:00

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-",
  }
};
Azure Monitor
Azure Monitor
An Azure service that is used to collect, analyze, and act on telemetry data from Azure and on-premises environments.
2,830 questions
{count} votes