# ビジュアルイベント設定方法

> コードによるイベント計測については[カスタムイベントの設定方法](/experience/setting/custom-event-setup.md)をご覧ください。

{% hint style="success" %}
**ビジュアルイベント設定とは**

画面を直接操作しながらコーディング不要でイベントを設定できる機能です。\
設定プロセスを極力シンプルにしているため、技術担当者の支援がなくても、\
簡単にイベント要素を選択することができます。
{% endhint %}

### この機能のメリット

* **コーディング不要:** HTMLやJavaScriptの知識がなくても、誰でも簡単にイベント設定ができます。
* **直感的な操作:** 実際のウェブサイト画面上で計測したい要素をクリックするだけで、視覚的に設定を進められます。
* **迅速な分析:** 設定後すぐにデータ計測が開始され、ユーザー行動を迅速に分析できます。

### よくある利用シーン

* 「購入」や「資料請求」など、重要なコンバージョンボタンのクリック数を計測。
* 複数のページに共通して設置されている「お気に入り登録」ボタンやSNSシェアボタンのクリック数をまとめて計測。
* ハンバーガーメニューやアコーディオンメニューなど、操作しないと表示されない要素のクリック数を計測。
* サイト内の特定の画像やバナーがどれくらいクリックされているかを把握。

### 設定方法

ビジュアルイベントは、以下の3ステップで設定できます。

#### Step1：計測する要素を選択する

1. Ptengine管理画面の右上にある歯車アイコンから「イベント設定」を選択し、「追加」ボタンをクリックします。

   <figure><img src="/files/AKCVbMPPmX6XYJsFObcs" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/NT0ga0kZpGTie1iXZKHZ" alt=""><figcaption></figcaption></figure>

   <br>
2. イベントを設定したいページのURLを入力し、「Go」ボタンをクリックすると、別タブで設定画面が開きます。

   <figure><img src="/files/7ta4fWoA36oxCmJfM587" alt=""><figcaption></figcaption></figure>
3. 「了解」ボタンをクリックした後、「了解」ボタンをクリックした後、イベントを設定したい要素を選択してください。マウスカーソルを合わせると、設定可能な要素が赤枠で表示されます。\
   要素をクリックすると、その要素の直近7日間のクリック数が表示されます。\
   ※アコーディオンメニューなど、クリック操作が必要な要素にイベントを設定する場合は、後述の「画面操作モード」をご参照ください。

   <figure><img src="/files/tUmtzuuvZpDNpIr2fSdA" alt=""><figcaption></figcaption></figure>

   ![](/files/rhTUq8JalWswn6evUEAH)
4. 「要素範囲」を選択します。

**①「選択した要素のみ」の場合は**\
クリックした特定の要素のみを計測します。\
要素に「id」が設定されている場合など、ピンポイントで指定したい場合におすすめです。\
\
例えば、HTMLソースのbody要素の中から、選択された要素をイベント対象にします。\
`body > div:nth-child(5) > div:nth-child(2) > div:nth-child(1) > button:nth-child(3)` のように、入れ子になった「箱」を順番にたどって指定します。\
これは、ウェブページの「本文(body)」という大きな箱の中から、「5番目の箱の中の、2番目の箱の中の、1番目の箱の中の、3番目のボタン」というように、目的の「部品(要素)」をピンポイントで選ぶイメージです。

もし、「部品(要素)」に「id」という名前が付いている場合は、順番を気にせずに直接「id」で選べます。そのため、イベントを設定したい「部品(要素)」に「id」がある場合は、「**選択した要素のみ**」を選ぶ方が簡単でおすすめです。

ただし、**要素に「id」がない場合、Webページの構造が変更されると、イベントを正しく計測できなくなる可能性がありますので、イベントを設定し直してください**。

**②「カスタム」の場合は** **:**\
選択した要素と同じ種類や同じ親要素、又は同じ属性を持つ複数の要素（例：同じデザインのボタンなど）をまとめて計測したい場合におすすめです。\
設定したタグがすべて計測対象として適切かどうか、ページをスクロールしながら確認することをおすすめします。

ただし、**サイト改修等で上記で指定したタグや属性を変更すると、変更後の要素は識別できませんのでご注意ください。**\
例：\<div>タグで囲っていたテキストを\<p>タグに変えるなど

また、**「DOM構成を無視」をONにすると、ページ全体の要素にカスタムルールが適用されますので、設定したい内容に合わせて調整してください。**

* **デフォルト:** OFF（カスタムルールは同じブロック内の要素のみに適用）
* **ONの場合:** カスタムルールが、同じ要素を持つページ全体のコンテンツに適用されます。
  * 例：ある画像（`<img>`タグ）をクリックし、カスタムルールで同じタグを指定した場合、「DOM構成を無視」をONにすると、ページ内のすべての画像がイベント対象になります。
* **推奨ケース:** `href`で指定したURLを持つ画像など、同じ内容の要素がページ内で異なるDOM構成にある場合にONにすると便利です。
*

<figure><img src="/files/VG2rm78vRhg7xQNVsmnO" alt=""><figcaption></figcaption></figure>

#### **Step２.**&#x30A4;ベント名と計測範囲を設定す

1. **イベント名**を入力します。
   * 全角・半角問わず20文字が上限です。
   * 一度設定したイベント名は変更できません。
2. **計測範囲**を選択します。
   * **該当ページ:** Step1で指定したページのみを対象とします。
   * **該当ドメイン:** Step1で指定したURLと同一ドメイン内の全ページを対象とします。
   * **URLのルール:** 「含む」「正規表現」「前方一致」などのルールを使い、特定の複数ページを対象に指定できます。マッチングルールの詳細は[こちらの記事](/faq/others/matching-rules.md#mu)をご参照ください。

![](/files/I5E8NzrKxJe1ek96CkI9)

![](/files/7s3jiEzT18d6rbRuWeRq)

#### **Step３.**&#x8A2D;定を完了する

設定が終ったら「確定」をクリックし、下記の画面が出たら設定完了です。

設定したイベントは、プロジェクト名横の歯車アイコン > イベント設定より一覧を確認できます。

![](/files/mms7WhT1sWdR7THt1wlm)

### **設定の変更・削除について**

* 一度設定したイベントの「イベント名」「計測対象・範囲」は変更できません。
* 設定の削除やメモの編集は、「イベント設定」の一覧ページから行えます。
* 既存のイベントと同じ名前で新しいイベントを作成すると、計測対象が追加される形で既存のイベントが更新されます

#### **イベントの削除・メモの編集**

プロジェクト名横の歯車アイコン > イベント設定より一覧ページに入り、画面右側の編集・削除ボタンより作業できます。

<figure><img src="/files/s1Mz8nmLQHNsELlf3Vl5" alt=""><figcaption></figcaption></figure>

#### **既存イベントに計測対象を追加**

異なるページ要素をイベントとして追加に設定する際、

* イベント名を既存のイベント名と同じにする、
* 管理画面では新規イベントとして追加されず、
* 既存のイベントが更新される形で保存されます。（以下の画像参照）

![イベント一覧画面で編集ボタンをクリックすると、こちらの画面が開きます。](/files/DieT7MLm2uA80TY0i1DB)

イベント一覧画面で編集ボタンをクリックすると、こちらの画面が開きます。

そのため別要素を追加することで、既存イベントの計測範囲を広げることができます。なお同じ要素を重複設定すると計測も重複されるため、ご注意ください。

### **設定済みイベントの確認**

イベント設定画面右上&#x306E;**「設定済みイベントの確認」**&#x304B;らは、このURL上で設定されているイベント一覧を確認できます。

![](/files/Qqwx8uSFvVcQIkAMqYP2)

イベント設定が完了している要素は、上の画像のように色が付きます。

{% hint style="danger" %}
チェックを外すと色のトーンは下がるが、ただし色が完全に消えない場合、その要素は別のイベントにも重複して設定されていることになります。
{% endhint %}

### **画面操作モード**

イベントを設定したい要素が以下のような画面上で操作して指定する必要がある場合は、イベント設定画面上部のツールバー左上にある設定モードのオンオフ機能をご利用ください。

* ログイン後のページ
* ハンバーガーメニュー
* アコーディオンメニュー

<figure><img src="/files/Y8l1VphufdwYqN6aiFIo" alt=""><figcaption></figcaption></figure>

デフォルトではOFFになりますが、ONにすると画面操作ができるようになります。

### **要素の階層選択**

ビジュアルイベント設定時のユーザー体験を向上させるため、要素の階層選択機能を新たに追加しました。ページのスタイルによって対象要素を直接選択できない場合でも、階層選択を使用して上位要素から順に対象要素を絞り込み、選択することができます。これにより、複雑なページでのイベント設定の柔軟性と精度が大幅に向上します。

### **ツールバーの非表示**

![](/files/B0JmgZk6IJoCdVwpj2bQ)

* イベント設定画面右上の隠すボタンで、ツールバーを隠すことができます。（画像をご参考ください）
* 緑色の矢印をクリックすると、元の状態に戻ります。

### **Experienceとの連携**

InsightのイベントはExperienceのイベントと連携することが可能です。\
ただし、ExperienceはUU（ユニークユーザー）で集計されるのに対し、Insightはセッション単位であるため、数値が必ずしも一致するわけではありません。

詳細の設定方法はExperienceの[エディターの使い方](/experience/campaign/create-new/editor-usage.md)をご参照ください。

### **イベントに関するよくある質問**

1\. [イベントが設定できない場合](/faq/insight-setting/event-cannot-set.md)

2\. [PC向けとSP向けページで同一URLを使用している場合](/faq/start-guide/pc-sp-switch.md)

3.[同じ種類のボタンを1つのイベントとして合算する方法](/faq/insight-setting/event-merging.md)

4.[イベントの手動設定](/experience/setting/custom-event-setup.md)


---

# 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/insight/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.