Visual point burying method and device, electronic equipment and storage medium
By using a visual tracking method, the tracking operation is simplified, supporting tracking settings for both static and dynamic page elements. This solves the problems of tedious and time-consuming operations caused by manually writing code, and improves the adaptability and efficiency of tracking.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- TENCENT TECHNOLOGY (SHENZHEN) CO LTD
- Filing Date
- 2024-10-28
- Publication Date
- 2026-04-28
AI Technical Summary
In existing technologies, the tracking code needs to be written manually and redeveloped every time the application is updated. This is cumbersome, time-consuming, and technically demanding, making it difficult to popularize.
This paper provides a visual tracking method that displays the tracking operation page of the target page, receives trigger operations, displays and sets the tracking area, and generates tracking information without the need for manual coding.
It simplifies the data tracking operation, reduces the technical difficulty, improves the adaptability and efficiency of the data tracking method, and supports data tracking settings for both static and dynamic page elements.
Smart Images

Figure CN121935112A_ABST
Abstract
Description
Technical Field
[0001] This application belongs to the field of computer technology and may relate to data processing, data tracking technology, etc. Specifically, this application relates to a visualization data tracking method, device, electronic device and storage medium. Background Technology
[0002] Data tracking is a common method for websites, applications, and other products to collect data. By adding tracking points to websites and applications, users' behavior on the page can be obtained. Analyzing this behavior helps technical personnel understand user behavior and page performance, thereby enabling business improvements and enhancing user experience.
[0003] In related technologies, technicians typically need to manually add specific tracking code snippets to the application's page code to implement tracking. When the user executes a corresponding event, the corresponding tracking code snippet is run to collect and report data.
[0004] However, the above solution requires technicians to manually write the tracking code snippets, and each application update requires redevelopment and relaunch, which is cumbersome, time-consuming, and requires highly skilled technicians, making it difficult to popularize. Summary of the Invention
[0005] The purpose of this application is to provide a visual tracking method, apparatus, electronic device, and storage medium that can effectively improve the adaptability of tracking technology. To achieve this purpose, the technical solutions provided by this application are as follows: On the one hand, embodiments of this application provide a visual tracking method, the method comprising: The event tracking operation page of the target page is displayed; the event tracking operation page includes each page element of the target page, wherein at least one of the page elements is associated with a corresponding event tracking trigger area. Receive the first trigger operation for the tracking trigger area associated with any page element; When any of the page elements is a static page element, in response to the first triggering operation, the tracking point setting area of the target element is displayed, wherein the target element is any of the page elements; When any page element is a dynamic page element, in response to the first triggering operation, at least one associated page element of the page element is displayed, and in response to the tracking triggering operation for the first element among the candidate elements, the tracking setting area of the target element is displayed, wherein the target element is the first element, and each candidate element includes the page element and the at least one associated page element. The embedding point setting area receives embedding point setting operations for the target element.
[0006] On the other hand, embodiments of this application also provide a visualization tracking device, including: The first display module is used to display the tracking operation page of the target page; the tracking operation page includes each page element of the target page, wherein at least one of the page elements is associated with a corresponding tracking trigger area; The operation triggering module is used to receive the first trigger operation for the tracking trigger area associated with any page element; An element display module is configured to, when any page element is a static page element, display the tracking point setting area of a target element in response to the first trigger operation, wherein the target element is the any page element; when any page element is a dynamic page element, display at least one associated page element of the any page element in response to the first trigger operation; and display the tracking point setting area of the target element in response to a tracking point trigger operation for the first element among the candidate elements, wherein the target element is the first element, and each candidate element includes the any page element and the at least one associated page element. The tracking point setting module is used to receive tracking point setting operations for the target element through the tracking point setting area.
[0007] Optionally, the element display module can be used for: In response to the first triggering operation, display the tracking operation control of any of the page elements; In response to a second trigger operation on the tracking point operation control, the tracking point setting area of the target element is displayed.
[0008] Optionally, the element display module can be used for: In response to the first triggering operation, the tracking operation control of any page element, at least one associated page element of any page element, and tracking operation controls of each second element are displayed; wherein, each second element is at least one page element among the at least one associated page element; In response to a third trigger operation of the tracking operation control for the first element among the candidate elements, the tracking setting area of the target element is displayed; wherein the target element is the first element, and the candidate elements include the any page element and the second elements; the tracking trigger operation for the first element includes a third trigger operation for the tracking operation control for the first element.
[0009] Optionally, the element display module can be used for: In response to the first triggering operation, display the tracking operation control of any of the page elements; In response to a fourth trigger operation for any of the page elements, at least one associated page element of the page element is displayed; wherein the fourth trigger operation is used to trigger the display of the associated page elements, and each of the second elements is associated with a corresponding tracking point trigger area; In response to a fifth trigger operation for the tracking trigger area of any second element, the tracking operation control for the second element is displayed.
[0010] Optionally, the event tracking operation page also displays an event tracking management entry; The visualization tracking device also includes a tracking management module, which can be used for: In response to the sixth trigger operation for the event tracking management entry, the event tracking management panel corresponding to the target page is displayed. The event tracking management panel includes at least one of the event tracking information management area or the event tracking statistics information viewing area. The event tracking information management area is used to manage event tracking information related to the target page, and the event tracking statistics viewing area is used to view event tracking statistics of the target page.
[0011] Optionally, the event tracking management panel includes a first control and a second control. The first control is used to control the display of the event tracking information management area, and the second control is used to control the display of the event tracking statistics viewing area. The event tracking management module can also be used for: In response to the seventh trigger operation for the second control, the tracking point statistics viewing area is displayed in the tracking point management panel; In response to the eighth trigger operation for the first control, the tracking information management area is displayed in the tracking management panel.
[0012] Optionally, the tracking information management area displays at least one of the following: Tracking information for page elements that have been tracked; The event type setting area of the target page is used to set the event type of each page element in the target page. The display style setting area for embedded page elements is used to set the display style of embedded page elements; An editing area for the tracking information of page elements that have been tracked, wherein the tracking information editing area is used to modify the tracking information of the page elements that have been tracked; The area for setting viewing conditions for embedded information is used to set the filtering conditions for viewing embedded information. The data tracking information viewing area displays at least one of the following: The indicator value of the first tracking point statistical indicator of the target page; The area for setting viewing conditions for tracking point statistics is used to set the viewing conditions for tracking point statistics.
[0013] Optionally, the event tracking management module can also be used for: The target page displays the tracking statistics indicator viewing page; the tracking statistics indicator viewing page displays the indicator values of the second tracking statistics indicator of the page elements that have been tracked on the target page, and the second tracking statistics indicator reflects the popularity of the page elements.
[0014] Optionally, if the page element with the event tracking is a dynamic page element, the event tracking management module can also be used for: On the event tracking statistics viewing page, in response to the ninth trigger operation for the page element, at least one associated element of the page element and the index value of the second event tracking statistics of the at least one associated element are displayed; wherein, the ninth trigger operation is used to trigger the display of the index value of the second event tracking statistics of the associated page elements of the page element.
[0015] Optionally, the first display module can be used to perform any of the following: Receive an open operation for the target page, and in response to the target page being logged in with an account that has data tracking management permissions, display the data tracking operation page of the target page; Receive an operation to open a page. If the page link address on which the page opening operation is based includes the page link address of the target page and specified characters, display the tracking operation page of the target page.
[0016] Optionally, the first display module can be used for: The event tracking page of the target page is displayed. Page elements with event tracking are displayed using the first style, while page elements without event tracking are displayed using the second style. For at least one page element in the event tracking operation page, a style corresponding to its respective event tracking status is used for display; wherein, the event tracking status is either an event tracking status or an event tracking status.
[0017] Optionally, the status of the embedded points includes either having embedded points set and published, or having embedded points set but not published. The "no tracking" status includes either no tracking settings being set or tracking settings being set but subsequently deleted.
[0018] Optionally, the first display module can be used for: If the target page is accessed by an account with tracking management privileges, or if the page link address on which the page opening operation is based includes the page link address of the target page and specified characters, the visual tracking function code is run to display the tracking operation page of the target page.
[0019] Optionally, the element display module can also be used for: In response to the first triggering operation, the element identifier of any of the page elements is displayed; The element identifier of any page element is determined in the following way: Determine the multiple depth levels corresponding to the page element, and the parent element corresponding to the page element at each depth level; For each depth level, determine the unique level identifier of the parent element of the page element at that depth level; Based on the parent element corresponding to the page element at each depth level, and the unique level identifier at each depth level, the global link identifier of the page element is obtained. The element identifier of the page element is determined based on its global link identifier.
[0020] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the method provided in any optional embodiment of this application.
[0021] On the other hand, embodiments of this application also provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method provided in any optional embodiment of this application.
[0022] On the other hand, embodiments of this application also provide a computer program product, which includes a computer program that, when executed by a processor, implements the methods provided in any optional embodiment of this application.
[0023] The beneficial effects of the technical solution provided in this application are as follows: The visual event tracking method provided in this application allows for easy event tracking settings on page elements on a target page by simply triggering the element to be tracked. This displays the event tracking setting area for the corresponding page element, enabling event tracking to be set for that element. Furthermore, when the page element is dynamic, it also displays the event tracking setting areas for its related elements, allowing for event tracking on those related elements. This visual event tracking method facilitates convenient event tracking settings for page elements or their related elements without requiring technicians to manually write event tracking code, reducing the difficulty of event tracking and improving its adaptability. Attached Figure Description
[0024] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below.
[0025] Figure 1 A schematic diagram of the implementation environment deployed for the visualization-based data tracking method provided in this application embodiment; Figure 2 A flowchart illustrating a visual data tracking method provided in this application embodiment; Figure 3 This is a flowchart for dynamic detection of page elements provided in an embodiment of this application; Figure 4 A schematic diagram of the page element hierarchy provided in an embodiment of this application; Figure 5 This is a flowchart of the algorithm for calculating the element identifier eid provided in an embodiment of this application; Figure 6 A schematic diagram of the tracking operation page on the homepage of the tracking platform provided in this application embodiment; Figure 7 A schematic diagram of the data tracking management panel provided in this application embodiment; Figure 8 A schematic diagram of the content page of the platform to be tracked, provided in an embodiment of this application; Figure 9a This is a schematic diagram illustrating the pop-up window display under the click event type provided in an embodiment of this application; Figure 9b This is a schematic diagram illustrating the pop-up display under click event type and exposure event type provided in the embodiments of this application; Figure 10a This is a schematic diagram illustrating the triggering of event tracking for dynamic page elements, provided in an embodiment of this application. Figure 10b This is a schematic diagram illustrating the triggering of tracking points for associated page elements of dynamic page elements, provided in an embodiment of this application. Figure 11A schematic diagram of the target page with embedded tracking points provided in the embodiments of this application; Figure 12 A schematic diagram of the interface for viewing the tracking statistics provided in this application embodiment; Figure 13 A flowchart illustrating the visualization of the data embedding technique provided in this application embodiment; Figure 14 A schematic diagram illustrating the process of reporting embedded data in an embodiment of this application; Figure 15 A flowchart illustrating the statistical data analysis provided in the embodiments of this application; Figure 16 This is a schematic diagram of the structure of a visualization tracking device provided in an embodiment of this application; Figure 17 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation
[0026] The embodiments of this application are described below with reference to the accompanying drawings. It should be understood that the embodiments described below with reference to the accompanying drawings are exemplary descriptions for explaining the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions of the embodiments of this application.
[0027] Those skilled in the art will understand that, unless specifically stated otherwise, the singular forms “a,” “an,” “the,” and “the” used herein may also include the plural forms. It should be further understood that the terms “comprising” and “including” as used in embodiments of this application mean that the corresponding feature can be implemented as the presented feature, information, data, step, operation, element, and / or component, but do not exclude implementation as other features, information, data, step, operation, element, component, and / or combinations thereof supported by the art. It should be understood that when we say that an element is “connected” or “coupled” to another element, the one element can be directly connected or coupled to the other element, or it can mean that the one element and the other element establish a connection relationship through an intermediate element. Furthermore, “connected” or “coupled” as used herein can include wireless connection or wireless coupling. The term “and / or” as used herein indicates at least one of the items defined by the term; for example, “A and / or B” can be implemented as “A,” or as “B,” or as “A and B.” When describing multiple (two or more) items, if the relationship between the multiple items is not explicitly defined, the relationship between the multiple items can refer to one, several or all of the multiple items. For example, the description of "parameter A includes A1, A2, A3" can be implemented as parameter A includes A1 or A2 or A3, or it can be implemented as parameter A includes at least two of the three items A1, A2 and A3.
[0028] It should be noted that, in the optional embodiments of this application, the data related to object information (such as user operation data on the page) requires the permission or consent of the object when the embodiments of this application are applied to specific products or technologies. Furthermore, the collection, use, and processing of the relevant data must comply with the relevant laws, regulations, and standards of the relevant countries and regions. In other words, if the embodiments of this application involve data related to an object, it must be obtained with the object's authorization and consent, the authorization and consent of relevant departments, and in accordance with the relevant laws, regulations, and standards of the country and region. If the embodiments involve personal information, the acquisition of all personal information requires the individual's consent. If sensitive information is involved, the separate consent of the information subject is required. The embodiments also need to be implemented with the object's authorization and consent.
[0029] To better understand and explain the methods provided in the embodiments of this application, some technical terms involved in the embodiments of this application will be explained and described below.
[0030] Static page elements (also known as static components or fixed components): The content or function of these components is directly visible and requires no additional action from the user.
[0031] Dynamic page elements (also known as dynamic components or interactive components): These page elements require additional user actions (such as clicking, hovering, etc.) to display their full content or functionality.
[0032] MutationObserver: A tool used to detect changes in DOM (Document Object Model) elements on a webpage.
[0033] IntersectionObserver: A tool used to detect the intersection of elements with the viewport (the part of a webpage currently visible to the user).
[0034] Content-Security-Policy (CSP) is a network security mechanism used to prevent cross-site scripting (XSS) and other code injection attacks. By setting HTTP headers, websites can specify which resources (such as scripts, styles, images, etc.) can be loaded and executed, thereby limiting potentially malicious content.
[0035] iframe technology: a method of embedding other web pages or documents within a web page. It is a feature of HTML (Hypertext Markup Language) that allows a web page to be embedded within a rectangular frame of another web page.
[0036] Tracking: A technique that inserts logging code into front-end code or web pages to collect and record data of target objects on a website or application.
[0037] Xpth: A language for locating and selecting nodes in XML documents, which also supports HTML parsing. In this embodiment, it is used to locate and select elements in HTML documents.
[0038] Shadow DOM (Document Object Model): A web standard technology for creating encapsulated and isolated components. It allows developers to create DOM subtrees with independent scopes, which can be managed separately from the main document's DOM tree.
[0039] The visual event tracking method provided in this application can be applied to scenarios involving the development, management, or maintenance of web pages or applications. For example, after a web page is developed, if it is necessary to collect user operation data for analysis, the visual event tracking method provided in this application can be used. In the event tracking operation page of the web page, event tracking settings are configured for each page element to be analyzed, generating event tracking configuration information for the web page. This configuration information is then deployed to a server. When a user accesses the web page through a terminal, web page data and the corresponding event tracking configuration information are retrieved from the server. When a page element triggered by the user matches a page element tracked in the event tracking configuration information, the user's operation data is collected and reported to the server. Using the visual event tracking method provided in this application, visual event tracking can be performed on static page elements, dynamic page elements, and their associated page elements, eliminating the need for technicians to manually write event tracking code, making web page event tracking simpler and more flexible.
[0040] For example, after the event tracking is completed, if it is necessary to modify the event tracking information of a certain page element, the event tracking operation page of the webpage can be used to accurately locate the page element and modify the event tracking information of the page element, thereby updating the event tracking configuration information of the webpage. This eliminates the need to manually search for and modify the event tracking code of the corresponding element in the webpage code, improving update efficiency and reducing update costs.
[0041] Figure 1 This is a schematic diagram of an implementation environment provided in an embodiment of this application. The implementation environment includes a server 10 and at least one first terminal 20. Figure 1 One is shown in the figure) and at least one second terminal 30 ( Figure 1 (As shown in the figure), the first terminal 20 and the server 10, and the second terminal 30 and the server 10 can communicate with each other via wired or wireless means.
[0042] In this embodiment of the application, the first terminal 20 is equipped with a software development kit (SDK) with visual tracking function. When the target page is opened by running the visual tracking SDK, the tracking operation interface of the target page can be displayed. The tracking operation interface includes each page element in the target page. Some page elements that can be tracked are associated with corresponding tracking trigger areas to trigger the tracking of the page elements.
[0043] When tracking is performed on a static page element on the target page, the tracking trigger area of the static page element is triggered, the tracking setting area of the static page element is displayed, and the tracking setting operation for the static page element is received through the tracking setting area, generating the tracking information of the static page element.
[0044] When tracking is performed on a dynamic page element or its associated page element on the target page, the tracking trigger area of the dynamic page element is triggered, and the associated page elements of the dynamic page element are displayed. When tracking is triggered on the dynamic page element or its associated page element, the tracking setting area of the corresponding page element is displayed. Tracking setting operations for the corresponding page element are received through the tracking setting area, and tracking information for the corresponding page element is generated.
[0045] Based on the tracking information of each page element in the target page that has been tracked, the tracking configuration information of the target page is obtained, and the tracking configuration information of the target page is uploaded to the server 10 through the first terminal 20, wherein the server 10 is the backend server corresponding to the target page.
[0046] When the second terminal 30 requests access to the target page, it can send an access request containing the page identifier of the target page to the server 10. The server 10 can then return the page data of the target page and the event tracking configuration information to the second terminal 30 based on the page identifier in the access request. When a page element triggered by the user on the target page displayed on the second terminal 30 matches a page element tracked in the event tracking configuration information, the user's operation data on that page element is collected and uploaded to the server 10.
[0047] Optionally, after receiving the user operation data reported by each of the second terminals 30, the server 10 can also send the received user operation data from each of the second terminals 30 to the first terminal 20, so that the first terminal 20 can perform data tracking analysis on the target page and display the data tracking statistics of each page element that has been tracked on the target page.
[0048] The aforementioned servers can be independent physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers that provide basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. Terminals can be smartphones, tablets, laptops, desktop computers, smart voice interaction devices (such as smart speakers), wearable electronic devices (such as smartwatches), in-vehicle terminals, smart home appliances (such as smart TVs), AR / VR devices, etc., but are not limited to these.
[0049] The technical solutions of this application and their effects are described below through several embodiments. It should be noted that the following embodiments can be referenced, borrowed from, or combined with each other. Identical terms, similar features, and similar implementation steps in different embodiments will not be repeated.
[0050] This application provides a visual tracking method, which can be executed by a terminal, for example, by... Figure 1 The first terminal in the process is executed.
[0051] The visual data tracking method provided in the embodiments of this application is described in detail below. See also... Figure 2 , Figure 2 This is a flowchart illustrating the visualization tracking method provided in this application embodiment. The method may include the following steps S110-S150, wherein: Step S110: Display the event tracking page of the target page.
[0052] The target page can be any webpage to be tracked, or any page within an application to be tracked. The application to be tracked can be a program that needs to be installed on the operating system to run, such as a client; it can also be a mini-program, i.e., a program that only needs to be downloaded to a browser environment to run; or it can be a mini-program that can be embedded into any application (APP). This application embodiment does not impose specific restrictions on the application to be tracked or the target page. The tracking operation page includes various target elements within the target page. At least one page element among the target elements can be tracked. The page element that can be tracked is associated with a corresponding tracking trigger area. The tracking trigger area associated with the page element can be a preset area around the page element, used to trigger the tracking settings for the page element.
[0053] In this embodiment of the application, the tracking operation page of the target page can be triggered and displayed in any of the following ways: Method 1: Receive the opening operation for the target page, and if the target page is logged in with an account that has the authority to manage event tracking, display the event tracking operation page for the target page. Specifically, in response to an operation to open a target page, the terminal can send a page retrieval request to the server. This request carries the page identifier of the target page and authentication information. The page identifier can be any identifier that can uniquely identify the target page. The server can verify whether it has the authority to manage event tracking based on the authentication information carried in the page retrieval request. If the account corresponding to the authentication information has the authority to manage event tracking, the server returns the page data of the target page and visual event tracking indication information to the terminal based on the page identifier of the target page. The terminal can then run the visual event tracking function code based on the received page data and visual event tracking indication information to display the event tracking operation page of the target page.
[0054] If the account corresponding to the authentication information does not have the authority to manage event tracking, then based on the page identifier of the target page, only the page data of the target page will be returned to the terminal, and the terminal can display the target page based on the received page data. Alternatively, no page data may be returned to the terminal.
[0055] Optionally, the visual event tracking function code (SDK with visual event tracking function) can be pre-downloaded locally on the terminal, or it can be issued by the server to the terminal in response to the target page using an account with event tracking management permissions. This application embodiment does not impose any restrictions on this.
[0056] It should be noted that when the target page is the homepage, in response to the opening operation of the target page, the terminal can display an account login page. This login page receives the user's entered account information and, in response to the login operation, sends a page retrieval request to the server for the target page. The authentication information carried in this page retrieval request can be the user's entered account information. After successful account login, the server can send an identity credential cookie to the terminal for authentication in subsequent visits. When the target page is not the homepage, the authentication information carried in the page retrieval request can be the identity credential cookie issued after logging in on the homepage.
[0057] Optionally, the target page can be opened by entering its Uniform Resource Locator (URL), or by triggering its entry point. This application does not restrict the method of opening the target page.
[0058] Method 2: In response to the opening of the event tracking page for the target page, display the event tracking page for the target page.
[0059] When the tracking operation page of the target page is opened by entering the page link address of the tracking operation page of the target page, the page link address (URL address) of the tracking operation page of the target page can be a unique link address pre-configured according to the requirements, and it can be related to the page link address of the target page or it can be unrelated to the page link address of the target page.
[0060] As an optional solution, the page link address of the tracking operation page on the target page can be the target page's page link address plus a specified character. In other words, if the page link address upon which the page opening operation is based includes the target page's page link address and the specified character, the tracking operation page on the target page will be displayed. This specified character can be a specified query string.
[0061] Specifically, if the page link address on which the page opening operation is based includes the page link address of the target page and the specified characters, the terminal displays the tracking operation page of the target page by running the visual tracking function code.
[0062] This application's embodiments, by introducing an embedded visual tracking SDK, enable visual tracking of any page without affecting the normal use of the embedded page's style and functionality. Furthermore, compared to traditional methods of loading pages using iframe technology for visual tracking, it avoids page loading failures caused by content security policies or cross-domain issues.
[0063] Step S120: Receive the first trigger operation for the tracking trigger area associated with any page element.
[0064] Step S130: When the page element is a static page element, in response to the first trigger operation, display the target element's tracking point setting area.
[0065] Step S140: When the page element is a dynamic page element, in response to the first trigger operation, display at least one associated page element of the page element, and in response to the tracking trigger operation for the first element among the candidate elements, display the tracking setting area of the target element.
[0066] It should be noted that the triggering operation (the Nth triggering operation) involved in the embodiments of this application can be any operation performed on a specified element, region, etc., such as any one or a combination of multiple operations such as click operation, hover operation, swipe operation, long press operation, etc. The embodiments of this application do not limit the specific implementation method of the triggering operation.
[0067] When a first trigger operation is received for the tracking trigger area associated with any page element, if the page element is a static page element, the tracking setting area of the target element is displayed in response to the first trigger operation, wherein the target element is the page element itself.
[0068] Optionally, when the page element is a static page element, in response to the first trigger operation, the tracking operation control of the page element is displayed, and in response to the second trigger operation of the tracking operation control of the page element, the tracking setting area of the page element is displayed.
[0069] Optionally, when the page element is a static page element, in response to the first triggering operation, the event type (click, exposure) and basic information of the page element are also displayed. The event type of the page element can be the default event type, and the basic information of the page element can include the element identifier of the page element and the text content contained in the page element.
[0070] If the page element is a dynamic page element, in response to the first trigger operation, at least one associated page element of the page element is displayed, wherein the associated page element is a page element related to the content / function of the page element. In response to the tracking trigger operation for the first element among the candidate elements, the tracking setting area of the target element is displayed, wherein the target element is the first element, and each candidate element includes the page element and at least one associated page element of the page element.
[0071] Optionally, when the page element is a dynamic page element, in response to a first trigger operation, the tracking operation controls for the page element, at least one associated page element of the page element, and tracking operation controls for each second element are displayed. Among the at least one associated page element of the page element, at least one page element can have tracking settings configured, and each second element is a page element among the at least one associated page element of the page element that can have tracking settings configured. In response to a third trigger operation targeting the tracking operation controls of the first element among the candidate elements, the tracking setting area of the target element is displayed, wherein the target element is the first element, and each candidate element includes the page element and each second element.
[0072] Optionally, when the page element is a dynamic page element, its associated page elements or their tracking controls can also be displayed only after a trigger. Specifically, in response to a first trigger operation, the tracking controls for the page element are displayed; in response to a fourth trigger operation for the page element, at least one associated page element is displayed. The fourth trigger operation triggers the display of the associated page elements, and each second element is associated with a corresponding tracking trigger area. In response to a fifth trigger operation for any tracking trigger area of a second element, the tracking controls for that second element are displayed.
[0073] It should be noted that the first trigger operation used for setting tracking points in this embodiment can be a new operation for setting tracking points, or it can reuse the original interactive operation in the target page. For example, for a dynamic page element A in the target page, hovering the mouse over the area where element A is located will expand and display the associated elements A1, A2, and A3 of element A. If the first trigger operation is also set to a hover operation, then in addition to expanding and displaying the associated elements A1, A2, and A3 of element A, the tracking point operation control of element A will also be displayed when the mouse is hovered over the area where element A is located.
[0074] The aforementioned fourth triggering operation, which triggers the display of associated page elements, is an existing interactive operation on the target page. In this embodiment, the first triggering operation can reuse the fourth triggering operation, meaning the first and fourth triggering operations are the same operation, or they can be set to be different operations. For example, the fourth triggering operation is a click operation, and the first triggering operation is a hover operation. For a dynamic page element A on the target page, moving the mouse and hovering over the area where element A is located will display the embedded operation control of element A. Continuing to click on element A will expand and display the associated elements A1, A2, and A3 of element A.
[0075] Step S150: Receive the tracking point setting operation for the target element through the tracking point setting area.
[0076] In response to the event tracking settings operation for the target element, event tracking information for the target element is generated. This event tracking information includes at least one of the following: the event tracking name of the target element, the associated domain name, and the page or element path to which it belongs.
[0077] In this embodiment, by repeatedly executing steps S120-S150, tracking points can be set for each page element or its associated page element on the target page that requires tracking, thereby obtaining tracking information for each target element. Based on the tracking information of each target element, the tracking configuration information for the target page is obtained and sent to the server. Subsequently, based on the tracking configuration information of the target page, user operation data for each target element on the target page is collected.
[0078] based on Figure 2 The visual event tracking method shown uses an embedded visual event tracking solution, which eliminates the need for technicians to manually write event tracking code. It can generate corresponding event tracking information in real time. Simply use the mouse to select the page elements you want to track to achieve event tracking for any element on the page (including shadowDOM elements). There are no restrictions on cross-domain and security policies, and it will not affect the style and functionality of the webpage, making front-end event tracking technology simpler, more convenient and flexible.
[0079] In this embodiment of the application, the event tracking operation page may also display an event tracking management entry. In response to the sixth trigger operation for the event tracking management entry, the event tracking management panel corresponding to the target page is displayed. The event tracking management panel includes at least one of an event tracking information management area or an event tracking statistics viewing area. The event tracking information management area is used to manage event tracking related information of the target page, and the event tracking statistics viewing area is used to view event tracking statistics of the target page.
[0080] Optionally, the event tracking information management area and the event tracking statistics viewing area can also be displayed only after a trigger. The event tracking management panel includes a first control and a second control. The first control is used to control the display of the event tracking information management area, and the second control is used to control the display of the event tracking statistics viewing area. In response to a seventh trigger operation on the second control, the event tracking statistics viewing area is displayed in the event tracking management panel; in response to an eighth trigger operation on the first control, the event tracking information management area is displayed in the event tracking management panel.
[0081] Optionally, the event tracking management panel can default to displaying either the event tracking information management area or the event tracking statistics viewing area, switching between them via a trigger. In response to the sixth trigger operation targeting the event tracking management entry, the event tracking management panel corresponding to the target page is displayed. This panel includes either the event tracking information management area or the event tracking statistics viewing area, a first control, and a second control. When the event tracking management panel includes the event tracking information management area, in response to the seventh trigger operation targeting the second control, the display switches from the event tracking information management area to the event tracking statistics viewing area; when the event tracking management panel includes the event tracking statistics viewing area, in response to the eighth trigger operation targeting the first control, the display switches from the event tracking statistics viewing area to the event tracking information management area.
[0082] Optionally, a third control can be set in the event tracking management panel to control the switching display between the event tracking information management area and the event tracking statistics viewing area. When the event tracking management panel includes the event tracking information management area, in response to a trigger operation on the third control, the display switches from the event tracking information management area to the event tracking statistics viewing area; conversely, when the event tracking management panel includes the event tracking statistics viewing area, in response to a trigger operation on the third control, the display switches from the event tracking statistics viewing area to the event tracking information management area.
[0083] Optionally, at least one of the following can be displayed in the event tracking information management area: Tracking information for page elements that have been tracked; The target page's event type setting area is used to set the event types for each page element on the target page. The display style setting area for the embedded page elements is used to set the display style of the embedded page elements. This application does not specify the display style of the embedded page elements. For example, the embedded page elements can be displayed by highlighting, or the embedded page elements can be displayed with different fonts and font sizes, etc. The tracking information editing area for page elements with tracking points is used to modify the tracking information of page elements with tracking points. Modification of tracking information includes modifying the content of tracking information and deleting tracking information. The area for setting viewing conditions for event tracking information is used to set the filtering conditions for viewing event tracking information. For example, you can set the viewing conditions for event tracking information of a specific event type or the viewing conditions for event tracking information of a specific status.
[0084] Understandably, target applications are usually divided into multiple page groups according to different content / functions. The event tracking information management area in the event tracking management panel corresponding to the target page can manage the event tracking information of the target page, or it can manage the event tracking information of the page group (each page in the group to which the target page belongs).
[0085] Optionally, in response to a display style setting operation received through the display style setting area, the embedded page elements in the target page are displayed in the set display style on the tracking operation page.
[0086] Optionally, in response to a first condition setting operation received in the condition setting area through the tracking information, the tracking information of the tracked page elements that meet the first condition is displayed.
[0087] Optionally, the event tracking statistics viewing area will display at least one of the following: The value of the first tracking metric on the target page; The area for setting viewing conditions for tracking statistics is used to set the viewing conditions for tracking statistics. Optionally, the viewing conditions for tracking statistics can be the statistical duration, such as viewing the indicator values of tracking statistics within one week.
[0088] When the tracking statistics viewing area only displays the index value of the first tracking statistics index of the target page, the index value can be the statistical value under the default viewing conditions, for example, the index value of the first tracking statistics index within one week is displayed by default.
[0089] When the tracking statistics viewing area displays the indicator value of the first tracking metric on the target page, and the tracking statistics viewing condition setting area, if no tracking statistics viewing conditions are set in the initial tracking statistics viewing condition setting area, the indicator value of the first tracking metric displayed can be all statistical values from the time the tracking was implemented to the current time; if a default viewing condition is set in the initial tracking statistics viewing condition setting area, the indicator value of the first tracking metric displayed under the default viewing condition is displayed. For example, if the default viewing condition is to view statistical values within one week, then the indicator value of the first tracking metric within one week is displayed.
[0090] Optionally, in response to the seventh trigger operation for the second control, the tracking statistics view page of the target page is displayed. The tracking statistics view page displays the index values of the second tracking statistics of the page elements that have been tracked on the target page. The second tracking statistics reflect the popularity of the page elements.
[0091] Optionally, if the page element with the data tracked is a dynamic page element, in response to the ninth trigger operation for that page element, the data tracked statistics viewing page of the target page displays at least one related element of that page element, as well as the index value of the second data tracked statistics of the at least one related element; wherein, the ninth trigger operation is used to trigger the display of the index value of the second data tracked statistics of the related page elements of the page element.
[0092] The second tracking metric value for a page element can be a statistical value under default viewing conditions, or a statistical value that corresponds to the viewing conditions set in the tracking statistics viewing conditions setting area. For example, if the statistical period is set to one week in the tracking statistics viewing conditions setting area, the tracking statistics metric viewing page will display the second tracking metric value of the page element within one week.
[0093] It should be noted that the ninth trigger operation set in this application embodiment for viewing the indicator values of the tracking statistics of related page elements can be a new operation for viewing the indicators of related page elements, or it can reuse the original interactive operation of the page element in the target page. For example, in the tracking statistics viewing page of the target page, for the dynamic page element B in the target page, moving the mouse and hovering in the area where element B is located can expand and display the related elements B1 and B2 of element B. If the ninth trigger operation is also set as a hover operation, then moving the mouse and hovering in the area where element B is located will expand and display the related elements B1 and B2 of element B, and display the indicator values of the second tracking statistics of related elements B1 and B2. For example, on the target page's event tracking statistics view page, if you click on the dynamic page element C on the target page, you can expand and display the related elements C1-C4 of element C. If the ninth trigger operation is set to hover operation, then if you move the mouse to the area where element C is located and hover, you can expand and display the related elements C1-C4 of element C, as well as the index values of the second event tracking statistics of related elements C1-C4.
[0094] In one embodiment of this application, the target page's event tracking statistics viewing page can be a click heatmap of each page element on the target page. Heatmap analysis and rendering can also be performed on the associated page feeds (dynamically displayed page elements) of dynamic page elements on the target page. Specifically, the embedded visual event tracking SDK includes a first detection code (MutationObserver) and a second detection code (IntersectionObserver). The first detection code is used to detect changes in DOM elements / nodes on the page, including node additions / removals, attribute changes, and text content changes. The second detection code is used to detect visible elements such as lazy loading and page scrolling.
[0095] like Figure 3 As shown, after loading the event tracking statistics view page, the MutationObserver is used to detect the movement / addition of page elements. For elements removed from the page, the heatmap of the corresponding page element can be removed. For elements added to the page (such as related page elements), when the IntersectionObserver detects that the element enters the visible area of the (page), if the element is an event tracking element, the heatmap of the newly added element is rendered and displayed. When the IntersectionObserver detects that the element leaves the visible area of the (page), the heatmap of the element is removed.
[0096] In this embodiment of the application, the tracking function is combined with the statistical analysis function, and by dynamically detecting changes and visibility of DOM elements, heatmap analysis and display can be performed on dynamically displayed or dynamically added elements (related page elements, such as pop-ups, tab switching, drop-down menus, elements that can only be seen after scrolling down the page, etc.).
[0097] Optionally, an entry point for event tracking can also be displayed on the event tracking operation page of the target page. This entry point can trigger the display of the event tracking management panel corresponding to the target page.
[0098] In this embodiment of the application, page elements with and without tracking points in the tracking operation page of the target page can be displayed in different display styles. The page elements with tracking points are displayed in the first style, and the page elements without tracking points are displayed in the second style. The display styles of different page elements can be set by default or set through the display style setting area in the tracking information management area.
[0099] For each page element in the event tracking operation page that can be configured with event tracking, a style corresponding to its respective event tracking status will be used for display. The event tracking status of a page element is either "event tracked" or "no event tracked".
[0100] Optionally, the "tracked" status includes "tracked" and "tracked" being set up and published, or "tracked" and "tracked" not being published. The first style includes a first sub-style and a second sub-style. Page elements with tracked and published tracking can be displayed using the first sub-style, while page elements with tracked and unpublished tracking can be displayed using the second sub-style. The "untracked" status includes "tracked" not being set up or "tracked" being set up and "tracked" being deleted. The second style includes a third sub-style and a fourth sub-style. Page elements without tracked tracking can be displayed using the third sub-style, while page elements with tracked and deleted tracking can be displayed using the fourth sub-style.
[0101] In this embodiment of the application, each page element for which tracking is performed is configured with a unique element identifier (eid) for the current page. The corresponding DOM element can be accurately located through this element identifier (eid).
[0102] Optionally, the XPath path can be used as the element identifier (eid) of the page element. Alternatively, for any page element for which tracking is performed, the element identifier (eid) can also be calculated in the following ways: S1: Determine the multiple depth levels corresponding to the page element, and the parent element corresponding to the page element at each depth level; Here, the multiple depth levels corresponding to a page element represent the various node levels from that page level to the DOM root element, and the parent element corresponding to that page element at that level is the page element itself. For example, in... Figure 4 In the image, the parent element of page element A32 at the 3rd level is page element A32 itself, the parent element at the 2nd level is page element A3, and the parent element at the 1st level is page element A.
[0103] S2: For each depth level, determine the unique level identifier of the parent element of the page element at that depth level; The unique hierarchical identifier of the parent element at that depth level can be determined in the following way: A1: Determine the first attribute of the parent element, and match the first attribute of the parent element with the first attributes of other page elements in the same depth level; if no matching page element exists, proceed to step A21; if a matching page element exists, proceed to step A22. In this application embodiment, no specific restrictions are placed on the first attribute of the element. The first attribute can be an attribute of any dimension of the element. As an optional approach, the first attribute can be the ID attribute of the element.
[0104] A21: Use the first attribute of the parent element as the unique level identifier of the parent element at this depth level; When there is no page element in the depth level whose first attribute matches the first attribute of the parent element, it means that the first attribute of the parent element is unique in the depth level and can be used as the unique level identifier of the parent element in the depth level.
[0105] A22: Determine the second attribute of the parent element, and match the second attribute of the parent element with the second attributes of other page elements in the same depth level; if no matching page element exists, proceed to step A221; if a matching page element exists, proceed to step A222. A221: Use the second attribute of the parent element as the unique level identifier of the parent element at this depth level; A222: Determine the order of the parent element among the page elements in this depth level, and determine the unique level identifier of the parent element in this depth level based on the order of the parent element. If, in the first attribute of other page elements at this depth level, there exists a page element whose first attribute matches that of the parent element, it indicates that the parent element's first attribute is not unique within that depth level. Therefore, we can continue to check if the second attribute is unique. The second attribute can be derived from the first attribute and supplementary attributes.
[0106] This application does not impose specific limitations on the second attribute of an element. The second attribute can be any attribute of the element other than the first attribute, or it can be obtained by adding supplementary attributes to the first attribute. For example, the second attribute can be the ID attribute (first attribute) + class attribute, or it can be the ID attribute (first attribute) + class attribute + tag attribute + href attribute + type attribute.
[0107] When there is no page element in the depth level whose second attribute matches that of the parent element, it means that the second attribute of the parent element is unique in the depth level and can be used as a unique level identifier for the parent element in the depth level.
[0108] When there is a page element in the depth level whose second attribute matches that of the parent element, it means that the second attribute of the parent element is not unique in the depth level, but the order of the parent element among the page elements in the depth level must be unique. In this case, the unique level identifier of the parent element in the depth level is determined according to the order of the parent element in the depth level.
[0109] Optionally, to limit the length of the unique hierarchy identifier of the parent element, different supplementary attributes can be added progressively based on the first attribute to check the uniqueness of the first attribute plus different supplementary attributes. Specifically, multiple supplementary attributes of the parent element are determined by adding supplementary attributes to the first attribute sequentially until the added attributes are unique among sibling elements. If, after adding all supplementary attributes, uniqueness among sibling elements is still not achieved, the order of the parent element among sibling elements is determined, and the unique hierarchy identifier of the parent element at that depth level is determined based on the order result.
[0110] S3: Based on the unique level identifier of the parent element of the page element at each depth level, obtain the global link identifier of the page element. Specifically, the unique level identifiers of the page element's corresponding (parent element) at each depth level are concatenated to obtain the page element's global link identifier.
[0111] S4: Determine the element identifier of the page element based on its global link identifier.
[0112] Optionally, the global link identifier (path) of the page element can be used as the element identifier of the page element. Alternatively, a hash operation can be performed on the global link identifier of the page element, and the hash result can be used as the element identifier of the page element.
[0113] Using the above method, the unique element identifier of the page element in the current page can be calculated with the shortest link. When the page is updated (page redesign, element position change, etc.), the tracking data can be guaranteed to be not lost to the greatest extent, and there is no need to re-track the data. It has stronger anti-interference ability.
[0114] For example, such as Figure 5As shown, when calculating the element identifier (eid) of a page element, step 1 first determines the ID attribute of the input page element and uses it as the querySelector. It checks if this querySelector is unique among sibling elements. If not, it proceeds to step 2. The page element's ID and class attributes are then merged, and the merged ID attribute plus the class attribute is used as the querySelector. It checks if this querySelector is unique among sibling elements and proceeds to step 3. The page element's ID, class, and tag attributes are then merged. In step 3, other attributes of the page element can be added, such as the herf attribute of the a tag, the type attribute and name attribute of the input tag, or user-defined special attributes. The merged attributes of the page element are then used as the querySelector. The `tor` function checks if the `querySelector` is unique among sibling elements. If it is not unique, proceed to step 4. Next, determine the `nth-of-type` of the page element among its sibling elements. Since the `nth-of-type` is unique among sibling elements, use it as the `querySelector`. Check if the `querySelector` is unique globally. If not, use the parent element of the page element as input and repeat steps 1-4 to determine the corresponding `querySelector`. Finally, combine the obtained `querySelectors` from each level to obtain the globally unique `querySelector` for the page element. Then, perform a hash operation on the `querySelector` to obtain the element identifier `eid` of the page element.
[0115] To facilitate a better understanding and explanation of the methods provided in the embodiments of this application, the optional implementation methods of the methods provided in this application will be described below with reference to a specific complete embodiment.
[0116] The user enters the URL of the platform to be tracked, along with the preset query string "?dt-inspectorf=true", into the address bar of the browser on the first terminal. In response to the page opening operation for that URL, the visual tracking SDK is run, displaying the tracking operation page on the platform's homepage, such as... Figure 6 As shown, the event tracking operation page on the platform's homepage displays a visual event tracking management entry. In response to clicking on this event tracking management entry, the corresponding event tracking management panel on the homepage is displayed.
[0117] in, Figure 7This is a schematic diagram of the event tracking management panel. The panel includes an event tracking (information) management area, which displays a toggle control for highlighting already tracked elements, an event list filter control, and a push status selection control. When highlighting already tracked elements is enabled, the tracked page elements are displayed in a highlighted manner on the current page. The event list filter control controls both the filtering of the event tracking information list for already tracked elements on the current page and the event type for newly added event tracking points. The event list filter control defaults to the click event type, which can be modified by the user. The push status selection control allows users to select the event tracking information list for already tracked elements on the current page based on the push status of the event tracking information. The push status selection control defaults to selecting all, which can be modified by the user. Since no event tracking has been performed on the current page (homepage), a prompt message indicating that event tracking should be performed on the page is displayed on the event tracking management panel.
[0118] The event tracking management panel also includes a page management entry, through which multiple pages in the platform can be grouped and divided into multiple page groups.
[0119] In response to a user clicking the "Enter" button on the platform's homepage, the platform's content page is displayed, such as... Figure 8 As shown, this content page displays a service function option area and a content display area. In the service function option area, "Options 1-7" are dynamic page elements, while in the content display area, "All Activities" and "My Participations" are dynamic page elements, and "Serial Number," "Activity Name," and "Activity Content" are static page elements. Furthermore, "Options 1-7" are hover-triggered dynamic page elements; hovering the mouse over their respective areas will expand to display all associated page elements. "All Activities" and "My Participations" are click-triggered dynamic page elements; clicking these elements will expand to display their associated page elements. Each page element displayed on this content page can be configured with event tracking, and each element is associated with a corresponding event tracking trigger area.
[0120] When tracking points are added to static page elements on the content page, taking tracking point "Event Name" as an example, when the mouse is moved to the tracking point trigger area of "Event Name" (highlighted area in the image), a pop-up window corresponding to "Event Name" will be displayed in response to the hover operation of the tracking point trigger area.
[0121] Specifically, when the event type set in the event management area of the event management panel is a click event type, such as Figure 9aAs shown, the pop-up window displays the event type for "Activity Name" as a click event, the element identifier eid for "Activity Name," the text content "Activity Name" contained within the element, and the corresponding click event type event add control (+). When the event types set in the event management area of the event management panel include both click event type and exposure event type, as shown... Figure 9b As shown, in addition to displaying the element identifier eid of "Event Name" and the text content "Event Name" contained in the element, the pop-up window also displays the tracking point addition control (+) corresponding to the click event type and the tracking point addition control (+) corresponding to the exposure event type.
[0122] exist Figure 9a In response to a click operation that adds a control for a click event type, the event management panel on the right is displayed. This panel displays the event settings area corresponding to the "Activity Name". This setting area shows the event name, associated domain, page, and element path for the click event tracking of the "Activity Name", which users can edit as needed. In response to a click on the "Save" control, the event information for the "Activity Name" is saved. At this point, the event status for the "Activity Name" is in the "Pending Release" state, meaning the event has been set up but not yet released. In response to a click on the "Push" control, the event information for the already tracked page element is uploaded to the server. Only then will the event configuration information for the current page take effect, and the event status for the "Activity Name" changes from "Pending Release" to "Released", meaning the event has been set up and released.
[0123] When implementing event tracking on dynamic page elements within this content page, taking "Option 4" as an example, as follows: Figure 10a As shown, moving the mouse over the event trigger area for "Option 4" displays a pop-up window for "Option 4" and its associated page elements, "Option 41" and "Option 42," in response to a hover operation on that trigger area. The pop-up window for "Option 4" displays the element identifier for "Option 4," its corresponding text content, the event type for this event being a click event, and the corresponding event add control (+). Clicking the event add control in the pop-up window for "Option 4" displays the event settings area for "Option 4" in the event management panel, allowing for event settings configuration for "Option 4."
[0124] The related page elements "Option 41" and "Option 42" are both associated with event tracking areas. In response to a trigger operation on the event tracking area of the related page element "Option 41", a pop-up window corresponding to "Option 41" is displayed, such as...Figure 10b As shown, the pop-up window displays the element identifier for "Option 41," its corresponding text content, the event type as a click event, and the corresponding event point addition control (+). In response to a click on the event point addition control in the pop-up window for "Option 41," the event point settings area for "Option 41" is displayed in the event point management area of the event point management panel. This setting area allows users to edit and modify the event name, associated domain, page, and element path of the "Option 41" event point.
[0125] After tracking points are added to all page elements (dynamic and static) on the current page, the tracking point management area in the tracking point management panel will display a list of tracking point information for each page element that has been tracked. Figure 11 As shown in the figure. Among them, each tracking point in the tracking point information list also displays the corresponding tracking point status, which includes: pending release, deleted, and released.
[0126] To facilitate better management of event tracking, page elements in different tracking states can be marked with different colors. For example, in... Figure 11 In the diagram, the "Published" page elements "Option 1" and "Option 2" are marked in yellow, the "Pending" page elements "Event Name" and "Option 4" are marked in green, and the "Deleted" page element "Option 5" is marked in red.
[0127] In response to a click on the "push" control, the current page's event tracking configuration information (including event tracking information for each page element that has been tracked) is uploaded to the server for publication. When the server receives a page access request from a user terminal for this platform, the server can return the page data for that platform and the corresponding event tracking configuration information to the user terminal. The user terminal can capture the user's operation data on the current page and match the page elements triggered by the user with the event tracking elements in the event tracking configuration information. If they match, the user's operation data is uploaded to the server.
[0128] In addition, the embodiments of this application can also perform data analysis on the collected user operation data. The server can send the collected user operation data (embedded data statistics) of each user terminal to the first terminal for analysis and display.
[0129] The event tracking management panel in the visual event tracking also displays a "Data Statistics" toggle control, such as... Figure 12As shown, in response to the click operation for "Data Statistics", the event tracking management panel switches from displaying the event tracking management area to displaying the (event tracking) data statistics viewing area. In this data statistics viewing area, the current page's domain name, page path, and URL parameters are displayed. You can also set the page group to view and the time range for statistical analysis.
[0130] After selecting the current page for statistics and the time range as "last 7 days", in response to the click operation of the "Query" control, the first statistical indicator of the current page is displayed in the data statistics viewing area of the event tracking management panel, including: page PV (page views), page UV (unique visitors), total number of click events, and number of unique visitor events (number of users who clicked).
[0131] In the data statistics viewing area of the event tracking management panel, the top 10 most clicked items on the current page are also displayed. You can choose to sort the display by number of clicks or by the number of clicks. Among them, the page element with the highest number of clicks on the current page is "Option 4", with 541 clicks, accounting for 8.47% of the total clicks on the current page.
[0132] Furthermore, based on the collected operational data, a heatmap of each page element with embedded tracking is displayed on the current page. In the heatmap, the popularity of a page element is represented by color and click-through rate percentage. The darker the color of a page element, the more times it has been clicked. The click-through rate percentage of a page element (not shown in the figure) represents the percentage of clicks for that page element relative to the total clicks on the page. For example, in... Figure 12 In the text, the darker background color of "Option 4" indicates that it has been clicked more times.
[0133] For static page elements with embedded tracking in the current page, taking "Event Name" as an example, the "Event Name" is highlighted in the corresponding color based on the collected clicks on "Event Name," and its corresponding click percentage is displayed. Furthermore, when the mouse hovers over the area containing "Event Name," a pop-up window displays the specific reported data for "Event Name," including the number of clicks and impressions.
[0134] For dynamically generated page elements with embedded tracking in the current page, taking "Option 4" as an example, "Option 4" is highlighted with the corresponding color based on the collected clicks, and its corresponding click percentage is displayed. Furthermore, when the mouse hovers over the area containing "Option 4," a pop-up window displays the specific reported data for "Option 4," including the number of clicks, impressions, and click-through rate (CTR). It also displays the related page elements "Option 41" and "Option 42," which are displayed with corresponding colors based on the collected clicks, and their respective click percentages are shown. When the mouse hovers over the area containing "Option 41," a pop-up window displays the specific reported data for "Option 41," including the number of clicks, impressions, and CTR.
[0135] When the mouse moves away from the area containing "Option 4", collapse its associated page elements "Option 41" and "Option 42", and remove the highlighted color and click percentage of the associated page elements "Option 41" and "Option 42".
[0136] The visualized event tracking method provided in this application can be specifically divided into three parts: visualized event tracking, event tracking data reporting, and statistical indicator analysis. Specifically, when performing visualized event tracking, such as... Figure 13 As shown, in response to a user's page opening action, the target page is loaded. If the page link address on which the page opening action is based includes the target page's page link address and specified characters, the visual tracking SDK code is run to verify whether the currently logged-in account has tracking management permissions. If the verification is successful, the visual tracking panel is opened, a DOM detector is instantiated, and a mouse event detector is added. When a mouse swipe event is detected, the element that the mouse has moved to is obtained, the unique identifier eid of the element is calculated, and a pop-up window is displayed. In response to the click of the tracking control (+) in the pop-up window, tracking is added to the element.
[0137] Figure 14 This is a flowchart illustrating the process of reporting event tracking data. When a user terminal requests to load a target page, it can simultaneously obtain the event tracking configuration information of the target page, set the configuration information, capture the operation data generated by the user on the target page, including but not limited to element exposure, click events, route change events, scroll events, etc., and match the element triggered by the user with the element identifier of the event tracking element in the event tracking configuration information. If a match is found, the operation data for that element is reported.
[0138] Figure 15This is a flowchart illustrating the statistical data analysis process. When loading the event tracking statistics viewing page, the system obtains the visual event tracking configuration information of the current page (target page) and the reported operation data. It dynamically detects changes in DOM elements on the current page, matches the elements displayed on the current page with the event tracking elements in the event tracking configuration information, and calculates the clicks, impressions, and click-through rate (CTR) of the element if the element displayed on the current page is one of the event tracking elements in the event tracking configuration information. It also calculates the heatmap value alpha (the intensity of the background color display) based on the clicks / impressions and generates a corresponding heatmap in the area where the corresponding DOM element is located.
[0139] This application embodiment achieves visual tracking of the target page by embedding a visual tracking SDK. Since the visual tracking management panel, the heatmap information (color, click percentage) of page elements, and the pop-ups of page elements are all appended to the DOM elements, they do not change the original page's DOM. Furthermore, all UI interactions are implemented using Web Components technology, and the appended elements have the same style format as the original elements on the page, so they do not affect the embedded page.
[0140] Based on and Figure 2 The visualization tracking method shown in this application follows the same principle. This application provides a visualization tracking device, such as... Figure 16 As shown, the visualization tracking device 200 may include: a first display module 210, an operation triggering module 220, an element display module 230, and a tracking setting module 240. Wherein: The first display module 210 is used to display the tracking operation page of the target page; the tracking operation page includes each page element of the target page, wherein at least one of the page elements is associated with a corresponding tracking trigger area. The operation triggering module 220 is used to receive the first triggering operation for the tracking trigger area associated with any page element; The element display module 230 is configured to, when any page element is a static page element, display the tracking point setting area of the target element in response to the first trigger operation, wherein the target element is the any page element; and when any page element is a dynamic page element, display at least one associated page element of the any page element in response to the first trigger operation, and display the tracking point setting area of the target element in response to the tracking point trigger operation for the first element among the candidate elements, wherein the target element is the first element, and the candidate elements include the any page element and the at least one associated page element. The tracking point setting module 240 is used to receive tracking point setting operations for the target element through the tracking point setting area.
[0141] Optionally, the element display module 230 can be used for: In response to the first triggering operation, display the tracking operation control of any of the page elements; In response to a second trigger operation on the tracking point operation control, the tracking point setting area of the target element is displayed.
[0142] Optionally, the element display module 230 can be used for: In response to the first triggering operation, the tracking operation control of any page element, at least one associated page element of any page element, and tracking operation controls of each second element are displayed; wherein, each second element is at least one page element among the at least one associated page element; In response to a third trigger operation of the tracking operation control for the first element among the candidate elements, the tracking setting area of the target element is displayed; wherein the target element is the first element, and the candidate elements include the any page element and the second elements; the tracking trigger operation for the first element includes a third trigger operation for the tracking operation control for the first element.
[0143] Optionally, the element display module 230 can be used for: In response to the first triggering operation, display the tracking operation control of any of the page elements; In response to a fourth trigger operation for any of the page elements, at least one associated page element of the page element is displayed; wherein the fourth trigger operation is used to trigger the display of the associated page elements, and each of the second elements is associated with a corresponding tracking point trigger area; In response to a fifth trigger operation for the tracking trigger area of any second element, the tracking operation control for the second element is displayed.
[0144] Optionally, the event tracking operation page also displays an event tracking management entry; The visualization tracking device also includes a tracking management module, which can be used for: In response to the sixth trigger operation for the event tracking management entry, the event tracking management panel corresponding to the target page is displayed. The event tracking management panel includes at least one of the event tracking information management area or the event tracking statistics information viewing area. The event tracking information management area is used to manage event tracking information related to the target page, and the event tracking statistics viewing area is used to view event tracking statistics of the target page.
[0145] Optionally, the event tracking management panel includes a first control and a second control. The first control is used to control the display of the event tracking information management area, and the second control is used to control the display of the event tracking statistics viewing area. The event tracking management module can also be used for: In response to the seventh trigger operation for the second control, the tracking point statistics viewing area is displayed in the tracking point management panel; In response to the eighth trigger operation for the first control, the tracking information management area is displayed in the tracking management panel.
[0146] Optionally, the tracking information management area displays at least one of the following: Tracking information for page elements that have been tracked; The event type setting area of the target page is used to set the event type of each page element in the target page. The display style setting area for embedded page elements is used to set the display style of embedded page elements; An editing area for the tracking information of page elements that have been tracked, wherein the tracking information editing area is used to modify the tracking information of the page elements that have been tracked; The area for setting viewing conditions for embedded information is used to set the filtering conditions for viewing embedded information. The data tracking information viewing area displays at least one of the following: The indicator value of the first tracking point statistical indicator of the target page; The area for setting viewing conditions for tracking point statistics is used to set the viewing conditions for tracking point statistics.
[0147] Optionally, the event tracking management module can also be used for: The target page displays the tracking statistics indicator viewing page; the tracking statistics indicator viewing page displays the indicator values of the second tracking statistics indicator of the page elements that have been tracked on the target page, and the second tracking statistics indicator reflects the popularity of the page elements.
[0148] Optionally, if the page element with the event tracking is a dynamic page element, the event tracking management module can also be used for: On the event tracking statistics viewing page, in response to the ninth trigger operation for the page element, at least one associated element of the page element and the index value of the second event tracking statistics of the at least one associated element are displayed; wherein, the ninth trigger operation is used to trigger the display of the index value of the second event tracking statistics of the associated page elements of the page element.
[0149] Optionally, the first display module 210 can be used to perform any of the following: Receive an open operation for the target page, and in response to the target page being logged in with an account that has data tracking management permissions, display the data tracking operation page of the target page; Receive an operation to open a page. If the page link address on which the page opening operation is based includes the page link address of the target page and specified characters, display the tracking operation page of the target page.
[0150] Optionally, the first display module 210 can be used for: The event tracking page of the target page is displayed. Page elements with event tracking are displayed using the first style, while page elements without event tracking are displayed using the second style. For at least one page element in the event tracking operation page, a style corresponding to its respective event tracking status is used for display; wherein, the event tracking status is either an event tracking status or an event tracking status.
[0151] Optionally, the status of the embedded points includes either having embedded points set and published, or having embedded points set but not published. The "no tracking" status includes either no tracking settings being set or tracking settings being set but subsequently deleted.
[0152] Optionally, the first display module 210 can be used for: If the target page is accessed by an account with tracking management privileges, or if the page link address on which the page opening operation is based includes the page link address of the target page and specified characters, the visual tracking function code is run to display the tracking operation page of the target page.
[0153] Optionally, the element display module 230 can also be used for: In response to the first triggering operation, the element identifier of any of the page elements is displayed; The element identifier of any page element is determined in the following way: Determine the multiple depth levels corresponding to the page element, and the parent element corresponding to the page element at each depth level; For each depth level, determine the unique level identifier of the parent element of the page element at that depth level; Based on the parent element corresponding to the page element at each depth level, and the unique level identifier at each depth level, the global link identifier of the page element is obtained. The element identifier of the page element is determined based on its global link identifier.
[0154] In the embodiments of this application, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.
[0155] This application provides an electronic device, including a memory, a processor, and a computer program stored in the memory. When the processor executes the computer program stored in the memory, it can implement the method in any optional embodiment of this application.
[0156] Figure 17 A schematic diagram of the structure of an electronic device to which an embodiment of the present invention applies is shown, such as... Figure 17 As shown, the electronic device can be a server or a user terminal, and it can be used to implement the methods provided in any embodiment of the present invention.
[0157] like Figure 17 As shown, the electronic device 2000 may primarily include at least one processor 2001. Figure 17 The diagram shows components such as a memory 2002, a communication module 2003, and an input / output interface 2004. Optionally, these components can be connected and communicate with each other via a bus 2005. It should be noted that... Figure 17 The structure of the electronic device 2000 shown is merely illustrative and does not constitute a limitation on the electronic devices to which the methods provided in the embodiments of this application are applicable.
[0158] The memory 2002 can be used to store operating systems and applications, etc. The applications can include computer programs that implement the methods shown in the embodiments of the present invention when invoked by the processor 2001, and can also include programs for implementing other functions or services. The memory 2002 can be ROM (Read Only Memory) or other types of static storage devices that can store static information and instructions, RAM (Random Access Memory) or other types of dynamic storage devices that can store information and computer programs, or it can be EEPROM (Electrically Erasable Programmable Read Only Memory), CD-ROM (Compact Disc Read Only Memory) or other optical disc storage, optical disk storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, but is not limited thereto.
[0159] Processor 2001 is connected to memory 2002 via bus 2005, and implements corresponding functions by calling application programs stored in memory 2002. Processor 2001 can be a CPU (Central Processing Unit), a general-purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It can implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this invention. Processor 2001 can also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, etc.
[0160] Electronic device 2000 can connect to a network via communication module 2003 (which may include, but is not limited to, components such as a network interface) to communicate with other devices (such as user terminals or servers) through the network and achieve data interaction, such as sending data to or receiving data from other devices. Communication module 2003 may include wired network interfaces and / or wireless network interfaces, meaning the communication module may include at least one of wired or wireless communication modules.
[0161] Electronic device 2000 can connect to required input / output devices, such as keyboards and display devices, via input / output interface 2004. Electronic device 2000 itself may have a display device, and other display devices can also be connected externally via interface 2004. Optionally, storage devices, such as hard drives, can also be connected via interface 2004 to store data from electronic device 2000, retrieve data from storage device, or store data from storage device into memory 2002. It is understood that input / output interface 2004 can be a wired interface or a wireless interface. Depending on the actual application scenario, the device connected to input / output interface 2004 can be a component of electronic device 2000 or an external device connected to electronic device 2000 when needed.
[0162] The bus 2005 used to connect the various components may include a pathway for transmitting information between these components. The bus 2005 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. Depending on its function, the bus 2005 can be divided into address bus, data bus, control bus, etc.
[0163] Optionally, for the solution provided in the embodiments of the present invention, the memory 2002 can be used to store a computer program that executes the solution of the present invention, and the processor 2001 runs the computer program. When the processor 2001 runs the computer program, it implements the operation of the method or apparatus provided in the embodiments of the present invention.
[0164] Based on the same principle as the method provided in the embodiments of this application, the embodiments of this application provide a computer-readable storage medium storing a computer program, which, when executed by a processor, can implement the corresponding content of the aforementioned method embodiments.
[0165] This application also provides a computer program product, which includes a computer program that, when executed by a processor, can implement the corresponding content of the aforementioned method embodiments.
[0166] It should be noted that the terms "first," "second," "third," "fourth," "1," "2," etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in a sequence other than that shown in the figures or text.
[0167] It should be understood that although arrows indicate various operation steps in the flowcharts of this application's embodiments, the order in which these steps are implemented is not limited to the order indicated by the arrows. Unless explicitly stated herein, in some implementation scenarios of this application's embodiments, the implementation steps in each flowchart can be executed in other orders as required. Furthermore, some or all steps in each flowchart, based on the actual implementation scenario, may include multiple sub-steps or multiple stages. Some or all of these sub-steps or stages can be executed at the same time, and each sub-step or stage can also be executed at different times. In scenarios where execution times differ, the execution order of these sub-steps or stages can be flexibly configured according to requirements, and this application's embodiments do not limit this.
[0168] The above description is only an optional implementation method for some implementation scenarios of this application. It should be noted that for those skilled in the art, other similar implementation methods based on the technical concept of this application without departing from the technical concept of this application also fall within the protection scope of the embodiments of this application.
Claims
1. A visual tracking method, characterized in that, The method includes: The event tracking operation page of the target page is displayed; the event tracking operation page includes each page element of the target page, wherein at least one of the page elements is associated with a corresponding event tracking trigger area. Receive the first trigger operation for the tracking trigger area associated with any page element; When any of the page elements is a static page element, in response to the first triggering operation, the tracking point setting area of the target element is displayed, wherein the target element is any of the page elements; When any page element is a dynamic page element, in response to the first triggering operation, at least one associated page element of the page element is displayed, and in response to the tracking triggering operation for the first element among the candidate elements, the tracking setting area of the target element is displayed, wherein the target element is the first element, and each candidate element includes the page element and the at least one associated page element. The embedding point setting area receives embedding point setting operations for the target element.
2. The method according to claim 1, characterized in that, The step of displaying the embedding point setting area of the target element in response to the first triggering operation includes: In response to the first triggering operation, display the tracking operation control of any of the page elements; In response to a second trigger operation on the tracking point operation control, the tracking point setting area of the target element is displayed.
3. The method according to claim 1, characterized in that, In response to the first triggering operation, at least one associated page element of any page element is displayed; in response to the tracking triggering operation for the first element among the candidate elements, the tracking setting area of the target element is displayed, including: In response to the first triggering operation, the tracking operation control of any page element, at least one associated page element of any page element, and tracking operation controls of each second element are displayed; wherein, each second element is at least one page element among the at least one associated page element; In response to a third trigger operation of the tracking operation control for the first element among the candidate elements, the tracking setting area of the target element is displayed; wherein the target element is the first element, and the candidate elements include the any page element and the second elements; the tracking trigger operation for the first element includes a third trigger operation for the tracking operation control for the first element.
4. The method according to claim 3, characterized in that, The step of displaying the tracking operation controls for any page element, at least one associated page element of any page element, and tracking operation controls for each second element in response to the first triggering operation includes: In response to the first triggering operation, display the tracking operation control of any of the page elements; In response to a fourth trigger operation for any of the page elements, at least one associated page element of the page element is displayed; wherein the fourth trigger operation is used to trigger the display of the associated page elements, and each of the second elements is associated with a corresponding tracking point trigger area; In response to a fifth trigger operation for the tracking trigger area of any second element, the tracking operation control for the second element is displayed.
5. The method according to claim 1, characterized in that, The event tracking operation page also displays an event tracking management entry; The method further includes: In response to the sixth trigger operation for the event tracking management entry, the event tracking management panel corresponding to the target page is displayed. The event tracking management panel includes at least one of the event tracking information management area or the event tracking statistics information viewing area. The event tracking information management area is used to manage event tracking information related to the target page, and the event tracking statistics viewing area is used to view event tracking statistics of the target page.
6. The method according to claim 5, characterized in that, The event tracking management panel includes a first control and a second control. The first control is used to control the display of the event tracking information management area, and the second control is used to control the display of the event tracking statistics viewing area. The method further includes: In response to the seventh trigger operation for the second control, the tracking point statistics viewing area is displayed in the tracking point management panel; In response to the eighth trigger operation for the first control, the tracking information management area is displayed in the tracking management panel.
7. The method according to claim 5 or 6, characterized in that, The tracking information management area displays at least one of the following: Tracking information for page elements that have been tracked; The event type setting area of the target page is used to set the event type of each page element in the target page. The display style setting area for embedded page elements is used to set the display style of embedded page elements; An editing area for the tracking information of page elements that have been tracked, wherein the tracking information editing area is used to modify the tracking information of the page elements that have been tracked; The area for setting viewing conditions for embedded information is used to set the filtering conditions for viewing embedded information. The data tracking information viewing area displays at least one of the following: The indicator value of the first tracking point statistical indicator of the target page; The area for setting viewing conditions for tracking point statistics is used to set the viewing conditions for tracking point statistics.
8. The method according to claim 6, characterized in that, In response to a seventh trigger operation targeting the second control, the method further includes: The target page displays the tracking statistics indicator viewing page; the tracking statistics indicator viewing page displays the indicator values of the second tracking statistics indicator of the page elements that have been tracked on the target page, and the second tracking statistics indicator reflects the popularity of the page elements.
9. The method according to claim 8, characterized in that, If the page element with embedded tracking is a dynamic page element, the method further includes: On the event tracking statistics viewing page, in response to the ninth trigger operation for the page element, at least one associated element of the page element and the index value of the second event tracking statistics of the at least one associated element are displayed; wherein, the ninth trigger operation is used to trigger the display of the index value of the second event tracking statistics of the associated page elements of the page element.
10. The method according to claim 1, characterized in that, The event tracking operation page that displays the target page includes any one of the following: Receive an open operation for the target page, and in response to the target page being logged in with an account that has data tracking management permissions, display the data tracking operation page of the target page; Receive an operation to open a page. If the page link address on which the page opening operation is based includes the page link address of the target page and specified characters, display the tracking operation page of the target page.
11. The method according to any one of claims 1 to 10, characterized in that, The event tracking operation page that displays the target page includes: The event tracking page of the target page is displayed. Page elements with event tracking are displayed using the first style, while page elements without event tracking are displayed using the second style. For at least one page element in the event tracking operation page, a style corresponding to its respective event tracking status is used for display; wherein, the event tracking status is either an event tracking status or an event tracking status.
12. The method according to claim 11, characterized in that, The status of the embedded points includes either having embedded points set and published, or having embedded points set but not published. The "no tracking" status includes either no tracking settings being set or tracking settings being set but subsequently deleted.
13. The method according to claim 10, characterized in that, The event tracking operation page that displays the target page includes: If the target page is accessed by an account with tracking management privileges, or if the page link address on which the page opening operation is based includes the page link address of the target page and specified characters, the visual tracking function code is run to display the tracking operation page of the target page.
14. The method according to claim 1, characterized in that, In response to the first triggering operation, the element identifier of any of the page elements is also displayed on the tracking operation page; The element identifier of any page element is determined in the following way: Determine the multiple depth levels corresponding to the page element, and the parent element corresponding to the page element at each depth level; For each depth level, determine the unique level identifier of the parent element of the page element at that depth level; Based on the parent element corresponding to the page element at each depth level, and the unique level identifier at each depth level, the global link identifier of the page element is obtained. The element identifier of the page element is determined based on its global link identifier.
15. A visual data embedding device, characterized in that, include: The first display module is used to display the tracking operation page of the target page; the tracking operation page includes each page element of the target page, wherein at least one of the page elements is associated with a corresponding tracking trigger area; The operation triggering module is used to receive the first trigger operation for the tracking trigger area associated with any page element; An element display module is configured to, when any page element is a static page element, display the tracking point setting area of a target element in response to the first trigger operation, wherein the target element is the any page element; when any page element is a dynamic page element, display at least one associated page element of the any page element in response to the first trigger operation; and display the tracking point setting area of the target element in response to a tracking point trigger operation for the first element among the candidate elements, wherein the target element is the first element, and each candidate element includes the any page element and the at least one associated page element. The tracking point setting module is used to receive tracking point setting operations for the target element through the tracking point setting area.
16. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the method according to any one of claims 1 to 14.
17. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements the method described in any one of claims 1 to 14.
18. A computer program product, characterized in that, The computer program product includes a computer program that, when executed by a processor, implements the method according to any one of claims 1 to 14.