# カスタムイベントの設定方法（詳細）

{% hint style="info" %}
コード不要のビジュアル設定方法については[ビジュアルイベント設定方法](/insight/event/setup.md)をご覧ください。
{% endhint %}

## 設定手順

1. Ptengine Experienceにログインし、管理画面にある「データ管理」>「トラッキングタグを取得」をクリックします。
2. 「トラッキングタグを取得」画面に入り、「イベント計測」をクリックし、イベントタグをコピーします。
3. コピーしたコードをイベントが発生するページに設置してください。
   * Google Tag Managerを利用している場合、[Google Tag Manager経由で設定](/start-guide/othertag/tag-gtm.md)をご参照ください。
   * 直貼りの場合は`</body>`の前に設置してください。

## コードによるイベント計測

`ptengine.track` メソッドを使用して、重要な行動のイベントトラッキングを行います。このメソッドをフォーム送信成功や決済成功など、あらゆるユーザー行動に埋め込むことができます。商品情報や関連するインタラクション情報などのプロパティをイベントに追加することも可能です。

```javascript
ptengine.track('check_out', {
    // イベントプロパティー：決済した商品情報、予約情報など
    product_category: 'Clothing',
    product_pricing: '1293'
});
```

イベントプロパティーを活用することで、ユーザー行動トレンドをより正確に把握できます。必要に応じてプロパティを追加・変更してください。

イベントプロパティーの詳細については[イベントプロパティーについて](/experience/setting/event-labels.md)の記事をご参照ください。

## 設定事例

### 実例1：「Login」ボタンのクリックを計測する

**HTMLの場合：**

```html
<button onclick="ptengine.track('登録')">Login</button>
```

**JavaScriptの場合：**

```javascript
document.getElementById('btnLogin').addEventListener('click', function() {
    ptengine.track('登録');
});
```

### 実例2：「Submit」ボタンのクリック時にメールアドレスや登録日も計測する

**HTMLの場合：**

```html
<button id="btnSubmit"
    onclick="ptengine.track('イベント名', {
        email: document.getElementById('email').value,
        submit_date: new Date()
    });">
submit</button>
```

**JavaScriptの場合：**

```javascript
document.getElementById('btnSubmit').addEventListener('click', function() {
    ptengine.track('イベント名', {
        email: document.getElementById('email').value,
        submit_date: new Date()
    });
});
```

### 実例3：複数のカート追加ボタンを1つのイベントとして記録する

```javascript
try {
    var opationRecord = [];

    function ptEventSend(eventName) {
        if (eventName && !opationRecord.includes(eventName)) {
            opationRecord.push(eventName);
            window.ptengine && window.ptengine.track(eventName);
        }
    }

    function addEventListenersToElements() {
        var addCartBottom = document.getElementById('add_cart_bottom');
        var addCart = document.getElementById('add_cart');

        if (addCartBottom) {
            addCartBottom.addEventListener('click', function() {
                ptEventSend('カート追加');
            }, false);
        }

        if (addCart) {
            addCart.addEventListener('click', function() {
                ptEventSend('フローティングバーカート追加');
            }, false);
        }
    }

    addEventListenersToElements();
    var ptTimer = setInterval(addEventListenersToElements, 500);

} catch (e) {}
```

{% hint style="warning" %}
トラッキングタグの設定はサイトのHTMLソースコードを変更することになるため、技術者の方に設定して頂くか、弊社サポートが必要な場合はチャットなどによりお気軽にお問い合わせください。
{% endhint %}

設定完了後「データ管理」画面でイベントの詳細情報を確認できます。また「イベント」や「イベントプロパティー」機能で「…」編集ボタンをクリックすると、説明も追加できます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helps.ptengine.com/experience/setting/custom-event-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.