一种基于web端的无侵入埋点数据收集方法及系统与流程

1.本发明涉及计算机及网络通信技术领域，特别涉及一种基于web端的无侵入埋点数据收集方法及系统。


背景技术：

2.随着现代信息技术的不断发展，数据的产生速度变得越来越快，大量的数据被收集和存储。这些海量的数据必须通过系统的处理和分析，才能挖掘出其中蕴含的潜在价值。如何精准有效的收集我们想要的数据，借助图形化手段，利用各类图表进行复杂数据的可视化展示，可以清晰有效的传达与沟通信息，让数据的表达更加直观、易于理解，提高了数据沟通的效率。
3.当今世界已跨入了互联网大数据时代，大数据正深刻改变着人们的思维、生产和生活方式。而数据收集和分析已成为大数据时代不可或缺的重要手段和工具。数据收集已经成了科学可视化领域与信息可视化领域的统一，涉及数据分析、图形学、可视化、设计学等多个专业领域。同时，大数据本身的新特点也对数据收集提出了更为迫切的需求与更加严峻的挑战。
4.目前存在着诸多的数据收集方式，通过对大数据进行采集、清洗、分析，将数据可视化，给人以直观的视觉感受，而在这个过程中，如何进行精准有效的进行数据的收集是非常关键的一个环节。
5.现如今埋点技术主要分为以下两大类：1、手动埋点2、可视化埋点。两种方式的埋点技术侧重点不同，所带来的效果也是不一样的。手动埋点代码开发量大，需要编写大量定制化代码，并且跟业务严重耦合；可视化埋点代码定制化能力较低，操作繁琐。因此，怎样提供一种业务与埋点之间耦合度低、代码开发量小，埋点操作简单方便的数据采集方法，成为一个急待解决的问题。


技术实现要素：

6.针对现有技术存在的问题，本发明的目的在于解决目前的代码埋点的收集方式存在的需要大量编码，对业务系统侵入性强，耦合度高的缺点，提供一种能够简便快捷，无需大量编码，对业务系统无侵入性，数据采集跟业务系统耦合度低的数据收集方法。
7.为实现上述目的，本发明提供一种基于web端的无侵入埋点数据收集方法，所述方法包括以下步骤：s1. 在页面中插入基础代码；s2. 在页面上配置埋点信息；s3. 根据埋点信息生成核心数据采集代码，通过s1步骤中插入的基础代码异步下载到页面中；s4. 当用户触发采集条件，接收页面上的采集数据。
8.进一步，在页面中插入基础代码，实现异步下载核心数据采集代码的工作步骤中，
包括：增加一个新的《script type＝"text/javascript"》标签插入到一iife形式的javascript代码中，并将所述javascript代码插入至页面的head标签中。
9.步骤s2中在页面上配置埋点信息的工作步骤中，包括：s21.获取到页面的url地址，推送地址到配置工具栏；s22.接收工具栏中被选中的配置选项的信息，所述配置选项对应唯一的id；s23.推送配置选项的信息，接收配置选项的具体信息，所述具体信息包括属性、名称和触发条件；埋点信息同时包含了采集条件和要采集的数据；埋点信息可以根据要采集的数据类型包括页面埋点和用户自定义埋点两种形式：其中，页面上配置埋点信息包含的采集条件有页面生命周期事件，包括domcontentloaded、 beforeunload和visibilitychange 事件，当页面在加载过程中，将会自动触发相应的生命周期事件；要采集的数据包括页面来源、当前站点语言、可视窗口大小和页面加载性能数据；这些数据主要来自浏览器的 window 对象、上一个页面带过来的数据以及按规则存储在浏览器中的数据；用户自定义埋点，部分数据通过监听页面元素触发事件的方式获取，其余数据则需要用户手动执行触发，用户自定义埋点以下面的方式上报：将 "login.click" 标识符配置在页面元素节点上，通过javascript监听元素节点触发的点击事件，用户点击到该元素时，javascript解析该元素上携带的数据，获取数据然后进行上报。
10.步骤s3中根据埋点信息生成核心的数据采集代码，并异步下载到页面中的工作步骤之前，还包括：s31. 生成网站唯一标识和开发者密钥，发送给开发者，其中，开发者与密钥一一对应，网站与唯一标识一一对应；s32.对开发者的密钥和网站的唯一标识进行验证。
11.此外，还包括步骤s5：将页面收集到的数据可视化的展示在开放平台的埋点详情页中。
12.本发明提供的基于web端无侵入埋点数据收集方法及系统，在传统代码埋点的系统应用上，弥补了现有的埋点方式存在的需要大量编码，对业务系统侵入性强，耦合度高的缺点。提供一种业务与埋点之间耦合度低，且埋点操作简单的数据采集方法及系统。采用上述技术方案，开发者仅需在项目中填入基础代码即可，不再需要多余的代码，后续的具体埋点可由运维人员本发明的方法及系统即可，降低了业务与埋点之间的耦合性，而埋点工作无需开发者参与也能完成。此外，本发明技术方案在实现了异步下载核心采集代码的工作，并且由于该异步下载，即使核心采集代码更新了，开发者也不需要更新基础代码，从而实现了代码的热更新。
附图说明
13.图1示出了根据本发明实施例基于web端无侵入埋点收集数据流程示意图；图2为本发明实施例中在页面上配置埋点信息的步骤流程图；图3为本发明实施例中key、密钥、开发者及埋点页面之间的对应关系图；
图4为本发明实施例基于web端无侵入埋点数据收集系统的模块原理图。
具体实施方式
14.下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
15.在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的系统或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。
16.在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
17.以下结合图1-图4对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。
18.如图1所示，根据本发明的基于web端的无侵入埋点数据收集方法，所述方法包括以下步骤：s1. 在页面中插入基础代码；插入的基础代码如下：《script》
ꢀꢀ
(function(f, c, d, e, a, b) {
ꢀꢀꢀꢀ
a = c.createelement(d);
ꢀꢀꢀꢀ
b = c.getelementsbytagname(d)[0];a.async = 1;a.src = e;b.parentnode.insertbefore(a, b);
ꢀꢀ
})(
ꢀꢀꢀꢀ
window,
ꢀꢀꢀꢀ
document,
ꢀꢀꢀꢀ
'script',
ꢀꢀꢀꢀ
'https://static1.cdn.com/sdk/collect-2.2.min.js'
ꢀꢀ
);《/script》s2. 在页面上配置埋点信息；埋点信息同时包含了采集条件和要采集的数据。埋点信息可以根据要采集的数据类型包括页面埋点和用户自定义埋点两种形式：
其中，页面埋点包含的采集条件有页面生命周期事件，包括domcontentloaded、beforeunload和visibilitychange事件等，当页面在加载过程中，将会自动触发相应的生命周期事件。要采集的数据包括页面来源、当前站点语言、可视窗口大小、页面加载性能数据等等。这些数据主要来自浏览器的 window 对象、上一个页面带过来的数据、以及按规则存储在浏览器中的数据。
[0019]
用户自定义埋点，本实施例是在登录按钮元素的埋点中，开发者将标识符 "login.click" 表示点击了登录按钮，"login.success" 表示登录成功，"login.fail" 表示登录失败，将这些数据进行上报。其中部分数据可以通过监听页面元素触发事件的方式拿到，其余数据则需要用户手动执行触发，这些都属于用户自定义埋点，用户自定义埋点以下面的方式上报：将 "login.click" 标识符配置在页面元素节点上，通过javascript监听元素节点触发的点击事件，用户点击到该元素时，javascript解析该元素上携带的数据，获取数据然后进行上报。
[0020]
此时，登录按钮元素埋点信息中包含的采集条件则是用户点击登录按钮，要采集的数据则是点击登录按钮后触发的"click"事件中携带的用户数据。
[0021]
s3. 根据埋点信息生成核心数据采集代码，通过s1步骤中插入的基础代码异步下载到页面中；在埋点信息配置完成后，核心采集代码生成模块会根据埋点内容自动生成核心数据采集代码，核心代码的生成逻辑如下：在页面元素节点上配置标识符"login.click"，则表示要将该元素点击的触发的click事件进行数据采集，从而生成核心采集代码形式如下：// 第一步：将点击事件监听挂载在页面元素上document.body.addeventlistener('click', function(e) { ...
ꢀꢀ
// 第二步：获取目标元素
ꢀꢀ
const el = e.target;
ꢀꢀ
// 第三步：获取元素上的属性值
ꢀꢀ
const datacollect = getnodeattr(el, 'data-collect');
ꢀꢀ
const datacollectargs = getnodeattr(el, 'data-collect-args');
ꢀꢀ
if (datacollect || datacollectargs) {
ꢀꢀꢀꢀ
// 第四步：将获取到的数据上报到 nginx，产生一条日志
ꢀꢀꢀꢀ
const data = {
ꢀꢀꢀꢀꢀꢀ
type: 'click',ec: datacollect,ea: datacollectargs,
ꢀꢀꢀꢀꢀ
...
ꢀꢀꢀꢀ
};sendtonginx(data);
ꢀꢀ
}}, false);
function getnodeattr(el, attr) {
ꢀꢀ
return (el&&el.getattribute&&el.getattribute(attr)) || "";}function sendtonginx(info) {
ꢀꢀ
let str = "";
ꢀꢀ
for (let i in info) {
ꢀꢀꢀꢀ
if (str === "") {
ꢀꢀꢀꢀꢀꢀ
str = i + "=" + info[i];
ꢀꢀꢀꢀ
} else {
ꢀꢀꢀꢀꢀꢀ
str += "&" + i + "=" + info[i];
ꢀꢀꢀꢀ
}
ꢀꢀ
}
ꢀꢀ
new image().src = url}通过生成的核心采集代码，实现了页面元素 click 事件数据自动上报，相应的，进行监听的事件包括页面的domcontentloaded、 beforeunload和visibilitychange事件等。
[0022]
生成核心采集代码后，需要通过步骤s1中插入的基础代码，将核心采集代码异步下载到页面中。
[0023]
s4. 当用户触发采集条件，接收页面上的采集数据；当用户操作页面时触发了埋点信息中的采集条件，在本实施例中，即点击了带有"login.click"标识符的页面元素，将会触发核心采集代码中监听的元素事件，通过执行该元素的事件，核心采集代码将数据上报到后台服务器。
[0024]
具体地，在页面中插入基础代码，实现异步下载核心数据采集代码的工作步骤中，包括：s11. 将一个新的《script type＝"text/javascript"》标签插入到一段iife形式的javascript代码中，并将javascript代码插入页面的head标签中。
[0025]
具体地，如图2所示，步骤s2中在页面上配置埋点信息的工作步骤中，还进一步包括以下步骤：s21.获取到页面的url地址，推送地址到配置工具栏；s22.接收工具栏中被选中页面元素的配置选项信息，所述配置选项包含了元素的唯一标识；配置选项包括对选中页面元素埋点的详细信息，形式如下：// 代码示例...《span data-collect='f8032a2b9f6aa60be8fd9866bc40b633' data-collect-args='{"userid": 123, "name": "zzz"}'》
登录《/span》...在本实施例中，登录元素包含的配置选项信息具体内容如图2所示，在页面元素为span的标签上分别增加了属性data-collect和data-collect-args，其中data-collect属性值是页面元素的唯一标识，该唯一标识是由元素在页面中所在路径进行hash编码，登录元素在页面中的路径如下：// xpath/html/body/div[1]/div/div[2]/div[6]/div[2]/div/div/div[1]/div/div/div/div[2]/a/div[1]/span将路径进行hash编码以后，得到元素的唯一标识：f8032a2b9f6aa60be8fd9866bc40b633，所以元素的data-collect属性值即为f8032a2b9f6aa60be8fd9866bc40b633。
[0026]
s23.推送配置选项的信息，接收配置选项的具体信息，所述具体信息包括属性、名称和触发条件。
[0027]
此处的触发条件即为s2步骤中埋点信息包含的触发条件，用户点击登录按钮即为触发条件。
[0028]
具体地，开发者或运维人员在开放平台配置相应的埋点信息。首先填写相关页面的url，加载完之后会出现配置的工具栏，使用工具栏选择工具选中需要配置的元素的属性，这个步骤会为选中的元素属性配置相应的标识。通过获取选中元素在页面中的路径信息，路径信息表示如下：// xpath/html/body/div[1]/div/div[2]/div[6]/div[2]/div/div/div[1]/div/div/div/div[2]/a/div[1]/span通过对该路径信息进行hash编码得到该元素的唯一标识：f8032a2b9f6aa60be8fd9866bc40b633，在选择的元素上添加属性data-collect，将得到的唯一标识作为属性data-collect的值添加到元素上，然后添加属性data-collect-args，属性data-collect-args的值将作为触发条件后进行上报的数据，本实施例中，上报数据为包含userid和name的数据对象 {"userid":123, "name":'zzz'}。最终对选中元素配置完成后的具体形式如下：// 代码示例...《span data-collect='f8032a2b9f6aa60be8fd9866bc40b633' data-collect-args='{"userid": 123, "name": "zzz"}'》登录《/span》...标识用来唯一区别选中的元素的属性，用于核心采集代码中获取深层次的用户数据，选中后会弹出开发者需要配置的信息，需要配置事件元素的属性、名称，以及触发条件等相关信息。这个步骤主要是开发者针对用户访问操作以及更深层次的操作（例如下单者
的消费金额，订单优惠金额等）进行数据埋点。
[0029]
然后生成核心采集代码，核心采集代码将会通过s1步骤中插入的基础代码异步下载到项目中，由于浏览器的异步下载特性，从而实现不阻塞浏览器，也不会影响用户操作体验。
[0030]
具体地，步骤s3中根据埋点信息生成核心的数据采集代码，并异步下载到页面中的工作步骤之前，还包括以下步骤：s31. 生成网站唯一标识和开发者密钥，发送给开发者，其中，开发者与密钥一一对应，网站与唯一标识一一对应；通过本发明的开放平台生成网站的唯一标识和申请开发者密钥。网站和唯一标识是一对一的关系，一个开发者可以拥有多个网站的唯一标识。密钥对应开发者，一个开发者只有一个密钥。
[0031]
s32.对开发者的密钥和网站的唯一标识进行验证。
[0032]
s33.对开发者验证成功后，在s1步骤中插入的基础代码将开始异步下载已经生成的核心采集代码，由于采用了通过基础代码来下载核心采集代码的方式，从而实现了核心采集代码和业务系统代码的分离，业务系统代码和核心采集代码的更新维护互不影响，借助于浏览器本身具有的异步下载特性，所以即使核心采集代码更新了，开发者也不需要更新基础代码，从而实现了代码的热更新。
[0033]
具体地，步骤s4中，当用户触发了埋点信息中的触发条件时，核心采集代码将会获取埋点内容中的数据，在本例中，数据即为包含了userid和name的数据对象 {"userid":123, "name":'zzz'}，将数据进行上报并存储。
[0034]
本发明采用自动生成核心采集代码的方式，并将业务系统代码和核心采集代码分离，使业务系统代码和核心采集代码独立升级维护，互不影响，还能进行热更新，并且不再使用传统的采集代码编程来定义行为采集的触发条件和后续行为，而是通过使用工具栏选择工具来选择页面元素的属性，确定数据采集的条件和采集内容，可以大幅提升埋点工作的效率和易用性，即使是非开发者也能进行埋点配置。通过配置埋点后自动化生成核心采集代码，相对于现有技术，弥补了目前的代码埋点方式存在的需要大量编码，对业务系统侵入性强，耦合度高的缺点。
[0035]
为配合本发明方法的实施，如图4所示，本发明还提出了一种基于web端无侵入埋点的数据采集系统，包括：基础代码模块，实现异步下载核心采集代码；将一个新的《script type＝"text/javascript"》标签插入到一段iife形式的javascript代码中，并将javascript代码插入至页面的head标签中。
[0036]
埋点配置模块，为页面配置相应的埋点信息。
[0037]
此外，埋点配置模块还包含如下功能单元：工具栏单元：接收页面的url，推送配置工具栏；选项配置单元：接收工具栏中被选中的配置选项的信息，配置选项对应唯一的标识；信息配置单元：推送配置选项的信息，接收配置选项的具体信息，具体信息包括属性、名称、触发条件。
[0038]
核心采集代码生成模块：生成核心采集代码。
[0039]
数据上传模块：当用户触发触发条件时，接收页面上传的数据。
[0040]
采用上述技术方案，解决业务与埋点技术直接的关联。使用本发明，开发者仅需在项目中填入基础代码，后续的具体埋点可由运维人员登录本发明的开放平台设置即可，降低了业务与埋点之间的耦合性，而埋点工作无需开发者参与也能完成。此外，本发明技术方案在实现了异步下载核心采集代码的工作，并且由于该异步下载，即使核心采集代码更新了，开发者也不需要更新基础代码，从而实现了代码的热更新。从而降低了业务与埋点之间的耦合。
[0041]
在本说明书的描述中，参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，本领域的技术人员可以在不产生矛盾的情况下，将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。
[0042]
上述内容虽然已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。