CN114398575A - 一种web端数据采集方法及其系统 - Google Patents
一种web端数据采集方法及其系统 Download PDFInfo
- Publication number
- CN114398575A CN114398575A CN202111489482.8A CN202111489482A CN114398575A CN 114398575 A CN114398575 A CN 114398575A CN 202111489482 A CN202111489482 A CN 202111489482A CN 114398575 A CN114398575 A CN 114398575A
- Authority
- CN
- China
- Prior art keywords
- data
- data acquisition
- page
- sdk
- acquisition
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 16
- 239000010410 layer Substances 0.000 claims abstract description 29
- 238000005516 engineering process Methods 0.000 claims abstract description 17
- 230000006978 adaptation Effects 0.000 claims abstract description 15
- 239000012792 core layer Substances 0.000 claims abstract description 15
- 238000013461 design Methods 0.000 claims abstract description 7
- 230000003068 static effect Effects 0.000 claims description 18
- 238000013480 data collection Methods 0.000 claims description 11
- 230000006870 function Effects 0.000 claims description 11
- 238000011161 development Methods 0.000 claims description 4
- 238000010586 diagram Methods 0.000 claims description 4
- 230000008569 process Effects 0.000 claims description 3
- 235000008708 Morus alba Nutrition 0.000 claims description 2
- 240000000249 Morus alba Species 0.000 claims description 2
- 230000001960 triggered effect Effects 0.000 claims description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 12
- 230000000875 corresponding effect Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000002596 correlated effect Effects 0.000 description 1
- 230000008846 dynamic interplay Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种WEB端数据采集方法及其系统，涉及数据采集技术领域，本发明一种WEB端数据采集系统，包括前端部分和后端部分，前端部分和后端部分之间通过HTTP通信，前端部分包括适配层、核心层和管理后台，适配层、核心层是数据采集SDK基于跨平台、跨技术栈方面的考虑使用分层设计的思想解耦抽象出的设计，适配层、核心层共同构成了数据采集SDK主体部分，前端部分除数据采集SDK外还包括查看统计数据及报表的管理后台部分，管理后台中主要查看采集到的数据，后端部分包括服务层和数据层两层；本发明方案适用于移动端H5页面、小程序页面、WebView和PC端浏览器页面数据的采集，针对Vue、React、Angular等不同技术栈可以通过插件接入。
Description
技术领域
本发明涉及数据采集技术领域，特别涉及一种WEB端数据采集方法及其系统。
背景技术
Web是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统，是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构，前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互，Web技术亦可应用于营销活动中的数据采集；
营销活动中需清楚了解产品的浏览量、访客数、页面平均停留时长、访客地域分布、页面访问路径及访问深度等信息，为此需采集用户在WEB前端的访问数据；为此，我们提出一种WEB端数据采集方法及其系统。
发明内容
本发明的主要目的在于提供一种WEB端数据采集方法及其系统，以解决上述背景中提出的问题。
为实现上述目的，本发明采取的技术方案为：一种WEB端数据采集系统，包括前端部分和后端部分，所述前端部分和后端部分之间通过HTTP通信，所述前端部分包括适配层、核心层和管理后台，所述适配层、核心层是数据采集SDK基于跨平台、跨技术栈方面的考虑使用分层设计的思想解耦抽象出的设计，所述适配层、核心层共同构成了数据采集SDK主体部分，所述前端部分除数据采集SDK外还包括查看统计数据及报表的管理后台部分，管理后台中主要查看采集到的数据，所述后端部分包括服务层和数据层两层，所述服务层为数据采集前端部分提供数据接收API服务、静态资源服务和统计报表服务，所述数据层保存数据采集SDK上报的采集数据和统计报表服务生成的各种报表。
优选地，所述前端部分由数据采集使用的SDK和查看统计报表的管理后台两大块组成，所述SDK部分内嵌入数据采集页面，在用户访问采集页面并且浏览器完成页面加载后采集页面将自动初始化采集脚本并在采集到数据后通过HTTP协议将采集数据上报给后端中的数据接收API服务。
优选地，所述后端接收到采集页面上报的采集数据后，用户访问管理后台的统计报表页面查看所有的统计内容及其生成的相关报表和图形，包括PV、UV、设备信息、用户在各个页面的停留时长、页面访问深度、页面跳失率和用户访问路径桑基图。
优选地，所述前端数据采集SDK核心层部分囊括所有平台及技术栈中共用的采集逻辑而适配层根据不同平台的平台特性或不同技术栈的语言特性开发语言独立、平台独立的SDKAPI供数据采集接入项目调用。
优选地，所述静态资源服务中存放数据采集SDK的静态资源文件，所述静态资源文件是数据采集SDK的JavaScript脚本文件，所述前端部分接入了数据采集功能的页面在浏览器中加载时请求静态资源服务获取数据采集脚本，所述数据采集脚本在被浏览器加载后自动初始化并开始采集相关数据，然后调用所述数据接收API服务的接口上报采集数据，所述数据接收API服务接收前端数据采集SDK上报的采集数据，并将接收到的采集数据存入数据库中，所述统计报表服务为管理后台提供采集数据统计报表的生成。
一种WEB端数据采集方法，包括如下步骤：
步骤1：首先在采集网站中根据网站所属的平台和开发技术栈使用对应的数据采集SDKAPI在网站的源码中嵌入数据采集脚本；
步骤2：访客通过浏览器访问该网站时浏览器将请求静态资源服务获取数据采集脚本并初始化数据采集功能；
步骤3：浏览器完成数据采集功能初始化之后开始监听浏览器中的各种事件，完成一次数据的采集和上报；
步骤4：在浏览器页面关闭之前一直重复此流程，直至页面关闭、会话结束数据采集SDK上报完页面关闭事件；
步骤5：在采集数据上报后用户访问管理后台中的数据统计报表页面查看采集数据；
步骤6：完成WEB端的数据采集。
优选地，所述步骤3中浏览器完成了数据采集功能初始化之后将开始监听浏览器中的各种事件，每当触发一次采集器监听的事件数据采集SDK就将执行对应的数据采集代码，然后根据条件请求数据采集API服务上报采集到的数据。
本发明具有如下有益效果：
本发明方案提出一种跨平台、跨技术栈的数据采集方法和系统，适用于移动端H5页面、小程序页面、WebView和PC端浏览器页面数据的采集，针对Vue、React、Angular等不同技术栈可以通过插件接入。
附图说明
图1为本发明WEB端数据采集系统的架构概要图；
图2为本发明WEB端数据采集系统的B/S架构图；
图3为本发明WEB端数据采集方法的数据采集流程图；
图4为本发明WEB端数据采集方法的数据采集时序流程图。
具体实施方式
为使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体实施方式，进一步阐述本发明。
下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。
通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
在下文中，可在本发明的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。
此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
除非另有限定，否则在这里使用的所有术语(包括技术术语和科学术语)具有与本发明的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关技术领域中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本发明的各种实施例中被清楚地限定。
实施例一：
请参照图2所示：当前方案适用于基于B/S架构的系统，B/S架构由用户在手机、平板、笔记本、台式机等终端上使用的浏览器和通过互联网连接的部署在各服务器上的后端服务两大部分组成；
如图1所示，一种WEB端数据采集系统，包括前端部分和后端部分，前端部分和后端部分之间通过HTTP通信，前端部分包括适配层、核心层和管理后台，适配层、核心层是数据采集SDK基于跨平台、跨技术栈方面的考虑使用分层设计的思想解耦抽象出的设计，适配层、核心层共同构成了数据采集SDK主体部分，前端部分除数据采集SDK外还包括查看统计数据及报表的管理后台部分，管理后台中主要查看采集到的数据，后端部分包括服务层和数据层两层，服务层为数据采集前端部分提供数据接收API服务、静态资源服务和统计报表服务，数据层保存数据采集SDK上报的采集数据和统计报表服务生成的各种报表；
前端部分由数据采集使用的SDK和查看统计报表的管理后台两大块组成，SDK部分内嵌入数据采集页面，在用户访问采集页面并且浏览器完成页面加载后采集页面将自动初始化采集脚本并在采集到数据后通过HTTP协议将采集数据上报给后端中的数据接收API服务；后端接收到采集页面上报的采集数据后，用户访问管理后台的统计报表页面查看所有的统计内容及其生成的相关报表和图形，包括PV、UV、设备信息、用户在各个页面的停留时长、页面访问深度、页面跳失率和用户访问路径桑基图；
前端数据采集SDK核心层部分囊括所有平台及技术栈中共用的采集逻辑而适配层根据不同平台的平台特性或不同技术栈的语言特性开发语言独立、平台独立的SDK API供数据采集接入项目调用；静态资源服务中存放数据采集SDK的静态资源文件，静态资源文件是数据采集SDK的JavaScript脚本文件，前端部分接入了数据采集功能的页面在浏览器中加载时请求静态资源服务获取数据采集脚本，数据采集脚本在被浏览器加载后自动初始化并开始采集相关数据，然后调用数据接收API服务的接口上报采集数据，数据接收API服务接收前端数据采集SDK上报的采集数据，并将接收到的采集数据存入数据库中，统计报表服务为管理后台提供采集数据统计报表的生成。
实施例二：
请参照图3-4所示：一种WEB端数据采集方法，首先在采集网站中根据网站所属的平台和开发技术栈使用对应的数据采集SDK API在网站的源码中嵌入数据采集脚本，当访客通过浏览器访问该网站时浏览器将请求静态资源服务获取数据采集脚本并初始化数据采集功能；
在浏览器完成了数据采集功能初始化之后将开始监听浏览器中的各种事件，每当触发一次采集器监听的事件数据采集SDK就将执行对应的数据采集代码然后根据条件请求数据采集API服务上报采集到的数据；至此遍完成了一次数据的采集和上报，在浏览器页面关闭之前将一直重复此流程，直至页面关闭、会话结束数据采集SDK上报完页面关闭事件；此外在采集数据上报后用户便可访问管理后台中的数据统计报表页面查看采集数据；
本方案适用于移动端H5页面、小程序页面、WebView和PC端浏览器页面数据的采集，针对Vue、React、Angular等不同技术栈可以通过插件接入。
以上显示和描述了本发明的基本原理和主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。
Claims (7)
1.一种WEB端数据采集系统，其特征在于：包括前端部分和后端部分，所述前端部分和后端部分之间通过HTTP通信，所述前端部分包括适配层、核心层和管理后台，所述适配层、核心层是数据采集SDK基于跨平台、跨技术栈方面的考虑使用分层设计的思想解耦抽象出的设计，所述适配层、核心层共同构成了数据采集SDK主体部分，所述前端部分除数据采集SDK外还包括查看统计数据及报表的管理后台部分，管理后台中主要查看采集到的数据，所述后端部分包括服务层和数据层两层，所述服务层为数据采集前端部分提供数据接收API服务、静态资源服务和统计报表服务，所述数据层保存数据采集SDK上报的采集数据和统计报表服务生成的各种报表。
2.根据权利要求1所述的一种WEB端数据采集系统，其特征在于：所述前端部分由数据采集使用的SDK和查看统计报表的管理后台两大块组成，所述SDK部分内嵌入数据采集页面，在用户访问采集页面并且浏览器完成页面加载后采集页面将自动初始化采集脚本并在采集到数据后通过HTTP协议将采集数据上报给后端中的数据接收API服务。
3.根据权利要求1所述的一种WEB端数据采集系统，其特征在于：所述后端接收到采集页面上报的采集数据后，用户访问管理后台的统计报表页面查看所有的统计内容及其生成的相关报表和图形，包括PV、UV、设备信息、用户在各个页面的停留时长、页面访问深度、页面跳失率和用户访问路径桑基图。
4.根据权利要求1所述的一种WEB端数据采集系统，其特征在于：所述前端数据采集SDK核心层部分囊括所有平台及技术栈中共用的采集逻辑而适配层根据不同平台的平台特性或不同技术栈的语言特性开发语言独立、平台独立的SDK API供数据采集接入项目调用。
5.根据权利要求1所述的一种WEB端数据采集系统，其特征在于：所述静态资源服务中存放数据采集SDK的静态资源文件，所述静态资源文件是数据采集SDK的JavaScript脚本文件，所述前端部分接入了数据采集功能的页面在浏览器中加载时请求静态资源服务获取数据采集脚本，所述数据采集脚本在被浏览器加载后自动初始化并开始采集相关数据，然后调用所述数据接收API服务的接口上报采集数据，所述数据接收API服务接收前端数据采集SDK上报的采集数据，并将接收到的采集数据存入数据库中，所述统计报表服务为管理后台提供采集数据统计报表的生成。
6.一种WEB端数据采集方法，其特征在于，包括如下步骤：
步骤1：首先在采集网站中根据网站所属的平台和开发技术栈使用对应的数据采集SDKAPI在网站的源码中嵌入数据采集脚本；
步骤2：访客通过浏览器访问该网站时浏览器将请求静态资源服务获取数据采集脚本并初始化数据采集功能；
步骤3：浏览器完成数据采集功能初始化之后开始监听浏览器中的各种事件，完成一次数据的采集和上报；
步骤4：在浏览器页面关闭之前一直重复此流程，直至页面关闭、会话结束数据采集SDK上报完页面关闭事件；
步骤5：在采集数据上报后用户访问管理后台中的数据统计报表页面查看采集数据；
步骤6：完成WEB端的数据采集。
7.根据权利要求6所述的一种WEB端数据采集方法，其特征在于：所述步骤3中浏览器完成了数据采集功能初始化之后将开始监听浏览器中的各种事件，每当触发一次采集器监听的事件数据采集SDK就将执行对应的数据采集代码，然后根据条件请求数据采集API服务上报采集到的数据。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111489482.8A CN114398575A (zh) | 2021-12-07 | 2021-12-07 | 一种web端数据采集方法及其系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111489482.8A CN114398575A (zh) | 2021-12-07 | 2021-12-07 | 一种web端数据采集方法及其系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114398575A true CN114398575A (zh) | 2022-04-26 |
Family
ID=81227299
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111489482.8A Pending CN114398575A (zh) | 2021-12-07 | 2021-12-07 | 一种web端数据采集方法及其系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114398575A (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150089352A1 (en) * | 2013-09-25 | 2015-03-26 | Akamai Technologies, Inc. | Key Resource Prefetching Using Front-End Optimization (FEO) Configuration |
| US20150169624A1 (en) * | 2013-12-13 | 2015-06-18 | BloomReach Inc. | Distributed and fast data storage layer for large scale web data services |
| CN108664239A (zh) * | 2018-05-21 | 2018-10-16 | 中信百信银行股份有限公司 | 一种基于微服务的跨技术栈web前端开发系统及方法 |
| CN110489699A (zh) * | 2019-08-16 | 2019-11-22 | 南京云帐房网络科技有限公司 | 一种异步数据采集方法及系统 |
| CN112783734A (zh) * | 2021-02-02 | 2021-05-11 | 北京比特易湃信息技术有限公司 | 一种适用于前端页面性能和错误指标采集的系统 |
| CN113742550A (zh) * | 2021-08-20 | 2021-12-03 | 广州市易工品科技有限公司 | 基于浏览器的数据获取方法、装置和系统 |
-
2021
- 2021-12-07 CN CN202111489482.8A patent/CN114398575A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150089352A1 (en) * | 2013-09-25 | 2015-03-26 | Akamai Technologies, Inc. | Key Resource Prefetching Using Front-End Optimization (FEO) Configuration |
| US20150169624A1 (en) * | 2013-12-13 | 2015-06-18 | BloomReach Inc. | Distributed and fast data storage layer for large scale web data services |
| CN108664239A (zh) * | 2018-05-21 | 2018-10-16 | 中信百信银行股份有限公司 | 一种基于微服务的跨技术栈web前端开发系统及方法 |
| CN110489699A (zh) * | 2019-08-16 | 2019-11-22 | 南京云帐房网络科技有限公司 | 一种异步数据采集方法及系统 |
| CN112783734A (zh) * | 2021-02-02 | 2021-05-11 | 北京比特易湃信息技术有限公司 | 一种适用于前端页面性能和错误指标采集的系统 |
| CN113742550A (zh) * | 2021-08-20 | 2021-12-03 | 广州市易工品科技有限公司 | 基于浏览器的数据获取方法、装置和系统 |
Non-Patent Citations (1)
| Title |
|---|
| 钟德福;张良国;艾红;黄小华;吕俊霖;: "基于NodeJS的渔业资源调查数据采集系统框架重构", 渔业现代化, no. 06, 15 December 2019 (2019-12-15) * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104348803B (zh) | 链路劫持检测方法、装置、用户设备、分析服务器及系统 | |
| US8725794B2 (en) | Enhanced website tracking system and method | |
| US8819819B1 (en) | Method and system for automatically obtaining webpage content in the presence of javascript | |
| CN103412890B (zh) | 一种网页加载方法和装置 | |
| CN103856446B (zh) | 一种登录方法、装置及开放平台系统 | |
| CN102655481B (zh) | 一种基于网页的即时通信聊天内容查看方法及系统 | |
| CN101345751B (zh) | 确定作为数据库活动的起源的应用程序用户 | |
| CN103248677B (zh) | 互联网行为分析系统及其工作方法 | |
| CN106295382B (zh) | 一种信息风险防控方法及装置 | |
| CN109284458A (zh) | 网页显示方法、装置、计算机设备及存储介质 | |
| CN104142975B (zh) | 一种基于微博消息的推广方法、装置及系统 | |
| CN106503111B (zh) | 网页转码方法、装置及客户终端 | |
| US20150026813A1 (en) | Method and system for detecting network link | |
| EP2449481A1 (en) | System and method for enhancing digital content | |
| CN109428877A (zh) | 一种用于通过用户设备访问业务系统的方法和装置 | |
| CN107315646A (zh) | 页面组件间的数据流向控制方法和装置 | |
| CN103389972A (zh) | 一种基于简易信息聚合获取正文的方法及装置 | |
| CN107800611A (zh) | 一种页面切换的方法及页面切换装置 | |
| CN103955477A (zh) | 在浏览器中写读Cookie信息的方法、装置和浏览器 | |
| CN107818171A (zh) | 一种基于iframe的页面加载方法及系统 | |
| CN107944289A (zh) | 一种浏览器指纹检测方法和检测浏览器指纹的嵌入式设备 | |
| CN111680247B (zh) | 网页字符串的本地调用方法、装置、设备及存储介质 | |
| CN114398575A (zh) | 一种web端数据采集方法及其系统 | |
| CN102130916B (zh) | 页面内容级别的权限控制方法和装置 | |
| CN111273964A (zh) | 一种数据加载方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |