CN113553034B - Front-end buried point system output method - Google Patents
Front-end buried point system output method 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
The invention relates to a front-end embedded point system output method, and belongs to the technical field of WEB front ends. The invention provides a track.js library for solving the problem of uniform point burying, which introduces resource management functions such as entry (entry), dependency management (loader loading), view component management (webview), life cycle management (lifecycle), route management (router), state management (store), cache management (cache) and output (output) into the track.js, adopts a uniform point burying configuration scheme, and simultaneously adopts the processes of initialization, updating, unloading and the like of a front end component to realize the point burying scheme. The invention has the advantages that multiple terminals share one set of embedded point system, and the development cost and development time caused by development language, development environment, technical model selection and the like are unified; the viewport component template is used as a developed viewport, internal events and behaviors can be monitored and can be nested, multiple operations of triggering the behaviors are processed by cache management, and the series of operations are beneficial to performance and reusability and have the advantage of centralized management.
Description
Technical Field
The invention belongs to the technical field of WEB front ends, and particularly relates to a front end embedded point system output method.
Background
In recent years, as the internet develops to the present, the importance of data does not need to be emphasized any more, the work of data collection is done, the user behaviors and the use conditions in the product are counted, so that the user group can be known from the product perspective, and the product is upgraded and iterated to be closer to the user. Due to language limitation and multi-end incapability of adopting the same embedded point library for applications such as browsers, clients (Android/Ios), applets, hybrid development and server rendering, the technical type selection and code leaving are carried over, and a problem is caused by inconsistent development specifications: how to integrate the functions of the existing library and use the unified formulation standard to adapt to multi-terminal multi-platform embedded points.
Generally, at present, a front-end point-burying scheme with multiple unified ends (client/applet/H5/PC/hybrid development/server rendering) does not exist, so that development, production and operation are continuously familiar with different point-burying schemes, and the development period of the product and the development difficulty of a project are increased.
Disclosure of Invention
Technical problem to be solved
The technical problem to be solved by the invention is how to provide a front-end embedded point system output method to solve the problem of how to integrate the functions of the existing library and use a unified formulated standard to adapt to multi-end multi-platform embedded points.
(II) technical scheme
In order to solve the above technical problem, the present invention provides a front end buried point system output method, including:
1) js dependency management
The method comprises the following steps that (1) the track.js is introduced in multiple forms aiming at multiple ends, and when the track.js is introduced, a configuration scheme used by a buried point is configured in a buried point configuration scheme;
2) view component management
The viewport component template is a uniform viewport component template webview provided by track.js, the behaviors of nested internal viewports can bubble to the topmost viewport, namely a root viewport, the root view component can monitor the internal behaviors, the behaviors are mounted in a store of track.js, dispatch is triggered at a certain time, and commit data of commit modification buried points are submitted explicitly; each nested viewport can communicate and follow a single data stream;
3) lifecycle management
The viewport component has a lifecycle hook function;
4) route management
The interface provided by the route management is completed according to the route distribution, an access position can be uniquely determined according to the incoming configuration, and the access, exposure and click data of each granularity can be analyzed based on the dimension combination decomposed from the position;
5) state management
Js has a centralized state management store, states of different views can be read and written, a single stream of data is followed, a user triggers an action behavior, a commit is explicitly submitted to change a state in the store, the latest state is obtained through getState, and data reporting is completed at a certain time;
6) cache management
When a certain time machine calls the behavior in the store, a layer of cache is added in the middle, only if the depended input configuration item changes, the Api is called directly from the store, otherwise, the acquired data is read from the cache;
7) output of
And acquiring a Json object, and connecting the Json object with a rear end according to a buried point configuration convention to finish data reporting.
Further, the multi-form import includes Js script form direct import, NPM package import, or SDK package form import.
Further, SDK package introduction is used for Android/Ios clients, and JS or NPM package form introduction is used for PC, applet, H5 and mixed development.
Further, the configuration scheme comprises index configuration, entry, use environment, plug-in configuration and view component template, and the life cycle, route distribution, cache strategy and exit configuration of the view component template.
Further, the viewport is configured by Api, or placed by declaration into the build view code, and the viewport component templates can be nested, assembled.
Further, the view ports are global introductions and local introductions.
Further, multi-page applications can only introduce webviews locally.
Further, the hook functions of the life cycle include the hook functions of initializing init, updating update, unloading unit and error handling catch.
Further, the route-managed incoming configuration comprises: service + page domain + component domain + exhibition domain + page random code.
Further, the output Json object comprises embedded point configuration, access path updating and page information updating, event parameter obtaining, device information obtaining, event collecting, device collecting, processing function of click event, processing function of leaving page, system initialization, custom event and exception handling.
(III) advantageous effects
The invention provides a front-end point-burying system output method, and provides a track.js library for solving the problem of uniform point burying by referring to Webpack, webview control, rear-end micro-service, Http cache and the like. Introducing resource management functions such as entry (entry), dependency management (loader loading), view component management (webview), life cycle management (i-loop), routing management (router), state management (store), cache management (cache), output (output) and the like into track. The invention has the following advantages:
multiple terminals share a set of embedded point system, and development cost and development time caused by development language, development environment, technology type selection and the like are unified.
Using the viewport component template, internal events and behavior can be monitored as a developed viewport and can be nested. The root viewport component is wrapped by a centralized data management store. Thus, the data is reported to the present data taken from the store immediately by the traditional triggering action. Thus, the behavior can be triggered at a certain time, the processed data can be uploaded, and all the data can be uploaded at one time. The operations of the multiple triggering behaviors are processed by cache management first, and the series of operations are favorable for performance and reusability and have the advantage of centralized management.
Drawings
FIG. 1 is a system architecture of the present invention;
FIG. 2 is a diagram of input and output management according to the present invention;
figure 3 is a track.js import management diagram of the present invention;
FIG. 4 is a component of the view assembly of the present invention;
FIG. 5 is a life cycle management diagram of the present invention;
FIG. 6 is a routing distribution management diagram of the present invention;
FIG. 7 is a state management diagram of the present invention;
FIG. 8 is a block diagram of a cache management module according to the present invention.
Detailed Description
In order to make the objects, contents and advantages of the present invention clearer, the following detailed description of the embodiments of the present invention will be made in conjunction with the accompanying drawings and examples.
In order to solve the problems, the invention provides an output method of a front-end point burying system, and provides a track.js library for solving the problem of uniform point burying by referring to Webpack, webview control, back-end micro-service, Http cache and the like. Introducing resource management functions such as entry (entry), dependency management (loader loading), view component management (webview), life cycle management (i-loop), routing management (router), state management (store), cache management (cache), output (output) and the like into track.
Specifically, the scheme provides a multi-terminal common track.js implementation point burying scheme. The method is different from the traditional point-burying scheme in that the Web application is a state machine, views and states are in one-to-one correspondence, data, application performance indexes, abnormal conditions and the like which need to be collected are stored in a store, a dispatch behavior is triggered at a certain time, and the data in the store is acquired at one time to make a request. The strategy reduces the number of Http requests and reduces the bandwidth. The reporting data can be immediately sent from the original triggering behavior to the first by comparing the cache or reporting at one time at a certain time.
The system architecture of the present invention is shown in fig. 1.
1. Dependent on installation
Js sets two packages for realizing the function of a uniform buried point for a Web terminal (JavaScript) and a client terminal (Java/Objective-c).
2. Buried point arrangement
The embedded point configuration comprises index configuration (browsing times (PV), independent visitors (UV), per-person browsing times, IP numbers, new independent visitors, access times, per-person browsing page numbers, average access depth, access duration, average access duration and the like), entries (single page/multiple pages), use environments (multi-terminal development), plug-in configuration (different languages are analyzed), view component templates, rules of life cycles of the view component templates, routing distribution, cache strategies and the like, and exits (single page/multiple pages) and the like.
3. Input output management
Js is expected to be a single, easy to operate, configurable library. In short, we only focus on one Json input, one corresponding Json output, and the middle processes are all handled by track. Such a single operation is in line with our expectations. The flow of input and output management is shown in fig. 2.
4. View component template
The view component template is the basis for implementing multi-terminal multiplexing. Js will be parsed into languages that the current language can parse, typically implemented by a loader. I.e., the current view component template may be converted into a plurality of view forms. The view component on the top layer listens for behavior from the underlying language, recorded in track.
The specific implementation scheme is as follows:
1) js dependency management
Js is introduced in various forms for multiple ends. The method can be directly introduced in the form of a Js script, can be introduced in the form of an NPM packet, and can be introduced in the form of an SDK packet. In particular, for a client (Android/Ios), SDK package introduction is used, and PC, applet, H5, mixed development JS or NPM package form introduction is used. Js, the configuration scheme used by the burial point is configured in the burial point configuration scheme. Js introduction is shown in figure 3.
2) View component management
Js provides a uniform viewport component template webview, the viewport is configured through Api, and can be placed into the constructed view code through declaration, and the viewport component templates can be nested and combined. This viewport can be introduced both globally and locally. The behaviors of the nested internal viewport can be bubbled into the topmost viewport, namely the root viewport, the root view component can monitor the internal behaviors, the behaviors are mounted in the stock of track.js, the dispatch is triggered at a certain time, and the explicit commit can modify the data of the buried point. Nested viewports can communicate and follow a single data stream, noting in particular that multi-page applications can only introduce webviews locally. The composition of the view components is shown in fig. 4.
3) Lifecycle management
The viewport component has a lifecycle hook function that initializes init, updates update, unloads outstanding, handles mistakes catch (wraps the viewport), etc. Lifecycle management of viewport component templates is illustrated in fig. 5.
4) Route management
The interface provided by the route management is done according to the route distribution. The incoming configuration needs to be transmitted, wherein the incoming configuration comprises a service, a page domain (a page type and a page identifier), a component domain (a component type and a component serial number), a booth domain (a booth identifier and a booth serial number), and a page random code, and a position to be accessed can be uniquely determined. Based on the dimension combination decomposed by the position, the access, exposure and click data of each granularity can be conveniently analyzed. More specifically, route distribution refers to inputting a flag that configuration requires a page, and route distribution management is shown in fig. 6.
5) State management
Js has a centralized state management store, states of different views can be read and written, a single stream of data is followed, a user triggers an action behavior, a commit is explicitly submitted to change a state in the store, the latest state is obtained through getState, and data reporting is completed at a certain time. This state management is used to handle multiple pages, multiple views share state, providing sharing of buried point data. State management is shown in FIG. 7
6) Cache management
The invention provides a method for calling a track.js cache processing strategy, which adds a layer of cache in the middle when a certain time machine calls a behavior in a store, and avoids the performance problem caused by calling a unified Api for multiple times. Only if the depended input configuration item changes, the Api is called directly from the store, otherwise the collected data is read from the cache. The composition of the cache management module is shown in fig. 8.
7) Output of
Through the steps, a Json object can finally comprise buried point configuration, access path updating and page information updating, event parameter obtaining, equipment information obtaining, event collecting, equipment collecting, processing functions of clicking events, processing functions of leaving pages, system initialization, custom events, exception handling and the like. And (5) according to the configuration convention of the buried point, the data is connected with the back end, and the data reporting is completed.
The innovation of the invention is that:
multiple terminals share a set of embedded point system, and development cost and development time caused by development language, development environment, technology type selection and the like are unified.
Using the viewport component template, internal events and behavior can be monitored as a developed viewport and can be nested. The root viewport component is wrapped by a centralized data management store. Thus, the data is reported to the present data taken from the store immediately by the traditional triggering action. Thus, the behavior can be triggered at a certain time, the processed data can be uploaded, and all the data can be uploaded at one time. The operations of the multiple triggering behaviors are processed by cache management first, and the series of operations are favorable for performance and reusability and have the advantage of centralized management.
The above description is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, several modifications and variations can be made without departing from the technical principle of the present invention, and these modifications and variations should also be regarded as the protection scope of the present invention.
Claims (10)
1. A front-end buried point system output method is characterized by comprising the following steps:
1) js dependency management
The method comprises the following steps that (1) the track.js is introduced in multiple forms aiming at multiple ends, and when the track.js is introduced, a configuration scheme used by a buried point is configured in a buried point configuration scheme;
2) view component management
The viewport component template is a uniform viewport component template webview provided by track.js, the behaviors of nested internal viewports can bubble to the topmost viewport, namely a root viewport, the root view component can monitor the internal behaviors, the behaviors are mounted in a store of track.js, dispatch is triggered at a certain time, and commit data of commit modification buried points are submitted explicitly; each nested viewport can communicate and follow a single data stream;
3) lifecycle management
The viewport component has a lifecycle hook function;
4) route management
The interface provided by the route management is completed according to the route distribution, an access position can be uniquely determined according to the incoming configuration, and the access, exposure and click data of each granularity can be analyzed based on the dimension combination decomposed from the position;
5) state management
Js has a centralized state management store, states of different views can be read and written, a single stream of data is followed, a user triggers an action behavior, a commit is explicitly submitted to change a state in the store, the latest state is obtained through getState, and data reporting is completed at a certain time;
6) cache management
When a certain time machine calls the behavior in the store, a layer of cache is added in the middle, only if the depended input configuration item changes, the Api is called directly from the store, otherwise, the acquired data is read from the cache;
7) output of
And acquiring a Json object, and connecting the Json object with a rear end according to a buried point configuration convention to finish data reporting.
2. The front-end buried point system output method of claim 1, wherein the multi-form import includes Js script form direct import, NPM packet import, or SDK packet form import.
3. The front-end point-burying system output method of claim 2, wherein SDK packet import is used for Android/Ios client, JS or NPM packet form import is used for PC, applet, H5, hybrid development.
4. The front-end site-embedded system output method of claim 1, wherein the configuration scheme comprises a metric configuration, an entry, a usage environment, a plug-in configuration, and a view component template, and a lifecycle, routing distribution, caching policies, egress configuration of the view component template.
5. The front-end buried point system output method of claim 1, wherein the viewport is configured by Api, or by declaring to be placed in the build view code, viewport component templates can be nested, combined.
6. The front-end buried point system output method of claim 1 or 5, wherein the view ports are global import and local import.
7. The front-end fixed-point system output method of claim 6, wherein the multi-page application can only locally introduce webview.
8. The front-end buried point system output method of claim 1, wherein the hook functions of the life cycle include hook functions of initializing init, updating update, unloading unit, and error handling catch.
9. The front-end buried point system output method of claim 1, wherein the route-managed incoming configuration comprises: service + page domain + component domain + exhibition domain + page random code.
10. The front-end point-burying system output method of claim 1, wherein said output Json object includes point-burying configuration, update access path and page information, obtain event parameters, obtain device information, event collection, device collection, processing function of click event, processing function of off-page, system initialization, custom event and exception handling.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110765212.9A CN113553034B (en) | 2021-07-07 | 2021-07-07 | Front-end buried point system output method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110765212.9A CN113553034B (en) | 2021-07-07 | 2021-07-07 | Front-end buried point system output method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113553034A CN113553034A (en) | 2021-10-26 |
| CN113553034B true CN113553034B (en) | 2022-04-05 |
Family
ID=78102771
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110765212.9A Active CN113553034B (en) | 2021-07-07 | 2021-07-07 | Front-end buried point system output method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113553034B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107018046A (en) * | 2017-06-06 | 2017-08-04 | 上海鋆创信息技术有限公司 | A kind of collecting method, device, terminal and storage medium |
| CN110489699A (en) * | 2019-08-16 | 2019-11-22 | 南京云帐房网络科技有限公司 | A kind of asynchronous data collection method and system |
| CN110908879A (en) * | 2019-10-16 | 2020-03-24 | 平安普惠企业管理有限公司 | Method, device, terminal and storage medium for reporting buried point data |
| WO2021012741A1 (en) * | 2019-07-24 | 2021-01-28 | 深圳壹账通智能科技有限公司 | Abnormal front-end operation reminder method based on experience library and related device |
| CN112286501A (en) * | 2020-10-13 | 2021-01-29 | 北京易观智库网络科技有限公司 | Method and device for embedding point in page of terminal equipment and storage medium |
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/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107018046A (en) * | 2017-06-06 | 2017-08-04 | 上海鋆创信息技术有限公司 | A kind of collecting method, device, terminal and storage medium |
| WO2021012741A1 (en) * | 2019-07-24 | 2021-01-28 | 深圳壹账通智能科技有限公司 | Abnormal front-end operation reminder method based on experience library and related device |
| CN110489699A (en) * | 2019-08-16 | 2019-11-22 | 南京云帐房网络科技有限公司 | A kind of asynchronous data collection method and system |
| CN110908879A (en) * | 2019-10-16 | 2020-03-24 | 平安普惠企业管理有限公司 | Method, device, terminal and storage medium for reporting buried point data |
| CN112286501A (en) * | 2020-10-13 | 2021-01-29 | 北京易观智库网络科技有限公司 | Method and device for embedding point in page of terminal equipment and storage medium |
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 (en) | 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 | |
| Povedano-Molina et al. | DARGOS: A highly adaptable and scalable monitoring architecture for multi-tenant Clouds | |
| US8983987B2 (en) | System and method for a service metering framework in a network environment | |
| CN110442805A (en) | Data entry method, system, equipment and storage medium | |
| CN108875091A (en) | A kind of distributed network crawler system of unified management | |
| CN104601736A (en) | Method and device for realizing short uniform resource locator (URL) service | |
| CN109271359A (en) | Log information processing method, device, electronic equipment and readable storage medium storing program for executing | |
| Udupa | TMN: telecommunications management network | |
| US20160012110A1 (en) | General and automatic approach to incrementally computing sliding window aggregates in streaming applications | |
| CN109359250A (en) | Uniform resource locator processing method, device, server and readable storage medium storing program for executing | |
| CN108874641A (en) | A kind of analysis method that burying point data and device | |
| CN110096521A (en) | Log information processing method and device | |
| CN1394036A (en) | Network management system based on strategy | |
| CN111240772B (en) | Block chain-based data processing method, device and storage medium | |
| Iannaccone | Fast prototyping of network data mining applications | |
| CN113553034B (en) | Front-end buried point system output method | |
| CN113810234B (en) | Method and device for processing micro-service link topology and readable storage medium | |
| CN109586970B (en) | Resource allocation method, device and system | |
| CN114371858A (en) | Code processing system, method, device and storage medium based on application component | |
| KR100395223B1 (en) | TEM and CIO Albier Interworking System | |
| CN108304301A (en) | Record the method and device of user behavior track | |
| CN104268070A (en) | Semanteme-based Web service automatic calling and QoS information monitoring method | |
| 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 |