# 可视化事件设置方法

> 关于代码方式的事件监测，请参阅[如何部署事件监测代码](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/zh/start-guide/deploy-event-tracking.md)。

## 此功能的优势

**无需编码：** 即使没有HTML或JavaScript知识，任何人都可以轻松设置事件。

**直观的操作：** 只需在实际网站屏幕上点击要测量的元素，即可以可视化的方式进行设置。

**快速分析：** 设置后立即开始数据测量，可以快速分析用户行为。

## 常见应用场景

测量"购买"和"资料请求"等重要转化按钮的点击次数。

统一测量在多个页面上共同设置的"收藏"按钮和社交媒体分享按钮的点击次数。

测量汉堡菜单或手风琴菜单等需要操作才能显示的元素的点击次数。

了解网站内特定图像或横幅被点击的次数。

## 设置方法

可视化事件可以通过以下3个步骤进行设置。

### 步骤1：选择要测量的元素

从Ptengine管理屏幕右上角的齿轮图标中选择"事件设置"，然后点击"添加"按钮。

输入要设置事件的页面URL，点击"Go"按钮，设置屏幕将在另一个选项卡中打开。

点击"确认"按钮后，选择要设置事件的元素。将鼠标光标悬停在可设置的元素上时，它们将显示为红色边框。 点击元素时，将显示该元素过去7天的点击次数。 ※如果要为需要点击操作才能显示的元素（如手风琴菜单）设置事件，需点击"交互模式"将元素展开再返回事件设置。

选择"元素范围"。

**①如果是"仅所选元素"的情况**

仅测量点击的特定元素。 当元素设置了"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"，当网页结构改变时，事件可能无法正确测量，请重新设置事件**。

**②如果是"自定义"的情况**

当您想要一起测量与所选元素相同类型、相同父元素或具有相同属性的多个元素（例如：设计相同的按钮）时，建议使用此选项。 建议在滚动页面时确认设置的标签是否都适合作为测量对象。

但是，**如果由于网站改版等原因改变了上述指定的标签或属性，改变后的元素将无法识别，请注意。**

#### **步骤2：设置事件名称和测量范围**

**输入事件名称**。 无论全角还是半角，上限为20个字符。

```
一旦设置的事件名称无法更改。名称相同的事件将视为同一事件合并计数。
```

**选择测量范围**。

**相应页面：** 仅针对步骤1中指定的页面。

```
**相应域名：** 针对与步骤1中指定的URL位于同一域名内的所有页面。

**URL规则：** 可以使用"包含"、"正则表达式"、"前缀匹配"等规则指定特定的多个页面。有关匹配规则的详细信息，请参考[此文章]()。
```

#### **步骤3：完成设置**

设置完成后，点击"确认"，当出现以下屏幕时，设置即完成。

设置的事件可以从项目名称旁边的齿轮图标 > 事件设置中的列表中确认。

### **关于修改和删除设置**

一旦设置的事件的"事件名称"和"测量对象/范围"无法更改。

可以从"事件设置"页面删除设置或编辑备注。

如果使用与现有事件相同的名称创建新事件，现有事件将以添加测量对象的形式进行更新。

#### **删除事件/编辑备注**

从项目名称旁边的齿轮图标 > 事件设置进入列表页面，然后从屏幕右侧的编辑/删除按钮执行操作。

#### **为现有事件添加测量对象**

当设置添加不同页面元素作为事件时，

使事件名与现有事件名相同，

将不会在管理屏幕中添加为新事件，

现有事件将以更新的形式保存。（参考下图）

在事件列表屏幕上点击编辑按钮时，将打开此屏幕。

因此，通过添加另一个元素，可以扩展现有事件的测量范围。但请注意，如果重复设置相同的元素，测量也会重复。

### **确认已设置的事件**

从事件设置屏幕右上的\*\*"确认已设置的事件"\*\*可以查看此URL上设置的事件列表。

已完成事件设置的元素将如上图所示显示颜色。

> 取消勾选时，颜色会变淡，但如果颜色没有完全消失，则表示该元素也被重复设置到另一个事件中。

### **交互模式**

如果要设置的事件的元素需要通过以下类似的界面操作来设定，请使用事件设置屏幕顶部工具栏左上角的交互模式开关。

适用场景例如：\
\
\- 有商品时的购物车\
\- 登录后的页面\
\- 汉堡菜单\
\- 手风琴菜单

默认情况下为OFF，但启用时可以进行屏幕操作。

### **元素层级选择**

为提升用户在可视化事件设置过程中的体验，我们新增了元素层级选择功能。当页面样式导致无法直接选中目标元素时，用户现在可以通过层级选择，逐级定位并选中目标元素，从而顺利完成事件的设置。这一功能极大地提升了复杂页面下事件配置的灵活性和准确性。

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

### **隐藏工具栏**

可以通过事件设置屏幕右上的隐藏按钮隐藏工具栏。

点击绿色箭头将返回到原始状态。

### **与Experience的集成**

Insight的事件可以与Experience的事件进行集成。 但是，Experience是按UU（唯一用户）汇总的，而Insight是按会话为单位，因此数值不一定一致。

有关详细的设置方法，请参考Experience的[编辑器使用指南](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/zh/insight/event/bijuaruibento.md)。

### **关于事件的常见问题**

1. [无法设置事件时](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/zh/insight/event/bijuaruibento.md)
2. [PC页面和SP页面使用相同URL时](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/zh/insight/event/bijuaruibento.md)
3. [如何将相同类型的按钮合并为一个事件](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/zh/insight/event/bijuaruibento.md)
4. [事件的手动设置](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/zh/insight/event/bijuaruibento.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/cn/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.