A click data display method and device

Abstract

The present invention discloses a click data display method and device, and relates to the field of computer technology. A specific implementation of the method includes: according to the address information of the first page, obtaining the click data of the buried point of the first page, the buried point has a buried point identifier; opening the browser to render the first page, and rendering the click data of the buried point of the first page to the corresponding buried point position according to the buried point identifier to obtain the click effect page of the first page; generating a screenshot of the click effect page according to preset rules and displaying it. This implementation can accurately display the click data of the page click position, without recording the click coordinates, and without drawing an additional background image. The click data can still be correctly displayed when the page changes, and the display cost is almost unchanged, and is not affected by page scrolling or login passwords, etc., with low complexity, and can more intuitively, accurately, efficiently, and flexibly reflect the click situation of the buried point position, and can flexibly and independently select the display style and its saving format.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a click data display method and device. Background Art

[0002] At present, the display of buried point click information can be roughly divided into the following types: one is to display the buried point and click data one-to-one in a table, document or other form; the second is to obtain the buried point coordinates, set different transparencies at the corresponding coordinate positions according to the different click volumes to generate a heat map, or use CSS (Cascading Style Sheets) + Javascript (a literal scripting language) to draw the obtained click positions on a transparent background image, and overlay the transparent background image and the page to obtain a heat map.

[0003] In the process of implementing the present invention, the inventors found that there are at least the following problems in the prior art:

[0004] The display of click volume in a table is not intuitive enough. If you want to see the situation of a specific location, you need to manually compare it with the original page, or query it again based on the embedding information.

[0005] The method of storing the click coordinates and then drawing the click area heat map. Once the position of the page element changes, the heat map drawn based on the previously recorded coordinate data will not correspond to the corresponding element;

[0006] Storing click coordinates and drawing a transparent background image is complex and error-prone. If the page scrolls or a password is required to access the page, the complexity will increase. If the page changes, the background image must also change, which has poor flexibility. Summary of the invention

[0007] In view of this, an embodiment of the present invention provides a click data display method and device, which can accurately display the click data of the click position of the page without recording the click coordinates or drawing an additional background image. The click data can still be correctly displayed when the page changes, and the display cost remains almost unchanged. It is not affected by page scrolling or login passwords, etc. It has low complexity and can more intuitively, accurately, efficiently and flexibly reflect the click situation of the buried point location, and can flexibly and independently select the display style and its storage format.

[0008] To achieve the above objective, according to one aspect of an embodiment of the present invention, a click data display method is provided.

[0009] A click data display method includes: obtaining click data of a buried point of a first page according to address information of the first page, the buried point having a buried point identifier; opening a browser to render the first page, and rendering the click data of the buried point of the first page to a corresponding buried point position according to the buried point identifier to obtain a click effect page of the first page; generating a screenshot of the click effect page according to preset rules, and displaying the screenshot.

[0010] Optionally, before the step of obtaining the click data of the buried points of the first page according to the address information of the first page, it also includes: injecting buried points into each page, and collecting the user's click operation information on the buried point locations of the pages, and the pages include the first page; counting the click operation information of the buried point locations of the pages according to the buried point identifiers to generate the click data of the buried points of the pages, and saving the correspondence between the address information of the pages and the click data of the buried points of the pages.

[0011] Optionally, opening the browser to render the first page includes: sending a request to an intermediate service layer, the request including the address information of the first page and the click data of the first page's buried points; through the intermediate service layer, using the address information of the first page and the click data of the first page's buried points as running parameters of a puppeteer script, running the puppeteer script (puppeteer is a nodejs library) to open the browser and render the first page according to the address information of the first page.

[0012] Optionally, the request also includes input account login information, and the running parameters of the puppeteer script also include the account login information; running the puppeteer script to open the browser and render the first page according to the address information of the first page includes: running the puppeteer script to open the browser, automatically logging in to the first page according to the account login information, and then opening the first page.

[0013] Optionally, rendering the click data of the first page's buried point to a corresponding buried point position according to the buried point identifier includes: obtaining the DOM (Document Object Model) structure of the first page's buried point through the puppeteer script, adding a tag to the DOM structure, the tag including the click data corresponding to the buried point element in the DOM structure, overwriting the click data at the corresponding buried point element position, and displaying the click data according to the display style configured in the attributes of the tag.

[0014] Optionally, generating a screenshot of the click effect page according to preset rules and displaying the screenshot includes: generating a screenshot of the click effect page according to a configured screenshot range, saving the generated screenshot in a configured screenshot format, and sending the saved screenshot to the intermediate service layer; sending the screenshot to the click data display page for display through the intermediate service layer.

[0015] According to another aspect of an embodiment of the present invention, a click data display device is provided.

[0016] A click data display device includes: a data acquisition module, used to obtain the click data of a buried point of the first page according to the address information of the first page, the buried point having a buried point identifier; a rendering module, used to open a browser to render the first page, and render the click data of the buried point of the first page to a corresponding buried point position according to the buried point identifier to obtain a click effect page of the first page; and a display module, used to generate a screenshot of the click effect page according to preset rules, and display the screenshot.

[0017] Optionally, it also includes a data statistics module, which is used to: inject embedding points into each page and collect user click operation information on the embedding point locations of each page, wherein each page includes the first page; count the click operation information of the embedding point locations of each page according to the embedding point identifier to generate click data of the embedding points of each page, and save the correspondence between the address information of each page and the click data of the embedding points of each page.

[0018] Optionally, the rendering module includes a first rendering sub-module, which is used to: send a request to the intermediate service layer, the request including the address information of the first page and the click data of the first page buried points; through the intermediate service layer, use the address information of the first page and the click data of the first page buried points as running parameters of the puppeteer script, run the puppeteer script to open the browser, and render the first page according to the address information of the first page.

[0019] Optionally, the request also includes input account login information, and the running parameters of the puppeteer script also include the account login information; the first rendering submodule is also used to: run the puppeteer script to open the browser, automatically log in to the first page according to the account login information, and then open the first page.

[0020] Optionally, the rendering module includes a second rendering sub-module, which is used to: obtain the DOM structure of the first page embedding point through the puppeteer script, add a tag in the DOM structure, the tag includes click data corresponding to the embedding point element in the DOM structure, overwrite the click data at the corresponding embedding point element position, and display the click data according to the display style configured in the attributes of the tag.

[0021] Optionally, the display module is also used to: generate a screenshot of the click effect page according to the configured screenshot range, save the generated screenshot in the configured screenshot format, and send the saved screenshot to the intermediate service layer; through the intermediate service layer, send the screenshot to the click data display page for display.

[0022] According to yet another aspect of the embodiments of the present invention, an electronic device is provided.

[0023] An electronic device includes: one or more processors; a memory for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the click data display method provided by an embodiment of the present invention.

[0024] According to yet another aspect of an embodiment of the present invention, a computer readable medium is provided.

[0025] A computer-readable medium stores a computer program, which, when executed by a processor, implements the click data display method provided by an embodiment of the present invention.

[0026] One embodiment of the above invention has the following advantages or beneficial effects: according to the address information of the first page, the click data of the buried point of the first page is obtained, the browser is opened to render the first page, and the click data of the buried point of the first page is rendered to the corresponding buried point position according to the buried point identifier to obtain the click effect page of the first page; a screenshot of the click effect page is generated and displayed according to the preset rules. The click data of the page click position can be accurately displayed without recording the click coordinates or drawing an additional background image. The click data can still be correctly displayed when the page changes, and the display cost is almost unchanged, and it is not affected by page scrolling or login passwords, etc. It has low complexity and can more intuitively, accurately, efficiently and flexibly reflect the click situation of the buried point position, and the display style and its saving format can be flexibly selected independently.

[0027] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with specific implementation examples. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0029] Figure 1 is a schematic diagram of main steps of a click data display method according to a first embodiment of the present invention;

[0030] Figure 2 is a schematic diagram of a click data display process according to a second embodiment of the present invention;

[0031] Figure 3 is a schematic diagram of the generation and display process of a click effect graph according to the third embodiment of the present invention;

[0032] Figure 4 is a schematic diagram of main modules of a click data display device according to a fourth embodiment of the present invention;

[0033] Figure 5 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

[0034] Figure 6 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0035] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0036] Figure 1 4 is a schematic diagram of main steps of the click data display method according to the first embodiment of the present invention.

[0037] like Figure 1 As shown, a click data display method according to an embodiment of the present invention mainly includes the following steps S101 to S103.

[0038] Step S101: according to the address information of the first page, the click data of the buried point of the first page is obtained, where the buried point has a buried point identifier;

[0039] Step S102: opening a browser to render the first page, and rendering the click data of the buried points of the first page to the corresponding buried point positions according to the buried point identifiers, so as to obtain a click effect page of the first page;

[0040] Step S103: Generate a screenshot of the click effect page according to preset rules, and display the screenshot.

[0041] Among them, according to the address information of the first page, before obtaining the click data of the first page's buried points, the buried points are injected into each page in advance, and the user's click operation information on the buried point location of each page is collected. Each page includes the first page, and the click operation information of the buried point location of each page is counted according to the buried point identifier to generate the click data of the buried points of each page, and the correspondence between the address information of each page and the click data of the buried points of each page is saved.

[0042] The address information of the page is specifically the URL address of the page.

[0043] The click data can be the number of clicks.

[0044] In one embodiment, opening a browser to render a first page specifically includes: sending a request to an intermediate service layer, the request including address information of the first page and click data of the first page's buried points; through the intermediate service layer, using the address information of the first page and the click data of the first page's buried points as running parameters of a puppeteer script, running the puppeteer script to open the browser, and rendering the first page according to the address information of the first page.

[0045] In one embodiment, the request sent to the intermediate service layer may include input account login information in addition to the address information of the first page and the click data of the first page embedding point, and the running parameters of the puppeteer script may also include the account login information.

[0046] Running the puppeteer script to open the browser and render the first page according to the address information of the first page specifically includes: running the puppeteer script to open the browser, automatically logging in to the first page according to the account login information, and then opening the first page.

[0047] The browser of the embodiment of the present invention preferably uses a headless browser.

[0048] Puppeteer is a nodejs library. The puppeteer script can run automatically. For specific functions, please refer to the introduction of relevant steps. The intermediate service layer is specifically the node service layer, which is an intermediate layer built by nodejs.

[0049] In one embodiment, the click data of the first page's buried point is rendered to the corresponding buried point position according to the buried point identifier, specifically including: obtaining the DOM structure of the first page's buried point through a puppeteer script, adding a tag to the DOM structure, the tag including the click data corresponding to the buried point element in the DOM structure, overwriting the click data at the corresponding buried point element position, and displaying the click data according to the display style configured in the tag's attributes.

[0050] The click effect page of the first page refers to the page obtained after the click data is rendered to the corresponding embedding position of the first page.

[0051] In one embodiment, a screenshot of the click effect page is generated according to preset rules and the screenshot is displayed, specifically including: generating a screenshot of the click effect page according to a configured screenshot range, saving the generated screenshot in a configured screenshot format, and sending the saved screenshot to the intermediate service layer; through the intermediate service layer, sending the screenshot to the click data display page for display.

[0052] The screenshot range may be, for example, a full-screen screenshot, a fixed-width-height screenshot, etc. The screenshot format is the storage format of the screenshot, such as png, jpg, PDF, etc.

[0053] Figure 2 4 is a schematic diagram of the click data display process according to the second embodiment of the present invention.

[0054] like Figure 2 As shown, the click data display process of an embodiment of the present invention can be divided into two parts: click data collection and click effect display. Click effect display is the display of click data. The implementation process of the two parts is introduced below.

[0055] When collecting click data, embedding points are injected into the page at the front end. When the user operates the page, the JavaScript script collects the user's click operation information on the page and reports it to the server. The click operation information can be the number of clicks on the embedding point by each user. After receiving the click operation information, the server performs classification statistics based on the embedding point ID (identifier), that is, for each embedding point location, according to the number of clicks of each user at the location, the total number of clicks at the location is counted, thereby obtaining the click data of the page embedding point, and writing the click data into the database.

[0056] When displaying the click effect, the user opens the display system of the embodiment of the present invention to view the page click situation. The display system is a system that can interact with the user, which includes a click data display page for the user to select the URL address of the page to be viewed, and displays the click effect of the page to be viewed to the user. The display system also interacts with the server and node service layers. The interaction process will be described in detail below. The user is the user who views the page click data through the embodiment of the present invention. To distinguish from the user who performs click operations on the page where the embedding point is injected, it is called a user.

[0057] The user enters the display system (see ① in the figure), selects the URL address of the page to be viewed (called the current URL), and the display system sends a request to the server (see ② in the figure) to obtain the click data under the current URL. The server returns the click data under the current URL to the display system based on the corresponding relationship between the URL and the click data (see ③ in the figure, the click data under the current URL is the data in the figure). The display system sends a request with input parameters to the node service layer (see ④ in the figure), where the input parameters include the click data under the current URL and the current URL (that is, the request URL in the figure). The node service layer receives the current URL and the click data of the current URL in the request sent by the display system, and passes the current URL and the click data of the current URL as parameters to the puppeteer script (see ⑤ in the figure). The puppeteer script runs, opens a headless browser to render the URL page, and renders the click data at the corresponding embedding location (see ⑥ in the figure), and takes a screenshot of the page of the current URL with click data rendered (see ⑦ in the figure) to generate a click effect display diagram (that is, the effect diagram for short), which can be in png, jpg, PDF and other formats. The puppeteer script returns the rendering to the node service layer (see ⑧ in the figure). After the node service layer obtains the rendering, it returns it to the display system for display (see ⑨ in the figure).

[0058] Among them, opening a headless browser to render the URL page refers to the process in which the browser displays the original page of the current URL according to the DOM structure and the corresponding CSS.

[0059] The puppeteer script API (application programming interface) provides many methods, for example: the page.click method can simulate clicks, the page.focus method can focus on an element and other operations, these operations can simulate operations such as login or other processes, and the page.addScriptTag() method can introduce the jquery library (a JavaScript library) so that the DOM of the page can be freely operated using the jquery syntax in the page.evaluate method.

[0060] Rendering click data at the corresponding embedding point location means operating the DOM structure through the puppeteer script, adding the data at the embedding point location to the corresponding embedding point location, controlling the display effect through CSS in the puppeteer script, and controlling the click data to be displayed at the corresponding embedding point location through absolute positioning and other methods. Among them, the puppeteer script can be used to obtain the DOM structure of the current URL embedding point, add a tag to the DOM structure, the tag includes the click data corresponding to the embedding point element in the DOM structure, overwrite the click data at the corresponding embedding point element location, and display the click data according to the display style configured in the tag's attributes, so that the click data is displayed at the location of the corresponding embedding point element according to the configured display style. Among them, the display style can be configured in the style (type) attribute, and the display style can specifically be a numerical annotation or heat map style.

[0061] Specifically, the page.evaluate method is used to obtain the DOM structure of the buried points in the page, extract the set of elements with the specified buried point attributes, and determine the click data corresponding to each buried point location. For example: after obtaining the click data at the buried point location A, the positioning of the element at the buried point location is set to relative positioning, and then the DOM node is added using the jquery syntax, and the positioning of the added tag element is set to absolute positioning to ensure that the element with the click data written in the added tag covers the corresponding buried point location, where the customized click data display style is written in the attributes of the added tag. The above operation will trigger page reflow, the page will rebuild the DOM tree and CSS tree, and build a render tree based on the new DOM tree and CSS tree to determine which nodes there are, the style of each node and the subordinate relationship. Through the render tree, the browser calculates the position and style of each node, draws each node on the page, and then presents the entire click effect page.

[0062] You can take screenshots of the click effect page according to the configured screenshot range. Specifically, you can configure the screenshot range, form, and save format (i.e. screenshot format) through the page.screenshot() method of the puppeteer script.

[0063] The embodiment of the present invention renders the click data according to the embedding point ID on the original page opened by the headless browser and then directly takes a screenshot and saves it, thereby accurately displaying the click volume of the click position of the page, and more intuitively, accurately, efficiently and flexibly reflecting the click situation of the embedding point position. There is no need to record the click coordinates or draw an additional background image. The click data can still be correctly displayed when the page changes, and the display cost remains almost unchanged and is not affected by page scrolling or login passwords. The display method is flexible, and the display style (such as numerical annotation or heat map) and its saving format can be independently selected through parameter settings.

[0064] Figure 3 It is a schematic diagram of the generation and display process of the click effect diagram according to the third embodiment of the present invention.

[0065] like Figure 3 As shown, the user selects the page where he wants to view the click effect in the display system (for example, selects the URL address of the page where he wants to view the click effect), and enters the account login information, including the account number (account) and password (password), if login is required.

[0066] The display system sends a request to the server according to the URL address selected by the user to obtain the click data corresponding to each tracking point ID of the URL address (i.e., tracking point data in the figure, referred to as data), and then sends a request with input parameters to the node service layer. Among them, if the page that requires the URL address requires login and the user enters the account login information, the input parameters include the URL address, account number (account), password (password) and click data (data). If the page does not require login, the input parameters include the URL address and click data (data).

[0067] Taking the page that requires login as an example, after the node service layer receives the page address (url), account (account), password (password) and click data (data), it passes these data as parameters to the puppeteer script to run.

[0068] When the puppeteer script runs, a headless browser is opened to render the page corresponding to the URL address. The password is automatically filled in during the rendering process. Then the page of the URL address is opened, and the click data is rendered to the corresponding click position according to the embedding point ID in a custom style. A screenshot of the page after rendering the click data is taken and saved as a click effect graph. The format can be freely configured to be saved in png, jpg, PDF, etc. The node service layer transmits the generated click effect graph to the display system for display.

[0069] The embodiment of the present invention utilizes the combination of front-end buried points and puppeteer, directly displays the buried point information in the original page and generates a click effect diagram by taking a screenshot, which can very intuitively display the buried point location and click status. Since the buried point information is directly inserted into the page opened by the headless browser and a screenshot is taken to generate a click effect diagram, there will be no position offset, etc., which can ensure accuracy and efficiency, and will not be affected by page changes. When the user selects a page to view, the page and the click data corresponding to the buried point can be updated synchronously, which is convenient and flexible. In addition, the embodiment of the present invention utilizes puppeteer to generate a click effect diagram, and puppeteer can be used to implement many extended functions, such as simulated login, simulated operation, etc., and the display style can be flexibly set through parameter settings, and full-screen screenshots, fixed width and height screenshots, and multiple saving formats such as pictures and PDF can be selected independently.

[0070] Figure 4 4 is a schematic diagram of main modules of a click data display device according to a fourth embodiment of the present invention.

[0071] like Figure 4 As shown, the click data display device 400 of the fourth embodiment of the present invention mainly includes: a data acquisition module 401, a rendering module 402, and a display module 403.

[0072] The data acquisition module 401 is used to acquire click data of a buried point on the first page according to the address information of the first page, where the buried point has a buried point identifier;

[0073] The rendering module 402 is used to open the browser to render the first page, and render the click data of the buried point of the first page to the corresponding buried point position according to the buried point identifier to obtain a click effect page of the first page;

[0074] The display module 403 is used to generate a screenshot of the click effect page according to a preset rule and display the screenshot.

[0075] The data display device 400 may also include a data statistics module, which is used to: inject embedding points into each page and collect user click operation information on the embedding point location of each page, each page including the first page; count the click operation information of the embedding point location of each page according to the embedding point identifier to generate click data of the embedding points of each page, and save the correspondence between the address information of each page and the click data of the embedding points of each page.

[0076] The rendering module 402 includes a first rendering sub-module, which is used to: send a request to the intermediate service layer, the request including the address information of the first page and the click data of the first page buried points; through the intermediate service layer, use the address information of the first page and the click data of the first page buried points as running parameters of the puppeteer script, run the puppeteer script to open the browser, and render the first page according to the address information of the first page.

[0077] The request sent to the middle service layer also includes the input account login information, and the running parameters of the puppeteer script also include the account login information.

[0078] The first rendering submodule can also be used to: run a puppeteer script to open a browser, automatically log in to the first page according to the account login information, and then open the first page.

[0079] The rendering module 402 also includes a second rendering sub-module, which is used to: obtain the DOM structure of the first page embedding point through the puppeteer script, add a tag in the DOM structure, the tag includes click data corresponding to the embedding point element in the DOM structure, overwrite the click data at the corresponding embedding point element position, and display the click data according to the display style configured in the tag attributes.

[0080] The display module 403 can be specifically used to: generate a screenshot of the click effect page according to the configured screenshot range, save the generated screenshot in the configured screenshot format, and send the saved screenshot to the intermediate service layer; through the intermediate service layer, send the screenshot to the click data display page for display.

[0081] In addition, the specific implementation content of the click data display device in the embodiment of the present invention has been described in detail in the click data display method described above, so the repeated content will not be described here.

[0082] Figure 5 An exemplary system architecture 500 is shown to which the click data display method or click data display device according to an embodiment of the present invention can be applied.

[0083] like Figure 5 As shown, system architecture 500 may include terminal devices 501, 502, 503, a network 504 and a server 505. Network 504 is used to provide a medium for communication links between terminal devices 501, 502, 503 and server 505. Network 504 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0084] Users can use terminal devices 501, 502, 503 to interact with server 505 through network 504 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 501, 502, 503, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0085] The terminal devices 501 , 502 , and 503 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, desktop computers, and the like.

[0086] The server 505 may be a server that provides various services, such as a backend management server (only an example) that provides support for shopping websites browsed by users using the terminal devices 501, 502, and 503. The backend management server may analyze and process the received data such as product information query requests, and feed back the processing results (such as target push information, product information - only an example) to the terminal device.

[0087] It should be noted that the click data display method provided in the embodiment of the present invention is generally executed by the server 505 , and accordingly, the click data display device is generally set in the server 505 .

[0088] It should be understood that Figure 5 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0089] Reference below Figure 6 , which shows a schematic diagram of the structure of a computer system 600 of a terminal device or server suitable for implementing an embodiment of the present application. Figure 6 The terminal device or server shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0090] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage part 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the system 600 are also stored. The CPU 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0091] The following components are connected to the I / O interface 605: an input section 606 including a keyboard, a mouse, etc.; an output section 607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN card, a modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to the I / O interface 605 as needed. A removable medium 611, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 610 as needed, so that a computer program read therefrom is installed into the storage section 608 as needed.

[0092] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 609, and / or installed from the removable medium 611. When the computer program is executed by the central processing unit (CPU) 601, the above-mentioned functions defined in the system of the present application are executed.

[0093] It should be noted that the computer-readable medium shown in the present invention can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present application, a computer-readable signal medium can include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal can take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0094] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the above-mentioned module, program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0095] The modules involved in the embodiments of the present invention may be implemented by software or hardware. The modules described may also be set in a processor. For example, they may be described as: a processor includes a data acquisition module, a rendering module, and a display module. The names of these modules do not constitute a limitation on the modules themselves in certain cases. For example, the data acquisition module may also be described as "a module for acquiring click data of the buried points of the first page based on the address information of the first page."

[0096] As another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiment; or it may exist independently without being assembled into the device. The above computer-readable medium carries one or more programs. When the above one or more programs are executed by a device, the device includes: obtaining the click data of the first page's buried point according to the address information of the first page, and the buried point has a buried point identifier; opening the browser to render the first page, and rendering the click data of the first page's buried point to the corresponding buried point position according to the buried point identifier to obtain the click effect page of the first page; generating a screenshot of the click effect page according to preset rules, and displaying the screenshot.

[0097] According to the technical solution of the embodiment of the present invention, according to the address information of the first page, the click data of the buried point of the first page is obtained, the browser is opened to render the first page, and the click data of the buried point of the first page is rendered to the corresponding buried point position according to the buried point identifier to obtain the click effect page of the first page; a screenshot of the click effect page is generated and displayed according to the preset rules. It can accurately display the click data of the page click position without recording the click coordinates or drawing an additional background image. The click data can still be correctly displayed when the page changes, and the display cost remains almost unchanged, and is not affected by page scrolling or login passwords, etc. It has low complexity and can more intuitively, accurately, efficiently and flexibly reflect the click situation of the buried point position, and can flexibly and independently select the display style and its saving format.

[0098] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A click data display method, characterized in that: include: According to the address information of the first page, click data of a buried point of the first page is obtained, where the buried point has a buried point identifier; Opening a browser to render the first page, and rendering the click data of the buried points of the first page to the corresponding buried point positions according to the buried point identifiers, so as to obtain a click effect page of the first page; Generate a screenshot of the click effect page according to preset rules, and display the screenshot; The rendering of the click data of the first page embedding point to the corresponding embedding point position according to the embedding point identifier includes: obtaining the DOM structure of the first page embedding point through a puppeteer script, extracting an element set with specified embedding point attributes, determining the click data corresponding to each embedding point position element in the element set, and setting the positioning of the embedding point position element to relative positioning; adding a tag in the DOM structure, setting the positioning of the added tag element to absolute positioning, and the tag including the click data corresponding to the embedding point position element in the DOM structure; The element containing the click data in the label is overwritten at the embedding point location, and the click data is displayed according to the display style configured in the attributes of the label.

2. The method according to claim 1, characterized in that Before the step of acquiring the click data of the buried point of the first page according to the address information of the first page, the method further includes: Injecting embedding points into each page, and collecting click operation information of users on the embedding point positions of each page, wherein each page includes the first page; The click operation information of the buried point locations of each page is counted according to the buried point identifiers to generate the click data of the buried points of each page, and the correspondence between the address information of each page and the click data of the buried points of each page is saved.

3. The method according to claim 1, characterized in that The opening of the browser to render the first page includes: Sending a request to the intermediate service layer, the request including the address information of the first page and the click data of the buried point of the first page; Through the intermediate service layer, the address information of the first page and the click data of the first page buried point are used as the running parameters of the puppeteer script, and the puppeteer script is run to open the browser and render the first page according to the address information of the first page.

4. The method according to claim 3, characterized in that: The request also includes the input account login information, and the running parameters of the puppeteer script also include the account login information; The running of the puppeteer script to open the browser and render the first page according to the address information of the first page includes: The puppeteer script is run to open the browser, automatically log in to the first page according to the account login information, and then open the first page.

5. The method according to claim 3, characterized in that: Generating a screenshot of the click effect page according to a preset rule and displaying the screenshot includes: Generate a screenshot of the click effect page according to the configured screenshot range, save the generated screenshot in the configured screenshot format, and send the saved screenshot to the intermediate service layer; The screenshot is sent to the click data display page for display through the intermediate service layer.

6. A click data display device, characterized in that: include: A data acquisition module, used for acquiring click data of a buried point of the first page according to address information of the first page, wherein the buried point has a buried point identifier; A rendering module, used to open a browser to render the first page, and render the click data of the buried points of the first page to the corresponding buried point positions according to the buried point identifiers, so as to obtain a click effect page of the first page; A display module, used to generate a screenshot of the click effect page according to preset rules and display the screenshot; The rendering module is also used to: obtain the DOM structure of the first page embedding point through the puppeteer script, extract the element set with the specified embedding point attribute, determine the click data corresponding to each embedding point position element in the element set, and set the positioning of the embedding point position element to relative positioning; add a tag in the DOM structure, set the positioning of the added tag element to absolute positioning, and the tag includes the click data corresponding to the embedding point position element in the DOM structure; The element containing the click data in the label is overwritten at the embedding point location, and the click data is displayed according to the display style configured in the attributes of the label.

7. The device according to claim 6, characterized in that Also includes a statistics module for: Injecting embedding points into each page, and collecting click operation information of users on the embedding point positions of each page, wherein each page includes the first page; The click operation information of the buried point locations of each page is counted according to the buried point identifiers to generate the click data of the buried points of each page, and the correspondence between the address information of each page and the click data of the buried points of each page is saved.

8. An electronic device, characterized in that: include: one or more processors; a memory for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 5.

9. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.

Images