CN117743716A - Automatic point burying method - Google Patents

Abstract

The invention discloses an automatic point burying method, which comprises the following steps: step 1, rewriting an API; step 2, obtaining VUE interactable elements; step 3, clicking an automatic buried point; step 4, generating a unique KEY; the method aims at a page rendered by a DOM tree and comprises a head area and a main body area, wherein the main body area is a visible area; VUE abstracts the page area into a component tree.

Description

Automatic point burying method

Technical Field

The invention relates to the field of computers, in particular to an automatic point burying method.

Background

At present, the problem of embedding points in page clicking is generally solved by adopting a scheme of embedding points in clicking events in page codes manually. In order to ensure the accuracy and the comprehensiveness of the embedded point area, before the page is on line, PM (product manager) is required to accurately and comprehensively propose which click events needing embedded points in the page are as far as possible, and communicate with front end RD (research and development personnel); the front end RD marks the corresponding position in the page according to the PM requirement to realize manual declaration embedded point or sign JavaScript to realize command embedded point in the page.

In the prior art, the front end RD is required to be manually defined in the page code, when the project is more and more complicated, the front end RD is more and more, the KEY (embedded point identifier) is most likely to have repeated conditions, so that data errors are caused, the definition of the embedded point KEY depends on manual behaviors, and the accuracy and the uniqueness of the embedded point cannot be ensured.

Disclosure of Invention

Therefore, the invention provides an automatic point burying method which can well solve the problems. According to the invention, the interactive elements can be effectively identified, a series of data quality problems caused by manual definition of the front-end buried point KEY are solved, and the problem of low research and development production efficiency caused by manual definition of the buried point KEY is solved.

The invention is realized by adopting the following technical scheme:

an automatic point burying method, comprising: step 1, rewriting an API; step 2, obtaining VUE interactable elements; step 3, clicking an automatic buried point; step 4, generating a unique KEY;

the method aims at a page rendered by a DOM tree and comprises a head area and a main body area, wherein the main body area is a visible area; VUE abstracts the page area into a component tree.

The automatic point burying method comprises the following steps:

1) Rendering the page while overwriting the browser snoop event function API AddEventListener;

2) The AddEventListener is rewritten into the element for recording the current page and the original operation, so that the original functions are not influenced;

3) And storing the recorded elements in a memory.

The automatic point burying method comprises the following steps:

1) Rendering the VUE component tree;

2) Triggering a browser interception event function API AddEventListener to intercept a page event;

3) Interactive elements in the VUE rendering process are identified and stored.

The automatic point burying method comprises the following steps:

1) Binding the event on the root element of the visual element in a manner of event delegation;

2) When a user operates on the front-end page, triggering the event monitor bound in the last step;

3) After the triggering event, firstly judging whether the current element is a VUE interactable element;

4) If the interactive element is the interactable element, dotting is carried out;

5) If the element is not interactable, judging whether the current element is a sub-element of the interactable element;

6) If the element is a sub element of the interactable element, dotting is performed;

7) Otherwise, taking the user operation as unnecessary dotting operation, and not dotting.

The automatic point burying method comprises the following steps:

1) For the dotted interactable element, reading the element attribute of the interactable element, and judging whether the interactable element is a root element of the VUE component;

2) If the path is the root element of the VUE, searching upwards along the VUE tree through the VUE attribute until the root node of the VUE is found, recording an addressing path, and generating a unique KEY according to the path.

The automatic point burying method comprises the following steps:

3) If the VUE component root element is not found, searching upwards along the DOM tree through the DOM attribute until the VUE component root node where the current element is located is found, recording the mark name and class of the current element, generating a SELECTOR based on the VUE component root node where the current element is located by using the mark name and class of the current element, repeating the step 2), searching upwards along the VUE component tree through the VUE attribute until the VUE component root node is found, and recording an addressing path; combining select with the addressing path of step 2) into a unique KEY.

A computer readable memory having stored therein processor executable instructions which, when executed by a processor, cause the processor to perform the method described above.

Drawings

FIG. 1 is a schematic diagram of a DOM tree and a VUE component tree structure;

FIG. 2 is a flow chart of interactive element recognition and dotting;

FIG. 3 is a flow chart of buried KEY generation.

Detailed Description

The following describes embodiments of the present invention in detail with reference to fig. 1-3. It will be apparent that the described embodiments are only some, but not all, embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention. The embodiments are exemplary only, and are not to be construed as limiting the invention.

Reference in the specification to "one embodiment" or "some embodiments" or the like means that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the invention. Thus, the terms "comprising," "including," "having," and variations thereof herein mean "including but not limited to," unless expressly specified otherwise.

As shown in fig. 1, the page in the present invention is rendered from a DOM tree, and includes a head region (head) and a body region (body), which is a visible region.

The VUE abstracts the page area into component trees, each DOM element can be called a node, each node in the web page (node is the most basic component forming the web page), each part in the web page can be called a node, e.g., html element, body element, div element, etc.) corresponds to one VUE component instance in the page, and each node is a small DOM tree, and the DOM tree is divided into different areas. Each node possesses many attributes, such as: id attribute, class attribute, text content, etc.

It should be noted that the DOM tree state is not fixed and will change with the change of the page state, so the KEY of each buried point needs to be unique in the DOM tree.

As shown in fig. 2 and 3, the automatic point burying method of the present invention includes: step 1, rewriting an API; step 2, obtaining VUE interactable elements; step 3, clicking an automatic buried point; and 4, generating a unique KEY.

The steps are described in detail below.

Step 1, rewriting the API, including:

1) Rendering the page while overwriting the browser snoop event function (API AddEventListener);

2) The AddEventListener is rewritten as an element for recording the current page and the original method is executed, and as compared with the original method, only the element for recording the current calling of the method is added, the original function is not influenced;

3) The recorded elements are stored in the memory, so that the subsequent use is convenient.

Step 2, obtaining the VUE interactable element, which comprises the following steps:

1) Rendering a VUE component tree: the VUE framework renders VUE component trees from code;

2) Triggering a browser interception event function (API AddEventListener) to intercept page events: 2) When the VUE component contains event monitoring, the VUE framework uses an AddEventlistener method to monitor the DOM element for the event;

3) Identifying and storing interactable elements in the VUE rendering process: 3) Because the AddEventlistener function is rewritten in the steps, when the VUE framework calls the AddEventlistener function to perform data monitoring, the method can acquire the DOM element for executing the event monitoring, and store the acquired DOM element for executing the event monitoring for later steps.

Step 3, clicking an automatic buried point, which comprises the following steps:

1) Binding an event listener (AddEventListener) on the root element of the visual element using an event delegate;

2) When a user operates on the front-end page, triggering the event monitor bound in the last step;

3) After the triggering event, firstly judging whether the current element is a VUE interactable element, namely judging whether the current element comprises the interactable element set recorded in the step 2;

4) If the interactive element is the interactable element, dotting is carried out;

5) If the element is not interactable, judging whether the current element is a sub-element of the interactable element;

6) If the element is a sub element of the interactable element, dotting is performed;

7) Otherwise, taking the user operation as unnecessary dotting operation, and not dotting;

8) The dotting information is temporarily recorded before the user closes the page, and the dotting information is uniformly transmitted (to the back-end service device) after the page is closed. In this way, all user operation information can be obtained, and whether missing points exist or not is screened later in this way, namely whether dotting information which needs to be recorded but is not generated is judged.

Step 4, generating a unique KEY, which comprises the following steps:

1) For the dotted interactable element, reading the element attribute of the interactable element, and judging whether the interactable element is a root element of the VUE component;

2) If the path is the root element of the VUE component, searching upwards along the VUE component tree through the VUE attribute until the root node of the VUE component tree is found, recording an addressing path, and generating a unique KEY according to the path;

3) If the VUE component root element is not found, searching upwards along the DOM tree through the DOM attribute until the VUE component root node where the current element is located is found, recording the tag name (tagName) and class (class) of the current element, generating a SELECTOR (SELECTOR) based on the VUE component root node where the current element is located by using the tag name (tagName) and class (class), repeating the step 2), and combining the SELECTOR and the result of the step two into a unique KEY.

According to one embodiment of the present invention, a computer-readable storage medium is provided. Those of ordinary skill in the art will appreciate that all or a portion of the steps of the various methods of the above embodiments may be performed by instructions, or by instructions controlling associated hardware, which may be stored in a computer-readable storage medium and loaded and executed by a processor. To this end, embodiments of the present application provide a storage medium having stored therein a plurality of instructions capable of being loaded by a processor to perform the steps of the automatic spot burying method provided by the embodiments of the present application.

Wherein the storage medium may include: read Only Memory (ROM), random Access Memory (RAM, random Access Memory), magnetic or optical disks, etc., and more specifically, may include specific categories of Static Random-Access Memory (SRAM) and dynamic Random Access Memory (Dynamic Random Access Memory, DRAM).

Because the instructions stored in the storage medium can execute the automatic point burying method of the present invention, the beneficial effects that can be achieved by the embodiments of the present invention can be achieved, and detailed descriptions of the foregoing embodiments are omitted herein.

By the method and the device, all the operations of the user in the page, which are significant to the page, can be obtained, compared with other modes, the data volume of the buried point is smaller, the network usage amount of the user can be saved, and other operations such as displaying the buried point and the like can be performed on the obtained interactable elements.

Although the present invention has been described in terms of the preferred embodiments, it should be understood that the present invention is not limited to the specific embodiments, but is capable of numerous modifications and equivalents, and alternative embodiments and modifications of the embodiments described above, without departing from the spirit and scope of the present invention.

Claims (6)

1. An automatic point burying method, characterized in that the method comprises the following steps: step 1, rewriting an API; step 2, obtaining VUE interactable elements; step 3, clicking an automatic buried point; step 4, generating a unique KEY;

the method aims at a page rendered by a DOM tree and comprises a head area and a main body area, wherein the main body area is a visible area; VUE abstracts the page area into a component tree.

2. The automatic spot burying method as set forth in claim 1, wherein the steps include:

the addreventListener is rewritten and used for collecting interactive elements, rendering pages and storing the recorded elements in a memory.

3. The automatic spot burying method as set forth in claim 1, wherein step 2 includes:

1) Rendering the VUE component tree;

2) The VUE framework binds the event to the corresponding element;

2) Intercepting a page event;

3) The interactable elements in the VUE rendering process are identified and stored in a mode of the AddEventListener rewritten in the step 2.

4. The automatic spot burying method as set forth in claim 1, wherein step 3 includes:

1) Binding the event on the root element of the visual element in a manner of event delegation;

2) When the user operates on the front-end page, the event monitor bound in the last step is triggered.

5. The automatic spot burying method as set forth in claim 1, wherein step 4 includes:

for the dotted interactable element, the element attribute is read.

6. A computer readable memory, characterized in that processor executable instructions are stored, which instructions, when executed by a processor, cause the processor to perform the method according to any of claims 1 to 5.