Chrome plug-in-based buried point data display method and electronic equipment
The Chrome plug-in-based method directly displays buried point data on DOM elements, addressing the lack of intuitive data association and low efficiency in existing tracking systems by providing direct data display on web pages.
Patent Information
- Application Number
- CN202411138938.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-08-19
- Publication Date
- 2024-12-27
AI Technical Summary
Existing tracking technologies lack intuitive display of analysis data related to DOM elements and require users to navigate between multiple systems, leading to low query efficiency.
A method using a Chrome plug-in to dynamically display buried point data on DOM elements by inserting embedding point description information and monitoring mouse events, enabling direct display of data in the form of cards.
Facilitates intuitive association of DOM elements with their corresponding data, eliminating the need to switch between systems and significantly improving query efficiency.
Smart Images
Figure CN119200898A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of computer technology, and in particular to a method and electronic device for displaying point data based on a Chrome plug-in. Background Art
[0002] With the continuous deepening of Internet business and the continuous development of web applications, the demand for user behavior tracking data statistics is becoming more and more important. From the perspective of Internet product optimization, tracking is the starting point of the entire product optimization process. After collecting tracking data, terminal providers can obtain some basic indicators to measure product status through big data processing, data statistics, data analysis, data mining and other processing, such as active, retained, new and other market data, so as to gain insight into the status of the product and start the product optimization process.
[0003] In the existing tracking technology, more attention is paid to the collection and analysis of user behavior, and there is relatively little research on how to quickly and intuitively retrieve statistical and analytical results. The analysis data display of the point is not closely related to the corresponding DOM element of the tracking point in the corresponding business system, and the corresponding relationship is not intuitive. Moreover, users need to flow between multiple systems, which greatly affects the query efficiency.
[0004] In response to the above problems, a method and electronic device for displaying buried data based on a Chrome plug-in are proposed in this application. Summary of the invention
[0005] In order to address the deficiencies of the prior art, the present application provides a method and electronic device for displaying buried point data based on a chrome plug-in, which solves the problems in the prior art that the display of analysis data of points and the corresponding DOM elements of the buried points in the corresponding business system are not closely connected, the corresponding relationship is not intuitive, and users need to transfer between multiple systems, which greatly affects the query efficiency.
[0006] The technical effects to be achieved by this application are achieved through the following solutions:
[0007] In a first aspect, the present application provides a method for displaying tracking data based on a Chrome plug-in, the method comprising:
[0008] The user's browser receives the target web page provided by the website server;
[0009] Inserting the embedding point description information into the DOM element associated with each embedding point in the target web page;
[0010] The Chrome plug-in monitors mouse events on the target web page, and when the mouse hovers over the target DOM element, if the first condition is met, the buried point data corresponding to the target DOM element is dynamically displayed.
[0011] In some embodiments, inserting the embedding point description information into the DOM element associated with each embedding point in the target webpage includes:
[0012] Determine multiple DOM elements associated with each embedding point in the target web page;
[0013] The embedding point description information is marked in the data attribute of each DOM element, and the embedding point description information includes point identification information.
[0014] In some embodiments, satisfying the first condition includes:
[0015] The target DOM element has corresponding target point identification information;
[0016] The function of viewing the buried point data related to the target point identification information has been enabled.
[0017] In some embodiments, the function of viewing the buried point data associated with the target point identification information is enabled, including:
[0018] The Chrome plug-in provides a site entry function, the Chrome plug-in receives the allowed site addresses input by the user, and stores each received allowed site address in the site list;
[0019] The viewing function of the buried point data of each site in the site list can be turned on and off separately;
[0020] When the site list includes the currently visited site, check whether the viewing function of the buried point data corresponding to the current site is turned on. If the viewing function of the buried point data corresponding to the current site is turned on, the viewing function of the buried point data associated with the target point identification information is turned on, wherein the current site is the site where the target point identification information is located.
[0021] In some embodiments, the dynamically displaying the tracking data corresponding to the target DOM element includes:
[0022] The Chrome plug-in obtains the point identification information corresponding to the target DOM element through the content script;
[0023] Sending the acquired point identification information to the background of the Chrome plug-in through the API provided by the Chrome plug-in;
[0024] In the background, the point identification information is sent to the data analysis platform through the service worker to obtain the buried point data corresponding to the target DOM element.
[0025] In some embodiments, the dynamically displaying the tracking data corresponding to the target DOM element further includes:
[0026] After acquiring the embedding data corresponding to the target DOM element, sending the embedding data corresponding to the target DOM element to the content script through the API provided by the Chrome plug-in;
[0027] After receiving the embedding data corresponding to the target DOM element, the content script inserts a card on the target DOM element by creating and inserting the DOM, and the card is used to display the embedding data corresponding to the target DOM element.
[0028] In some embodiments, the presentation format includes icons, tables, and text.
[0029] In some embodiments, the method further comprises:
[0030] After the mouse moves out of the target DOM element, the card inserted on the target DOM element is destroyed.
[0031] In a second aspect, the present application provides an electronic device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any one of the methods described above when executing the computer program.
[0032] In a third aspect, the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement any of the methods described above.
[0033] Through the Chrome plug-in-based point-of-sale data display method and electronic device provided in this application, the method can directly display the point-of-sale data obtained from the data analysis platform in the form of cards on each DOM element through the Chrome plug-in, thereby achieving a close association and display between the DOM elements with buried points and their corresponding point-of-sale data, and the corresponding relationship is intuitive. Users do not need to circulate between multiple systems, which greatly improves query efficiency. BRIEF DESCRIPTION OF THE DRAWINGS
[0034] In order to more clearly illustrate the embodiments of the present application or the existing technical solutions, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0035] Figure 1 This is a flowchart of a method for displaying tracking data based on a Chrome plug-in in an embodiment of the present application;
[0036] Figure 2 It is a schematic block diagram of an electronic device in an embodiment of the present application. DETAILED DESCRIPTION
[0037] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without creative work are within the scope of protection of the present application.
[0038] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in one or more embodiments of the present application should be understood by people with ordinary skills in the field to which the present application belongs. The "first", "second" and similar words used in one or more embodiments of the present application do not indicate any order, quantity or importance, but are only used to distinguish different components. "Include" or "comprise" and similar words mean that the elements or objects appearing before the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.
[0039] Most of the data retrieval methods in related technologies require users to access and log in to the data analysis platform, where they provide relevant information of the queried points as screening conditions for retrieval. The data analysis platform uses data visualization technology to generate multi-dimensional data charts or data large screens to display relevant data charts and analysis results, which usually leads to the following problems:
[0040] 1) The analysis data display of the point is not closely related to the DOM elements of the corresponding buried points in the business system, and the corresponding relationship is not intuitive; in addition, users must clearly understand the data dictionary of the buried points before they can retrieve data charts for each point on the data analysis platform.
[0041] 2) Low data retrieval efficiency. The query process for each point requires multiple mapping retrievals from business function -> data dictionary -> data chart. Users need to transfer between multiple systems, which greatly affects the query efficiency.
[0042] The present application provides a data display method for a web front-end tracking point based on a chrome plug-in, which is used to solve the problem that the existing tracking point data display is not intuitive and the retrieval efficiency is low.
[0043] Various non-limiting implementations of the present application are described in detail below in conjunction with the accompanying drawings.
[0044] First, refer to Figure 1 , the chrome plug-in-based data display method of this application is described in detail.
[0045] The present application provides a method for displaying tracking data based on a Chrome plug-in, the method comprising:
[0046] S1: The user's browser receives the target web page provided by the website server;
[0047] S2: inserting the embedding point description information into the DOM element associated with each embedding point in the target web page;
[0048] S3: The Chrome plug-in monitors the mouse events on the target web page, and when the mouse hovers over the target DOM element, if the first condition is met, the buried point data corresponding to the target DOM element is dynamically displayed.
[0049] This application can directly display the buried data obtained from the data analysis platform in the form of cards on each DOM element through a Chrome plug-in. This achieves a close association and display between the buried DOM elements and their corresponding buried data. The corresponding relationship is intuitive, and users do not need to transfer between multiple systems, greatly improving query efficiency.
[0050] Exemplarily, the access methods of the Chrome plug-in include:
[0051] Upload the Chrome plug-in to the Chrome store and install it through the Chrome store, or download it locally and install it through Chrome locally.
[0052] This Chrome plug-in can collect element information, set events, and set basic data through web page DOM methods and ECMAScript standard methods.
[0053] When the mouse hovers over the DOM element where the buried data needs to be displayed, the data of the points associated with the DOM element is displayed in the form of dynamically rendered cards.
[0054] Exemplarily, during the initialization phase of the Chrome plug-in, a JavaScript script is inserted into the current web page in the form of content.
[0055] The inserted script will call document.addEventListener to complete global event binding, such as mouseenter and mouseleave. The registered events support both W3C standards and IE standards.
[0056] When the script detects that the target DOM element where the mouse is currently hovering has tracking point description information, it will automatically extract the tracking point description information and obtain the tracking point data from the data analysis platform through the interface.
[0057] In some embodiments, inserting the embedding point description information into the DOM element associated with each embedding point in the target webpage includes:
[0058] Determine multiple DOM elements associated with each embedding point in the target web page;
[0059] The embedding point description information is marked in the data attribute of each DOM element, and the embedding point description information includes point identification information.
[0060] Exemplarily, in the source code of the HTML of the page, the point information on the data analysis platform corresponding to the DOM element can be identified on the DOM element, for example, the buried point description information can be marked on the DOM element, which can specifically include point identification information, and the point identification information can be, for example, the module (module) and the point name (name), etc.
[0061] The embodiment of the present application also provides a chrome plug-in, on the pop-up page of the plug-in, the user can log in to the data analysis platform, and can complete the use settings of the chrome plug-in through the pop-up page, and can choose whether to enable the viewing function of the buried data of the current site. Exemplarily, the chrome plug-in can use the login interface provided by the data analysis platform to complete the user login and obtain and cache the login information. The chrome plug-in can monitor the current mouse event through the content script.
[0062] Exemplarily, the Chrome plug-in can also monitor mouse events on the current page, that is, mouse movement or operation, such as mouse hovering.
[0063] In some embodiments, satisfying the first condition includes:
[0064] The target DOM element has corresponding target point identification information;
[0065] The function of viewing the buried point data related to the target point identification information has been enabled.
[0066] For example, when there is a tracking point description information on the DOM element where the mouse is hovering, it means that the DOM element has corresponding point identification information. If the site has enabled the tracking point data viewing function at the same time, the Chrome plug-in can obtain the point identification information and send a request to the data analysis platform to obtain the corresponding tracking point data.
[0067] After the Chrome plug-in obtains the corresponding tracking data, it can render and display a card in a DOM insertion manner around the DOM element (i.e., the target DOM element) where the current mouse is hovering. The card displays the tracking data corresponding to the obtained target DOM element.
[0068] In some embodiments, the function of viewing the buried point data associated with the target point identification information is enabled, including:
[0069] The Chrome plug-in provides a site entry function, the Chrome plug-in receives the allowed site addresses input by the user, and stores each received allowed site address in the site list;
[0070] The viewing function of the buried point data of each site in the site list can be turned on and off separately;
[0071] When the site list includes the currently visited site, check whether the viewing function of the buried point data corresponding to the current site is turned on. If the viewing function of the buried point data corresponding to the current site is turned on, the viewing function of the buried point data associated with the target point identification information is turned on, wherein the current site is the site where the target point identification information is located.
[0072] Exemplarily, the pop-up page of the Chrome plug-in also provides a takeover list management function.
[0073] The Chrome plug-in provides a site entry function. For example, users can enter the allowed site addresses. After the plug-in saves the user input, it maintains a unified site list, which includes all allowed site addresses. The allowed site addresses indicate the site addresses that are authorized to have access rights.
[0074] Each site in the site list can enable or disable the viewing function of the tracking data separately.
[0075] When the currently visited site is included in the site list and the viewing function of the tracking data corresponding to the current site is turned on, it means that the viewing function of the tracking data corresponding to the current site is turned on.
[0076] Specifically, there is a corresponding relationship between the site and the DOM element. If the viewing function of the tracking data of the site corresponding to the DOM element is turned on, it means that the viewing function of the tracking data of the DOM element is turned on, and the two have the same meaning.
[0077] In some embodiments, the dynamically displaying the tracking data corresponding to the target DOM element includes:
[0078] The Chrome plug-in obtains the point identification information corresponding to the target DOM element through the content script;
[0079] Send the acquired point identification information to the background of the chrome plug-in through the API provided by the chrome plug-in;
[0080] In the background, the point identification information is sent to the data analysis platform through the service worker to obtain the buried point data corresponding to the target DOM element.
[0081] In some embodiments, the dynamically displaying the tracking data corresponding to the target DOM element further includes:
[0082] After acquiring the embedding data corresponding to the target DOM element, sending the embedding data corresponding to the target DOM element to the content script through the API provided by the Chrome plug-in;
[0083] After receiving the embedding data corresponding to the target DOM element, the content script inserts a card on the target DOM element by creating and inserting the DOM, and the card is used to display the embedding data corresponding to the target DOM element.
[0084] In some embodiments, the presentation format includes icons, tables, and text.
[0085] In some embodiments, the method further comprises:
[0086] After the mouse moves out of the target DOM element, the card inserted on the target DOM element is destroyed.
[0087] The present application discloses a method and electronic device for displaying buried data based on a Chrome plug-in. The method can assist in analyzing user operation hotspots and operation paths, help optimize product front-end interaction, and reduce user usage costs.
[0088] It should be noted that the method of one or more embodiments of the present application can be performed by a single device, such as a computer or server. The method of this embodiment can also be applied to a distributed scenario and completed by multiple devices cooperating with each other. In the case of such a distributed scenario, one of the multiple devices can only perform one or more steps in the method of one or more embodiments of the present application, and the multiple devices will interact with each other to complete the described method.
[0089] It should be noted that the above describes specific embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
[0090] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, the present application also discloses an electronic device;
[0091] Specifically, Figure 2 A schematic diagram of the hardware structure of an electronic device for displaying a method for displaying buried data based on a Chrome plug-in provided in this embodiment is shown, and the device may include: a processor 410, a memory 420, an input / output interface 430, a communication interface 440, and a bus 450. The processor 410, the memory 420, the input / output interface 430, and the communication interface 440 are connected to each other in communication within the device through the bus 450.
[0092] The processor 410 can be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application.
[0093] The memory 420 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 420 may store an operating system and other application programs. When the technical solution provided in the embodiment of the present application is implemented by software or firmware, the relevant program code is stored in the memory 420 and is called and executed by the processor 410.
[0094] The input / output interface 430 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.
[0095] The communication interface 440 is used to connect a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (for example, USB, network cable, etc.) or a wireless mode (for example, mobile network, WIFI, Bluetooth, etc.).
[0096] The bus 450 includes a path that transmits information between the various components of the device (eg, the processor 410 , the memory 420 , the input / output interface 430 , and the communication interface 440 ).
[0097] It should be noted that, although the above device only shows the processor 410, the memory 420, the input / output interface 430, the communication interface 440 and the bus 450, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiment of the present application, and does not necessarily include all the components shown in the figure.
[0098] The electronic device of the above-mentioned embodiment is used to implement the corresponding chrome plug-in-based point data display method in any of the above-mentioned embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be repeated here.
[0099] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, one or more embodiments of the present application also provide a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the chrome plug-in-based point data display method as described in any of the above embodiments.
[0100] The computer-readable medium of this embodiment includes permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.
[0101] The computer instructions stored in the storage medium of the above embodiment are used to enable the computer to execute the chrome plug-in-based point data display method as described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.
[0102] Those skilled in the art should understand that the discussion of any of the above embodiments is merely illustrative and is not intended to imply that the scope of the present application (including the claims) is limited to these examples. In line with the concept of the present application, the technical features in the above embodiments or different embodiments may be combined, the steps may be implemented in any order, and there are many other variations of different aspects of one or more embodiments of the present application as described above, which are not provided in detail for the sake of simplicity.
[0103] In addition, to simplify the description and discussion, and in order not to make one or more embodiments of the present application difficult to understand, the known power / ground connections to the integrated circuit (IC) chip and other components may or may not be shown in the provided drawings. In addition, the device can be shown in the form of a block diagram to avoid making one or more embodiments of the present application difficult to understand, and this also takes into account the fact that the details of the implementation of these block diagram devices are highly dependent on the platform on which one or more embodiments of the present application will be implemented (that is, these details should be fully within the scope of understanding of those skilled in the art). In the case of elaborating specific details (e.g., circuits) to describe exemplary embodiments of the present application, it is obvious to those skilled in the art that one or more embodiments of the present application can be implemented without these specific details or when these specific details are changed. Therefore, these descriptions should be considered illustrative rather than restrictive.
[0104] Although the present application has been described in conjunction with specific embodiments of the present application, many replacements, modifications and variations of these embodiments will be apparent to those skilled in the art from the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may use the embodiments discussed.
[0105] One or more embodiments of the present application are intended to cover all such substitutions, modifications and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of one or more embodiments of the present application should be included in the scope of protection of the present application.
Claims
1. A method for displaying buried data based on a Chrome plug-in, characterized in that: The method comprises: The user's browser receives the target web page provided by the website server; Inserting the embedding point description information into the DOM element associated with each embedding point in the target web page; The Chrome plug-in monitors mouse events on the target web page, and when the mouse hovers over the target DOM element, if the first condition is met, the buried point data corresponding to the target DOM element is dynamically displayed.
2. The method for displaying buried data based on a Chrome plug-in according to claim 1, characterized in that: The inserting of the embedding point description information into the DOM element associated with each embedding point in the target webpage includes: Determine multiple DOM elements associated with each embedding point in the target web page; The embedding point description information is marked in the data attribute of each DOM element, and the embedding point description information includes point identification information.
3. The method for displaying buried data based on a Chrome plug-in according to claim 2, characterized in that: The first condition is met, including: The target DOM element has corresponding target point identification information; The function of viewing the buried point data related to the target point identification information has been enabled.
4. The method for displaying buried data based on a Chrome plug-in according to claim 3 is characterized in that: The function of viewing the buried point data associated with the target point identification information has been enabled, including: The Chrome plug-in provides a site entry function, the Chrome plug-in receives the allowed site addresses input by the user, and stores each received allowed site address in the site list; The viewing function of the buried point data of each site in the site list can be turned on and off separately; When the site list includes the currently visited site, check whether the viewing function of the buried point data corresponding to the current site is turned on. If the viewing function of the buried point data corresponding to the current site is turned on, the viewing function of the buried point data associated with the target point identification information is turned on, wherein the current site is the site where the target point identification information is located.
5. The method for displaying buried data based on a Chrome plug-in according to claim 4 is characterized in that: The dynamically displaying the buried data corresponding to the target DOM element includes: The Chrome plug-in obtains the point identification information corresponding to the target DOM element through the content script; Sending the acquired point identification information to the background of the Chrome plug-in through the API provided by the Chrome plug-in; In the background, the point identification information is sent to the data analysis platform through the service worker to obtain the buried point data corresponding to the target DOM element.
6. The method for displaying buried data based on a Chrome plug-in according to claim 5, characterized in that: The dynamically displaying the buried data corresponding to the target DOM element also includes: After acquiring the embedding data corresponding to the target DOM element, sending the embedding data corresponding to the target DOM element to the content script through the API provided by the Chrome plug-in; After receiving the embedding data corresponding to the target DOM element, the content script inserts a card on the target DOM element by creating and inserting the DOM, and the card is used to display the embedding data corresponding to the target DOM element.
7. The method for displaying buried data based on a Chrome plug-in according to claim 6, characterized in that: The display forms include icons, tables, and text.
8. The method for displaying buried data based on a Chrome plug-in according to claim 7, characterized in that: The method further comprises: After the mouse moves out of the target DOM element, the card inserted on the target DOM element is destroyed.
9. An electronic device, comprising: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 8 when executing the computer program.
10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the method according to any one of claims 1 to 8.