基于JS-SDK的可视化埋点方法及系统

技术领域

本发明涉及数据采集处理技术领域，尤其是涉及一种基于JS-SDK的可视化埋点方法及系统。

背景技术

数据统计是互联网产品迭代过程中的重要部分，主要由数据采集、数据分析两部分组成，数据采集确定数据源，快速、准确、无遗漏地采集数据，是数据采集SDK(下文简称SDK)面临的主要挑战。SDK能够针对页面元素的点击信息来统计用于分析用户交互和用户行为，对互联网产品的持续优化起到很大作用。数据采集流程大致为设计埋点、集成SDK、触发埋点、上报服务器。其中，现有的数据采集方式主要有代码采集、全埋点采集、可视化采集等。

具体地，代码采集大致流程为运营人员提出数据统计需求，产品人员设计埋点，开发人员调用SDK采集接口植入埋点，重新打包发布新版本，数据上报后运营人员进行分析。这种埋点方式采集精准且数据量小，缺点是人力和时间成本高。全埋点采集预先将埋点植入到所有页面元素，所有元素被点击后都会上报数据，运营人员筛选出关心的元素后进行数据统计，这种采集方式避免了重新发版的麻烦，缺点是数据量大，且上报数据形式单一不灵活。可视化采集可以在不发版的情况下新增采集点，且采集精准、上报数据量小，一定程度上综合了代码埋点和全埋点的优点，是数据采集发展的重要方向。

进一步，现有SDK的可视化采集技术主要有基于全埋点的可视化、基于编辑器圈选的可视化。其中，基于全埋点的可视化采集了所有元素的点击事件，在分析数据时在编辑器中圈选所关心的数据进行分析，其技术核心还是全埋点采集。这种技术虽然能够对埋点进行可视化圈选，但本质上还是全埋点技术，仍然具有数据量大、且上报的数据只包括元素点击信息，而无法上报元素相关信息。基于设备端圈选的可视化在编辑埋点时使用设备上运行的SDK宿主程序，生成埋点指令部署后全网生效。但这种技术的可视化在手机终端设备上操作埋点，操作难度大，受限于屏幕尺寸和交互方式不能实现复杂的埋点需求。另外，基于编辑器圈选的可视化采集技术，是使用单独的网页编辑器编辑埋点，部署后全网生效。但现有的基于编辑器圈选的可视化采集技术仍然处于发展初期，现有解决方案只采集元素点击事件，对于复杂的采集环境下的采集需求尚不能满足。

发明内容

为了解决上述技术问题，本发明提供了一种基于JS-SDK的可视化埋点方法，包括：通过编辑器获得待埋点页面，并激活该页面的可视化埋点模式；编辑页面内的埋点，并将埋点信息通过所述编辑器传输给服务器；通过所述编辑器获取从所述服务器传输的与当前埋点相关的埋点列表，在非部署状态下将所述埋点列表内的信息绑定到当前页面；在所述编辑器切换为测试模式时，确认埋点元素以完成页面埋点的创建；访问当前页面，并从所述服务器获取所述当前页面内已创建的埋点；将已创建埋点信息绑定到当前页面，以在所述埋点触发后，将埋点触发信息在所述服务器保存。

优选地，在编辑页面内的埋点步骤中，通过圈选页面元素的方式进行编辑。

优选地，所述埋点信息包括但不限于：埋点元素的标识、埋点元素在页面结构内的位置、埋点元素的关联属性信息、埋点元素的定位方式、埋点生效范围、页面生效范围以及生效版本，其中，所述埋点元素的定位方式选自new_path定位、按属性定位和同级元素定位中的一种或几种的组合。

优选地，在将已创建埋点信息绑定到当前页面步骤中，包括：解析当前页面所涉及的已创建埋点信息，按照已定义的元素定位方式，对目标埋点元素进行定位，并获取所述目标埋点元素的关联属性，其中，在已定义元素定位方式为多种时，若每种定位处理后得到的埋点元素定位结果均相同，则当前页面的元素定位操作成功，从而将该埋点元素定位结果作为所述目标埋点元素；否则，失败。

优选地，在将已创建埋点信息绑定到当前页面步骤之后，还包括：在目标埋点元素定位成功后，为所述目标埋点元素添加事件监听器。

优选地，所述方法还包括：通过编辑器与所述服务器连接，在终端SDK与所述服务器连接时获取页面信息获取通知，其中，所述页面信息获取通知是在所述终端SDK将所述待埋点页面的页面信息发送至所述服务器后由所述服务器发出；通过所述服务器，将所述待埋点页面的页面信息反馈至所述终端SDK，以由所述终端SDK将所述页面信息放入终端网页视窗元素的h5视窗属性内，从而将新的页面信息传输至所述服务器。

优选地，在埋点绑定过程中，还包括：接收含有Hybrid埋点的埋点信息，并进行页面绑定，其中，由所述编辑器识别所述埋点信息，在含有Hybrid埋点或该埋点仅以按属性定位方式进行绑定时，在所述埋点信息中标记出当前埋点为Hybrid埋点，并将更新后埋点信息通过服务器发送至所述终端SDK，以在所述终端SDK将所述Hybrid埋点筛选出来后通过所述服务器发送至网页端数据采集器。

优选地，如果当前埋点为Hybrid埋点，那么将通过所述服务器调用所述终端SDK中存储的关于当前埋点的关联元素属性；如果当前埋点为非Hybrid埋点，那么在获得第一通知后，将含有当前埋点的关联元素属性信息的所述埋点信息通过所述服务器反馈至所述终端SDK，其中，在所述终端SDK检测到当前埋点触发时，通过所述服务器向所述网页端数据采集器发送所述第一通知。

优选地，在接收并绑定Hybrid埋点步骤之后，还包括：在当前Hybrid埋点被触发后，通过所述终端SDK将相应的埋点触发信息传输至所述服务器。

另一方面，本发明还提供了一种基于JS-SDK的可视化埋点系统，所述可视化埋点系统执行如上述所述的方法，所述可视化埋点系统包括：网页端数据采集器，其用于先通过编辑器获得待埋点页面，并激活该页面的可视化埋点模式，而后编辑页面内的埋点，并将埋点信息通过所述编辑器传输给服务器，然后，通过所述编辑器获取从所述服务器传输的与当前埋点相关的埋点列表，在非部署状态下将所述埋点列表内的信息绑定到当前页面，在所述编辑器切换为测试模式时，确认埋点元素以完成页面埋点的创建，以及访问当前页面，并从所述服务器获取所述当前页面内已创建的埋点，最后将已创建埋点信息绑定到当前页面，以在所述埋点触发后，将埋点触发信息在所述服务器保存；编辑器，其与所述网页端数据采集器和服务器通过PostMessage进行通信；和所述服务器，其与所述网页端数据采集器通过Http或Https方式进行通信，用于存储并传输网站页面的页面信息、各页面内的已创建埋点信息和各页面内的已创建埋点的埋点触发信息。

与现有技术相比，上述方案中的一个或多个实施例可以具有如下优点或有益效果：

本发明提出了一种基于JS-SDK的可视化埋点方法及系统。该方法及系统，首先使用网页端可视化编辑器圈选方式埋点，解决埋点操作复杂，上报数据量大的问题；使用属性定位的方式定位页面元素，从而解决了不同版本页面元素位置不一致导致的定位失败的问题、以及使用同级埋点技术解决列表类元素埋点问题，继而能够解决复杂业务场景下的埋点方案。另外，本发明能够在埋点信息内嵌入与埋点元素相关的关联属性信息，能够在埋点处采集更加丰富的数据，进一步，为数据分析阶段提供了更多类型的数据资料，同时能够从多维角度对埋点采集数据进行分析，提高了数据分析结果的准确性。此外，本发明还提供了一种能够对Hybrid埋点进行处理的完整的通讯协议，使得本发明的可视化埋点方法能够适应于不同业务场合(不同操作系统)下的埋点方案。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例共同用于解释本发明，并不构成对本发明的限制。在附图中：

图1是本申请实施例的基于JS-SDK的可视化埋点方法的步骤图。

图2是本申请实施例的基于JS-SDK的可视化埋点方法在埋点编辑阶段的具体流程图。

图3是本申请实施例的基于JS-SDK的可视化埋点方法在埋点生效阶段的具体流程图。

图4是本申请实施例的基于JS-SDK的可视化埋点方法在埋点生效阶段内new_path定位方法的实现原理示例图。

图5是本申请实施例的基于JS-SDK的可视化埋点方法在埋点生效阶段内同级元素定位方法的实现原理示例图。

图6是本申请实施例的基于JS-SDK的可视化埋点方法在埋点生效阶段内获取目标埋点元素的相关属性的实现效果示例图。

图7是本申请实施例的基于JS-SDK的可视化埋点方法中互联网产品嵌入H5页面的场景示意图。

具体实施方式

以下将结合附图及实施例来详细说明本发明的实施方式，借此对本发明如何应用技术手段来解决技术问题，并达成技术效果的实现过程能充分理解并据以实施。需要说明的是，只要不构成冲突，本发明中的各个实施例以及各实施例中的各个特征可以相互结合，所形成的技术方案均在本发明的保护范围之内。

另外，附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

数据统计是互联网产品迭代过程中的重要部分，主要由数据采集、数据分析两部分组成，数据采集确定数据源，快速、准确、无遗漏地采集数据，是数据采集SDK(下文简称SDK)面临的主要挑战。SDK能够针对页面元素的点击信息来统计用于分析用户交互和用户行为，对互联网产品的持续优化起到很大作用。数据采集流程大致为设计埋点、集成SDK、触发埋点、上报服务器。其中，现有的数据采集方式主要有代码采集、全埋点采集、可视化采集等。

现有SDK的可视化采集技术主要有基于全埋点的可视化、基于编辑器圈选的可视化。其中，基于全埋点的可视化采集了所有元素的点击事件，在分析数据时在编辑器中圈选所关心的数据进行分析，其技术核心还是全埋点采集。这种技术虽然能够对埋点进行可视化圈选，但本质上还是全埋点技术，仍然具有数据量大、且上报的数据只包括元素点击信息，而无法上报元素相关信息。基于设备端圈选的可视化在编辑埋点时使用设备上运行的SDK宿主程序，生成埋点指令部署后全网生效。但这种技术的可视化在手机终端设备上操作埋点，操作难度大，受限于屏幕尺寸和交互方式不能实现复杂的埋点需求。另外，基于编辑器圈选的可视化采集技术，是使用单独的网页编辑器编辑埋点，部署后全网生效。但现有的基于编辑器圈选的可视化采集技术仍然处于发展初期，现有解决方案只采集元素点击事件，对于复杂的采集环境下的采集需求尚不能满足。

因此，为了解决上述技术问题本发明提出了一种基于JS-SDK的可视化采集方法(可视化埋点方法)，该方法由可视化埋点系统来完成。其中，可视化埋点系统包括网页端数据采集器、网页编辑器和服务器端。具体地，该方法在埋点编辑阶段，首先，通过编辑器来获得待埋点页面的页面结构信息；而后在可视化埋点模式下，通过编辑器的圈选页面元素的方式来对埋点进行编辑，输入至少包括目标埋点元素和目标元素关联属性信息在内的埋点信息，以由服务器保存当前埋点信息；接着，通过编辑器获取从服务器传输的含有当前埋点信息的埋点列表；在编辑器处于非部署状态下对当前页面进行元素绑定，从而在编辑器切换为测试状态时，选定目标埋点元素，从而在确认埋点元素后完成页面埋点的创建任务。进一步，本发明所述的可视化埋点方法还需要在埋点元素成功创建后，进入埋点生效阶段。在埋点生效阶段内，网页端数据采集器与服务器直接进行通信，首先，当访问当前页面时，从服务器获得当前页面内已创建的埋点，并对埋点信息进行绑定，以在目标埋点元素被触发激活后，将与当前被触发元素对应的埋点触发信息发送至服务器保存。

这样，本发明解决了现有全埋点数据采集技术操作复杂、上报数据量大的问题，并且通过不仅上报页面元素还会将该页面元素的关联信息一并上报的方式，使得埋点处采集的数据更加丰富。

另外，本发明还提供了一种Hybrid埋点的通讯协议，尤其是公开了该通讯协议在网页端数据采集器的实施流程。不仅需要终端SDK的参与，还需要在已嵌入于终端原生网页的H5页面中加入网页端数据采集器的埋点信息，通过终端SDK与网页端数据采集器的数据传输来实现Hybrid埋点，传输的数据主要包括页面信息(页面结构)、埋点信息、跨平台关联属性、以及埋点触发信息。由此，本发明通过对Hybrid埋点的通讯协议的定义，实现了通过网页端数据采集器、网页编辑器、服务器和终端SDK之间的通信来完成的可视化Hybrid埋点功能。

在对本发明所述的可视化埋点方法进行说明之前，先对当前可视化埋点方法的应用环境进行说明。在本发明实施例中，通过可视化埋点系统来执行上述可视化埋点方法(基于可视化埋点系统，执行上述可视化埋点方法；并基于下述可视化埋点方法，提出了当前可视化埋点系统)。参考图2和图3，本发明所述的可视化埋点系统包括：网页端数据采集器(网页端数据采集器为使用javascript语言编写的数据采集器)、网站端编辑器(以下简称“编辑器”)和服务器(其中，服务器为网站的后台服务器)。其中，在埋点编辑阶段，编辑器与网页端数据采集器之间、以及编辑器与服务器之间均通过PostMessage接口来进行通信。服务器与网页端数据采集器通过Http/Https方式来进行通信。

进一步，编辑器与网页端数据采集器之间的沟通使用iframe的postMessage通信方式，在埋点编辑阶段，网页端数据采集器将埋点位置等信息通过postMessage通信方式通知编辑器，部署埋点完成后，进入埋点生效阶段，此时，网页端数据采集器通过Http或Https方式从服务器获取页面已创建的埋点对应的埋点信息。

进一步，网页端数据采集器用于先通过编辑器获得待埋点页面，并激活该页面的可视化埋点模式，而后编辑页面内的埋点，并将埋点信息通过编辑器传输给服务器，然后，通过编辑器获取从服务器传输的与当前埋点相关的埋点列表，在非部署状态下将埋点列表内的信息绑定到当前页面，在编辑器切换为测试模式时，确认埋点元素以完成页面埋点的创建，以及访问当前页面，并从服务器获取所述当前页面内已创建的埋点，最后将已创建埋点信息绑定到当前页面，以在埋点触发后，将埋点触发信息在服务器保存。服务器用于存储并传输网站内各页面的页面结构信息、各页面内的已创建埋点的埋点信息(包括埋点关联信息)和各页面内的已创建埋点的埋点触发信息等。另外，服务器用于在埋点编辑阶段，根据通过编辑器接收到的来自网页端数据采集器的当前页面的埋点信息后，根据该埋点信息生成相应的埋点列表，从而将埋点列表通过编辑器反馈至网页端数据采集器，以供绑定当前页面的埋点元素。

图1是本申请实施例的基于JS-SDK的可视化埋点方法的步骤图。下面参考图1对本发明所述的基于JS-SDK的可视化埋点方法(即可视化埋点系统的实现方法)进行详细说明。

如图1所示，步骤S110，进入埋点编辑阶段，网页端数据采集器通过编辑器获得待埋点页面，并激活当前待埋点页面(即当前页面)的可视化埋点模式；步骤S120，网页端数据采集器使用编辑器对当前待埋点页面内的所需配置的待处理埋点进行编辑，并将待处理埋点对应的埋点信息通过编辑器传输给服务器端；步骤S130，网页端数据采集器通过编辑器获取从服务器传输的与当前待处理埋点对应的埋点信息相关的埋点列表，在编辑器为非部署状态下，将埋点列表内的信息绑定到当前待埋点页面，从而定位出一个或多个埋点元素；步骤S140，网页端数据采集器将编辑器切换为测试模式，在触发最终的埋点元素后，埋点确认成功并完成页面埋点的创建，此时，埋点编辑阶段结束。这样，通过上述步骤S110～步骤S140完成了创建页面埋点的操作。

继续参考图1，在完成当前页面的埋点部署任务后，进入到埋点生效阶段，步骤S150使用浏览器再次访问当前页面，网页端数据采集器从服务器获取当前页面内所有已创建(已部署)的埋点对应的埋点信息；步骤S160在埋点生效阶段，网页端数据采集器根据已创建埋点信息来绑定当前页面；步骤S170，网页端数据采集器在检测到已部署的埋点被触发后，生成相应的埋点触发信息，从而将当前埋点触发信息再发送至服务器，以由服务器保存。这样，通过上述步骤S150～步骤S170完成了将已部署的埋点下发到访问网站，并在埋点被触发后采集埋点触发信息的过程，从而实现基于编辑器的可视化数据采集方案。

图2是本申请实施例的基于JS-SDK的可视化埋点方法在埋点编辑阶段的具体流程图。下面结合图1和图2，对本发明实施例所述的可视化埋点方法的埋点编辑阶段的流程进行详细说明。

如图2所示，步骤S201，网页端数据采集器通过编辑器获取来自服务器端的待埋点页面对应的页面结构信息，并由编辑器根据当前页面结构信息嵌入当前页面。在步骤S201中，网页端数据采集器在第一类用户(第一类用户位于网页端数据采集器处)的操作下，与编辑器进行连接，并打开埋点编辑器，在编辑器从服务器获得当前页面对应的页面结构信息后，通过iframe标签将当前页面结构信息嵌入到当前待埋点页面中，从而进入到步骤S202中。

步骤S202由网页端数据采集器将当前页面激活为可视化埋点状态。在步骤S202中，由网页端数据采集器将当前待埋点页面中的SDK设置为可视化埋点状态，自动加载含有可视化功能的SDK，从而将当前页面的SDK开启为可视化埋点状态，从而进入到步骤S203中。

进一步，第一类用户使用编辑器通过iframe标签嵌入当前网站页面时，网页端数据采集器会接收编辑器发送的可视化模式激活指令，并在通过校验后，激活页面的可视化埋点状态，该过程的SDK实现格式如下所示：

其中，type字段为上述可视化模式激活指令的类型，orgin字段的值为iframe所嵌入的地址，boss字段的值为父窗口网站地址，isNewVisual字段为当前可视化编辑框为最新的版本。在网页端数据采集器的指令校验通过后，网页端数据采集器会向编辑器返回如下校验结果，该校验结果的格式如下所示：

{

“code”：200，

“type”：“INIT”，

“isNewVisual”：true

}

其中，type字段表示告知编辑器当前校验结果信息为初始化消息；在code字段的值为200时，表示验证通过，可视化埋点状态已被激活，在code字段的值为400时，表示校验不通过、并且当前可视化埋点状态结束；isNewVisual字段表示当前可视化SDK为最新版本。

步骤S203，网页端数据采集器通过编辑器圈选页面元素的方式对当前页面的埋点进行编辑，生成相应的埋点信息，并将该埋点信息发送给编辑器，以(步骤S204)由编辑器将当前埋点信息发送至服务器，并由服务器保存当前页面内已编辑埋点的埋点信息。具体地，在步骤S203中，编辑器用户使用编辑器圈选页面元素的方式来对当前页面的埋点进行编辑从而生成相应的埋点信息，在网页端数据采集器对该埋点信息进行保存后，将当前埋点信息通过PostMessage通信方式发送给编辑器。

需要说明的是，在本发明实施例中，第一类用户所设置的埋点信息中不仅要设置埋点元素信息，还需要设置与埋点元素关联的关联属性信息和埋点元素定位方式等等其他信息。具体地，在完成埋点编辑后，网页端数据采集器会生成相应的埋点信息。此时，生成的埋点信息包括但不限于：一个或多个埋点元素的标识、每个埋点元素在页面结构内的位置、每个埋点元素的关联属性(关联属性信息包括该关联元素定位信息、属性类型信息、以及属性内容信息等，例如：当前埋点元素为页面内的A标签，其关联属性可以为A标签的文字内容等与该标签相关的其他内容属性)、每个埋点元素的类型、埋点元素的定位方式、触发埋点元素和关联元素的最近父元素、埋点生效范围、页面生效范围以及SDK的生效版本。其中，埋点元素的定位方法选自new_path定位、按属性定位和同级元素定位中的一种或几种的组合。

进一步，在本发明实施例中，关联属性可支持布尔类型、字符串类型、数字类型、文本类型中的一种或几种的组合。

进一步，在本发明实施例中，元素的关联属性是支持用户自定义的正则表达式筛选。

这样，本发明实施例所生成的埋点信息不仅仅包含有页面元素信息，更包含有多种其他类型的信息，使得埋点创建后所能采集到该埋点处种类更为丰富的采集数据，为后续基于埋点采集结果的数据分析过程提供种类范围更广的数据资料，从而分析出更为准确的用户需求。

在步骤S204中，在编辑器接收到当前埋点信息后，编辑器会向服务器发送含有当前埋点信息在内的埋点信息保存通知，以由编辑器通知服务器端将当前埋点信息保存至数据库内。另外，在步骤S204中，当服务器接收到埋点信息保存通知后，将当前埋点标记为非部署状态。

在编辑器向服务器发送上述埋点信息保存通知后，进入到步骤S205中。步骤S205由编辑器向服务端请求埋点列表，步骤S206在编辑器接收到埋点列表后，通过postMessage通信方式，将当前埋点列表发送至网页端数据采集器，以由网页端数据采集器接收通过编辑器从服务器传输的埋点列表。需要说明的是，在本发明实施例中，埋点列表是含有步骤S204所编辑的所有埋点信息的集合。

在网页端数据采集器接收到当前埋点列表后，进入到步骤S207中。步骤S207，网页端数据采集器会根据当前接收到的埋点列表进行解析，得到(从编辑器端输入的一个或多个)埋点信息，从而将当前这些埋点信息绑定当前页面的埋点元素。在步骤S207中，该绑定过程，会按照步骤S203中用户所设置的埋点元素定位方式来进行页面元素的绑定，此时，会得到若干个已定位的埋点元素，最后，在网页端数据采集器将这些定位完成的埋点元素展示出来，从而进入到步骤S208中。

步骤S208在网页端数据采集器生成埋点元素绑定结果后，通知编辑器切换为测试模式，以在切换为测试模式后，由第一类用户从已展示出的各个埋点元素中筛选出部分目标埋点元素，从而进入到步骤S209中。在对已展示出的各埋点元素进行筛选时，由第一类用户从当前待埋点页面中所展示的所有埋点元素中选择部分埋点元素作为目标埋点元素进行点击，从而选定出目标埋点元素。

步骤S209，网页端数据采集器会在目标埋点元素附近展示出与当前目标埋点元素相关的埋点触发信息，并通过向用户展示埋点已成功的埋点触发信息，对埋点操作已成功来进行提示，从而进入到步骤S210中。需要说明的是，在本发明实施例中，埋点触发信息包括当前埋点信息、以及当前埋点信息所匹配的能够触发该埋点的所有埋点元素之间的对应关系等。

步骤S210，网页端数据采集器会在生成埋点触发信息后，通过编辑器向服务器端发送含有变更埋点部署状态通知的埋点触发信息，使得服务器端在接收到变更埋点部署状态通知后，将当前埋点的状态从非部署状态转换为部署状态。在一个实施例中，网页端数据采集器会在生成埋点触发信息并发送至编辑器后，使得编辑器在接收到变更埋点部署状态通知时，由编辑器用户通过点击编辑器的部署按钮来控制编辑器向服务端发送当前埋点部署状态通知。此时，服务器端在接收到当前埋点部署状态通知后，将当前埋点的状态从非部署状态转换为部署状态。

这样，通过上述步骤S201～步骤S210完成了整个埋点编辑阶段。

图3是本申请实施例的基于JS-SDK的可视化埋点方法在埋点生效阶段的具体流程图。下面结合图1和图3，对本发明实施例所述的可视化埋点方法的埋点生效阶段的流程进行详细说明。需要说明的是，在埋点生效阶段，网页端数据采集器会直接与服务器进行通讯。

如图3所示，步骤S301使用浏览器重新访问或者刷新上述当前页面所在网站网页，网页端数据采集器会通过Http方式或Https方式从服务器端获取在服务器数据库存储的当前页面内已部署(已创建)的埋点对应的埋点信息，从而进入到步骤S302中。

步骤S302，网页端数据采集器根据接收到的当前页面内已创建埋点对应的埋点信息，将当前埋点信息绑定到当前页面。

在步骤S302中，首先(步骤S3021，未图示)解析当前页面所涉及的已创建埋点信息，即解析接收到的埋点信息，而后，(步骤S3022，未图示)按照埋点信息中的已定义的元素定位方式，对目标埋点元素进行定位，并获取目标埋点元素的相关属性。

下面先对网页端数据采集器的埋点信息解析过程的实现方法进行说明。在通过编辑器使得服务器对含有埋点信息的埋点触发信息进行保存后，服务器将已保存的当前页面内所有已创建的埋点信息发送至编辑器，进一步，编辑器会通过postMessage通信方式将当前这些埋点信息，发送给到网页端数据采集器。其中，埋点信息包括如下字段：id表示代表埋点元素身份的埋点元素标识；new_path字段表示埋点元素在页面结构中所处的位置；related字段表示埋点元素对应的关联属性，该字段为一个数组，可以代表多个属性，每个数据位表示一个属性；prop_name字段用来表示关联属性的内容，即标识是哪一种关联属性；pro_type字段表示关联属性的属性类型；key字段表示触发埋点后上报数据中标识该属性(即埋点元素的被触发标志)；target字段表示关联元素属性的定位信息，是触发埋点元素和关联元素有最近的父元素；step字段表示埋点触发元素向该父元素回溯的步数，回溯到该父元素后再通过new_path字段定位到关联元素；props_binding字段表示按属性定位元素；binding_range字段代表指定的埋点生效范围；pages字段表示生效的页面；versions字段表示SDK的生效版本。

在对当前埋点信息进行解析后，网页端数据采集器会按照埋点信息中的元素定位方式来对当前页面进行页面埋点元素定位处理，从而得到相应的目标埋点元素。在本发明实施例中，由于元素定位方式是一种或多种定位方式的组合，因此，如果网页端数据采集器解析出的元素定位方式仅为一种，那么利用new_path定位方式、或按属性定位方式、或同级元素定位方式对页面埋点元素进行定位，得到相应方式的定位结果，即目标埋点元素。

另外，如果网页端数据采集器解析出的元素定位方式为多种，那么先分别利用相应的已定义方式对当前页面的埋点元素进行定位，在每种定位处理后得到的埋点元素定位结果均相同时，当前页面的元素定位操作成功，从而将该埋点元素定位结果作为目标埋点元素。此外，在每种定位处理后得到的埋点元素定位结果不一致时，当前页面的元素定位操作失败，此时，需要对用户进行相应的提示，以重新进行埋点编辑。

图4是本申请实施例的基于JS-SDK的可视化埋点方法在埋点生效阶段内new_path定位方法的实现原理示例图。下面参考图4，对本发明实施例中的new_path定位方式的在网页端数据采集器的实现原理进行说明。

new_path定位是通过匹配拓扑位置定位页面元素，将当前页面的页面结构抽象为树形结构，如图4的左图所示，当前页面的页面结构为页面树形结构。如图4的右图展示了埋点信息内所含有的new_path字段，该字段表示以new_path定位方式定义为当前埋点的预设定位方式。

如图4所示，网页端数据采集器在查找new_path字段指定的页面元素时，从页面树根节点开始，匹配到元素1(将页面元素的属性与new_path数组中的子元素响应信息做对比，其中，页面元素的属性，例如：元素类型名称tagName、在父元素中的位置index/row等，在父元素下的直接子元素中，如果没有相同元素则标识为index，在有相同元素时标识为row)，以先序遍历的方式，继续后面的匹配，如果中途有不匹配的节点，即匹配失败，直到new_path中最后的节点5匹配成功，此时，便定位到最终埋点元素(当前new_path定位方式的埋点元素定位结果)。

下面参考对本发明实施例中的按属性定位方式的在网页端数据采集器的实现原理进行说明。

页面元素绑定方式是否预选定义了按属性定位方式，是需要依据埋点信息中的props_binding字段来确定的，这种定位方式忽略了元素在页面结构中的位置，props_binding字段在网页端数据采集器的具体实现方法如下所示：

网页端数据采集器在定位元素时，需要从页面根节点开始，以先序遍历的方式遍历整个页面结构树，如果当前元素的类型(class)为panel-title，则匹配成功。在按属性定位方式中，可能有多个页面元素匹配成功，因此，如果点击这些元素则都会触发该埋点。其中，字段prop_name的值是枚举类型，该字段的一个具体示例，如下所示：

上述示例表示在当前页面所有文本内容为“确定”的元素，都会匹配成功，这些为“确定”的元素都会触发当前埋点。此时，这些为“确定”的元素即为当前按属性定位方式的埋点元素定位结果。

进一步，在一个实施例中，如果埋点信息中同时指定了按new_path和按属性两种定位方式，则网页端数据采集器会同时执行以上两种定位算法，直到每种方式得到的元素定位结果全部都匹配才为页面定位成功。

按new_path定位的算法优点是定位精确，能唯一定位到目标元素，缺点是页面结构变化后就不能匹配，如：页面改版后会导致埋点触发不成功。按属性定位可以解决这个问题，无论元素的位置如何变化，只要属性(类型、文本)不变就能成功定位，缺点是可能定位多个元素(如果用户就是希望定位多个元素，则不是缺点)。因此，在编辑埋点时，灵活使用这两种定位方式能满足复杂的业务场景。

图5是本申请实施例的基于JS-SDK的可视化埋点方法在埋点生效阶段内同级元素定位方法的实现原理示例图。同级元素定位方式是用来满足列表类元素的埋点需求的。图5展示了典型的列表类元素，子元素数量不固定，滑动或切换列表时，使用了相同布局但内容不同的页面结构。当前支持的一次埋点采集列表中每一项的埋点触发行为、以及每项中所包含的个性化内容(关联属性)，如果用户希望统计列表中的第1项的点击情况，或者所有项的点击情况(通过关联名称或者价格区分)，则需要使用同级定位功能。

下面参考图5，对本发明实施例中的同级元素定位方式的在网页端数据采集器的实现原理进行说明。在同级元素定位方式中，所定位到的埋点元素定位结果包括两类：列表固定行埋点和列表同级埋点。

在列表固定行埋点中，参考图5，例如：用户希望在第一项上进行埋点(即，机型一)，若点击列表中的第二项(机型二)时，是不会触发第一项所设置的埋点。这种情况下利用服务器端下发的埋点信息内的new_path字段中的row字段，即表示页面内绑定行的行序号，此时，网页端数据采集器通过row字段确定该埋点与列表类元素相关，并确定需要绑定第一项。

在列表同级埋点中，如果用户希望将列表类所有项均标记为埋点，并且上报每一项的title，这种情况下服务器端下发的埋点信息内的new_path与列表固定行埋点的唯一区别就是没有row字段。此时，网页端数据采集器会识别出埋点信息内缺少row字段，以此来确定出绑定列表下所有符合new_path字段匹配的位置，并将这些位置对应的元素作为当前同级元素定位方式的埋点元素定位结果。在所有按钮点击后，都会触发当前埋点，从而根据埋点信息内的related字段定位到与本行关联元素位置，获取title属性。

另外，在目标埋点元素定位成功后，本发明实施例在步骤S302中，还会为获取目标埋点元素的关联属性信息。埋点元素关联属性保存在埋点信息内的related字段中，以前面的列表同级埋点为例，如果埋点元素为本行按钮，那么该埋点元素的关联属性为本行的title，此时，related字段的一个具体示例如下所示：

图6是本申请实施例的基于JS-SDK的可视化埋点方法在埋点生效阶段内获取目标埋点元素的相关属性的实现效果示例图。如图6所示，如果埋点触发元素为列表中的第二项(机型二)，网页端数据采集器会根据埋点信息内的step字段上溯到其父元素a，然后，根据h5_path字段找到埋点元素“机型二”，从而通过函数textContent获取，该埋点元素的关联属性：文本。

最后，在步骤S302中，网页端数据采集器还会在成功定位到目标埋点元素和该目标埋点元素的关联属性后，生成相应的埋点生效反馈信息，从而将埋点生效反馈信息发送至服务器内，以使得网页端数据采集器的埋点生效，此时，等待已生效埋点被激活。具体地，网页端数据采集器在将埋点生效反馈信息封装好后上报到服务端，埋点生效反馈信息包括：网页端用户识别码、激活时间、被激活的埋点元素及相应的事件等信息。

另外，在步骤S302中，网页端数据采集器还会在成功定位到目标埋点元素和该目标埋点元素的关联属性后，不仅会生成相应的埋点生效反馈信息，还会对已定位好的目标埋点元素添加事件监听器。

具体地，定位成功后，通过系统函数document.addEventListener为元素添加事件监听器，以在用户点击该目标埋点元素后，网页端数据采集器就能获取触发当前埋点事件。

在完成埋点生效阶段的页面元素绑定处理后，进入到步骤S303中，以等待当前埋点被触发。步骤S303，网页端数据采集器在检测到当前已生效的埋点被触发后，将当前埋点对应的埋点触发信息发送到服务器端，以步骤S304由服务器将接收到的埋点触发信息作为当前埋点的数据采集结果保存到数据库中，从而将数据库内的数据内容作为后续埋点分析的数据基础。在步骤S303中，网页端数据采集器持续检测当前埋点是否被触发。更进一步地说，在步骤S303中，通过检测第一类用户是否点击网站中已生效埋点的页面元素的方式来判断当前埋点是否被触发，在点击了当前目标埋点对应的目标埋点元素后，当前埋点被触发；在没有点击，则当前埋点未被触发。

由此，本发明通过上述步骤S201～步骤S210以及步骤S301～步骤S304完成了基于网页端数据采集器、网站端编辑器和服务器三端之间所构成的基于JS-SDK的可视化埋点。

另外，为了满足更多业务场景，本发明还提供了一种Hybrid埋点的通讯协议，该通讯过程不仅需要终端(例如：手机)SDK的参与，还需要在已嵌入于终端原生网页的H5页面中加入网页端数据采集器的埋点信息。

现在越来越多的互联网产品中嵌入了H5页面。图7是本申请实施例的基于JS-SDK的可视化埋点方法中互联网产品嵌入H5页面的场景示意图。图7展示了互联网产品(例如：IOS原生界面、Android原生界面)嵌入H5页面的应用场景。

Android/IOS原生页面和H5页面(以Android WebView元素为容器、或以IOSWKWebView元素为容器)不在同一个页面结构中，开发语言也不一样，这类场景同样也有埋点统计需求，对于嵌入了H5页面的Android/IOS原生页面的埋点称为Hybrid埋点。

为了满足Hybrid埋点需求，不仅需要Android/iOS端SDK的支持，还需要在H5页面中加入JS-SDK，通过两端SDK的数据传输来实现Hybrid埋点，传输的数据主要包括页面结构、埋点信息，跨平台关联属性、埋点触发信息，数据传输采用Android WebView/IOSWKWebView提供的系统接口来执行数据传输协议。这样，通过对Hybrid埋点的通讯协议的定义，实现了在网页端数据采集器、网页编辑器、服务器和终端SDK之间的通信来完成的可视化Hybrid埋点功能。

在本发明实施例所述的Hybrid埋点实施例中，首先，上述四端的可视化埋点中的埋点编辑过程的数据传输通信流程进行说明。

(1)打开埋点编辑器，编辑器通过ws(WebSocket)方式将终端SDK连接到服务端；

(2)启动终端SDK的程序，触发终端SDK通过ws方式连接到服务端，上报设备信息；

(3)服务端将终端SDK上报的设备信息发送到编辑器；

(4)编辑器展示设备信息，编辑器用户选中当前终端设备后，发送选中设备信息到服务端；

(5)服务端向被选中的设备发送获取页面结构信息的指令；

(6)终端SDK生成当前页面图片和结构(下文简称页面信息)发送到服务端；

(7)服务端将页面信息发送到编辑器，编辑器展示页面信息；

(8)编辑器根据页面信息，通过iframe标签向网页端数据采集器嵌入需埋点页面(参考步骤S201)；

(9)网页端数据采集器开启当前埋点页面的可视化埋点状态(参考步骤S202)；

(10)用户使用编辑器通过圈选页面元素的方式编辑埋点，并将当前埋点信息发送给编辑器(参考步骤S203)；

(11)编辑器向服务器发送含有当前埋点信息在内的埋点信息保存通知，而后，服务端将埋点信息保存到数据库并标记该埋点为非部署状态，并将当前埋点信息发送至终端SDK(参考步骤S204)；

(12)终端SDK将当前接收到的埋点信息绑定到当前页面元素；

(13)终端SDK用户点击页面中已埋点的页面元素，触发埋点，终端SDK将埋点触发信息发送到服务器端；

(14)服务器端将接收到的埋点触发信息发送到编辑器；

(15)编辑器展示埋点触发信息，并确认埋点成功；

(16)编辑器向服务器端发送含有变更埋点部署状态通知的埋点触发信息，从而完成终端SDK的埋点编辑阶段。

(17)编辑器向服务端请求埋点列表(参考步骤S205)；

(18)编辑器将埋点列表通过postMessage通信方式发送给网页端数据采集器(参考步骤S206)；

(19)网页端数据采集器将当前埋点列表内的埋点信息绑定到当前页面元素(参考步骤S207)；

(20)编辑器切换为测试模式，网页端数据采集器选中埋点页面中的已绑定埋点的元素(参考步骤S208)；

(21)网页端数据采集器在已展示出当前筛选出的埋点元素附近处，展示出埋点触发信息并展示埋点已成功的提示信息(参考步骤S209)；

(22)网页端数据采集器通过编辑器向服务器端发送变更埋点部署状态通知，从而完成网页端数据采集器的埋点编辑阶段(参考步骤S210)。

进一步，在本发明实施例所述的Hybrid埋点实施例中，继续对上述四端的可视化埋点中的埋点生效过程的数据传输通信流程进行说明。

由于网页端数据采集器的埋点生效过程，已在前述内容中进行了说明，故在此不作赘述。

终端SDK在可视化埋点中的生效过程是将已部署的埋点下发到全网终端的过程，其实施流程如下所示：

A、将终端上集成了SDK的程序冷启动，终端SDK通过Http/Https从服务端获取已部署埋点对应的埋点信息；

B、终端SDK根据获取到的埋点信息，并对其进行解析，将埋点信息绑定到终端网页中，从而对埋点对应的事件触发机制进行拦截；

C、终端SDK获取触发信息，其中，触发信息选自手势动作、点击信号等模式中的一种；

D、终端SDK在检测到当前已生效的埋点被触发后，将当前被触发埋点对应的(生效阶段的)埋点触发信息发送到服务器端；

E、服务器端将(生效阶段的)埋点触发信息作为埋点激发后的数据采集结果，并保存到数据库中，供数据分析用。

在实际应用过程中，网页端数据采集器、网页编辑器、服务器和终端SDK会按照上述埋点编辑阶段和埋点生效阶段对应的流程来分别进行网页端数据采集器和终端SDK的埋点编辑及生效操作。进一步，在基于上述四端的Hybrid埋点的编辑及生效过程中，需要在上述整体流程实施过程中，改进其中部分步骤即可形成为解决Hybrid埋点问题的完整通讯协议。

进一步，在上述网页端数据采集器、网页编辑器、服务器和终端SDK之间进行页面信息内的页面结构信息的传输时，终端SDK编辑埋点前，首先需要将页面信息(包括页面结构)发送到服务器端，如果当前页面信息内包含H5页面，则需要将H5页面信息合并到当前页面中的。

具体地，首先，网页端数据采集器通过编辑器与服务器端连接，在终端SDK与服务器端连接成功并在服务器接收到终端SDK发送的页面信息时，网页端数据采集器会接收(编辑器发送的)页面信息获取通知。其中，页面信息获取通知是在终端SDK将待埋点页面的页面信息发送至服务器后由服务器通过编辑器发出的。然后，网页端数据采集器通过服务器端，将待埋点页面的页面信息反馈至终端SDK，以由终端SDK将页面信息放入终端网页视窗元素的h5视窗属性内，从而将新的页面信息传输至服务器。这样，当前服务器存储的网站页面信息则是含有H5页面的页面信息，以便于后续被网页端数据采集器获取到更新后的页面信息。

举例来说：

1、终端SDK调用JS-SDK的window.AnalysysAgent.getVisualDomList()函数来通知JS-SDK获取页面信息(页面结构)，JS-SDK调用终端SDK的AnalysysAgentHybrid.onVisualDomList(string)函数返回当前网站的页面信息(页面结构)；

2、终端SDK将页面信息(页面结构)放入WebView元素的h5_view属性中，从而上传到服务器端。

进一步，在上述网页端数据采集器、网页编辑器、服务器和终端SDK之间进行埋点信息的传输时，当解析埋点信息并绑定页面时，如果当前埋点包括Hybrid埋点，或者该埋点是按属性绑定的，那么终端SDK需要将这些埋点信息传输给JS-SDK，由JS-SDK执行H5元素的绑定。

具体地，网页端数据采集器或终端SDK通过编辑器接收由服务器发送的含有Hybrid埋点的埋点信息，并根据当前埋点信息，对当前页面进行绑定(涉及上述步骤(12)、(19)、B、S302)。由编辑器识别用户编辑的埋点信息，结合从服务器获取到的页面信息，在确定埋点信息中含有Hybrid埋点或当前埋点仅以按属性定位方式进行绑定时，在当前埋点信息中标记出当前埋点为Hybrid埋点，并将更新后的埋点信息通过服务器发送至终端SDK，从而在终端SDK将Hybrid埋点筛选出来后将更新后的埋点信息依次通过服务器和编辑器发送至网页端数据采集器，使得网页端数据采集器获得的埋点信息是标记了该埋点是否为Hybrid埋点的信息。

举例来说：

1、编辑器保存Hybrid埋点时在埋点信息对应的埋点结构中加入is_hybrid字段并设置为1，保存到服务端，再由服务端下发到终端SDK；

2、终端SDK将Hybrid埋点筛选出来后，将更新后的埋点信息发送给JS-SDK(JS-SDK根据埋点信息内的is_hybrid字段是否为1或者埋点是否只以按属性方式绑定来判断当前埋点是否为Hybrid埋点)。终端SDK调用JS-SDK的window.AnalysysAgent.onEventList(event_list)函数来传递含有Hybrid埋点的埋点信息。此外，在终端SDK的H5页面加载完成后，JS-SDK也会调用终端SDK的AnalysysAgentHybrid.getEventList()接口函数来获取含有Hybrid埋点的埋点信息。

进一步，在上述网页端数据采集器、网页编辑器、服务器和终端SDK之间进行埋点信息的传输时，在埋点信息解析并完成页面绑定之后，如果当前埋点为Hybrid埋点则需要关联终端页面元素的关联属性，如果当前埋点为非Hybrid埋点，那么需要关联H5页面元素的关联属性。

具体地，在一个实施例中，(涉及上述步骤(12)、(19)、B、S302)如果在对当前页面的埋点进行绑定时，确定当埋点为Hybrid埋点(JS-SDK根据埋点信息内的is_hybrid字段是否为1或者埋点是否只以按属性方式绑定来判断当前埋点是否为Hybrid埋点)，那么将通过服务器端来调用终端SDK中存储的关于当前埋点的关联元素属性，以将含有H5页面元素的关联元素属性作为当前埋点的关联元素属性。

例如：如果当前埋点为Hybrid则关联终端SDK的关联元素属性。其中，related字段的子节点中会包含location字段，JS-SDK通过此字段判断关联到终端页面元素的属性，在事件触发时，将调用终端SDK的AnalysysAgentHybrid.getProperty(related)函数来获取当前JS-SDK出触发埋点的关联元素属性。

在另一个实施例中，(涉及上述步骤(12)、(19)、B、S302)如果在对当前页面的埋点进行绑定时，确定当埋点为非Hybrid埋点(JS-SDK根据埋点信息内的is_hybrid字段是否为1或者埋点是否只以按属性方式绑定来判断当前埋点是否为Hybrid埋点)，那么在JS-SDK获得第一通知后，将含有当前埋点关联元素属性信息的埋点信息，通过服务器端反馈至终端SDK。其中，在终端SDK检测到当前埋点被触发时，通过服务器向网页端数据采集器发送第一通知。

例如：如果当前埋点为非Hybrid则需关联H5页面元素。related字段子节点中会包含h5_path字段，终端SDK通过此字段判断关联到H5页面元素的属性，在事件触发时，将调用JS-SDK的window.AnalysysAgent.getProperty(related)接口函数来通知终端SDK需要获取当前埋点的关联元素属性，JS-SDK调用终端SDK的AnalysysAgentHybrid.onProperty(property)接口函数来返回关联属性值。

进一步，在上述网页端数据采集器、网页编辑器、服务器和终端SDK之间进行埋点信息的传输时，对上述基于四端的通讯流程还会改进关于埋点触发信息的传输协议(涉及上述步骤(14)、(16)、(21)、D、S203)。具体地，在网页端数据采集器检测到当前Hybrid埋点被触发后，通过终端SDK将相应的埋点触发信息传输至服务器。

例如：JS-SDK获取到Hybrid埋点对应的埋点信息后，会执行页面元素与埋点信息的绑定，事件触发后，JS-SDK会调用终端SDK的AnalysysAgentTrack接口函数来传输埋点触发信息，此时，终端SDK会将埋点触发信息上报到服务器端。由于在Hybrid模式中，是以终端SDK为发送埋点触发信息的主体，JS-SDK会将埋点触发信息传输至终端SDK，终端SDK再次进行补充处理后上报到服务器端。

本发明公开了一种基于JS-SDK的可视化埋点方法及系统。该方法及系统，首先使用网页端可视化编辑器圈选方式埋点，解决埋点操作复杂，上报数据量大的问题；使用属性定位的方式定位页面元素，从而解决了不同版本页面元素位置不一致导致的定位失败的问题、以及使用同级埋点技术解决列表类元素埋点问题，继而能够解决复杂业务场景下的埋点方案。另外，本发明能够在埋点信息内嵌入与埋点元素相关的关联属性信息，在埋点处采集更加丰富的数据，进一步，为数据分析阶段提供了更多类型的数据资料，同时能够从多维角度对埋点采集数据进行分析，提高了数据分析结果的准确性。此外，本发明还提供了一种能够对Hybrid埋点进行处理的完整的通讯协议，使得本发明的可视化埋点方法能够适应于不同业务场合(不同操作系统)下的埋点方案。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉该技术的人员在本发明所揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求的保护范围为准。

应该理解的是，本发明所公开的实施例不限于这里所公开的特定结构、处理步骤或材料，而应当延伸到相关领域的普通技术人员所理解的这些特征的等同替代。还应当理解的是，在此使用的术语仅用于描述特定实施例的目的，而并不意味着限制。

说明书中提到的“一个实施例”或“实施例”意指结合实施例描述的特定特征、结构或特性包括在本发明的至少一个实施例中。因此，说明书通篇各个地方出现的短语“一个实施例”或“实施例”并不一定均指同一个实施例。

虽然本发明所揭露的实施方式如上，但所述的内容只是为了便于理解本发明而采用的实施方式，并非用以限定本发明。任何本发明所属技术领域内的技术人员，在不脱离本发明所揭露的精神和范围的前提下，可以在实施的形式上及细节上作任何的修改与变化，但本发明的专利保护范围，仍须以所附的权利要求书所界定的范围为准。