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

CloudWatch RUM graba e ingiere los eventos que se enumeran en [Información recopilada por el cliente web de CloudWatch RUM](CloudWatch-RUM-datacollected.md). Si usa la versión 1.12.0 o posterior del cliente web de CloudWatch RUM, puede definir, registrar y enviar eventos personalizados adicionales. Defina el nombre del tipo de evento y los datos que se van a enviar para cada tipo de evento que defina. La carga útil de cada evento personalizado puede tener un máximo de 6 KB.

Los eventos personalizados se incorporan solo si el monitor de aplicaciones tiene activados los eventos personalizados. Para actualizar los ajustes de configuración del monitor de aplicaciones, utilice la consola CloudWatch RUM o la API [UpdateAppMonitor](https://docs.aws.amazon.com/cloudwatchrum/latest/APIReference/API_UpdateAppMonitor.html). 

Después de habilitar los eventos personalizados y, a continuación, de definir y enviar eventos personalizados, puede buscarlos. Para buscarlos, utilice la pestaña **Events** (Eventos) de la consola de CloudWatch RUM. Busque mediante el tipo de evento.

## Requisitos y sintaxis
<a name="CloudWatch-RUM-custom-event-syntax"></a>

Los eventos personalizados constan de un tipo de evento y detalles del evento. Los requisitos son los siguientes:
+ **Tipo de evento**
  + Puede ser el **type** (tipo) o el **name** (nombre) del evento. Por ejemplo, el tipo de evento integrado de CloudWatch RUM denominado **JsError** tiene un tipo de evento de `com.amazon.rum.js_error_event`.
  + Debe tener entre 1 y 256 caracteres de longitud.
  + Puede ser una combinación de caracteres alfanuméricos, guiones bajos, guiones cortos y puntos.
+ **Detalles del evento**
  + Contiene los datos reales que desee registrar en CloudWatch RUM.
  + Debe ser un objeto que conste de campos y valores.

## Ejemplos de grabación de eventos personalizados
<a name="CloudWatch-RUM-custom-event-examples"></a>

Hay dos formas de grabar eventos personalizados en el cliente web de CloudWatch RUM. 
+ Utilice la API `recordEvent` del cliente web de CloudWatch RUM.
+ Utilice un complemento personalizado.

**Enviar un evento personalizado mediante la API `recordEvent`, ejemplo 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 un evento personalizado mediante la API `recordEvent`, ejemplo de script incrustado**

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

**Ejemplo de envío de un evento personalizado mediante un complemento 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);
    }
}
```