A method, system and device for automated collection of click events

Abstract

The application relates to the technical field of data collection, in particular to a method, system and device for automatically collecting click events, which comprises the following steps: obtaining AST abstract syntax tree node information; using the AST abstract syntax tree node information, capturing all HTML language opening tags in the AST description; using all the HTML language opening tags, capturing a specific press event tag to replace a node, and obtaining a data collection result. The application automatically adds a code fragment and a timestamp of the collection code by using a transform conversion layer of Babel in a React-Native compiling process through an AST technology, so that the user click events are automatically collected to a certain extent, the consumption of human resources is reduced, and the development efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of data acquisition technology, and in particular to a method, system and device for automated acquisition of click events. Background Technology

[0002] In recent years, due to the rapid development of mobile technology, a large number of developments based on the React-Native framework have emerged, which has also promoted the development of data collection technology. However, in the business development process of React-Native, it is necessary to collect relevant user click events for subsequent experience optimization and error scenario deduction. This requires manually adding tracking code to each click event, which consumes a certain amount of manpower and is inefficient.

[0003] In the current technology, during the business development process of React-Native, when collecting relevant user click events, it is necessary to manually add tracking code to each click event, which consumes a certain amount of human resources and is inefficient. Summary of the Invention

[0004] To at least partially overcome the problem in related technologies where, during the business development process of React-Native, it is necessary to manually add tracking code to each click event, which consumes a certain amount of manpower and is inefficient, this application provides a method, system, and device for automated click event collection.

[0005] The proposed solution is as follows:

[0006] Firstly, this application provides a method for automated click event collection, the method comprising:

[0007] Obtain the AST (Abstract Syntax Tree) node information;

[0008] Using the AST (Abstract Syntax Tree) node information, all HTML language opening tags are captured through the AST description;

[0009] By utilizing all the HTML language open tags, specific press event tags are captured and node replacements are performed to obtain the data collection results.

[0010] Furthermore, obtaining the AST (Abstract Syntax Tree) node information includes:

[0011] Get information about the project to be compiled;

[0012] Using the project information to be compiled, the AST (Abstract Syntax Tree) node information is obtained by triggering the Babel transformation layer.

[0013] Furthermore, the specific press event label includes: <pressable>Label,

[0014] <touchableopacity>Tags and <touchablewithoutfeedback>Label.

[0015] Furthermore, the process of using all the HTML language open tags to capture specific press event tags for node replacement and obtaining data collection results includes:

[0016] Using all the HTML language open tags, specific press event tags are captured for node replacement;

[0017] Using the specific press event tag, the OnPress() press attribute within the node is hijacked, and the code snippet for data collection is injected into the OnPress() press attribute to complete the data collection.

[0018] The code snippet mentioned above is the code snippet that collects the data information inside the OnPress() press attribute.

[0019] Furthermore, the OnPress() press attribute within the hijacking node includes:

[0020] Using the specific press event tag, inspect the React-Native tag of the press event tag;

[0021] Replace the React-Native tag of the press event label with a custom component tag;

[0022] The custom component tag includes the OnPress() press attribute, which is used to map to the React-Native tag.

[0023] Secondly, this application provides a system for automatically collecting click events, the system comprising:

[0024] The acquisition module is used to obtain AST (Abstract Syntax Tree) node information;

[0025] The capture module is used to capture all HTML language open tags in the AST by utilizing the node information of the AST and through the description of the AST.

[0026] The replacement module is used to capture specific press event tags using all the HTML language open tags, replace nodes, and obtain the data collection results.

[0027] Thirdly, this application provides a device for automated click event collection, the device comprising:

[0028] Memory, on which executable programs are stored;

[0029] A processor for executing the executable program in the memory to implement the steps of any of the methods described above.

[0030] The technical solution provided in this application may include the following beneficial effects:

[0031] This application obtains AST (Abstract Syntax Tree) node information; utilizes this AST node information, and through the AST description, captures all HTML language opening tags; using all these HTML language opening tags, it captures specific press event tags and performs node replacement to obtain the data collection results. This application uses AST technology and Babel's transform layer during the React-Native compilation process to automatically add collection code snippets and timestamps, thereby automating the collection of user click events to a certain extent, reducing manpower consumption, and improving development efficiency.

[0032] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application. Attached Figure Description

[0033] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0034] Figure 1 This is a schematic flowchart of a method for automatically collecting click events according to an embodiment of this application;

[0035] Figure 2 This is a schematic diagram of a system composition for automated click event collection according to another embodiment of this application;

[0036] Figure 3 This is a schematic diagram of a device for automatically collecting click events, provided in another embodiment of this application;

[0037] Figure 4 This is a schematic diagram of the main method flow for automated click event collection provided in another embodiment of this application. Detailed Implementation

[0038] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0039] Example 1

[0040] Please see Figure 1 , Figure 1 This is a schematic flowchart of a method for automatically collecting click events according to an embodiment of this application. The method includes:

[0041] S1. Obtain the AST (Abstract Syntax Tree) node information;

[0042] S2. Using the AST (Abstract Syntax Tree) node information, capture all HTML language open tags through the description of the AST;

[0043] S3. Using all the HTML language open tags, capture specific press event tags and replace nodes to obtain the data collection results.

[0044] In specific implementation, as described in step S1, obtaining the AST (Abstract Syntax Tree) node information includes:

[0045] Get information about the project to be compiled;

[0046] Using the project information to be compiled, the AST (Abstract Syntax Tree) node information is obtained by triggering the Babel transformation layer.

[0047] Specifically, Babel is a compiler for writing next-generation JavaScript. Simply put, a compiler is a program that translates one language (usually a high-level language) into another language (usually a low-level language). The main workflow of a modern compiler is: source code → preprocessor → compiler → object code → linker → executables.

[0048] In this embodiment, the project information to be compiled mainly refers to business-related project information related to React-Native. Specifically, React Native (RN) is a cross-platform mobile application development framework open-sourced by Facebook in April 2015, and the project in this application is developed based on React Native.

[0049] In specific implementation, as described in step S3, the process of using all the HTML language open tags to capture specific press event tags for node replacement and obtaining data collection results includes:

[0050] Using all the HTML language open tags, specific press event tags are captured for node replacement;

[0051] Using the specific press event tag, the OnPress() press attribute within the node is hijacked, and a data collection code snippet is injected into the OnPress() press attribute to complete data collection; wherein, the data collection code snippet is a code snippet that collects data information inside the OnPress() press attribute.

[0052] Furthermore, the OnPress() press attribute within the hijacking node includes:

[0053] Using the specific press event tag, inspect the React-Native tag of the press event tag;

[0054] Replace the React-Native tag of the press event label with a custom component tag;

[0055] The custom component tag includes the OnPress() press attribute, which is used to map to the React-Native tag.

[0056] It's important to note that the custom component tags inherit the features of the press event tags under the React-Native tag. Based on this inheritance, they are programmed according to the actual business needs. Each custom component tag contains an `OnPress()` property, used for mapping between itself and the React-Native tag. The mapping method contains a data collection method, and the original method body consists of two parts: a call to the data collection method and a call to the original method. This allows for the interception of the React-Native `onPress()` method.

[0057] It should be noted that the data collection method involves obtaining the corresponding data in the OnPress() property based on the data information required by the actual business.

[0058] Furthermore, the specific press event label includes: <pressable>Label, <touchableopacity>Tags and <touchablewithoutfeedback>Label.

[0059] In one embodiment, such as Figure 4 As shown, let's describe this process from the compiler's perspective:

[0060] 1. The project starts compiling, and Babel begins working.

[0061] 2. Trigger the Babel transformation layer to start receiving AST (Abstract Syntax Tree) node information.

[0062] 3. Capture all HTML language opening tags in the AST description.

[0063] 4. Specifically, this is done by capturing the relevant press event tags under the React-Native tag, for example... <pressable> <touchableopacity> <touchablewithoutfeedback>Node replacement is performed using specific press event tags.

[0064] 5. Hijack the OnPress() property within the node and inject the data collection code snippet into the OnPress() property to complete the data collection.

[0065] Specifically, this application achieves two objectives by executing the above process: first, by using AST technology to replace the original pressed node label during the compilation process to hijack the OnPress() event attributes; and second, by injecting code snippets into the attributes of the OnPress() pressed event to complete the automatic collection of click events.

[0066] In practice, hijacking the onPress() method is accomplished through the following operations:

[0067] First, check all React-Native tags referenced by the current page for press events, and then replace them with custom component tags.

[0068] Specifically, within the page's node tree, all locations using React-Native's original press event tag nodes are checked and replaced with custom tags. These custom tags contain an `onPress()` method, used for mapping between the custom and React-Native tags. The mapping method consists of two parts: data collection and a call to the original method body. This allows for the interception of React-Native's `onPress()` method.

[0069] In this application embodiment, during the business development process of React-Native, it is necessary to collect relevant user click events for subsequent experience optimization and error scenario deduction. It is also necessary to manually add tracking code to each click event. This application uses AST technology to automatically add the collection code fragments and timestamps to the Babel transform layer during the React-Native compilation process, thereby automating the collection of user click events to a certain extent.

[0070] In one embodiment, this application obtains AST (Abstract Syntax Tree) node information; using the AST node information, it captures all HTML language opening tags through the AST description; and using all the HTML language opening tags, it captures specific press event tags for node replacement to obtain the data collection results. This application uses AST technology to automatically add collection code snippets and timestamps to the Babel transform layer during the React-Native compilation process, thereby automating the collection of user click events to a certain extent, reducing manpower consumption, and improving development efficiency.

[0071] Implementation 2

[0072] Please see Figure 2 , Figure 2 This is a schematic diagram of a system for automated click event collection according to another embodiment of this application. The system includes:

[0073] Module 101 is used to obtain AST (Abstract Syntax Tree) node information;

[0074] The capture module 102 is used to capture all HTML language open tags in the AST by utilizing the node information of the AST and through the description of the AST;

[0075] The replacement module 103 is used to capture specific press event tags using all the HTML language open tags, replace nodes, and obtain data collection results.

[0076] Example 3

[0077] Please see Figure 3 , Figure 3 This is a schematic diagram of a device for automated click event collection according to another embodiment of this application. The device includes:

[0078] Memory 31, on which an executable program is stored;

[0079] Processor 32 is configured to execute the executable program in the memory 31 to implement the steps of any of the methods described above.

[0080] It is understood that the same or similar parts in the above embodiments can be referred to each other, and the contents not described in detail in some embodiments can be referred to the same or similar contents in other embodiments.

[0081] It should be noted that in the description of this application, the terms "first," "second," etc., are used for descriptive purposes only and should not be construed as indicating or implying relative importance. Furthermore, in the description of this application, unless otherwise stated, "a plurality of" means at least two.

[0082] Any process or method described in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing a particular logical function or process, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the function involved, as will be understood by those skilled in the art to which embodiments of this application pertain.

[0083] It should be understood that various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0084] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

[0085] Furthermore, the functional units in the various embodiments of this application can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into a module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0086] The storage media mentioned above can be read-only memory, disk, or optical disk, etc.

[0087] In the description of this specification, the references to "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples.

[0088] Although embodiments of this application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting this application. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of this application.< / touchablewithoutfeedback> < / touchableopacity> < / pressable> < / touchablewithoutfeedback> < / touchableopacity> < / pressable> < / touchablewithoutfeedback> < / touchableopacity> < / pressable>

Claims

1. A method for automatically collecting click events, characterized in that, The method includes: Obtain the node information of the Abstract Syntax Tree (AST); Using the AST (Abstract Syntax Tree) node information, all HTML language opening tags are captured through the AST description; By utilizing all the HTML language open tags, specific press event tags are captured and node replacements are performed to obtain the data collection results; The obtained AST abstract syntax tree node information includes: Get information about the project to be compiled; Using the project information to be compiled, the AST (Abstract Syntax Tree) node information is obtained by triggering the Babel transformation layer; The specific press event label includes: <pressable>Label, <touchableopacity>Tags and <touchablewithoutfeedback> Label;< / touchablewithoutfeedback> < / touchableopacity> < / pressable> The process involves using all the HTML language open tags to capture specific press event tags for node replacement, resulting in the data collection results, including: Using all the HTML language open tags, specific press event tags are captured for node replacement; Using the specific press event tag, the OnPress() press attribute within the node is hijacked, and the code snippet for data collection is injected into the OnPress() press attribute to complete the data collection. The code snippet mentioned above is the code snippet that collects the data information inside the OnPress() press attribute.

2. The method according to claim 1, characterized in that, The OnPress() press attribute within the hijacked node includes: Using the specific press event tag, inspect the React-Native tag of the press event tag; Replace the React-Native tag of the press event label with a custom component tag; The custom component tag includes the OnPress() press attribute, which is used to map to the React-Native tag.

3. A system for automatically collecting click events, applied to the method for automatically collecting click events as described in any one of claims 1-2, characterized in that, The system includes: The acquisition module is used to obtain AST (Abstract Syntax Tree) node information; The capture module is used to capture all HTML language open tags in the AST by utilizing the node information of the AST and through the description of the AST. The replacement module is used to capture specific press event tags using all the HTML language open tags, replace nodes, and obtain the data collection results.

4. A device for automatically collecting click events, characterized in that, The device includes: Memory, on which executable programs are stored; A processor for executing the executable program in the memory to implement the steps of the method according to any one of claims 1-2.

Images