您可以在圈选事件中新建网页端或移动端的圈选事件,并查看圈选的所有事件的详细信息。
前提条件
在使用此功能之前,请确保已经启用全埋点,即在Web端或App端的SDK中已打开全埋点开关,各端SDK的全埋点功能开关配置请参见各端数据接入SDK文档。
页面介绍
「圈选事件」页面如下:

- 可输入事件名称/事件描述搜索您想查找的事件,可手动切换圈选事件的排序方式,如最近关注、创建日期、包含事件数;
- 可选择网页端圈选事件和移动端圈选事件。
网页端圈选
第一步:点击“+新建圈选事件”-网页端;
第二步:输入圈选网址的地址,并点击“提交”;

提示:如果点击提交没有出现圈选工具条,请查看是否已开启了全埋点。
第三步:圈选元素。
①若输入的网站之前接过圈选埋点sdk,则可以在新的标签页打开地址对应的页面,顶部会有一个浮动的工具条,如下图(圈选埋点页面):

- “浏览、圈选、热力图”视角切换:
- 默认选中“圈选”,正常使用圈选功能;
- 点击“浏览”会变为浏览网站模式,圈选相关功能不可用;
- 点击“热力图”,需要选择页面或页面组。

- 点击“定义页面”按钮,可对整个当前页面进行定义;

- 复选框“高亮已定义事件”,默认关闭,打开后整个页面上展示出所有已圈选过的前端控件元素,颜色跟新建圈选有区别;

- 点击下拉框“本页已标记元素xx个”,可展开下拉列表,其中列出所有当前页已经定义过的元素型事件;

- 点击”关闭“按钮,即可退出圈选模式变成正常浏览模式,浮动工具条消失。
②鼠标在页面上移动时会出现绿色的浮层标记,点击后进入元素圈选,如下图:
- 填写事件名称,选择所属页面、勾选限定条件;
- 底部为当前选中元素的小时级(最近48小时,实时数据),触发次数、触发人数变化;
- 点击保存,即可成功保存该元素。

- 元素事件组分为如下两种情况:
- 归属于不同页面的相同事件,如导航栏的按钮,请先用通配路径定义相应的页面组,然后在定义元素事件时选择该页面组;
- 归属于相同页面的列表内的同类事件,忽略“匹配位置”和“匹配内容”选项即可。
第四步:定义页面。
- 可定义新的页面/页面组;
- 填写页面名称、域名(有三个取值:/http/https,默认选中)、更多设置等;
- “定义新的页面/页面组”下,展示当前页面上定义过的页面类事件/页面组,选中任意一个可以查看定义的配置,仅可以修改页面名称;
- 右侧底部为当前选中元素的小时级(最近48小时,实时数据),触发次数、触发人数变化;
- 点击保存,即可成功保存该页面。

页面组的定义分为如下两种情况:
- 通配路径,如定义包含:
http://www.example.com/product/123456.html
的页面组,可以将页面路径设置为:http://www.example.com/product/\*
- 限定参数,如定义事件:汽车电商-搜索SUV,符合定义的链接包括
xxx.com/search?keyword=SUV&tab=1
和xxx.com/search?keyword=SUV&tab=2
,则需要将查询参数设置为"keyword=SUV&\*"
。
第五步:事件圈选之后可以在各个分析功能中选择和使用,使用方法与一般事件基本相同;也可以在“数据管理-圈选事件中”中进行查看和管理。

移动端圈选
可新建圈选事件。扫码启动圈选,如下步骤:
第一步:点击“+新建圈选事件”-移动端;

第二步:微信扫码;

第三步:在手机浏览器中打开;
第四步:选择圈选方式;
- 如果圈选启动出错,会显示如下图:

- 如果圈选启动成功,可开始进行圈选埋点
- 点击鼠标开始圈选,如下图:

- 定义圈选元素,选中的元素呈现绿色粗边框、透明底色,可对其进行事件命名、选择所属页面等操作;

- 可点击圈选事件的卡片,即可进入圈选事件详情。
- 圈选事件详情如下图,包含圈选的元素、缩略图、数据预览、事件详情等信息。

温馨提示:
- 圈选事件会在事件分析、留存分析、转化分析、用户路径、用户分群的事件配置选项里面显示,如下图:

注:DataFinder 是火山引擎增长分析的曾用名。