# 사용자 지정 이벤트 전송
<a name="CloudWatch-RUM-custom-events"></a>

CloudWatch RUM은 [CloudWatch RUM 웹 클라이언트에서 수집한 정보](CloudWatch-RUM-datacollected.md)에 나열된 이벤트를 기록하고 수집합니다. CloudWatch RUM 웹 클라이언트 버전 1.12.0 이상을 사용하는 경우 추가 사용자 지정 이벤트를 정의, 기록 및 전송할 수 있습니다. 정의하는 각 이벤트 유형에 대해 전송할 이벤트 유형 이름과 데이터를 정의합니다. 각 사용자 지정 이벤트 페이로드는 최대 6KB일 수 있습니다.

사용자 지정 이벤트는 앱 모니터에 사용자 지정 이벤트가 활성화된 경우에만 수집됩니다. 앱 모니터의 구성 설정을 업데이트하려면 CloudWatch RUM 콘솔 또는 [UpdateAppMonitor](https://docs.aws.amazon.com/cloudwatchrum/latest/APIReference/API_UpdateAppMonitor.html) API를 사용하세요.

사용자 지정 이벤트를 활성화한 다음 정의하고 전송한 후 검색할 수 있습니다. 사용자 지정 이벤트를 검색하려면 CloudWatch RUM 콘솔의 **Events**(이벤트) 탭을 사용합니다. 이벤트 유형을 사용하여 검색합니다.

## 요구 사항 및 구문
<a name="CloudWatch-RUM-custom-event-syntax"></a>

사용자 지정 이벤트는 이벤트 유형과 이벤트 세부 정보로 구성됩니다. 다음은 이들에 대한 요구 사항입니다.
+ **이벤트 유형**
  + 이벤트의 **type**(유형) 또는 **name**(이름)일 수 있습니다. 예를 들어 **JsError**라는 CloudWatch RUM 기본 제공 이벤트 유형의 이벤트 유형은 `com.amazon.rum.js_error_event`입니다.
  + 1\$1256자여야 합니다.
  + 영숫자, 밑줄, 하이픈 및 마침표의 조합일 수 있습니다.
+ **이벤트 세부 정보**
  + CloudWatch RUM에 기록하려는 실제 데이터를 포함합니다.
  + 필드와 값으로 구성된 객체여야 합니다.

## 사용자 지정 이벤트 기록의 예
<a name="CloudWatch-RUM-custom-event-examples"></a>

CloudWatch RUM 웹 클라이언트에서 사용자 지정 이벤트를 기록하는 방법에는 두 가지가 있습니다.
+ CloudWatch RUM 웹 클라이언트의 `recordEvent` API를 사용합니다.
+ 사용자 지정 플러그인을 사용합니다.

**`recordEvent` API, NPM 예제를 사용하여 사용자 지정 이벤트 전송**

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

**`recordEvent` API, 임베디드 스크립트 예제를 사용하여 사용자 지정 이벤트 전송**

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

**사용자 지정 플러그인을 사용하여 사용자 지정 이벤트를 전송하는 예**

```
// 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);
    }
}
```