Method and device for generating a client web application's point-in-time based on a virtual DOM declaration implementation

Abstract

The application provides a method and device for generating a client web application based on a virtual DOM declaration. The method comprises: when client page data changes, creating a real DOM declaration using a virtual DOM declaration, the real declaration declaring a plurality of first nodes, the virtual DOM declaration declaring a plurality of second nodes and attributes, part of which includes a listening attribute, wherein the plurality of second nodes correspond one-to-one to the plurality of second nodes; obtaining a plurality of listening nodes according to the first nodes that need to be listened to in the real DOM declaration parsed from the virtual DOM declaration, and obtaining identification information of each node by marking each listening node; when the listening identification is a function identification, binding a preset listening function corresponding to the listening attribute to the listening node, the preset listening function being used to obtain information of the listening node, or obtain information of the listening node and return the obtained information to a first specified address after processing. The application improves the efficiency of the implantation.

Description

Technical Field

[0001] This invention relates to the field of computer information processing, and in particular to a method and apparatus for generating event tracking points for client-side web applications based on virtual DOM declarations. Background Technology

[0002] Any interactive system developed for end users (C-end) inevitably faces increasing challenges in maintaining robustness due to system iterations and changes in product positioning. This makes it prone to various strange bugs, leading to user churn. User behavior is highly unpredictable, and some scenarios require tracking user behavior for reproduction; otherwise, accurately locating problems is extremely difficult, posing significant uncontrollable risks to system maintenance. Furthermore, product managers often need to collect user usage data at various stages of product use to support future iterations. However, as products become more complex and scenarios more numerous, manually handling user behavior through hard-coding becomes cumbersome and redundant, exponentially increasing development and maintenance costs and ultimately leading to decreased application usability.

[0003] In response to the above situation, in web application scenarios, the common practice is to collect customer behavior data through event tracking to track whether user behavior is abnormal. This allows for timely and accurate monitoring of online business through monitoring rules. When an anomaly occurs, the system does not wait passively but takes proactive action to reconstruct user behavior based on the user scenario, helping developers quickly locate the problem. Currently, there are numerous event tracking systems on the market, generally using independent frameworks to implement declarative, intrusive, or event-free tracking. However, each of these solutions has its own limitations. Summary of the Invention

[0004] This invention provides a method and apparatus for generating event tracking data in client-side web applications based on virtual DOM declarations. This reduces unnecessary maintenance costs and system risks, while improving event tracking efficiency.

[0005] The first aspect of this invention provides a method for generating event tracking points in a client-side web application based on virtual DOM declaration. The method includes:

[0006] When client-side page data changes, a real DOM declaration is created using a virtual DOM declaration. The real DOM declaration declares one or more first nodes, and the virtual DOM declaration declares one or more second nodes and their attributes. The one or more second nodes include listener attributes, which contain listener identifiers. Each of the one or more second nodes corresponds one-to-one with the others. One or more listener nodes are obtained by parsing the first nodes to be listened to in the real DOM declaration from the virtual DOM declaration, and each listener node is labeled to obtain its identifier information. When the listener identifier is a function identifier, a preset listener function corresponding to the listener attribute is bound to the listener node. The preset listener function is used to obtain information about the listener node, or to obtain information about the listener node, process the obtained information, and then send it back to a first specified address.

[0007] A second aspect of the present invention provides a device for generating event tracking data in a client-side web application based on virtual DOM declaration. The device includes:

[0008] The DOM generation module creates a real DOM declaration using a virtual DOM declaration when the client page data changes. The real declaration declares one or more first nodes, and the virtual DOM declaration declares one or more second nodes and their attributes. The one or more second nodes include listener attributes, which contain listener identifiers. Each of the one or more second nodes corresponds one-to-one with the other.

[0009] The parsing module parses the first node that needs to be listened to in the real DOM declaration from the virtual DOM declaration to obtain one or more listening nodes, and marks each listening node to obtain the identification information of each node;

[0010] The acquisition module, when the listening identifier is a function identifier, binds the preset listening function corresponding to the listening attribute to the listening node. The preset listening function is used to acquire information of the listening node, or to acquire information of the listening node and process the acquired information before sending it back to the first specified address.

[0011] A third aspect of the present invention provides a web application client, characterized in that the computer device includes:

[0012] A computer-readable storage medium for storing program instructions;

[0013] A processor is used to execute the program instructions to implement the method for generating event tracking data in a client-side web application based on virtual DOM declarations.

[0014] This application generates a virtual DOM based on data changes on the client side and declares the attribute information of nodes within the virtual DOM. By adding listener attributes to the attribute information based on whether a node needs to be monitored, nodes are categorized into those with default addresses to retrieve corresponding user behavior events and those requiring custom addresses. A real DOM is generated based on the nodes with added listener attributes, allowing the browser to obtain event tracking information through the real DOM. This application extends the native framework, providing reasonable support for event tracking systems. It endows the framework with modular and systematic natural support capabilities, reducing unnecessary maintenance costs and system risks, and improving the efficiency and targeting of event tracking. Attached Figure Description

[0015] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the accompanying drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are merely some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the structures shown in these drawings without any creative effort.

[0016] Figure 1 This is a schematic diagram of the system architecture for the method of generating event tracking data for a client-side web application based on virtual DOM declaration, as provided in the first embodiment of this application.

[0017] Figure 2 The flowchart illustrates the method for generating event tracking data for a client-side web application based on virtual DOM declaration, as provided in the first embodiment of this application.

[0018] Figure 3 This is a schematic diagram of the DOM tree provided in the first embodiment of this application.

[0019] Figure 4 This is a schematic diagram of the virtual DOM tree when the user does not interact with the page, as provided in the first embodiment of this application.

[0020] Figure 5 This is a schematic diagram of the new virtual DOM tree provided in the first embodiment of this application.

[0021] Figure 6 This is a schematic diagram of the internal structure of a computer device for a method of generating event tracking data for a client-side web application based on virtual DOM declaration, as provided in the first embodiment of this application. Detailed Implementation

[0022] To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only for explaining this application and are not intended to limit this application.

[0023] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in a sequence other than that illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0024] It should be noted that the use of terms such as "first" and "second" in this application is for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of those features. Furthermore, the technical solutions of the various embodiments can be combined with each other, but this must be based on the ability of those skilled in the art to implement them. If the combination of technical solutions is contradictory or impossible to implement, such a combination of technical solutions should be considered non-existent and not within the scope of protection claimed in this application.

[0025] This application provides a method for generating event tracking points in client-side web applications based on virtual DOM declarations. The method is applied to software installed on the client, such as... Figure 1 As shown, the client 1 and the backend server 2 communicate via network 3, and the software 4 is installed on the client 1. The client server can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. Software capable of processing data is pre-installed on the client.

[0026] Please refer to the following: Figure 2 This is a flowchart of a method for generating event tracking data for a client-side web application based on virtual DOM declaration, provided in the first embodiment of this application. The method includes steps S101-S103.

[0027] Step S101: When the client page data changes, a real DOM declaration is created using a virtual DOM declaration. The real declaration declares one or more first nodes, and the virtual DOM declaration declares one or more second nodes and attributes of the one or more second nodes. The one or more second nodes include listener attributes, and the listener attributes contain listener identifiers. The one or more second nodes correspond one-to-one with the one or more second nodes.

[0028] DOM (Document Object Model) is the document object model, such as... Figure 3 The diagram shows a standard model for representing objects in a document by organizing elements on a webpage or page into a tree structure. The Virtual DOM (VDOM) is a virtual document object model that represents elements on a browser page as JavaScript objects in a tree structure. Nodes in the virtual DOM tree structure correspond one-to-one with nodes in the real DOM tree structure.

[0029] When a user interacts with the page on the client's screen, such as by clicking or double-clicking the mouse, scrolling with the mouse wheel, or clicking buttons, the data on the client's page changes. The client sends the changed data to the backend server, which processes the data and sends the processed data back to the client server. Pre-installed software on the client server retrieves the processed data and generates a virtual DOM tree structure based on it. This virtual DOM tree declares the attributes of the nodes in the data; for example, a control might display a browsing page when clicked, close a browsing page when clicked, or automatically display a page or end a payment process after the user inputs content. These controls represent several nodes or elements. When generating the virtual DOM, software developers load attributes onto several nodes. If the attributes include a listener attribute, then the node is the one where user behavior needs to be tracked. For example, when a news browsing page is opened on the client, a tracking event is performed by setting the attribute of the control that opens the news browsing page by clicking the control as a listener attribute. If the software developers do not load a listener attribute, then the node is not tracked.

[0030] The client server generates a virtual DOM tree structure based on the processed data, such as... Figure 4 As shown, this is the virtual DOM tree structure when the user has not interacted with the page. The diff algorithm is applied to obtain... Figure 5The new virtual DOM tree structure shown is a change from the old virtual DOM tree structure. Based on the changes, a real DOM is created, and a new page is generated based on the real DOM to be displayed on the client's screen.

[0031] Step S102: Parse the first node to be listened to in the real DOM declaration from the virtual DOM declaration to obtain one or more listening nodes, and mark each listening node to obtain the identification information of each node.

[0032] The software can only capture user-initiated events within the real DOM. It obtains multiple nodes that the developer has set to be monitored through the listener properties of nodes declared in the virtual DOM, and then labels these nodes with identifiers so that the real DOM can recognize them.

[0033] Step S103: When the listening identifier is a function identifier, a preset listening function corresponding to the listening attribute is bound to the listening node. The preset listening function is used to obtain information of the listening node, or to obtain information of the listening node and process the obtained information before sending it back to the first specified address.

[0034] The node's listener attributes include a listener identifier, which is used to acquire user behavior events. For example, the listener attribute determines that the node is being listened to, and the listener identifier determines that the node being listened to is the page where a user opens to purchase a promotional product by clicking on the space corresponding to the node. The listener identifier can be a function identifier. The corresponding preset listener function is obtained through the function identifier, and the preset listener function is bound to the node. The preset listener function is a code segment. A default address is obtained through the preset listener function, and the user behavior event corresponding to the node is determined based on the address. The default address is a first specified address.

[0035] When generating a new virtual DOM, the listener attribute in the node's attribute information can also be an attribute identifier. This attribute identifier does not have a preset listener function or a default address to retrieve the user event corresponding to the node. The node's attribute information, corresponding to the attribute identifier, is set via a hook function. This includes setting a listener function within the attribute information. This listener function can retrieve the address corresponding to the node. Developers can define a second specified address within the hook function. This address can then be used to retrieve the user event corresponding to the node; for example, a user opening a new product promotion page by clicking a control.

[0036] The user behavior events corresponding to the node are loaded into the node's attribute information so that the browser can recognize the user behavior events corresponding to the node after the real DOM is generated.

[0037] This method uses the Vue and React frameworks, which include hook functions and default addresses corresponding to pre-set listening information for nodes.

[0038] This application also provides a device for generating event tracking points based on an implemented client-side web application, the device comprising:

[0039] The DOM generation module is used to create a real DOM declaration using a virtual DOM declaration when the client page data changes. The real declaration declares one or more first nodes, and the virtual DOM declaration declares one or more second nodes and the attributes of the one or more second nodes. The one or more second nodes include listener attributes, which contain listener identifiers. The one or more second nodes correspond one-to-one with each other.

[0040] When a user interacts with the page on the client's screen, such as by clicking or double-clicking the mouse, scrolling with the mouse wheel, or clicking buttons, the data on the client's page changes. The client sends the changed data to the backend server, which processes the data and sends the processed data back to the client server. Pre-installed software on the client server retrieves the processed data and generates a virtual DOM tree structure based on it. This virtual DOM tree declares the attributes of the nodes in the data; for example, a control might display a browsing page when clicked, close a browsing page when clicked, or automatically display a page or end a payment process after the user inputs content. These controls represent several nodes or elements. When generating the virtual DOM, software developers load attributes onto several nodes. If the attributes include a listener attribute, then the node is the one where user behavior needs to be tracked. For example, when a news browsing page is opened on the client, a tracking event is performed by setting the attribute of the control that opens the news browsing page by clicking the control as a listener attribute. If the software developers do not load a listener attribute, then the node is not tracked.

[0041] The parsing module is used to parse the first node that needs to be listened to in the real DOM declaration from the virtual DOM declaration to obtain one or more listening nodes, and to mark each listening node to obtain the identification information of each node.

[0042] The software can only capture user-initiated events within the real DOM. It obtains multiple nodes that the developer has set to be monitored through the listener properties of nodes declared in the virtual DOM, and then labels these nodes with identifiers so that the real DOM can recognize them.

[0043] The acquisition module is used to bind a preset listening function corresponding to the listening attribute to the listening node when the listening identifier is a function identifier. The preset listening function is used to acquire information of the listening node, or to acquire information of the listening node and process the acquired information before sending it back to the first specified address.

[0044] The node's listener attributes include a listener identifier, which is used to obtain user behavior events. For example, the listener attribute determines that the node is being listened to, and the listener identifier determines that the node being listened to is the page where the user opens to purchase a promotional product by clicking on the space corresponding to the node. The listener identifier can be a function identifier. The corresponding preset listener function is obtained through the function identifier, and the preset listener function is bound to the node. The preset listener function is a code segment. The default address is obtained through the preset listener function, and the user behavior event corresponding to the node is determined based on the address.

[0045] This application also provides a computer device 900, please refer to the following: Figure 6 This is a schematic diagram of the internal structure of the computer device 900 provided in the first embodiment of this application. Further, the embedded computer device is a HUD. The computer device 900 includes at least a memory 901 and a processor 902. Specifically, the memory 901 is used to store program instructions for a method of generating event tracking data for a client-side web application based on virtual DOM declarations. The processor 902 is used to execute the program instructions to enable the computer device 900 to implement the aforementioned method of generating event tracking data for a client-side web application based on virtual DOM declarations.

[0046] The memory 901 includes at least one type of readable storage medium, such as flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), magnetic memory, disk, optical disk, etc. The memory 901 can be used not only to store application software and various types of data installed on the computer device 900, such as control instructions for the data logging generation method of a client-side web application based on virtual DOM declarations, but also to temporarily store data that has been output or will be output.

[0047] In some embodiments, processor 902 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip, used to execute program instructions stored in memory 901 or process data. Specifically, processor 902 executes program instructions for a method of generating event tracking data for a client-side web application based on virtual DOM declarations to control computer device 900 to implement the method of generating event tracking data for a client-side web application based on virtual DOM declarations.

[0048] Furthermore, the 903 bus can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. This bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 6 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0049] Furthermore, the computer device 900 may also include a display component 904. The display component 904 may be an LED (Light Emitting Diode) display, a liquid crystal display, a touch-screen liquid crystal display, or an OLED (Organic Light-Emitting Diode) touchscreen, etc. The display component 904 may also be appropriately referred to as a display device or display unit, used to display information processed in the computer device 900 and to display a visual user interface.

[0050] Furthermore, the computer device 900 may also include a communication component 905, which may optionally include a wired communication component and / or a wireless communication component (such as a Wi-Fi communication component, a Bluetooth communication component, etc.), typically used to establish a communication connection between the computer device 900 and other computer devices.

[0051] Figure 6 Only a computer device 900 is shown, comprising components 901-905 and program instructions for implementing a method for generating event tracking data in a client-side web application based on virtual DOM declarations. Those skilled in the art will understand that... Figure 6 The structure shown does not constitute a limitation on the computer device 900, and may include fewer or more components than shown, or combine certain components, or have different component arrangements.

[0052] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the system, device, and unit described above, specifically, the detailed process by which the processor 902 of the computer device 900 executes program instructions for the data point generation method of a client-side web application based on virtual DOM declarations to control the computer device 900 in implementing a method for predicting the motion trajectory of a movable object. The corresponding processes in the above method embodiments can be referred to, and will not be repeated here.

[0053] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, since these modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include these modifications and variations.

[0054] The above-listed embodiments are merely preferred embodiments of this application and should not be construed as limiting the scope of this application. Therefore, any equivalent variations made in accordance with the claims of this application shall still fall within the scope of this application.

Claims

1. A method for generating event tracking points in a client-side web application based on virtual DOM declaration, characterized in that, The method for generating event tracking data in client-side web applications includes: It uses the Vue and React framework, which includes hook functions and default addresses corresponding to pre-set listening information for nodes; When the client page data changes, a real DOM declaration is created using the virtual DOM declaration. The real DOM declaration declares one or more first nodes, and the virtual DOM declaration declares one or more second nodes and attributes of the one or more second nodes. The one or more second nodes include listener attributes, which contain listener identifiers. The one or more second nodes in the virtual DOM declaration correspond one-to-one with the one or more second nodes in the real DOM declaration. Based on the virtual DOM declaration, the first node that needs to be listened to in the real DOM declaration is parsed to obtain one or more listening nodes, and the identification information of each node is obtained by annotating each listening node; When the listening identifier is a function identifier, a preset listening function corresponding to the listening attribute is bound to the listening node. The preset listening function is used to obtain information of the listening node, or to obtain information of the listening node and process the obtained information and send it back to the first specified address. When the monitoring identifier is an attribute identifier, the corresponding attribute information is extracted from the attributes of the monitoring node according to the attribute identifier, and the attribute information is uploaded to the second specified address; Wherein, the first specified address is the default address, and the second specified address is a customizable address.

2. The method for generating event tracking points for client-side web applications based on virtual DOM declaration as described in claim 1, characterized in that, The first specified address is different from the second specified address. The first specified address cannot be changed, while the second specified address is customizable.

3. The method for generating event tracking points for client-side web applications based on virtual DOM declaration as described in claim 1, characterized in that, Obtaining the attribute information corresponding to the node and the attribute identifier based on the listening attribute is implemented through the main code.

4. The method for generating event tracking points for client-side web applications based on virtual DOM declaration as described in claim 3, characterized in that, The preset function is executed by being called by the main code.

5. The method for generating event tracking points for client-side web applications based on virtual DOM declaration as described in claim 3, characterized in that, The first specified address is defined in the main code.

6. The method for generating event tracking points for client-side web applications based on virtual DOM declaration as described in claim 1, characterized in that, The second specified address is defined in the listening function.

7. A device for generating event tracking points for a client-side web application, characterized in that, The instrumentation generation device based on the implemented client web application includes: The DOM generation module uses the Vue and React frameworks. These frameworks include hook functions and default addresses corresponding to pre-defined listener information for nodes. When client-side page data changes, it uses a virtual DOM declaration to create a real DOM declaration. The real DOM declaration declares one or more first nodes, and the virtual DOM declaration declares one or more second nodes and their properties. The second nodes include listener properties containing listener identifiers. Each virtual DOM declaration corresponds one-to-one with a real DOM declaration. The parsing module is used to parse the first node to be listened to in the real DOM declaration from the virtual DOM declaration to obtain one or more listening nodes, and to mark each listening node to obtain the identification information of each node; The acquisition module is used to bind a preset listening function corresponding to the listening attribute to the listening node when the listening identifier is a function identifier. The preset listening function is used to acquire information of the listening node, or to acquire information of the listening node and process the acquired information before sending it back to a first specified address. When the listening identifier is an attribute identifier, the module extracts the corresponding attribute information from the attributes of the listening node according to the attribute identifier and uploads the attribute information to a second specified address. The first specified address is the default address, and the second specified address is a customizable address.

8. A web application client, characterized in that, The web application client includes: Memory is used to store computer program instructions; A processor for executing the computer program instructions to implement the method for generating event tracking data for a client-side web application based on virtual DOM declarations as described in any one of claims 1 to 6.

Images