Visual burying point configuration method and device, electronic equipment, storage medium and computer program product

Abstract

The invention provides a visual burying point configuration method and device, electronic equipment, a storage medium and a computer program product, and relates to the technical field of Internet, and the method comprises the steps: obtaining page structure data which are sent by a plurality of historical clients and aim at corresponding pages; wherein the page structure data comprises a visual element and an identifier of each DOM (Document Object Model) in the corresponding page; displaying burying point configuration pages corresponding to the page categories based on the page structure data; determining a corresponding burying point attribute for each DOM in each burying point configuration page, and forming corresponding burying point configuration data based on the identifier of each DOM; and in response to an instruction of the current client, sending burying point configuration data corresponding to the current page of the current client to the current client, so that the client performs burying point configuration for the current page.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Internet, and particularly relates to a visualized burying point configuration method and device, electronic equipment, storage medium and computer program product. BACKGROUND

[0002] In Internet applications, the collection and analysis of user behavior data is an important means of optimizing product experience and conducting precise operation. As one of the core methods of realizing data collection, burying point technology is widely used in various websites and mobile applications to record the operation path, click behavior and other key information of users.

[0003] In combination with Figure 1 , the existing visualized burying point system usually adopts the participation of R&D personnel to form a burying point scheme, code development, manual test, burying point online and burying point analysis. However, the existing scheme has the problem of insufficient flexibility when dealing with scenes of multiple terminals and multiple page structures, especially when different client requests the same page but needs differentiated burying point configuration, it is difficult to efficiently adapt. In addition, due to the lack of centralized management and intelligent matching mechanism for historical page structures, the configuration process is prone to errors and has high maintenance cost, and the configuration efficiency is low. SUMMARY

[0004] The present application provides a visualized burying point configuration method, device, electronic equipment, storage medium and computer program product.

[0005] The technical scheme of the present application is realized as follows: The present application provides a visualized burying point configuration method, device, electronic equipment, storage medium and computer program product. acquiring page structure data respectively sent by a plurality of historical clients for corresponding pages; wherein the page structure data includes a visualized element and an identifier of each DOM in the corresponding page; displaying burying point configuration pages respectively corresponding to a plurality of page categories based on the page structure data; determining a corresponding burying point attribute for each DOM in each of the burying point configuration pages, and forming corresponding burying point configuration data based on the identifier of each DOM; in response to an instruction of a current client, sending the burying point configuration data corresponding to the current page of the current client to the current client for burying point configuration of the current page by the client.

[0006] In the above scheme, the burying point configuration pages respectively corresponding to a plurality of category pages are displayed based on the page structure data, including: In a plurality of page structure data, N page structure data corresponding to each page category is determined; wherein N is an integer greater than 0; display the page configuration page corresponding to each page category based on the visual elements included in the N page structure data corresponding to each page category; the visual elements include at least one of the DOM element basic information, the hierarchical and nested relationship, the style and class name information, the interaction and event binding, the visual tool extension information, and the special element processing information corresponding to each DOM.

[0007] In the above solution, the corresponding page configuration data is formed based on the identification of each DOM and the corresponding page configuration attribute determined for each DOM in each page configuration page. In response to the configuration instruction for each DOM in each page configuration page, a configuration box for each DOM is displayed; wherein the configuration box includes a plurality of configuration items of page configuration attributes. The page configuration attributes configured by the user for each configuration item are obtained, and the interface components corresponding to part of the DOMs in the page configuration page are identified. Based on the corresponding relationship between the plurality of page configuration attributes corresponding to each DOM and the identification, and the interface components bound for part of the DOMs in each page configuration page, the page configuration data corresponding to each page category is formed.

[0008] In the above solution, in response to the instruction of the current client, the page configuration data corresponding to the current page of the current client is sent to the current client for page configuration of the current page by the client, including: The configuration instruction sent by the current client for the current page is received, wherein the current page identification of the current page is included in the configuration instruction. Based on the current page category determined based on the current page identification, the corresponding page configuration data is determined from the plurality of page configuration data. The corresponding page configuration data is sent to the current client for page configuration of the current page by the current client.

[0009] The embodiment of the present application also provides a visual page configuration method, applied to a current client, including: Page structure data corresponding to a page is collected; wherein the page structure data includes visual elements and identification of each DOM in the corresponding page. sending the page structure data to a server, so that the server displays a corresponding page of a burying point configuration based on the page structure data, determines a corresponding burying point attribute for each DOM in each of the page of the burying point configuration, and forms corresponding burying point configuration data based on the identifier of each DOM; sending an instruction to the server when a current page is displayed, receiving the burying point configuration data corresponding to the current page fed back by the server in response to the instruction, and performing burying point configuration on the current page based on the burying point configuration data.

[0010] In the above scheme, the page structure data of the corresponding page is collected, comprising: collecting a first-screen snapshot when the corresponding page is initialized; determining first page structure data of DOM in each floor in the corresponding page based on the first-screen snapshot; monitoring a new DOM in the corresponding page during display of the corresponding page, and determining second page structure data corresponding to the new DOM; forming the page structure data based on at least one of the first page structure data and the second page structure data.

[0011] In the above scheme, the first page structure data of the DOM in each floor in the corresponding page is determined based on the first-screen snapshot, comprising: identifying the DOM in each floor of the current page based on the first-screen snapshot, and determining a first floor identifier of each floor; determining the visual element corresponding to the DOM and the identifier for the DOM in each floor; determining the first page structure data based on the first floor identifier of each floor, and the visual element and the identifier corresponding to the DOM in each floor. In the above scheme, the DOM includes a pop-up DOM, and the method further comprises: determining pop-up recognition information corresponding to the DOM based on at least one of positioning feature information, size coverage information, mask layer information, hierarchical information, dialog box structure information and semantic information of the DOM; determining whether the DOM is the pop-up DOM based on the pop-up recognition information.

[0012] In the above scheme, the current page is configured with a burying point based on the current burying point configuration data, comprising: matching the local identifier of each DOM in the current page with each identifier in the burying point configuration data to determine the burying point attribute corresponding to each DOM in the current page; The interface component corresponding to the DOM identification binding in the part of the burying point configuration data is given burying point configuration to each DOM in the current page based on the burying point attribute corresponding to each DOM in the current page and the burying point configuration data.

[0013] In the above scheme, the current burying point configuration data includes: a first floor identifier of each floor in the current page; and the method further includes: When a subsequent page of the current page is displayed, a second floor identifier of each floor in the subsequent page is determined based on the first screen snapshot of the subsequent page; If the second floor identifier of each floor in the subsequent page matches any first floor identifier in the burying point configuration data, the server is not sent first page structure data corresponding to the subsequent page.

[0014] Embodiments of the present application also provide a visual burying point configuration device, applied to a server, including: A data acquisition unit is configured to acquire page structure data corresponding to a page sent by a plurality of historical clients respectively; wherein the page structure data includes a visual element and an identifier of each DOM in the corresponding page; A display unit is configured to display a burying point configuration page corresponding to each page category based on the page structure data; A configuration unit is configured to determine a corresponding burying point attribute for each DOM in each burying point configuration page, and form corresponding burying point configuration data based on the identifier of each DOM; A first sending unit is configured to send the burying point configuration data corresponding to a current page of a current client to the current client in response to an instruction of the current client, so that the client performs burying point configuration for the current page.

[0015] Embodiments of the present application also provide a visual burying point configuration device, applied to a current client, including: A collection unit is configured to collect page structure data of a corresponding page; wherein the page structure data includes a visual element and an identifier of each DOM in the corresponding page; A second sending unit is configured to send the page structure data to a server, so that the server displays a corresponding burying point configuration page based on the page structure data, determines a corresponding burying point attribute for each DOM in each burying point configuration page, and forms corresponding burying point configuration data based on the identifier of each DOM; The receiving unit is configured to send an instruction to the server when displaying the current page, receive the tracking configuration data corresponding to the current page in response to the instruction from the server, and configure tracking points for the current page based on the tracking configuration data.

[0016] This application also provides a first electronic device, including a first memory and a first processor. The first memory stores a computer program that can run on the first processor. When the first processor executes the computer program, it implements the steps in the method on the server side.

[0017] This application also provides a second electronic device, including a second memory and a second processor. The second memory stores a computer program that can run on the second processor. When the second processor executes the computer program, it implements the steps in the method on the current client side.

[0018] This application also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a first processor, implements the steps of the method on the server side.

[0019] This application also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a second processor, implements the steps of the method on the current client side.

[0020] This application also provides a computer program product, including a computer program that, when executed by a first processor, implements the steps of the method on the server side.

[0021] This application also provides a computer program product, including a computer program that, when executed by a second processor, implements the steps in the method on the current client side.

[0022] In the embodiments of the present application, the page structure data corresponding to the pages respectively sent by a plurality of historical clients is acquired; wherein the page structure data comprises the visual elements and the identifiers of each DOM in the corresponding page; a plurality of page category corresponding bury point configuration pages are displayed based on the page structure data; the bury point attribute corresponding to each DOM in each bury point configuration page is determined, and the bury point configuration data corresponding to each DOM is formed based on the identifier of each DOM; in response to the instruction of the current client, the bury point configuration data corresponding to the current page of the current client is sent to the current client for the bury point configuration of the current page by the client. In this way, by collecting page structure data from a plurality of historical clients and displaying it as bury point configuration pages of different page categories, users can intuitively identify and configure the bury point positions on various pages. At the same time, by determining the bury point attribute of each DOM node and generating the bury point configuration data in combination with its unique identifier, the manual configuration cost and error rate can be significantly reduced. In addition, after receiving the request of the current client, the matching bury point configuration data is accurately returned, which improves the configuration efficiency and accuracy. Compared with the manual code configuration method relying on full-time personnel in the prior art, the present scheme realizes more efficient bury point configuration in the scenario of thousands of people and thousands of faces through the server-side dynamic adaptation and the configuration method driven by real data in the production environment. BRIEF DESCRIPTION OF DRAWINGS

[0023] Figure 1 Effect diagram of related technology provided for the embodiments of the present application Figure 2 Flowchart of the visual bury point configuration method provided for the embodiments of the present application Figure 1 ; Figure 3 Effect diagram of the visual bury point configuration method provided for the embodiments of the present application Figure 1 ; Figure 4 Flowchart of the visual bury point configuration method provided for the embodiments of the present application Figure 2 ; Figure 5 Effect diagram of the visual bury point configuration method provided for the embodiments of the present application Figure 2 ; Figure 6 Flowchart of the visual bury point configuration method provided for the embodiments of the present application Figure 3 ; Figure 7 Flowchart of the visual bury point configuration method provided for the embodiments of the present application Figure 4 ; Figure 8 Flowchart of the visual bury point configuration method provided for the embodiments of the present application Figure 5 ; Figure 9Flowchart of a visualized burying point configuration method provided by an embodiment of the present application Figure 6 ; Figure 10 Flowchart of a visualized burying point configuration method provided by an embodiment of the present application Figure 7 ; Figure 11 Flowchart of a visualized burying point configuration method provided by an embodiment of the present application Figure 8 ; Figure 12 Effect diagram of a visualized burying point configuration method provided by an embodiment of the present application Figure 3 ; Figure 13 Flowchart of a visualized burying point configuration method provided by an embodiment of the present application Figure 9 ; Figure 14 Interaction diagram of a visualized burying point configuration method provided by an embodiment of the present application Figure 15 Structure diagram of a visualized burying point configuration device provided by an embodiment of the present application Figure 1 ; Figure 16 Hardware entity diagram of a first electronic device provided by an embodiment of the present application Figure 17 Structure diagram of a visualized burying point configuration device provided by an embodiment of the present application Figure 2 ; Figure 18 Hardware entity diagram of a second electronic device provided by an embodiment of the present application DETAILED DESCRIPTION

[0024] In order to make the objects, technical solutions and advantages of the present application clearer, the technical solutions of the present application are further described in detail below with reference to the drawings and embodiments. The described embodiments should not be regarded as limiting the present application, and all other embodiments obtained by those skilled in the art without creative labor fall within the scope of protection of the present application.

[0025] In the following description, "some embodiments" are related to a subset of all possible embodiments, but it can be understood that "some embodiments" can be the same subset or different subsets of all possible embodiments, and can be combined with each other without conflict.

[0026] If the application file contains similar descriptions such as "first / second", the following description is added: in the following description, the terms "first\second\third" referred to only distinguish similar objects, not represent a specific order of the object, and it can be understood that "first\second\third" can be exchanged in a specific order or sequence as allowed, so that the embodiments described herein can be implemented in an order other than that illustrated or described herein.

[0027] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used in the specification is for the purpose of describing the embodiments of the present application only and is not intended to be limiting of the present application.

[0028] In order to understand the technical content of the present application, some key concepts involved in the present application are described as follows: 1) Document Object Model (DOM): is a programming interface for HyperText Markup Language (HTML) and Extensible Markup Language (XML) documents, which provides methods to represent pages and ways to access and manipulate page content. DOM structure consists of a series of nested nodes, each node representing an HTML element and can be identified and located by attributes, styles, class names, etc.

[0029] 2) Buried point configuration data: refers to the data collection rules set for a certain page or page element, including event types (such as click, browse), reporting parameters (such as user identification (ID), location coordinates), trigger conditions, etc. Buried point configuration data determines which data the system collects under what conditions, thereby supporting subsequent data analysis and business decision-making.

[0030] 3) Thousand faces: is a personalized recommendation strategy, that is, according to the characteristics of different users (such as geographic location, historical behavior, interest preference, etc.), different users are shown different page content or interactive elements. In the thousand faces scenario, the page structure and elements may vary from user to user, so the traditional fixed buried point method is difficult to apply, and a dynamic and flexible buried point configuration mechanism is needed.

[0031] 4) First screen snapshot: refers to the page content in the visible area that the user first sees after the page is loaded. By capturing the first screen snapshot, the initial DOM structure and its visual elements of the page can be obtained, providing basic data for subsequent buried point configuration.

[0032] 5) Pop-up recognition: refers to the process of detecting and recognizing pop-up windows (such as modal boxes, prompt boxes, and advertisement pop-ups) in the page. Due to the uncertainty of the content and timing of pop-up windows, accurate recognition can help improve the intelligence and stability of the tracking system.

[0033] 6) Floor identification: refers to dividing the page into several logical areas (referred to as floors) according to the page layout, and assigning a unique identifier to each area. Through floor identification, modular management and quick matching of page structure can be achieved.

[0034] 7) MutationObserver Application Programming Interface (API): is an interface provided by the browser to monitor changes in the DOM tree, which can capture operations such as adding, deleting, and modifying attributes of DOM nodes in real time. This application utilizes this API to monitor dynamic changes in the page, ensuring the timeliness and accuracy of tracking configuration.

[0035] 8) Time to Interactive (TTI): refers to the time from when the user initiates a request to when the main functions of the page are fully available. This application captures a page snapshot after TTI to ensure that the collected page structure data has high stability and representativeness.

[0036] The embodiments of the present application provide a visual tracking configuration method, please refer to Figure 2 , the flowchart of the visual tracking configuration method provided by the embodiments of the present application Figure 1 , will be described in conjunction with Figure 2 the steps shown: S101, obtain a plurality of historical client respectively sent for corresponding page structure data; wherein, the page structure data includes each DOM in the corresponding page visual element and identification.

[0037] In the embodiments of the present application, the server collects page structure data sent by the server from a plurality of historical clients. The page structure data herein refers to DOM tree information of a page corresponding to page structure data captured in a browser after a user accesses a certain H5 (HTML5) page, and the DOM tree information is converted into visual JavaScript Object Notation (JSON) format data. These data not only include HTML tag structure (such as div, p, span, etc.), but also include Cascading Style Sheets (CSS) style, class name, ID and other attribute information. In addition, an identifier is used to uniquely identify each DOM element, and the Message-Digest Algorithm 5 (MD5) algorithm is usually used to hash process the DOM content to generate a unique identifier.

[0038] In the embodiments of the present application, the server obtains the DOM structure change of different clients on the same page or different pages by listening to the page structure data sent by the historical clients, thereby constructing a multi-dimensional page structure database. This process of the server is helpful for subsequent dynamic burying point configuration and accurate matching in the thousand faces scenario.

[0039] The visual element refers to structured data formed by JSON format presentation of the DOM element captured in the page snapshot of the corresponding page. The visual element data retains the original tag structure of the DOM, and additionally includes related style, position, hierarchical relationship and other information, thereby facilitating subsequent analysis and processing.

[0040] The DOM can include the DOM in the corresponding page snapshot and the newly added DOM during display of the corresponding page. For the DOM in the page snapshot, the server calculates a fixed MD5 value as an identifier based on the content of the DOM in the page snapshot; and the newly added DOM, which can be derived from dynamic rendering, is also collected in real time and generates a corresponding MD5 value as an identifier, so as to ensure that the newly added DOM can be accurately identified in subsequent burying point configuration.

[0041] The page structure data includes visual page structure data and visual elements and identifiers for the newly added DOM. The visual page structure data refers to JSON data of the entire page DOM structure presented in a visual manner, covering the overall layout and structure information of the page; and the visual elements and identifiers for the newly added DOM refer to new DOM elements dynamically inserted during page running. The server collects the visual elements and identifiers for the newly added DOM in real time, and stores the structure, style, tag and other information of the new DOM elements in a visual manner.

[0042] S102, display a plurality of page categories respectively corresponding to the page structure data.

[0043] In the embodiments of the present application, the server identifies different page types according to the obtained page structure data, and generates a corresponding page for each type. The page categories mentioned above refer to various specific pages on the client side, such as the home page, product detail page, shopping cart page, payment page, etc. The server can automatically classify the pages and generate the corresponding page configuration interface according to the factors such as floor division, module composition, and pop-up box recognition results in the page structure data. For example, for e-commerce applications, the product detail page can be classified as a page category, and a dedicated page for configuring the product detail page can be created.

[0044] In the embodiments of the present application, the page configuration page is generated according to the page category, which can make the configuration operation more intuitive and efficient. This method can reduce the complexity of manual page type judgment and improve the automation and flexibility of the page configuration system.

[0045] Among them, the page category refers to the existence of multiple different page types on the client side, such as the home page, product detail page, personal center page, order confirmation page, etc. Each page has a unique structure and function, so it needs to be configured separately. The server will automatically identify which category the current page belongs to according to the page structure data, and generate the corresponding page configuration page for the user to configure.

[0046] S103, determine the corresponding page configuration data for each DOM in each of the page configuration pages.

[0047] In the embodiments of the present application, for each page configuration page, the user can select a specific DOM element on the interface and set the page configuration attribute for the specific DOM element. The page configuration attribute in the above-mentioned page configuration includes but is not limited to the page type (such as click event, browse event), reporting parameter (such as user ID, location coordinates), trigger condition, etc. In addition, the user can also add additional page configuration, such as identifying the interface component, that is, the server will recommend the API interface related to the specific DOM element for the user to select and bind, so as to improve the completeness and accuracy of the page configuration data. At the same time, the server will generate the corresponding page configuration data based on the identification of each DOM. This means that even if the page structure changes, as long as the identification of the DOM does not change, the page configuration can still be correctly matched.

[0048] The point-in-time attribute refers to a series of business-related parameters configured by the user for a certain DOM in the point-in-time configuration page. These parameters include but are not limited to point-in-time types (such as clicks, exposures, and swipes), reporting parameters (such as user IDs, device models, and geographic locations), triggering conditions (such as single clicks, double clicks, and hovers), and the like. In addition, point-in-time additional supplements can be added, such as identifying interface components, that is, the server recommends API interfaces related to a specific DOM element for the user to select and bind to enrich point-in-time data content. Point-in-time additional supplements refer to some extended configuration items provided by the server in addition to the conventional point-in-time attributes, which are used to enhance the depth and breadth of point-in-time data. One of the most common supplements is the identified interface component, that is, the server system automatically identifies the backend interface associated with a certain DOM node and provides these interfaces as options to the user for binding operations. When an interaction behavior occurs in a certain DOM node, the system can record the front-end behavior data and at the same time collect the request and response information of the backend interface associated with the DOM node, thereby realizing the linkage collection of front-end and back-end data. Taking the user clicking the order submission button as an example, the server system can recommend the order placement interface bound to this order submission button and allow the user to select whether to collect the data of this interface, thereby helping the system to build a more complete user behavior path.

[0049] S104, in response to the instruction of the current client, sending the point-in-time configuration data corresponding to the current page of the current client to the current client for point-in-time configuration of the current page by the client.

[0050] In the embodiments of the present application, when the current client loads a certain page, it sends a request to the server to inquire whether there is corresponding point-in-time configuration data available for use. After receiving the request, the server searches for the existing point-in-time configuration data according to the type of the page where the current client is located, and returns the matched point-in-time configuration data to the client. The client then performs dynamic point-in-time on the page according to the received configuration data, without relying on manual coding by the developer, greatly reducing the development and testing cost of point-in-time work.

[0051] Please refer to Figure 3 In the embodiments of the present application, the server determines the point-in-time configuration data through point-in-time automatic collection, visualization, and circle selection, as well as automatic testing and manual confirmation, and delivers the point-in-time configuration data to the current client for point-in-time analysis.

[0052] The visualized burying point configuration method provided in the embodiments of the present application comprises the following steps: a server acquires a plurality of page structure data sent by a plurality of historical clients, and generates a burying point configuration page corresponding to each page category based on the page structure data; further, the burying point properties of a DOM in each burying point configuration page are determined, and burying point configuration data corresponding to each DOM are formed based on the identifier of each DOM; finally, the server sends the burying point configuration data corresponding to the current page of the current client to the current client in response to the instruction of the current client, so that the current client performs burying point configuration on the current page according to the received burying point configuration data. The visualized burying point configuration method provided in the embodiments of the present application effectively reduces the workload and error rate of burying point configuration, improves the accuracy and integrity of burying point data, and is especially suitable for complex page scenarios such as thousands of people and thousands of faces, and frequent appearance of pop-up boxes, and has good technical effects and application prospects.

[0053] Please refer to Figure 4 , Figure 2 S102 in the foregoing embodiment can also be implemented through S201 to S202, which will be described in combination with the steps: S201, in the plurality of page structure data, N page structure data corresponding to each page category are determined; wherein N is an integer greater than 0.

[0054] In the embodiments of the present application, the page structure data can be derived from the browsing pages of different clients, the access conditions of different devices, or the page displays of different versions. The server classifies the page structure data according to the functional use or business type of the page, and forms N page structure data corresponding to each page category. For example, it can be divided into product detail pages, search result pages, shopping cart pages, etc. For each page category, the system selects N representative page structure data from all page structure data of the category for subsequent processing.

[0055] S202, based on the visual elements included in the N page structure data corresponding to each page category, the burying point configuration page corresponding to each page category is displayed; the visual elements include at least one of the DOM element basic information, the hierarchical and nested relationship, the style and class name information, the interaction and event binding, the visual tool extension information and the special element processing information corresponding to each DOM.

[0056] In this embodiment, visual elements refer to DOM nodes and their related attributes that can be identified and manipulated on the front-end page. Visual elements are typically represented in the form of visual JSON data, such as HTML tags (e.g., `div`, `p`, `button`), CSS styles, class names, IDs, etc. These elements constitute the basic structure and layout of the page and can reflect the user's operation path and behavior trajectory on the page. The server parses the DOM tree in each page structure data and extracts key visual element information. By extracting and integrating visual elements, the server can construct a complete page structure model and map this model to the event tracking configuration page. Users can intuitively see the position and attributes of each visual element on the event tracking configuration page and quickly configure event tracking rules by selecting elements, without having to manually write code.

[0057] The system provides the following information: basic DOM element information, such as element name (tag name) and unique identifier (ID); hierarchy and nesting relationships, where technical personnel describe the element's position in the DOM tree and its parent-child relationships; style and class name information, such as CSS class names and inline styles; interaction and event binding, such as click events and hover events; extended information provided by visualization tools, including whether drag-and-drop functionality is supported and whether users are allowed to edit elements; and information on how the system handles special elements, including: identifying and blocking pop-ups, locating and removing advertisements, and detecting and recording changes in dynamically loaded content.

[0058] In this embodiment, by introducing visual elements, the system can more flexibly adapt to various complex page structures, especially in scenarios such as personalized experiences and dynamic rendering, significantly improving the efficiency and accuracy of event tracking configuration. Furthermore, since these configurations are based on real production environment data, rather than mock data, it effectively avoids the problem of missed or incorrect event tracking caused by differences between the test and production environments.

[0059] Please see Figure 5 Client 1 and Client 2 display different pages. Both Client 1 and Client 2 can use clariy-js to collect page structure data and send it to the server. The server can display the event tracking configuration page based on the page structure data of the same category as Client 1's page. Configuration boxes can be displayed for each DOM element in the event tracking configuration page under commands, allowing users to configure event tracking attributes for each DOM element. Finally, DSL data (event tracking configuration data) for each page type is generated and sent to Client 1. Client 1 performs dynamic event tracking configuration using clariy-ai. Figure 5 The proposed solutions can be described in Table 1:

[0060] Table I See Figure 6 , Figure 2 S103 in the method 1000 can also be implemented through S301-S303, which will be described in combination with the steps: S301, in response to the configuration instruction for each of the DOMs in the page, display a configuration box for each of the DOMs; wherein the configuration box includes configuration items of multiple buried point attributes.

[0061] In the embodiment of the present application, when the user selects a DOM element in the buried point configuration page, the system receives the configuration instruction of the DOM element. According to the configuration instruction, a configuration box is popped up at the corresponding position, which is used to input or select the buried point attributes of the DOM element.

[0062] The configuration box is a visual interactive interface used to centrally display and edit configuration items of multiple buried point attributes. Each configuration item represents a possible buried point parameter, such as event type (click, exposure), trigger condition (whether to report repeatedly), additional parameter (custom field), etc. By integrating these configuration items into the configuration box, the user can complete the setting of multiple buried point attributes without leaving the current page, thereby improving the configuration efficiency and accuracy.

[0063] S302, obtain the buried point attributes configured by the user for each of the configuration items, and identify the interface components corresponding to part of the DOMs in the buried point configuration page.

[0064] In the embodiment of the present application, in the configuration box, the user can fill in the specific buried point attribute values according to the actual needs of each configuration item. The buried point attribute is a data field describing user behavior, such as event name, event type, trigger time, device information, etc. The system will read the buried point attributes input by the user in real time, and bind the buried point attributes with the corresponding DOM elements. The server will also automatically identify the interface components bound by part of the DOM elements in the page. The interface component refers to the module or control in the front-end page that communicates with the back-end service, such as API call triggered by button click, callback function after form submission, etc. Through the identification of the interface components, the system can further judge whether the operation of the DOM element has business significance and whether it is worth being buried and collected.

[0065] The server can accurately judge which elements need to be buried by identifying the interface components bound by the DOM, so that the system can reduce the risk of redundant configuration and missing burial, and further improve the accuracy and business relevance of the buried point data.

[0066] S303, forming the corresponding page category corresponding to the page configuration data based on the corresponding relationship between the plurality of the corresponding DOM attribute and the corresponding mark, and the interface component bound to part of the DOM in each page configuration page.

[0067] In the embodiments of the present application, after the above configuration and identification are completed, the system establishes a mapping relationship between the page configuration data of each DOM and the unique identifier of the DOM, and generates complete page configuration data in combination with the information of the system on whether the DOM is bound to the interface component.

[0068] Among them, based on the relationship between the DOM identifier, the page configuration data and the interface component, the system can generate structured page configuration data. The system can support flexible configuration of multiple pages and multiple scenarios. The system can reduce maintenance cost and improve the expansion capability of the page system.

[0069] In the embodiments of the present application, the system responds to the configuration instruction and displays the configuration box on the DOM, the system obtains the page configuration data and identifies the interface component, and the system finally forms the page configuration data according to the page category. Through the technical scheme of responding to the configuration instruction and displaying the configuration box on the DOM, obtaining the page configuration data and identifying the interface component, efficient visual page configuration can be realized, thereby improving the accuracy and flexibility of the page, and further significantly reducing the development and testing cost and improving the product iteration efficiency.

[0070] Please refer to S104 in Figure 7 , Figure 2 S104 can also be implemented by S401-S403, which will be described in combination with the steps: S401, receiving a configuration instruction sent by the current client for the current page of the current client, wherein the configuration instruction includes the current page identifier of the current page of the current client.

[0071] In the embodiments of the present application, the configuration instruction refers to a request instruction sent by the current client when displaying the current page to obtain the page configuration data corresponding to the current page of the current client. The configuration instruction usually contains the page identifier (Page ID).

[0072] S402, determining the corresponding page configuration data in the plurality of page configuration data based on the current page category of the current client determined by the current page identifier of the current client.

[0073] In the embodiments of the present application, the current page identifier of the current client can be used to determine the page category to which the current page of the current client belongs, such as the product detail page, the shopping cart page, the settlement page, etc. According to the current page category of the current client, the system can find the matching page configuration data in the preset page configuration data set.

[0074] S403, send the corresponding burying point configuration data to the current client for the current client to perform burying point configuration for the current page of the current client.

[0075] In the embodiment of the application, the server encapsulates the selected burying point configuration data into a structured data format (such as DSL) after completing the matching of the burying point configuration data and returns it to the current client. After receiving the burying point configuration data, the current client can dynamically add burying point attributes on the front-end page according to the content of the burying point configuration data, thereby realizing automatic collection of user behavior.

[0076] In the embodiment of the application, the current client triggers the sending of the configuration instruction when displaying the current page, the server identifies the current page category of the current client according to the current page identifier in the configuration instruction, matches the appropriate burying point configuration data from the burying point configuration data set, and returns the burying point configuration data to the current client for the current client to perform burying point operation on the front end. The above operation process realizes efficient communication and cooperation between the current client and the server, the above operation process ensures the real-time and accuracy of the burying point configuration, and the above operation process improves the overall efficiency of user behavior data collection.

[0077] The embodiment of the application provides a visual burying point configuration method, please refer to Figure 8 The flowchart of the visual burying point configuration method provided by the embodiment of the application Figure 5 Will be described in combination with Figure 9 The steps shown in the figure are as follows: S501, page structure data corresponding to the current page is collected; wherein the page structure data includes a visual element and an identifier of each DOM in the current page.

[0078] In the embodiment of the application, the page structure data refers to the page structure information constructed by the DOM tree in the current page. The collection of page structure data is usually realized through browser API, and MutationObserver is used to listen to DOM changes, thereby obtaining the latest page structure data in real time. The server can collect and obtain the page structure data for the initial first-screen snapshot and subsequent newly added DOM of the current page.

[0079] S502, the page structure data is sent to the server, so that the server displays the corresponding burying point configuration page based on the page structure data, determines the corresponding burying point attribute for each DOM in each burying point configuration page, and forms the corresponding burying point configuration data based on the identifier of each DOM.

[0080] In the embodiments of the present application, after the server receives the page structure data, it generates an interactive page configuration page according to the data. The user can select a specific DOM node in the current page through visual operation and set the page configuration data for the specific DOM node, thereby forming the page configuration data. Each piece of page configuration data is bound to a specific DOM identifier.

[0081] S503, when displaying the current page, sending an instruction to the server, receiving the page configuration data corresponding to the current page fed back by the server in response to the instruction, and performing page configuration based on the page configuration data.

[0082] In the embodiments of the present application, when the user accesses a certain current page, the current client sends a request to the server to obtain the page configuration data corresponding to the current page. The server matches the existing page configuration data according to the page structure data and returns the page configuration data. The client inserts the corresponding page configuration attribute of the page according to the received page configuration data.

[0083] Through the above steps, the client realizes a complete closed loop from page structure collection to page configuration data and data reporting. Compared with the traditional manual page configuration method, this scheme significantly reduces the labor cost and time cost, and improves the accuracy and coverage of the page configuration data. Especially in the face of complex scenes such as thousands of faces, A / B testing, etc., this scheme shows stronger adaptability and scalability.

[0084] Please refer to S501 in Figure 8 , Figure 10 S501 can also be implemented by S601-S603, which will be described in conjunction with the steps: S601, collecting a first screen snapshot when initializing the corresponding page.

[0085] In the embodiments of the present application, the first screen snapshot refers to the visible area content loaded and displayed for the first time in the current client after the user opens the corresponding page. The first screen snapshot usually includes the visible DOM elements in the page and the style information of the DOM elements. By generating the first screen snapshot after TTI and collecting the initial state data through the browser API, the structure information of the initial state of the page can be quickly obtained, and the method of generating the first screen snapshot after TTI and collecting the initial state data through the browser API can be used as the basis for subsequent structure analysis.

[0086] Among them, TTI is used to judge whether the page has completed the loading of the main interactive function, which is an important time point for generating the first screen snapshot. Generating the first screen snapshot after TTI can ensure that the main content of the page has been loaded, and can accurately reflect the actual browsing experience of the user.

[0087] In the embodiments of the present application, the current client can listen to the changes of the DOM through a browser API (such as MutationObserver), and perform a screenshot or data collection operation after the TTI is completed to obtain the initial state of the page. The above-mentioned method is suitable for H5 pages with more dynamic loading content, especially in personalized display scenarios such as thousands of people and thousands of faces, which helps to quickly establish the baseline structure of the page.

[0088] S602, based on the first screen snapshot, determine the first page structure data of the DOM in each floor in the corresponding page.

[0089] In the embodiments of the present application, the first page structure data is a structured description of the DOM elements in each floor in the corresponding page. The floor is a modular area divided according to the page layout, such as the header, navigation bar, main content area, bottom, etc. By identifying and classifying the DOM elements of each floor and constructing a structure map, fine modeling of the page structure can be achieved.

[0090] In the embodiments of the present application, the current client can automatically identify the floor boundary according to the actual layout of the corresponding page, and assist in judgment in combination with semantic labels (such as header, nav, main, footer) to improve the accuracy and readability of the structure data.

[0091] S603, during the display of the corresponding page, monitor the newly added DOM in the corresponding page and determine the second page structure data corresponding to the newly added DOM.

[0092] In the embodiments of the present application, the second page structure data refers to the structure information of the DOM elements dynamically added after the page is loaded. Since modern pages generally use asynchronous loading technology, the page content will be gradually loaded and updated with new content after the page is initialized. In order to be able to timely discover and record these new contents, the system needs to monitor the changes of the DOM in real time.

[0093] In the embodiments of the present application, the current client listens to the change event of the DOM tree through the MutationObserver API, and when detecting the newly added DOM, immediately collects the structure and style information of the newly added DOM node, and classifies the collected structure and style information into the structure data of the current page. The newly added DOM can include pop-up windows, advertising components, dynamic content blocks, etc., and the pop-up windows, advertising components, dynamic content blocks, etc. have an important role in user behavior analysis.

[0094] In the embodiments of the present application, the current client can trigger a page structure data update after each DOM change to ensure that the collected data is always consistent with the current state of the page.

[0095] In the embodiments of the present application, S602 to S603 can also be implemented by the steps in Figure 11 The steps will be described in combination: S11, sid+vid+pageld obtains page json data.

[0096] In the embodiments of the present application, the current client can obtain page json data through MutationObserver API. The exemplary json data can be as follows: { json: first-screen json data (visual tag data), MD5List: [(incremental dom uses) md5-1, md5-2, md5-3, md5-4, … ] } S12, listen to the new DOM.

[0097] In the embodiments of the present application, the current client can listen to whether the DOM is new through MutationObserver API.

[0098] S13, algorithm obtains visual json and performs MD5.

[0099] In the embodiments of the present application, the current client can determine the corresponding MD5 according to the new DOM through the algorithm. S14, compare whether it contains MD5 with the "page json data".

[0100] In the embodiments of the present application, the MD5 of the new DOM is compared with the MD5 in the JSON data of the initial page to confirm whether the MD5 of the new DOM is contained in the JSON data of the initial page. If it is contained, the data of the new DOM is discarded.

[0101] S15, MD5+ screen snapshot + page API data.

[0102] In the embodiments of the present application, if it is not contained, the page structure data is formed based on MD5+ screen snapshot + page API data and sent to the server.

[0103] S604, form the page structure data based on at least one of the first page structure data and the second page structure data.

[0104] In the embodiments of the present application, the page structure data is a complete structure representation formed by integrating the first page structure data and the second page structure data. The page structure data contains the static structure at the initialization of the page, and also contains the content structure loaded dynamically subsequently, and comprehensively reflects the final state of the page.

[0105] In the embodiments of the present application, the current client will take the first page structure data as the basic framework, and gradually merge the new DOM structure data, and finally generate a unified structure data set.

[0106] In the embodiments of the present application, there is a close cooperative relationship between the series of steps of collecting the first-screen snapshot, determining the first page structure data, monitoring and determining the second page structure data, and integrating to form the page structure data. First, by collecting the first-screen snapshot, a stable starting point is provided for subsequent structure analysis; then, by identifying and structuring the page floors, a relatively complete page structure model is constructed; subsequently, the dynamically loaded DOM structure is monitored and collected in real time to cope with the dynamic changes of the page content; finally, the static and dynamic structure data are integrated to form the final page structure data for use in the configuration of the point and the analysis of user behavior. The series of steps of collecting the first-screen snapshot, determining the first page structure data, monitoring and determining the second page structure data, and integrating to form the page structure data complement each other, and together constitute an efficient, stable and flexible page structure collection and analysis process.

[0107] In the embodiments of the present application, S602 can also be implemented by S6021-S6023, which will be described in conjunction with the steps: S6021, based on the first-screen snapshot, identifying the DOM in each floor of the current page and determining the first floor identifier of each floor.

[0108] In the embodiments of the present application, the first-screen snapshot refers to the visible area screenshot after the current client first loads and renders after the user opens the page. The generation of the first-screen snapshot usually occurs after the TTI, ensuring that the main content of the page has been loaded and can be interacted with. The first-screen snapshot is used to capture the page state first seen by the user, and is the basis for subsequent page structure analysis.

[0109] Among them, the floor refers to dividing the page into multiple logical modules according to the page layout, and each module contains a group of related DOM elements. The floor division can be based on visual height, scrolling area, component boundary, etc., and the purpose is to improve the readability and manageability of the page structure. By dividing the page into multiple floors, the page changes and the configuration of the point can be handled more efficiently.

[0110] The first floor identifier is a string or a numerical value that uniquely identifies each floor, which is used for subsequent data processing and comparison. The first floor identifier can be obtained by hashing (such as MD5) the combination of DOM elements in the floor. The first floor identifier ensures that different floors are not repeated and has good consistency and stability through hashing.

[0111] S6022, for each floor, determine the visual element corresponding to the DOM and the identifier.

[0112] In the embodiments of the present application, the visual element refers to an HTML tag with visible performance in the corresponding page, such as `div`, `span`, `button`, `img`, etc. The style, position and content of the visual element determine the actual display effect of the page. The identifier refers to the attribute value associated with the DOM element, such as `id`, `class`, `data-` attribute, etc. The attribute value associated with the DOM element is used to uniquely distinguish different DOM elements, facilitating subsequent tracking and operation. By extracting the identifier of the DOM, precise positioning and behavior tracking of specific elements can be achieved. The current client traverses the DOM elements in each floor, extracts the visual features and identifier information of the DOM elements, and establishes a mapping relationship. The process of traversing the DOM elements in each floor and extracting the visual features and identifier information of the DOM elements helps to build a structured data model of the page, and provides a basis for subsequent configuration and data analysis.

[0113] S6023, based on the first floor identifier of each floor, and the visual element and the identifier corresponding to the DOM in each floor, determine the first page structure data.

[0114] In the embodiments of the present application, the current client can generate complete first page structure data by integrating the information obtained in the previous two steps.

[0115] In the embodiments of the present application, by recognizing the floor structure based on the first screen snapshot, extracting the DOM elements and corresponding identifiers, and generating structured page data, the automatic parsing and modeling of the page structure are realized. Through this way, the efficiency and accuracy of page analysis can be improved, thereby reducing the cost of configuration and debugging of the point, and further supporting the personalized point needs of thousands of people.

[0116] In the embodiments of the present application, the method can further include: S701, based on at least one of the positioning feature information, the size coverage information, the mask layer information, the hierarchical information, the dialog box structure information and the semantic information of the DOM, determine the pop-up window recognition information corresponding to the DOM.

[0117] In the embodiments of the present application, multi-dimensional feature analysis is performed on the DOM elements in the page to determine whether the DOM elements are elements of the pop-up box type. These features include: Positioning feature information, including absolute positioning (absolute), fixed positioning (fixed), and other CSS attributes; Size coverage information is used to describe the following cases: for example, whether the width and height of the DOM element are close to the size of the viewport, or whether the DOM element covers most of the page content; Mask layer information: whether there is a semi-transparent or full-black background mask layer; Level information: whether the z-index value of the DOM element is high, indicating that the DOM element is located above other elements; Determine whether the current interface contains a common pop-up box component structure, for example, whether there is a close button, whether there is a title bar, etc. Semantic information: whether it belongs to a common UI library defined pop-up box class component, such as Bootstrap's modal, AntDesign's Modal component, etc.

[0118] By comprehensively analyzing the above features, the current client can generate a pop-up box recognition score for each DOM, thereby more accurately determining whether the DOM element is a pop-up box.

[0119] S702, determining whether the DOM is the pop-up box DOM based on the pop-up box recognition information.

[0120] In the embodiments of the present application, according to the pop-up box recognition information calculated in S701, the system sets a threshold (for example, a total score of 6 points or more), and if the recognition score of a certain DOM element reaches or exceeds the threshold, the DOM element is determined to be a pop-up box DOM. This mechanism can effectively reduce the misjudgment rate and avoid incorrect identification of ordinary page elements as pop-up boxes.

[0121] In the embodiments of the present application, the pop-up box recognition of the H5 page is identified from: positioning feature detection, size coverage detection, mask layer detection, level detection, detection of whether the dialog box structure meets the requirements (whether there is a close button, whether there is a head, title, etc.), semantic detection (common UI library features) process recognition and scoring, a full score of 10 points, and a score of 6 points can be identified as a pop-up box. As an important part of the H5 page, accurate identification of the pop-up box is very important for visualizing the point.

[0122] In the embodiments of the present application, whether the DOM is a pop-up box DOM is identified based on feature information in multiple dimensions. By identifying whether the DOM is a pop-up box DOM based on feature information in multiple dimensions, the accuracy and automation level of pop-up box identification can be improved, thereby reducing manual intervention and misjudgment, and further improving the intelligent level and use efficiency of the visual tracking system.

[0123] Please refer to Figure 8 , Figure 12 S503 in the embodiments of the present application can also be implemented by S5031-S5033, which will be described in combination with the steps: S5031, match the local identifier of each DOM in the current page with each identifier in the tracking configuration data to determine the tracking attribute corresponding to each DOM in the current page.

[0124] In the embodiments of the present application, the local identifier refers to a unique or non-unique attribute on the DOM node assigned by the front-end code, such as id, class, tag name, etc. These attributes are used to uniquely or relatively uniquely locate an element in the page. The tracking configuration data is structured configuration information issued from the server, usually stored in JSON format, which defines which DOM elements need to be tracked, tracking type (click, exposure, behavior, etc.), reporting parameters, etc. Each tracking configuration item also carries one or more identifier fields for matching DOM elements on the page. By matching the local identifier of the DOM with the identifier field in the tracking configuration data, the current client can accurately identify each DOM node that needs to be tracked on the page and assign the corresponding tracking attribute to the DOM node.

[0125] For example, in an e-commerce page, the DOM node of the product card has a specific class name product-card, and the tracking configuration data also defines product-card as one of the identifiers that need to be tracked. Therefore, the system will automatically identify the class name in the local identifier of the DOM node as the target DOM node and add click tracking to the DOM node.

[0126] S5032, based on the tracking attribute corresponding to each DOM in the current page and the interface component bound by part of the DOM in the tracking configuration data, perform tracking configuration on each DOM in the current page.

[0127] In the embodiments of the present application, the interface component refers to a function module encapsulated in front-end development, used to perform a point-in-time operation. The interface component can include an event listener, a data collector, a reporting function, etc. Each interface component can be customized and configured according to different point-in-time types (such as clicking, exposure, dwell time, etc.). After matching the DOM and the point-in-time attribute, the current client calls the corresponding interface component according to the point-in-time attribute, and binds the component to the corresponding DOM node. For example, if a DOM node is marked as a click point-in-time, the system binds the DOM node to a click-event-tracker component, and when the user clicks the DOM node, the click-event-tracker component triggers a point-in-time event and uploads the related data to the server.

[0128] In the embodiments of the present application, the local identifier of the DOM is intelligently matched with the identifier in the point-in-time configuration data, and the interface component is bound based on the matching result, thereby realizing automatic point-in-time configuration of the page element. This method can significantly reduce the cost of point-in-time development and testing, improve the accuracy of point-in-time data, and thus efficiently support multi-dimensional user behavior analysis, further optimizing product design and operation strategy.

[0129] In the embodiments of the present application, the method can further include: S801, when a subsequent page of the current page is displayed, determining a second floor identifier of each floor of the subsequent page based on the first-screen snapshot of the subsequent page.

[0130] In the embodiments of the present application, the current point-in-time configuration data includes a first floor identifier of each floor in the current page. The current client converts the stable structure after the first loading of the subsequent page into a visual JSON format, extracts the visual elements of each floor from the visual JSON format according to the floor division logic, and performs MD5 value calculation on the visual elements to finally generate the second floor identifier.

[0131] S802, if the second floor identifier of each floor in the subsequent page matches any first floor identifier in the point-in-time configuration data, the server is not sent the first page structure data corresponding to the subsequent page.

[0132] In the embodiments of the present application, when each second floor identifier of the subsequent page is the same as the existing first floor identifier in the point-in-time configuration data, it indicates that the system judges that the structure of the current floor is consistent with that of the previous page, and therefore the system does not need to upload the same structure data to the server again. The above mechanism can effectively reduce the transmission of redundant data, reduce the burden of the server, and improve the overall system efficiency.

[0133] In the embodiment of the application, by introducing the first floor identification mechanism, combining the first screen snapshot identification and MD5 comparison technology, the system realizes intelligent identification and deduplication processing of page structure. By introducing the first floor identification mechanism and combining the first screen snapshot identification and MD5 comparison technology, unnecessary page structure data reporting behavior can be significantly reduced, thereby reducing bandwidth consumption and server processing overhead, and further optimizing user experience and improving system overall performance.

[0134] Please refer to Figure 12 , Figure 13 The first screen snapshot page of the H5 page (page 1 to page 4) is used. The snapshot is used to take a snapshot of the page after TTI according to the network speed and page loading speed of different users. Then the snapshot data is converted into visual json data structure (div, h, class, id, etc.). Then the visual data is identified, the floor information is identified, the modules are divided according to the floor, and the MD5 of each floor is generated to generate a unique identifier, marked as A, B, C, D, etc. The combination of page 4 is composed of the floor information in page 1 and page 3 respectively. Therefore, the json data (here, the json data refers to the visual json data structure) does not need to be submitted to the server for page 4.

[0135] In the embodiment of the application, the generation and comparison of the first floor identification and the second floor identification realize intelligent deduplication operation of page structure data. This intelligent deduplication operation effectively reduces the redundant data transmission phenomenon, and at the same time, this intelligent deduplication operation also improves the overall performance of the system.

[0136] Please refer to Figure 6 The flowchart of the visualization point configuration method provided in the embodiment of the application Figure 13 Will be combined Figure 14 The steps shown will be described: S21, collect the json data of the first screen page.

[0137] In the embodiment of the application, the client can collect the json data of the first screen page of each page.

[0138] S22, clarity-js data 1 (snapshot json or new DOM json).

[0139] In the embodiment of the application, the client can listen to whether there is new DOM, and if there is new DOM, the json data of the new DOM can be obtained.

[0140] S23, clarity-js data 2 (page visualization json or new DOM visualization json).

[0141] In the embodiments of the present application, the json data of the new DOM can be converted into visualized json data.

[0142] S24, clarity-js data 3 (MD5 of the new DOM).

[0143] In the embodiments of the present application, the visualized json data of the new DOM can form a corresponding identifier (MD5) Please refer to Figure 14 , the interaction diagram of the visualized burying point configuration method provided in the embodiments of the present application will be described in combination with Figure 15 The steps shown will be described: S901, the server acquires a plurality of historical client respectively sent page structure data for corresponding pages; wherein the page structure data includes the visualized elements and identifier of each DOM in the corresponding page.

[0144] In the embodiments of the present application, the implementation steps of S901 can refer to S101, which will not be described one by one.

[0145] S902, the server displays a plurality of page categories respectively corresponding burying point configuration pages based on the page structure data.

[0146] In the embodiments of the present application, the implementation steps of S902 can refer to S102, which will not be described one by one.

[0147] S903, the server determines the corresponding burying point attribute for each DOM in each of the burying point configuration pages, and forms the corresponding burying point configuration data based on the identifier of each DOM.

[0148] In the embodiments of the present application, the implementation steps of S903 can refer to S103, which will not be described one by one.

[0149] S904, the server sends the burying point configuration data corresponding to the current page of the current client to the current client in response to the instruction of the current client, so that the client performs burying point configuration for the current page.

[0150] In the embodiments of the present application, the implementation steps of S904 can refer to S104, which will not be described one by one.

[0151] Please refer to Figure 1 , the structure diagram of the visualized burying point configuration device provided in the embodiments of the present application Figure 16 .

[0152] The embodiment of the application further provides a visualized burying point configuration device 600, applied to a server, comprising a data acquisition unit 601, a display unit 602, a configuration unit 603 and a first sending unit 604.

[0153] The data acquisition unit 601 is used for acquiring page structure data corresponding to a page respectively sent by a plurality of historical clients; wherein the page structure data comprises a visualized element and an identifier of each DOM in the corresponding page. The display unit 602 is used for displaying a burying point configuration page corresponding to each page category based on the page structure data. The configuration unit 603 is used for determining a burying point attribute corresponding to each DOM in each burying point configuration page, and forming burying point configuration data corresponding to each DOM based on the identifier. The first sending unit 604 is used for sending the burying point configuration data corresponding to a current page of a current client to the current client in response to an instruction of the current client, so that the client performs burying point configuration on the current page.

[0154] In the embodiment of the application, the display unit 602 in the visualized burying point configuration device 600 is used for determining N page structure data corresponding to each page category in the plurality of page structure data; wherein N is an integer greater than 0. Based on the visualized element included in the N page structure data corresponding to each page category, the burying point configuration page corresponding to each page category is displayed; the visualized element comprises at least one of DOM element basic information, a hierarchical and nested relationship, style and class name information, interaction and event binding, visualized tool extension information and special element processing information corresponding to each DOM.

[0155] In the embodiment of the application, the configuration unit 603 in the visualized burying point configuration device 600 is used for displaying a configuration box for each DOM in each burying point configuration page in response to the configuration instruction for each DOM; wherein the configuration box comprises a plurality of configuration items of burying point attributes. The burying point attribute configured by a user for each configuration item is acquired, and an interface component corresponding to part of the DOM in the burying point configuration page is identified. Based on the corresponding relationship between the plurality of burying point attributes corresponding to each DOM and the identifier, and the interface component bound for part of the DOM in each burying point configuration page, the burying point configuration data corresponding to each page category is formed.

[0156] In this embodiment of the application, the first sending unit 604 in the visual event tracking configuration device 600 is used to receive the configuration instruction sent by the current client for the current page, wherein the configuration instruction includes the current page identifier of the current page; Based on the current page category determined by the current page identifier, the corresponding tracking point configuration data is determined from multiple tracking point configuration data; Send the corresponding event tracking configuration data to the current client so that the current client can configure event tracking for the current page.

[0157] It should be noted that, in the embodiments of this application, if the above-described visual data tracking configuration method 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. Based on this understanding, the technical solution of the embodiments of this application, or the part that contributes to the related technology, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a visual data tracking configuration device (which may be a personal computer, etc.) to execute all or part of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, mobile hard drives, read-only memory (ROM), magnetic disks, or optical disks. Thus, the embodiments of this application are not limited to any specific hardware and software combination.

[0158] Correspondingly, embodiments of this application provide a computer-readable storage medium storing a computer program thereon, which, when executed by a first processor, implements the steps in the server-side method.

[0159] It should be noted that the descriptions of the storage medium and device embodiments above are similar to the descriptions of the method embodiments above, and have similar beneficial effects. For technical details not disclosed in the storage medium and device embodiments of this application, please refer to the descriptions of the method embodiments of this application for understanding.

[0160] It should be noted that, Figure 16 A hardware entity schematic diagram of the first electronic device provided in the embodiments of this application, such as... Figure 17 As shown, this application embodiment provides a first electronic device 700, including a first memory 702 and a first processor 701. The first memory 702 stores a computer program that can run on the first processor 701. When the first processor 701 executes the program, it implements the steps in the above-described method, wherein; The first processor 701 typically controls the overall operation of the first electronic device 700.

[0161] The first memory 702 is configured to store instructions and applications executable by the first processor 701, and can also cache data (for example, image data, audio data, voice communication data and video communication data) to be processed by the first processor 701 and modules in the first electronic device 700 and data that has been processed, which can be implemented by a FLASH or a Random Access Memory (RAM).

[0162] Correspondingly, the embodiment of the present application further provides a computer program product comprising a computer program, which can be executed by the first processor 701 of the first electronic device 700 to complete the steps in the method of the visualized trace point configuration device 600 side.

[0163] Please refer to Figure 2 The structure of the visualized trace point configuration device provided by the embodiment of the present application Figure 18 .

[0164] The embodiment of the present application further provides a visualized trace point configuration device 800 applied to a current client, comprising: a collection unit 801, a second sending unit 802 and a receiving unit 803.

[0165] The collection unit 801 is configured to collect page structure data of a corresponding page; wherein the page structure data comprises a visualized element and an identifier of each DOM in the corresponding page; The second sending unit 802 is configured to send the page structure data to a server, so that the server displays a corresponding trace point configuration page based on the page structure data, determines a corresponding trace point attribute for each DOM in each trace point configuration page, and forms corresponding trace point configuration data based on the identifier of each DOM. The receiving unit 803 is configured to send an instruction to the server when displaying a current page, receive the trace point configuration data corresponding to the current page fed back by the server in response to the instruction, and perform trace point configuration on the current page based on the trace point configuration data.

[0166] In the embodiment of the present application, the collection unit 801 in the visualized trace point configuration device 800 is configured to collect a first screen snapshot when a corresponding page is initialized; Based on the first screen snapshot, first page structure data of the DOM in each floor in the corresponding page is determined; During the display of the corresponding page, a new DOM in the corresponding page is monitored, and second page structure data corresponding to the new DOM is determined; Based on at least one of the first page structure data and the second page structure data, the page structure data is formed.

[0167] In the embodiment of the present application, the collection unit 801 in the visualized trace point configuration device 800 is configured to identify the DOM in each floor of the current page and determine the first floor identifier of each floor based on the first-screen snapshot. For the DOM in each floor, the visualized element corresponding to the DOM and the identifier are determined. Based on the first floor identifier of each floor and the visualized element corresponding to the DOM in each floor and the identifier, the first page structure data is determined. In the embodiment of the present application, the collection unit 801 in the visualized trace point configuration device 800 is configured to determine the pop-up box identification information corresponding to the DOM based on at least one of the positioning feature information, the size coverage information, the mask layer information, the hierarchical information, the dialog box structure information and the semantic information of the DOM. Based on the pop-up box identification information, it is determined whether the DOM is the pop-up box DOM.

[0168] In the embodiment of the present application, the receiving unit 803 in the visualized trace point configuration device 800 is configured to match the local identifier of each DOM in the current page with each identifier in the trace point configuration data, and determine the trace point attribute corresponding to each DOM in the current page. Based on the trace point attribute corresponding to each DOM in the current page and the interface component bound to the DOM identification in the trace point configuration data, the trace point configuration is performed on each DOM in the current page.

[0169] In the embodiment of the present application, the receiving unit 803 in the visualized trace point configuration device 800 is configured to determine the second floor identifier of each floor of the subsequent page based on the first-screen snapshot of the subsequent page when the subsequent page of the current page is displayed. If the second floor identifier of each floor in the subsequent page matches any first floor identifier in the trace point configuration data, the server is not sent the first page structure data corresponding to the subsequent page.

[0170] Correspondingly, the present application provides a computer readable storage medium having a computer program stored thereon, and the computer program is executed by a second processor to implement the steps in the method on the client side.

[0171] It should be noted that the description of the above storage medium and device embodiments is similar to the description of the above method embodiments, and has similar beneficial effects as the method embodiments. For technical details not disclosed in the storage medium and device embodiments of the present application, please refer to the description of the method embodiments of the present application.

[0172] It should be noted that, Figure 18 A hardware entity diagram of a second electronic device provided by the embodiment of the present application is shown in ​ The embodiment of the present application provides a second electronic device 900, which comprises a second memory 902 and a second processor 901, the second memory 902 stores a computer program capable of running on the second processor 901, and the second processor 901 implements the steps in the above method when executing the program, wherein; The second processor 901 generally controls the overall operation of the second electronic device 900.

[0173] The second memory 902 is configured to store instructions and applications executable by the second processor 901, and can also cache data (for example, image data, audio data, voice communication data and video communication data) to be processed by the second processor 901 and each module in the second electronic device 900 and data that has been processed, which can be realized by FLASH or RAM.

[0174] Correspondingly, the embodiment of the present application also provides a computer program product, which comprises a computer program executable by the second processor 901 of the second electronic device 900 to complete the steps in the method on the visual buried point configuration device 800 side.

[0175] It should be understood that the "one embodiment" or "an embodiment" mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, "in one embodiment" or "in an embodiment" appearing throughout the specification does not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in various embodiments of the present application, the size of the sequence number of each process does not mean the execution order, and the execution order of each process should be determined according to its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiment of the present application. The sequence number of the above embodiment of the present application is only for description, not representing the advantages and disadvantages of the embodiment.

[0176] It should be noted that in this paper, the term "include", "contain" or any other variant thereof is intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or includes elements inherent to such process, method, article or device. Without more limitations, the element defined by the sentence "including a…" does not exclude the presence of other identical elements in the process, method, article or device including the element.

[0177] In several embodiments provided in the present application, it should be understood that the disclosed apparatus and method can be implemented by other manners. The apparatus embodiments described above are merely illustrative, for example, the division of the units is merely a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the displayed or discussed components can be indirect coupling or communication connection through some interfaces, apparatuses or units, which can be electrical, mechanical or other forms.

[0178] The units described above as separate components can or can not be physically separate, and the components shown as units can or can not be physical units; they can be located in one place or distributed on a plurality of network units; and part or all of the units can be selected according to actual needs to achieve the purpose of the embodiment.

[0179] In addition, each functional unit in each embodiment of the present application can be integrated into one processing unit, or each unit can be a separate unit, or two or more units can be integrated into one unit; the integrated unit can be realized in the form of hardware or hardware plus software functional unit.

[0180] Those of ordinary skill in the art can understand that all or part of the steps of the above-mentioned method embodiments can be completed by program instruction-related hardware, and the foregoing program can be stored in a computer readable storage medium, and the program executes the steps including the above-mentioned method embodiments when executed; and the foregoing storage medium includes mobile storage devices, read-only memories (Read Only Memory, ROM), magnetic discs or optical discs and various storage medium that can store program codes.

[0181] Alternatively, the integrated units of the present application, if implemented in the form of software functional modules and sold or used as independent products, can also be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the embodiments of the present application can be embodied in the form of software products, and the computer software products are stored in a storage medium, including a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in the embodiments of the present application. The foregoing storage medium includes mobile storage devices, ROM, magnetic discs or optical discs and various storage medium that can store program codes.

[0182] The above merely provides the implementation of the present application, but the protection scope of the present application is not limited thereto, any person skilled in the art can easily think of the change or replacement within the technical range disclosed by the present application, which should be covered in the protection scope of the present application.

Claims

1. A method for configuring visual tracking points, characterized in that, Applied to servers, including: Obtain page structure data for a corresponding page sent by multiple historical clients; wherein, the page structure data includes the visual elements and identifiers of each DOM element in the corresponding page; Based on the page structure, data displays the tracking point configuration pages corresponding to multiple page categories; For each DOM in each of the aforementioned event tracking configuration pages, the corresponding event tracking attributes are determined, and corresponding event tracking configuration data is formed based on the identifier of each of the aforementioned DOMs; In response to the instructions of the current client, the event tracking configuration data corresponding to the current page of the current client is sent to the current client so that the client can configure event tracking for the current page.

2. The visual embedding configuration method according to claim 1, characterized in that, The data display based on the page structure shows the event tracking configuration pages corresponding to multiple categories of pages, including: Among the multiple page structure data, N page structure data corresponding to each page category are determined; where N is an integer greater than 0. Based on the visualization elements included in the N page structure data corresponding to each page category, the tracking configuration page corresponding to each page category is displayed; the visualization elements include at least one of the following: basic DOM element information, hierarchy and nesting relationship, style and class name information, interaction and event binding, visualization tool extended information, and special element processing information corresponding to each DOM.

3. The visual embedding configuration method according to claim 1, characterized in that, The step of determining the corresponding tracking attribute for each DOM in each tracking configuration page, and forming corresponding tracking configuration data based on the identifier of each DOM, includes: In response to the configuration instruction for each DOM in each of the aforementioned event tracking configuration pages, a configuration box for each of the aforementioned DOMs is displayed; wherein the configuration box includes configuration items for multiple event tracking attributes; Obtain the tracking attributes configured by the user for each of the aforementioned configuration items, and identify the interface components corresponding to a portion of the DOM in the tracking configuration page; Based on the correspondence between the multiple tracking attributes and the corresponding identifiers for each DOM, and the interface components bound to the DOM identification in each tracking configuration page, tracking configuration data corresponding to each page category is formed.

4. The visual embedding configuration method according to any one of claims 1 to 3, characterized in that, The step of responding to the current client's instruction by sending the event tracking configuration data corresponding to the current page of the current client to the current client, so that the client can configure event tracking for the current page, includes: Receive the configuration instruction sent by the current client for the current page, wherein the configuration instruction includes the current page identifier of the current page; Based on the current page category determined by the current page identifier, the corresponding tracking point configuration data is determined from multiple tracking point configuration data; Send the corresponding event tracking configuration data to the current client so that the current client can configure event tracking for the current page.

5. A method for configuring visual tracking points, characterized in that, Applied to the current client, including: Collect page structure data for the corresponding page; wherein, the page structure data includes the visual elements and identifiers of each DOM element in the corresponding page; The page structure data is sent to the server, which displays the corresponding tracking configuration page based on the page structure data, determines the corresponding tracking attributes for each DOM in each tracking configuration page, and forms the corresponding tracking configuration data based on the identifier of each DOM. When the current page is displayed, an instruction is sent to the server, and the tracking point configuration data corresponding to the current page is received from the server in response to the instruction. Tracking points are then configured for the current page based on the tracking point configuration data.

6. The visual embedding configuration method according to claim 5, characterized in that, The collection of page structure data for the corresponding page includes: Take a snapshot of the first screen when the corresponding page is initialized; Based on the first screen snapshot, determine the first page structure data of the DOM in each floor of the corresponding page; During the display of the corresponding page, a new DOM is detected in the corresponding page, and the second page structure data corresponding to the new DOM is determined; The page structure data is formed based on at least one of the first page structure data and the second page structure data.

7. The visual data embedding method according to claim 6, characterized in that, The step of determining the first page structure data of the DOM in each floor of the corresponding page based on the first screen snapshot includes: Based on the first screen snapshot, identify the DOM within each floor of the current page and determine the first floor identifier for each floor; For each floor's DOM, determine the corresponding visual element and its identifier; The first page structure data is determined based on the first floor identifier of each floor, the visual elements corresponding to the DOM within each floor, and the identifiers.

8. The visual embedding configuration method according to claim 6, characterized in that, The DOM includes: The method also includes: Based on at least one of the following: DOM positioning feature information, size coverage information, mask layer information, hierarchy information, dialog box structure information, and semantic information, determine the pop-up recognition information corresponding to the DOM; Based on the pop-up recognition information, determine whether the DOM is the pop-up DOM.

9. The visual embedding configuration method according to any one of claims 5 to 8, characterized in that, The step of configuring event tracking on the current page based on the current event tracking configuration data includes: The local identifier of each DOM in the current page is matched with each identifier in the tracking configuration data to determine the tracking attribute corresponding to each DOM in the current page; Based on the tracking attributes corresponding to each DOM in the current page, and the interface components bound to the DOM in the tracking configuration data, tracking points are configured for each DOM in the current page.

10. The visual embedding configuration method according to claim 9, characterized in that, The current data configuration for tracking points includes: the first floor identifier of each floor in the current page; the method further includes: When displaying subsequent pages of the current page, the second floor identifier of each floor of the subsequent page is determined based on the first screen snapshot of the subsequent page; If the second floor identifier of each floor in the subsequent page matches any of the first floor identifiers in the tracking configuration data, then the server will not send the first page structure data corresponding to the subsequent page.

11. A visual embedding configuration device, characterized in that, Applied to servers, including: The data acquisition unit is used to acquire page structure data for a corresponding page sent by multiple historical clients respectively; wherein, the page structure data includes the visual elements and identifiers of each DOM in the corresponding page; The display unit is used to display the tracking configuration pages corresponding to multiple page categories based on the page structure. The configuration unit is used to determine the corresponding tracking attributes for each DOM in each tracking configuration page, and to form corresponding tracking configuration data based on the identifier of each DOM. The first sending unit is used to respond to the instruction of the current client and send the event tracking configuration data corresponding to the current page of the current client to the current client, so that the client can perform event tracking configuration for the current page.

12. A visual embedding configuration device, characterized in that, Applied to the current client, including: The acquisition unit is used to acquire page structure data of the corresponding page; wherein, the page structure data includes the visual elements and identifiers of each DOM in the corresponding page; The second sending unit is used to send the page structure data to the server, so that the server can display the corresponding tracking configuration page based on the page structure data, determine the corresponding tracking attributes for each DOM in each tracking configuration page, and form corresponding tracking configuration data based on the identifier of each DOM. The receiving unit is configured to send an instruction to the server when displaying the current page, receive the tracking configuration data corresponding to the current page in response to the instruction from the server, and configure tracking points for the current page based on the tracking configuration data.

13. An electronic device, characterized in that, The method includes a memory and a processor, the memory storing a computer program that can run on the processor, the processor executing the computer program to implement the steps of the method according to any one of claims 1 to 4, or to implement the steps of the method according to any one of claims 5 to 10.

14. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 4, or the steps of the method according to any one of claims 5 to 10.

15. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 4, or the steps of the method according to any one of claims 5 to 10.

Images