# カスタムイベントを送信する
<a name="CloudWatch-RUM-custom-events"></a>

CloudWatch RUM は、[CloudWatch RUM ウェブクライアントによって収集される情報](CloudWatch-RUM-datacollected.md) に記載されているイベントを記録して取り込みます。CloudWatch RUM ウェブクライアントのバージョン 1.12.0 以降を使用している場合は、追加のカスタムイベントを定義、記録、送信できます。定義したイベントタイプごとに、イベントタイプ名と送信するデータを定義します。各カスタムイベントペイロードは最大 6 KB です。

カスタムイベントは、アプリケーションモニターでカスタムイベントが有効になっている場合にのみ取り込まれます。アプリケーションモニターの構成設定を更新するには、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>

カスタムイベントは、イベントタイプとイベントの詳細で構成されます。これらに対する要件は次のとおりです。
+ **イベントタイプ**
  + これは、イベントの**タイプ**でも**名前**でもかまいません。例えば、**JsError** という名前の CloudWatch RUM 組み込みイベントタイプのイベントタイプは、`com.amazon.rum.js_error_event` です。
  + 1～256 文字である必要があります。
  + 英数字、アンダースコア、ハイフン、およびピリオドの組み合わせを使用できます。
+ **イベントの詳細**
  + CloudWatch RUM に記録したい実際のデータが含まれます。
  + フィールドと値で構成されるオブジェクトである必要があります。

## カスタムイベントの記録例
<a name="CloudWatch-RUM-custom-event-examples"></a>

CloudWatch RUM ウェブクライアントでカスタムイベントを記録するには 2 つの方法があります。
+ 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);
    }
}
```