新建Web操作

BPI支持手动配置、自动识别和圈选三种方式来定义Web操作。本文介绍如何手动配置Web操作。自动识别Web操作请参见操作自动识别。圈选Web操作请参见操作圈选。

要手动配置一个Web操作，需完成以下配置：

  1. 定义操作基本配置和识别规则。
  2. 定义操作采集参数和计算参数。
  3. 查看操作请求列表和参数列表。

说明：

  • BPI V3.6.0.0及以上版本（JS探针3.2.1）支持window.open、A标签、submit三类点击事件的自动识别；浏览器发送独立Ajax请求自动识别；浏览器打开页面自动识别。

  • 如果点击操作但不发送任何网络请求，可采用埋点事件上传数据，即SPE事件。

在导航栏中依次点击业务感知分析>操作列表，点击页面右上角的image-20210204115815804按钮，选择Web操作进入新建操作页面。

定义操作

在左上角点击1602124883280页签，可切换至定义操作页面。

操作基本配置

  • 操作名称：支持中文、字母、数字或下划线，最多输入50位。

  • 选择操作类型：支持以下几种类型操作。

    • 浏览器触发的交互事件：适用于配置网页上“看得见”的点击事件，包括可点击的按钮、文字、图片、链接等。点击后可能跳转至新的页面，也可能触发几个Ajax请求，此类型操作定义为浏览器触发的交互事件。

      说明：执行点击后JS探针会自动把跳转等待阈值（默认3秒，可在配置>系统配置中设置）内的打开页面事件和400ms内触发的Ajax请求归属于这个操作。

    • 浏览器发送一次Ajax请求：用户在浏览网页时，对于网页自动发送的Ajax请求（如广告轮播图）、页面加载完成后异步渲染的信息（如表格数据、用户信息），用户可将其定义为Web操作。

    • 浏览器打开页面：如果在浏览器地址栏输入一个URL后回车打开一个页面A，用户可在操作识别规则配置A页面的URL，JS探针会自动把打开页面归属于这个操作。

    • SPE事件：在H5页面如果有未发送请求的事件，无法通过常规的点击事件、Ajax请求、打开页面定义操作时，需采用JS探针的自定义事件处理，如阅读《XXX客户须知》文档、人脸识别页面、弹窗事件等。

      spe1

  • 选择操作所属应用：可搜索然后给操作选择一个应用，类似操作标签，应用也作为操作的一个属性标签，用于快速查找过滤操作。

  • 标记操作：点击1602125409722图标，对新操作添加标签，用户可根据操作的业务属性对操作添加1个或多个标签，以便利用标签快速过滤操作。用户可在搜索框模糊查询标签名称，点击搜索框右侧1602125431237可将搜索内容添加为新的标签名称。选择完成后点击关闭按钮。该配置为可选项。

    image-20210204115732886

操作识别规则

操作识别配置告知探针如何正确识别一个操作，不同操作类型需要完成的操作识别规则配置不同。

浏览器触发的交互事件

image-20210204115756887

交互元素所属页面URI

设置交互元素所在页面规则，有以下几种配置。

  • 精准匹配指该项条件完全一样时才识别为一个操作，常用于区分事件所在页面时。选择后在输入框输入URI路径，如 /web/bpi/operation/list；如果用户要配置带有请求参数条件的页面URI，可点击1602125631135配置请求参数信息。

    image-20210204124713653

    • 请求方法：支持GET、POST、PUT、DELETE、HEAD、不限。

    • 请求URI：与交互元素所属页面URI配置相同。

    • 参数位置：条件参数的位置，支持从HTTP请求头、HTTP请求体、HTTP响应头、HTTP响应头、URL参数、URL路径、URL全路径中获取参数。其中URL路径是指获取URI路径字符串；URL全路径则指的是获取整个URL，包括域名、端口、路径、参数；URL参数指URL路径中“？”后的参数。

    • 参数类型：支持识别文本（string）、整型（int）、浮点型（float）和日期（date）四种类型的参数。

    • 参数：填写参数key。

    • 参数值：设置参数条件，不同的参数类型支持的对比类型不同。支持添加多个参数条件，多个参数条件之间是and的关系。

      • 举例1：参数位置选择HTTP请求体时，如果参数位于JSON中，支持填写参数key获取参数，如要获取zhangsan，【参数】可填写Name。

        说明：V3.5.3.0以上版本可支持嵌套JSON获取。

        {
   "PhoneNum":"13657433303",
   "Name":"zhangsan"
}

      • 举例2：参数位置选择HTTP响应体时，如果参数位于嵌套的json或list结构中，支持key1.key2和[index]形式获取参数，如要获取0404，【参数】可填写[0].pageInfo.curPageNum[1]。

        [{
  "dsName": "null",
  "pageInfo": 
{
   "PhoneNum":"13657433303",
   "Name":"zhangsan"
   "curPageNum":[0303,0404,0505]
}
}]

      • 举例3：参数位置选择URL参数，如要获取123，【参数】可填写id。

        localhost:8080/yanshi/orser.html?id=123

      • 举例4：参数位置选择URL路径，指/order/operation/manual，如要获取operation，【参数】可选择between，填写order/和/manual。

      • 举例5：参数位置选择URL全路径，指http://www.tingyun.com/order/operation/manual，如要获取tingyun，【参数】可选择between，填写www.和.com。

        http://www.tingyun.com/order/operation/manual

  • 等于任意值指忽略元素路径，无论返回什么值都会识别为一个操作，常用于不需要区分事件所在页面时。

  • 正则匹配指按填写的匹配符，用户可在输入框中输入匹配规则，满足规则的事件识别为一个操作。

说明：使用正则匹配时，仅支持常用的符号，包括 . ? + * | { } [ ]。\s \d \w 等这些都不会被转义，例如： \d{4} 要改写成 [0-9]{4}。

使用举例，如从业务分析不同页面点击【业务追踪】时，如配置成“精准匹配”会识别成2个操作，配置成“等于任意值”会聚合成1个操作，用户也可配置“正则匹配” .*bpi.*把从业务分析的不同页签点击【业务追踪】聚合成一个操作。

image-20210203114108659

image-20210203114236993

元素路径

设置交互元素在页面的path，有以下几种配置。

  • 精准匹配，指元素路径完全一样时才识别为一个操作，常用于需要区分元素在页面上的位置时；
  • 等于任意值，指忽略元素路径，无论返回什么值都会识别为一个操作，常用于不需要区分元素在页面上的位置时；
  • 模糊匹配，用户点击image-20210203125200836后，可在弹框中填写路径规则，将满足规则的事件识别为一个操作。

使用举例，如在【操作列表】点击不同的操作名称或“编辑”按钮时，如配置成“精准匹配”会识别成多个操作；配置成“等于任意值”会聚合成1个操作；用户也可配置“模糊匹配” 把操作列表点击操作名称的事件聚合成一个操作。如下图所示，先在浏览器找到多个元素的路径；

image-20210203154246063

比较2个元素路径，再把不同的部分聚合成 tr:nth-child(*)；

路径1：body >  div.bg-gray  > custom-ext-table > div:nth-child(2) > ngx-table > div.table-fixed  > tbody > tr:nth-child(1) > td:nth-child(1) > div > a > span

路径2：body >  div.bg-gray  > custom-ext-table > div:nth-child(2) > ngx-table > div.table-fixed  > tbody > tr:nth-child(2) > td:nth-child(1) > div > a > span

模糊路径：body >  div.bg-gray  > custom-ext-table > div:nth-child(2) > ngx-table > div.table-fixed  > tbody > tr:nth-child(*) > td:nth-child(1) > div > a > span

把模糊路径填在输入框中，示例如下：

image-20210203144530858

点击image-20210205110203481可添加一级元素路径，默认内容为“...”表示任意一层或多层路径。点击image-20210205110224668后可配置元素路径，结构为【元素】冒号【顺序】#【id】.【class】，说明如下：

  • 元素：如div、a。

  • 顺序：直接输入数字即可，如：nth-child(2)就输入2。nth-child(n)选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

  • id：id的名称，如id1。

  • className：class类的名称，如.className1。

  • 层级：从左往右以“>”隔开依次为先辈级元素 > ... > 父级元素 > 子级元素 > 孙子级元素 > 当前元素。

  • 举例：div:nth-chaild(2)#id1.className1 > div:nth-chaild(2)#id2.className2 > a:nth-chaild(2)#id.className的配置如下所示，其中a:nth-chaild(2)#id.className，表示顺序是第2位、id等于id，class等于className的a元素。

    1602126060256

说明：

  • 可以使用通配符来定义元素匹配规则，如div:nth-child( *)#*.*，表示任意顺序、任意id、任意class的div元素。
  • 可以不指定元素属性来定义元素匹配规则，如div，表示任意顺序、任意id、任意class的div元素。
  • 可以使用“ * ”来定义路径规则，如div > div > * > div > a，表示中间可以有1级路径，可以是任意元素。
  • 可以使用“...”来定义路径规则，如div > div > ... >div > a，表示中间可以有n级路径，每级都可以是任意元素。
元素内容

设置交互元素在页面的属性，有以下几种配置。

  • 精准匹配，指元素内容完全一样时才识别为一个操作；

  • 等于任意值，指忽略元素内容，无论返回什么值都会识别为一个操作；

  • 包含，用户可在输入框中输入匹配内容，包含内容的事件识别为一个操作。

说明：如果当前元素是img，取值优先级：title > src > nodeName； 如果当前元素是a标签，取值优先级： text > title > href > nodeName ； 其他则按value > text > title中的优先级取值。

使用举例，如在【操作列表】点击不同的操作名称时，如元素路径配置成“等于任意值”，元素内容配置成“精准匹配”会识别成多个操作；元素内容配置“等于任意值”该页面的所有事件会聚合成1个操作；用户也可配置元素内容“包含” 【监测】把操作名称包含”监测“的事件聚合成一个操作。

image-20210203153857802

元素触发请求/页面

设置点击交互元素后触发的请求或打开页面规则，有以下几种配置。

  • 等于任意值，指忽略元素触发请求，无论触发什么请求都会识别为一个操作。

  • 条件匹配，用户点击image-20210203125200836后，可在弹框中填写元素触发请求、页面、iframe规则。点击1602042842557后弹出一条规则选项设置，规则和规则之间为“且”的关系，配置规则如下。

    • 匹配规则，选择完全匹配时，操作的所有请求/页面/iframes满足以上条件才被过滤；选择部分匹配时，操作的部分请求/页面/iframes满足以上条件即被过滤。

    • 位置：可选择请求、iframes、页面；默认选择请求。

    • URI规则设置：支持配置全路径匹配（选择“等于”）和正则匹配（选择“正则”）。

      说明： 正则匹配仅支持常用的符号，包括 . ? + | { } [ ] ，如`.bpi,*`。

    • 请求方法：可选择不限、get、post、put、delete、head。

    • 只聚合请求个数相同的事件：勾选后，只有当2个事件的请求、iframe、页面的总个数相同时才会聚合为一个操作。

    • 删除：点击1602043083893后删除该条规则。

使用举例，如从业务分析不同页面点击【业务追踪】，要求把这个点击事件定义为一个操作。如下图所示，先在浏览器找到点击【业务追踪】触发的请求。

image-20210203163741518

把元素所属页面URI配置成“等于任意值” ，元素路径配置成”等于任意值“，元素内容配置成”包含”【业务追踪】，元素触发请求/页面配置“条件匹配“，配置如下图示，即可把所有点击【业务追踪】事件聚合成一个操作。

image-20210203163319128

至此，定义操作配置已完成，符合事件类型、元素所属页面、元素路径、元素内容、元素触发请求的操作就会被识别为同一个操作。点击左上角1602126178824，进入定义参数页签。

浏览器发送一次Ajax请求

用户仅需配置Ajax请求的URI，有以下几种配置。如果用户要配置带有请求参数条件的页面URI，可点击1602125631135配置请求参数信息，详细配置规则与浏览器触发的交互事件相同。

  • 精准匹配，指该项条件完全一样时才识别为一个操作，常用于要将不同的ajax请求识别成不同的操作时；

  • 等于任意值，指忽略该项规则，无论返回什么值都会识别为一个操作，常用于要将不同的ajax请求识别成一个操作时；

  • 正则匹配，用户可在输入框中输入匹配规则，满足规则的事件识别为一个操作。

使用举例，如点击某些表单时，会生成多个Ajax操作，每个ajax请求最后有不同id，如配置成“精准匹配”会识别成不同操作，配置成“等于任意值”该应用下所有的ajax请求会聚合成1个操作。

image-20210203180232305

用户也可配置“正则匹配” /api/app/fms/v1/authorityResource/getListByRoleId/.*把不同id的ajax请求聚合成一个操作。

image-20210205112224797

浏览器打开页面

设置页面的URI规则，有以下几种配置。如果用户要配置带有请求参数条件的页面URI，可点击1602125631135配置请求参数信息，详细配置规则与浏览器触发的交互事件相同。

  • 精准匹配，指该项条件完全一样时才识别为一个操作，常用于要将不同的页面识别成不同的操作时；

  • 等于任意值，指忽略该项规则，无论返回什么值都会识别为一个操作，常用于要将不同的页面识别成一个操作时；

  • 正则匹配，用户可在输入框中输入匹配规则，满足规则的事件识别为一个操作。

使用举例，如从【操作列表】点击操作名称后打开【性能洞察分析】页面，页面URI中包含操作ID。如配置“精准匹配”，不同操作ID会识别成不同操作，配置成“等于任意值”该应用下所有打开页面会聚合成1个操作。

image-20210203175324685

用户也可配置“正则匹配” /operation/performance/.*把打开【性能洞察分析】聚合成一个操作。

image-20210205112205013

SPE事件

BPI目前可以接入以下几种SPE事件，使用场景描述如下：

  • 普通SPE事件：一般用于同一个页面内的事件监控，如“加入购物车”。

  • 跨页面事件：一般用于在页面1开始，页面2结束的事件监控，仅刷新地址栏，不打开新页签，如弹框监控、人脸识别监控。

  • 路由切换事件：一般用于菜单点击率监测，目前JS探针可自动识别。

    路由切换事件的命名支持自动拆分，与Web产品页面的URI一致。拆分说明如下：

    • 元素所在页面：显示触发SPE事件所在页面的URL；如果多次触发的页面URL不一致，展示第一次上传的URL，仅显示？前的部分。用户单击页面URI后的详细配置，可设置页面的详细参数。

    • 元素触发请求/页面：用户可设置路由切换事件触发的请求作为操作识别规则。单击页面URI后的详细配置，可设置详细请求。

埋点请参见JS探针自定义事件部署说明。用户埋点后，可在【操作列表】通过事件key找到操作，点击1622448994868进入SPE操作配置页面。操作名称即事件key，用户不可修改，仅支持标记操作。点击1622449261716 后，删除该操作，但不影响后续再生成操作。

操作执行时间

当一个用户操作触发一次页面的打开，支持选择完全加载、白屏、首屏、可交互4个时间点中任意一个作为页面的打开时间，该时间同时也会作为操作的执行时间。刷新iframe、新增iframe都是一次页面的打开。默认任意页面的打开时间取决于系统配置中页面打开时间一项的设置。

定义参数

在操作编辑页面的左上角点击定义参数页签，可切换至定义参数页面。该部分决定了要对定义的操作采集哪些参数。BPI支持2种参数定义，说明如下：

  • 采集参数：从操作获取的请求或URL中直接采集的数据。
  • 计算参数：区别于采集参数对请求数据做直接处理，计算参数不直接处理请求数据，而是对采集参数进行加减乘除、条件判断或字符串拼接等处理的输出，是对采集参数的进一步加工以满足复杂多变的数据处理场景。如：
    • 通过采集参数配置参数【出生日期】，再通过计算参数配置参数【年龄】= 当前日期 - 【出生日期】。
    • 通过采集参数配置参数【状态返回码】，再通过计算参数配置参数【用户支付失败原因】，200~余额不足，300~支付失败。
    • 通过采集参数配置参数【姓】和【名】，再通过计算参数拼接为参数【姓名】。

采集参数

点击采集参数右侧的1602127335993即弹出参数配置信息，点击1602144908887可收起配置信息。用户可以选择JS探针获取的请求参数，也可以选择请求对应的后端事务获取的数据项，如果这些数据不满足用户要求，可选择自定义事件中上传的JSON数据。

JS探针获取的请求参数

默认显示JS探针监控的请求以及SPE事件中的所有Ajax请求。

  • 搜索并选择请求：请求列表展示该操作下的所有请求URI，如果是交互事件包括所在页面URI，用户根据需要选择需要获取参数的请求或页面。

    • 搜索请求：可模糊匹配请求或页面URI，点击1602128189679后显示搜索结果。
    • 请求过滤：可按照最近3次有数据请求、已保留请求、有参数的请求3个条件过滤，条件之间是“且”的关系。
    • 选择请求：勾选1602128343313请求或页面，即可配置参数，可同时选中多个请求给每个请求配置参数。
    • 添加请求：如果请求列表没有找到用户关注的请求，可点击1602128490289新建一条请求信息，用户手动新建的请求可编辑和删除。

    1602128684220

  • 添加参数：从选中的请求中，获取参数位置信息，并将其定义为操作参数。

    • 参数位置：支持从HTTP请求头、HTTP请求体、HTTP响应头、HTTP响应体、URL参数、URL路径、URL全路径中获取参数。其中URL路径是指获取URI路径字符串。URL全路径则指的是获取整个URL，包括域名、端口、路径、参数。例如，http://www.tingyun.com/order/operation/manual的URL路径是指/order/operation/manual，URL全路径则指http://www.tingyun.com/order/operation/manual。
    • 参数key：从请求中指定要采集的参数的位置key。
    • value解析：某些情况下，所选择的采集参数并不是一个准确的值，例如参数可能为Map格式、List格式或者Json格式，参数中的某个字段才是真正的有效信息，对于这种情况，您可以点击1602143183280，对参数进行精确取值。具体使用说明请参见字符串解析。
    • 参数名称：支持中文、字母、数字或下划线，最多输入50位。
    • 参数类型：支持采集文本（string）、整型（int）、浮点型（float）和日期（date）四种类型的参数。
    • 参数标签：将配置的参数标记为对应类型的参数标签，采集参数与参数标签的关系请参见系统参数配置。

  • 重置和保存：操作参数配置完成后，点击1602143727520即可保存配置，用户可以配置下一个参数。点击1602143752137刷新采集参数配置页面。

  • 参数列表：用户保存的所有采集参数和计算参数会在参数列表中显示，点击1602143881318进入参数的编辑页面，点击1602143906782删除该参数。

APM探针获取的数据项

默认显示APM探针采集的数据项以及SPE事件中所有Ajax请求对应的后端事务的数据项。

  • 选择请求：支持从请求对应的后端事务中获取参数。
    • 请求过滤：可按照最近3次有数据请求、已保留请求、有参数的请求3个条件过滤，条件之间是“且”的关系。
    • 请求URL：选择需要配置后端事务的请求，可同时选中多个请求给每个请求配置数据项。
  • 搜索并选择数据项：
    • 数据项列表：如果请求对应的后端事务所属应用单独配置数据项，此处展示该应用的所有数据项，否则展示系统数据项。
    • 搜索数据项：在搜索框输入数据项名称，点击1602062376492后展示搜索结果。
    • 编辑数据项：点击1602062603143后跳转至server应用设置页面，用户可编辑数据项。
    • 查看数据项来源：点击1602144252018后查看数据项来源于哪个请求的哪个key中。
    • 查看数据项样本：点击1602144301724后查看数据项最新的10个样本数据，方便用户确认数据，此功能仅在操作参数配置保存后下一次编辑进来，操作触发有数据时才可查看。
    • 新建数据项：点击1602062428675按钮后跳转至APM应用设置页面，用户可点击1602062485745新建数据项。
    • 选择数据项：点击数据项后，序号前变为1602062972524选中状态。
  • 添加参数：将选择的数据项设置为参数，参数名称和参数类型与数据项保持一致，用户可修改。用户可点击1602063261244对数据项的值做进一步处理，详细说明请参见字符串解析。

选择自定义事件

当JS探针和APM探针采集的参数都不能满足需要时，可选择自定义事件，从SPE事件上传的JSON数据中获取所需参数。前提条件是用户已配置了自定义事件。

spe2

计算参数

点击采集参数右侧的1602127335993即弹出参数配置信息，点击1602144908887可收起配置信息。

如何获取参数

  • 添加参数：点击1602145310837切换至参数页签， 展示全部参数包含预置参数和当前操作定义的所有采集参数，点击某个参数即可添加至编辑区。
  • 添加函数：点击1602145398629切换至函数页签，点击某个函数即可添加至编辑区。
  • 编写代码和校验： 函数使用说明请参见字符串解析，如满足函数的规则，显示“计算有效”，用户可保存参数，否则提示“计算有误”，需修改正确后才可保存参数。

添加参数

  • 参数名称：支持中文、字母、数字或下划线，最多输入50位。
  • 参数类型：支持采集文本（string）、整型（int）、浮点型（float）和日期（date）四种类型的参数。
  • 参数标签：将配置的参数标记为对应类型的参数标签，采集参数与参数标签的关系请参见系统参数配置。
  • 重置和保存：操作参数配置完成后，点击1602143727520即可保存配置，用户可以配置下一个参数。点击1602143752137刷新计算参数配置页面。

请求明细

以列表的形式展示操作的所有请求，以及操作的所有采集参数和计算参数，用户可在参数明细中设置参数使用状态、标记参数标签、查看引用次数等操作。

操作请求列表

  • 搜索请求：可模糊匹配请求或页面URI，点击1602128189679后显示搜索结果。
  • 请求过滤：可按照最近3次有数据请求、已保留请求、有参数的请求3个条件过滤，条件之间是“且”的关系。
  • 请求列表：展示操作的请求URI、请求最后触发时间、是否忽略请求等信息，用户忽略请求后该请求的执行时间不计入操作执行时间。

操作参数列表

  • 参数名称、操作请求、参数类型，与定义参数时的配置保持一致。
  • 参数标签：与定义参数时的配置保持一致，用户可修改。
  • 是否使用：如果选择关闭1602147204186则操作不采集该参数的数据。
  • 引用次数：展示该参数被业务流、查询配置、计算参数、指标引用的明细，每次引用记一次。
  • 复制：点击1602147282023后，复制一个新参数，命名为“原参数名-副本”，新参数的引用次数为0 。
  • 编辑：点击1602147323326后，进入定义参数页面并展开参数配置。
  • 删除：点击1602147371144后，删除该参数，用户只能删除引用次数为0的参数，否则弹出该参数的引用明细提示用户不可删除。
© 2007-2022 北京基调网络股份有限公司 all right reserved，powered by Gitbook本文档更新于： 2022-09-19 17:55

results matching ""

    No results matching ""