# Enviar eventos personalizados
<a name="CloudWatch-RUM-custom-events"></a>

O CloudWatch RUM registra e ingere os eventos listados em [Informações coletadas pelo cliente da Web CloudWatch RUM](CloudWatch-RUM-datacollected.md). Se você usar a versão 1.12.0 ou posterior do cliente da Web do CloudWatch RUM, poderá definir, registrar e enviar eventos personalizados adicionais. Você define o nome do tipo de evento e os dados a serem enviados para cada tipo de evento definido. Cada carga útil de evento personalizado pode ter até 6 KB.

Os eventos personalizados só serão ingeridos se o monitor de aplicações tiver eventos personalizados habilitados. Para atualizar as configurações do monitor de aplicações, use o console do CloudWatch RUM ou a API [UpdateAppMonitor](https://docs.aws.amazon.com/cloudwatchrum/latest/APIReference/API_UpdateAppMonitor.html). 

Após habilitar eventos personalizados, e definir e enviar os eventos personalizados, você poderá pesquisá-los. Para isso, use a guia **Events** (Eventos) no console do CloudWatch RUM. Pesquisar usando o tipo de evento.

## Requisitos e sintaxe
<a name="CloudWatch-RUM-custom-event-syntax"></a>

Os eventos personalizados consistem em um tipo de evento e detalhes do evento. Os requisitos para cada um deles são os seguintes:
+ **Tipo de evento**
  + Isso pode ser o **tipo** ou o **nome** do evento. Por exemplo, o tipo de evento integrado do CloudWatch RUM denominado **JsError** tem um tipo de evento de `com.amazon.rum.js_error_event`.
  + Deve ter de 1 a 256 caracteres.
  + Pode ser uma combinação de caracteres alfanuméricos, sublinhas, hifens e pontos.
+ **Detalhes do evento**
  + Contém os dados reais que você deseja registrar no CloudWatch RUM.
  + Deve ser um objeto que consiste em campos e valores.

## Exemplos de registro de eventos personalizados
<a name="CloudWatch-RUM-custom-event-examples"></a>

Há duas maneiras de registrar eventos personalizados no cliente da Web do CloudWatch RUM. 
+ Usar a API `recordEvent` do cliente da Web do CloudWatch RUM.
+ Usar um plug-in personalizado.

**Enviar um evento personalizado usando a API `recordEvent`, exemplo de NPM**

```
awsRum.recordEvent('my_custom_event', {
        location: 'IAD', 
        current_url: 'amazonaws.com', 
        user_interaction: {
            interaction_1 : "click",
            interaction_2 : "scroll"
        }, 
        visit_count:10
    }
)
```

**Enviar um evento personalizado usando a API `recordEvent`, exemplo de script integrado**

```
cwr('recordEvent', {
    type: 'my_custom_event', 
    data: {
        location: 'IAD', 
        current_url: 'amazonaws.com', 
        user_interaction: {
            interaction_1 : "click",
            interaction_2 : "scroll"
        }, 
        visit_count:10
    }
})
```

**Exemplo de envio de um evento personalizado usando um plug-in personalizado**

```
// Example of a plugin that listens to a scroll event, and
// records a 'custom_scroll_event' that contains the timestamp of the event.
class MyCustomPlugin implements Plugin {
    // Initialize MyCustomPlugin.
    constructor() {
        this.enabled;
        this.context;
        this.id = 'custom_event_plugin';
    }
    // Load MyCustomPlugin.
    load(context) {
        this.context = context;
        this.enable();
    }
    // Turn on MyCustomPlugin.
    enable() {
        this.enabled = true;
        this.addEventHandler();
    }
    // Turn off MyCustomPlugin.
    disable() {
        this.enabled = false;
        this.removeEventHandler();
    }
    // Return MyCustomPlugin Id.
    getPluginId() {
        return this.id;
    }
    // Record custom event.
    record(data) {
        this.context.record('custom_scroll_event', data);
    }
    // EventHandler.
    private eventHandler = (scrollEvent: Event) => {
        this.record({timestamp: Date.now()})
    }
    // Attach an eventHandler to scroll event.
    private addEventHandler(): void {
        window.addEventListener('scroll', this.eventHandler);
    }
    // Detach eventHandler from scroll event.
    private removeEventHandler(): void {
        window.removeEventListender('scroll', this.eventHandler);
    }
}
```