How to add telemetry to buttons and inputs in the Generic UI for external components

Learn how to send information about clicks and inputs in the Generic UI in the external components.

There is a directive for every element to send data to telemetry, in this case for buttons and inputs.

The name of the directive for buttons is: SendButtonTelemetry

The name of the directive for input is: SendInputTelemetry

Use of Button Directive to Send Data:

The use is simple, you should add the directive to every element you desire to report data to the telemetry in the application and then the event will be reported like this:

Button reported

For example:

<button sendButtonTelemetry>
					Let's begin
</button>

The above directive is going to take the text of the button by default to report the event in the telemetry, if you would like to report it with other name you can add a new attribute to the button called "telemetry-value" as follows:

<button sendButtonTelemetry telemetry-value="Let's Start">
					Let's begin
</button>

The directive is defined as follows:

import { Directive, ElementRef, HostListener } from '@angular/core';
import { MonitoringService } from 'src/app/services/monitoring/monitoring.service';

@Directive({
  selector: '[sendButtonTelemetry]'
})

export class SendButtonTelemetryDirective {

  constructor(private elementRef: ElementRef, private telemetryservice: MonitoringService) {}

  @HostListener('click') onClick() {
    let telemetryValue = this.elementRef.nativeElement.getAttribute("telemetry-value");
    let buttonValue = this.elementRef.nativeElement.innerText;
    this.sendTelemetry(`Button: ${telemetryValue || buttonValue}`)
  }
  
  sendTelemetry(value) {
   this.telemetryservice.logEvent(value);
  }

}

Use Input Directive to Send Data:

The use of this input is very similar to the button directive, however, a telemetry value attribute in the input element is required, otherwise, it will appear as "not specified" in the application insights.

The inputs will be reported as follows:

To send data of an input element add the directive "SendInputTelemetry" and add a telemetry-value attribute:

<input sendInputTelemetry telemetry-value="Full Report Email" formControlName="userEmail" placeholder="Enter your email"/>

The directive is defined as follows:

import { Directive, ElementRef, HostListener } from '@angular/core';
import { MonitoringService } from 'src/app/services/monitoring/monitoring.service';

@Directive({
  selector: '[sendInputTelemetry]'
})

export class SendInputTelemetryDirective {

  constructor(private elementRef: ElementRef, private telemetryService: MonitoringService) {}

  @HostListener('change') onChange() {
      this.sendTelemetry();
  }
  
  sendTelemetry() {
    let telemetryValue = this.elementRef.nativeElement.getAttribute("telemetry-value");
    let inputValue = this.elementRef.nativeElement.value;
    this.telemetryService.logEvent(`Input: ${telemetryValue}`, [{value: inputValue}]);
  }

}