CN113553034B - 一种前端埋点***输出方法 - Google Patents
一种前端埋点***输出方法 Download PDFInfo
- Publication number
- CN113553034B CN113553034B CN202110765212.9A CN202110765212A CN113553034B CN 113553034 B CN113553034 B CN 113553034B CN 202110765212 A CN202110765212 A CN 202110765212A CN 113553034 B CN113553034 B CN 113553034B
- Authority
- CN
- China
- Prior art keywords
- management
- viewport
- output method
- configuration
- system output
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- 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
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/48—Program initiating; Program switching, e.g. by interrupt
- G06F9/4806—Task transfer initiation or dispatching
- G06F9/4843—Task transfer initiation or dispatching by program, e.g. task dispatcher, supervisor, operating system
- G06F9/485—Task life-cycle, e.g. stopping, restarting, resuming execution
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明涉及一种前端埋点***输出方法,属于WEB前端技术领域。本发明提出了一个Track.js的库解决统一埋点问题,在Track.js中引入入口(entry)、依赖管理(loader加载)、视图组件管理(webview)、生命周期管理(lifecycle)、路由管理(router)、状态管理(store)、缓存管理(cache)、输出(output)等资源管理功能,采用统一的埋点配置方案,同时采用前端组件的初始化、更新、卸载等流程实现埋点方案。本发明多端共用一套埋点***,统一了由于开发语言、开发环境、技术选型等造成的开发成本和开发时间;使用视口组件模板,作为开发的视口,可以监听到内部的事件和行为,且可以嵌套,其中多次触发行为的操作,由缓存管理先进行处理,这一系列的操作都有利于性能和可复用,集中管理的优点。
Description
技术领域
本发明属于WEB前端技术领域,具体涉及一种前端埋点***输出方法。
背景技术
近年来,随着互联网发展到现在,数据的重要性已经不需再多的强调,做好数据搜集的工作、统计产品中用户行为和使用情况、从而可以从产品的角度去了解用户群体,从而升级和迭代产品,使其更加贴近用户。由于浏览器、客户端(Android/Ios)、小程序、混合开发、服务端渲染等应用所用的语言限制、多端不能采用相同的埋点库,同时技术选型,代码遗留,开发规范不一产生了一个问题:如何对现有的库的功能进行整合,使用统一制定规范,使之适配多端多平台埋点。
通常来讲,目前没有一个多端(客户端/小程序/H5/PC/混合开发/服务端渲染)统一的前端埋点方案,这使得开发、产品、运营在不停的熟悉不同埋点方案,增加了产品的开发周期和项目的开发难度。
发明内容
(一)要解决的技术问题
本发明要解决的技术问题是如何提供一种前端埋点***输出方法,以解决如何对现有的库的功能进行整合,使用统一制定规范,使之适配多端多平台埋点的问题。
(二)技术方案
为了解决上述技术问题,本发明提出一种前端埋点***输出方法,该方法包括:
1)Track.js依赖管理
Track.js针对多端采用多种形式引入,在引入Track.js时,在埋点配置方案配置埋点使用的配置方案;
2)视图组件管理
视口组件模板是指Track.js提供一个统一的视口组件模板webview,嵌套的内部视口的行为能冒泡到最顶层的视口上即根视口,根视图组件能监听内部的行为,这些行为被挂载在Track.js的store中,在某个时机触发dispatch,显性提交commit修改埋点的数据;各嵌套视口能进行通讯并且遵循单项数据流;
3)生命周期管理
该视口组件具有生命周期的钩子函数;
4)路由管理
路由管理提供的接口是根据路由分发完成的,根据传入配置能唯一确定一个访问的位置,基于位置分解出来的维度组合,能分析出各个粒度的访问、曝光、点击数据;
5)状态管理
Track.js有一个集中的状态管理store,不同视图的状态都能读取和写入,遵循数据的单项流,用户触发action行为,显性提交一个commit,用来改变store中的state,通过getState获取最新的state,在某个时机完成数据上报;
6)缓存管理
在某一时机去调用store中的行为时,中间加了一层缓存,只有所依赖的输入配置项发生变化是才会直接从store中调用Api,否则将从缓存中读取采集的数据;
7)输出
获得Json对象,按照埋点配置约定,和后端对接,完成数据上报。
进一步地,所述多种形式引入包括Js脚本形式直接引入、NPM包引入或SDK包形式引入。
进一步地,对于Android/Ios客户端使用SDK包引入,对于PC、小程序、H5、混合开发使用JS或者NPM包形式引入。
进一步地,所述配置方案包括指标配置、入口、使用环境、插件配置和视图组件模板,以及视图组件模板的生命周期、路由分发、缓存策略、出口配置。
进一步地,所述视口通过Api配置,或通过声明放到构建视图代码中,视口组件模板可以嵌套、组合。
进一步地,所述视口为全局引入和局部引入。
进一步地,多页面应用只能通过局部引入webview。
进一步地,所述生命周期的钩子函数包括初始化init、更新update、卸载unmount、错误处理catch的钩子函数。
进一步地,所述路由管理的传入配置包括:业务+页面域+组件域+展位域+页面随机码。
进一步地,所述输出的Json对象包括埋点配置、更新访问路径及页面信息、获取事件参数、获取设备信息、事件采集、设备采集、点击事件的处理函数、离开页面的处理函数、***初始化、自定义事件和异常处理。
(三)有益效果
本发明提出一种前端埋点***输出方法,本发明通过对Webpack打包、webview控件、后端微服务、Http缓存等借鉴,提出了一个Track.js的库解决统一埋点问题。在Track.js中引入入口(entry)、依赖管理(loader加载)、视图组件管理(webview)、生命周期管理(l ifecycle)、路由管理(router)、状态管理(store)、缓存管理(cache)、输出(output)等资源管理功能,采用统一的埋点配置方案,同时采用前端组件的初始化、更新、卸载等流程实现埋点方案。本发明具有以下优点:
多端共用一套埋点***,统一了由于开发语言、开发环境、技术选型等造成的开发成本和开发时间。
使用视口组件模板,作为开发的视口,可以监听到内部的事件和行为,且可以嵌套。根视口组件被一个集中数据管理store包裹。这样由传统的触发行为立即上报数据到现在的从store中取数据。这样可以在某一时机触发行为,上传处理过的数据,一次上传所有数据。其中多次触发行为的操作,由缓存管理先进行处理,这一系列的操作都有利于性能和可复用,集中管理的优点。
附图说明
图1为本发明***架构;
图2为本发明输入、输出管理图;
图3为本发明Track.js引入管理图;
图4为本发明视图组件的组成;
图5为本发明生命周期管理图;
图6为本发明路由分发管理图;
图7为本发明状态管理图;
图8为本发明缓存管理模块的组成。
具体实施方式
为使本发明的目的、内容和优点更加清楚,下面结合附图和实施例,对本发明的具体实施方式作进一步详细描述。
为了解决以上问题,本发明提出一种前端埋点***输出方法,通过对Webpack打包、webview控件、后端微服务、Http缓存等借鉴,提出了一个Track.js的库解决统一埋点问题。在Track.js中引入入口(entry)、依赖管理(loader加载)、视图组件管理(webview)、生命周期管理(l ifecycle)、路由管理(router)、状态管理(store)、缓存管理(cache)、输出(output)等资源管理功能,采用统一的埋点配置方案,同时采用前端组件的初始化、更新、卸载等流程实现埋点方案。
具体来说,该方案提出了多端共用一套Track.js实现埋点方案。与传统的埋点方案不同之处在于Web应用是一个状态机,视图和状态是一一对应的,需要采集的数据、应用性能指标、异常状况等都存储在store中,在某个时机,触发dispatch行为,一次性获取store中的数据进行请求。这种策略减少了Http请求次数,减少带宽。从原来的触发行为立即发送请求送上报数据到先可以通过对比缓存或者在某个时机一次性上报。
本发明的***架构如图1所示。
1、依赖安装
Track.js针对Web端(JavaScript)和客户端(Java/Objective-c)设置了两种实现统一埋点功能的包。
2、埋点配置
埋点配置包括,指标配置(浏览次数(PV)、独立访客(UV)、人均浏览次数、IP数、新独立访客、访问次数、人均浏览页数、平均访问深度、访问时长、平均访问时长等)、入口(单页面/多页面)、使用环境(多端开发)、插件配置(解析不同语言)、视图组件模板,视图组件模板的生命周期、路由分发、缓存策略等规则、出口(单页面/多页面)等配置。
3、输入输出管理
我们期望Track.js是一个单项、易操作、可配置的库。简单来说,我们只关注输入为一个Json,相应的输出与之对应的一个Json,中间的过程都由Track.js处理。这样单一的操作符合我们的预期。输入、输出管理的流程如图2所示。
4、视图组件模板
视图组件模板是实现多端复用的基础。提供一个统一的视口,Track.js会解析成当前语言所能解析的语言,一般由一个loader来实现。即当前视图组件模板可以被转换成多种视图形式。顶层的视图组件会监听来自底层语言的行为,记录到Track.js的store中。
具体实施方案:
1)Track.js依赖管理
Track.js针对多端采用多种形式引入。可以为一个Js脚本形式直接引入,可以为一个NPM包引入,可以为一个SDK包形式引入。特别来说对于客户端(Android/Ios)使用SDK包引入,PC、小程序、H5、混合开发使用JS或者NPM包形式引入。在引入Track.js时,在埋点配置方案配置埋点使用的配置方案。Track.js引入如图3所示。
2)视图组件管理
视口组件模板是指Track.js提供一个统一的视口组件模板webview,这个视口通过Api配置,也可以通过声明放到构建视图代码中,视口组件模板可以嵌套,组合。这个视口可以全局引入和局部引入。嵌套的内部视口的行为可以冒泡到最顶层的视口上即根视口,根视图组件可以监听内部的行为,这些行为被挂载在Track.js的store中,在某个时机触发dispatch,显性提交commit可以修改埋点的数据。各嵌套视口可以进行通讯并且遵循单项数据流,特别注意多页面应用只能通过局部引入webview。视图组件的组成如图4所示。
3)生命周期管理
该视口组件具有初始化init、更新update、卸载unmount、错误处理catch(包裹该视口)等生命周期的钩子函数。视口组件模板的生命周期管理如图5所示。
4)路由管理
路由管理提供的接口是根据路由分发完成的。传入配置中需要传入包括业务+页面域(页面类型和页面标识)+组件域(组件类型和组件序号)+展位域(展位标识和展位序号)+页面随机码,可以唯一确定一个访问的位置。基于位置分解出来的维度组合,可以很方便的分析出各个粒度的访问、曝光、点击数据。更确切的说,路由分发是指输入配置需要有页面的标志,路由分发管理如图6所示。
5)状态管理
Track.js有一个集中的状态管理store,不同视图的状态都可以读取和写入,遵循数据的单项流,用户触发action行为,显性提交一个commit,用来改变store中的state,通过getState获取最新的state,在某个时机完成数据上报。这个状态管理用来处理多个页面,多个视图共享状态,提供了埋点数据的共享。状态管理如图7所示
6)缓存管理
本发明提供了一种调用Track.js缓存处理策略,在某一时机去调用store中的行为时,中间加了一层缓存,避免多次调用统一Api引起的性能问题。只有所依赖的输入配置项发生变化是才会直接从store中调用Api,否则将从缓存中读取采集的数据。缓存管理模块的组成如图8所示。
7)输出
通过以上的步骤处理,最终可以一个Json对象包括埋点配置、更新访问路径及页面信息、获取事件参数、获取设备信息、事件采集、设备采集、点击事件的处理函数、离开页面的处理函数、***初始化、自定义事件、异常处理等。按照埋点配置约定,和后端对接,完成数据上报。
该发明的创新之处在于:
多端共用一套埋点***,统一了由于开发语言、开发环境、技术选型等造成的开发成本和开发时间。
使用视口组件模板,作为开发的视口,可以监听到内部的事件和行为,且可以嵌套。根视口组件被一个集中数据管理store包裹。这样由传统的触发行为立即上报数据到现在的从store中取数据。这样可以在某一时机触发行为,上传处理过的数据,一次上传所有数据。其中多次触发行为的操作,由缓存管理先进行处理,这一系列的操作都有利于性能和可复用,集中管理的优点。
以上所述仅是本发明的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明技术原理的前提下,还可以做出若干改进和变形,这些改进和变形也应视为本发明的保护范围。
Claims (10)
1.一种前端埋点***输出方法,其特征在于,该方法包括:
1)Track.js依赖管理
Track.js针对多端采用多种形式引入,在引入Track.js时,在埋点配置方案配置埋点使用的配置方案;
2)视图组件管理
视口组件模板是指Track.js提供一个统一的视口组件模板webview,嵌套的内部视口的行为能冒泡到最顶层的视口上即根视口,根视图组件能监听内部的行为,这些行为被挂载在Track.js的store中,在某个时机触发dispatch,显性提交commit修改埋点的数据;各嵌套视口能进行通讯并且遵循单项数据流;
3)生命周期管理
该视口组件具有生命周期的钩子函数;
4)路由管理
路由管理提供的接口是根据路由分发完成的,根据传入配置能唯一确定一个访问的位置,基于位置分解出来的维度组合,能分析出各个粒度的访问、曝光、点击数据;
5)状态管理
Track.js有一个集中的状态管理store,不同视图的状态都能读取和写入,遵循数据的单项流,用户触发action行为,显性提交一个commit,用来改变store中的state,通过getState获取最新的state,在某个时机完成数据上报;
6)缓存管理
在某一时机去调用store中的行为时,中间加了一层缓存,只有所依赖的输入配置项发生变化是才会直接从store中调用Api,否则将从缓存中读取采集的数据;
7)输出
获得Json对象,按照埋点配置约定,和后端对接,完成数据上报。
2.如权利要求1所述的前端埋点***输出方法,其特征在于,所述多种形式引入包括Js脚本形式直接引入、NPM包引入或SDK包形式引入。
3.如权利要求2所述的前端埋点***输出方法,其特征在于,对于Android/Ios客户端使用SDK包引入,对于PC、小程序、H5、混合开发使用JS或者NPM包形式引入。
4.如权利要求1所述的前端埋点***输出方法,其特征在于,所述配置方案包括指标配置、入口、使用环境、插件配置和视图组件模板,以及视图组件模板的生命周期、路由分发、缓存策略、出口配置。
5.如权利要求1所述的前端埋点***输出方法,其特征在于,所述视口通过Api配置,或通过声明放到构建视图代码中,视口组件模板可以嵌套、组合。
6.如权利要求1或5所述的前端埋点***输出方法,其特征在于,所述视口为全局引入和局部引入。
7.如权利要求6所述的前端埋点***输出方法,其特征在于,多页面应用只能通过局部引入webview。
8.如权利要求1所述的前端埋点***输出方法,其特征在于,所述生命周期的钩子函数包括初始化init、更新update、卸载unmount、错误处理catch的钩子函数。
9.如权利要求1所述的前端埋点***输出方法,其特征在于,所述路由管理的传入配置包括:业务+页面域+组件域+展位域+页面随机码。
10.如权利要求1所述的前端埋点***输出方法,其特征在于,所述输出的Json对象包括埋点配置、更新访问路径及页面信息、获取事件参数、获取设备信息、事件采集、设备采集、点击事件的处理函数、离开页面的处理函数、***初始化、自定义事件和异常处理。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110765212.9A CN113553034B (zh) | 2021-07-07 | 2021-07-07 | 一种前端埋点***输出方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110765212.9A CN113553034B (zh) | 2021-07-07 | 2021-07-07 | 一种前端埋点***输出方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113553034A CN113553034A (zh) | 2021-10-26 |
CN113553034B true CN113553034B (zh) | 2022-04-05 |
Family
ID=78102771
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110765212.9A Active CN113553034B (zh) | 2021-07-07 | 2021-07-07 | 一种前端埋点***输出方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113553034B (zh) |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107018046A (zh) * | 2017-06-06 | 2017-08-04 | 上海鋆创信息技术有限公司 | 一种数据采集方法、装置、终端及存储介质 |
CN110489699A (zh) * | 2019-08-16 | 2019-11-22 | 南京云帐房网络科技有限公司 | 一种异步数据采集方法及*** |
CN110908879A (zh) * | 2019-10-16 | 2020-03-24 | 平安普惠企业管理有限公司 | 埋点数据的上报方法、装置、终端和存储介质 |
WO2021012741A1 (zh) * | 2019-07-24 | 2021-01-28 | 深圳壹账通智能科技有限公司 | 基于经验库的异常前端操作提醒的方法及相关设备 |
CN112286501A (zh) * | 2020-10-13 | 2021-01-29 | 北京易观智库网络科技有限公司 | 对终端设备的页面进行埋点的方法、装置以及存储介质 |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10318941B2 (en) * | 2011-12-13 | 2019-06-11 | Visa International Service Association | Payment platform interface widget generation apparatuses, methods and systems |
US20200289327A1 (en) * | 2019-03-14 | 2020-09-17 | Coloplast A/S | Data collection schemes for a wound dressing and related methods |
-
2021
- 2021-07-07 CN CN202110765212.9A patent/CN113553034B/zh active Active
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107018046A (zh) * | 2017-06-06 | 2017-08-04 | 上海鋆创信息技术有限公司 | 一种数据采集方法、装置、终端及存储介质 |
WO2021012741A1 (zh) * | 2019-07-24 | 2021-01-28 | 深圳壹账通智能科技有限公司 | 基于经验库的异常前端操作提醒的方法及相关设备 |
CN110489699A (zh) * | 2019-08-16 | 2019-11-22 | 南京云帐房网络科技有限公司 | 一种异步数据采集方法及*** |
CN110908879A (zh) * | 2019-10-16 | 2020-03-24 | 平安普惠企业管理有限公司 | 埋点数据的上报方法、装置、终端和存储介质 |
CN112286501A (zh) * | 2020-10-13 | 2021-01-29 | 北京易观智库网络科技有限公司 | 对终端设备的页面进行埋点的方法、装置以及存储介质 |
Non-Patent Citations (3)
Title |
---|
"Data preprocessing algorithm for Web Structure Mining";Suvarn Sharma等;《2016 Fifth International Conference on Eco-friendly Computing and Communication Systems》;20170406;第94-98页 * |
"vue项目前端埋点";技术与健康;《https://www.jianshu.com/p/7bc63935a570》;20180417;第1-4页 * |
"基于人工智能的自然语言处理技术分析";白雄文等;《电子技术》;20210120;第50卷(第1期);第176-177页 * |
Also Published As
Publication number | Publication date |
---|---|
CN113553034A (zh) | 2021-10-26 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10447772B2 (en) | Managed function execution for processing data streams in real time | |
US11392416B2 (en) | Automated reconfiguration of real time data stream processing | |
US10263857B2 (en) | Instrumentation and monitoring of service level agreement (SLA) and service policy enforcement | |
US9276828B2 (en) | System and method for a service metering framework in a network environment | |
Povedano-Molina et al. | DARGOS: A highly adaptable and scalable monitoring architecture for multi-tenant Clouds | |
CN108875091A (zh) | 一种统一管理的分布式网络爬虫*** | |
CN104601736A (zh) | 一种短url服务的实现方法及装置 | |
Udupa | TMN: telecommunications management network | |
US20160012110A1 (en) | General and automatic approach to incrementally computing sliding window aggregates in streaming applications | |
CN109359250A (zh) | 统一资源定位符处理方法、装置、服务器及可读存储介质 | |
CN103023693A (zh) | 一种行为日志数据管理***及方法 | |
CN108874641A (zh) | 一种埋点数据的分析方法及装置 | |
US20150039648A1 (en) | System and a method for reasoning and running continuous queries over data streams | |
CN110096521A (zh) | 日志信息处理方法及装置 | |
CN1394036A (zh) | 基于策略的网络管理*** | |
CN111240772B (zh) | 一种基于区块链的数据处理方法、装置及存储介质 | |
Iannaccone | Fast prototyping of network data mining applications | |
CN113553034B (zh) | 一种前端埋点***输出方法 | |
CN113810234B (zh) | 微服务链路拓扑处理方法、装置及可读存储介质 | |
CN109586970B (zh) | 资源分配方法、装置及*** | |
CN114371858A (zh) | 基于应用组件的代码处理***、方法、设备及存储介质 | |
KR100395223B1 (ko) | 티엠엔과 씨오알비에이 연동 시스템 | |
CN108304301A (zh) | 记录用户行为轨迹的方法及装置 | |
CN104268070A (zh) | 基于语义的Web服务自动调用及QoS信息监测方法 | |
US8601119B1 (en) | Providing navigation statistics |
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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |