> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/generic-infrastructure-internal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/generic-infrastructure-internal/guides/how-to-add-telemetry-to-buttons-and-inputs-in-the-generic-ui-for-external-components.md).

# How to add telemetry to buttons and inputs in the Generic UI for 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](/files/-Mf446eai6l2kE2K0J_B)

 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:

![](/files/-Mf44fbLH_xHk9r-I1Qo)

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}]);
  }

}

```