Thermodynamic diagram display method, device and equipment

Abstract

The embodiment of the invention discloses a method, a device and equipment for displaying thermodynamic data. According to the scheme, the method comprises the steps of obtaining a thermodynamic value of each point location of a target page, and obtaining page snapshot data of the target page; the thermodynamic value is generated by a click operation executed by a user for each point location of the target page; receiving a thermodynamic value filtering range generated by the monitoring end based on the interface sliding control; according to the thermodynamic value filtering range, the thermodynamic value of each point location is processed; and on a page structure corresponding to the page snapshot data, rendering the thermodynamic value after each point location is processed, and generating a target thermodynamic diagram.

Description

Technical Field

[0001] This specification relates to the field of big data analysis technology, and in particular to a method, apparatus, and device for displaying heat maps. Background Technology

[0002] Heatmaps are a key technology in front-end user behavior analysis used to visualize page click distribution. They can display, in a specially highlighted format, areas of interest to visitors and their geographical locations. Heatmaps provide a clear and intuitive view of visitor interests in each area of ​​the page, offering a graphical representation without the need for report data analysis or prior page analysis experience. Therefore, to statistically analyze user actions on a webpage, heatmaps are typically created based on user clicks, providing a visual representation of page activity.

[0003] In traditional solutions, when heatmap processing engines aggregate and render click data from user interaction pages, they typically need to process the click volume (Page View, or PV) of all points and then map it onto a unified color gradient for display.

[0004] As page traffic and interaction complexity increase, the number of clicks on page functionalities can reach extremely high levels. This massive volume of clicks is easily influenced by the header data, causing abnormal data at the tail to be masked. This has a more pronounced impact on heatmaps, diluting the numerical difference between normal business clicks and abnormal behavior clicks, making it difficult to highlight page anomalies on the heatmap.

[0005] Therefore, there is a need for a heatmap display method that can optimize the display for specific click volume ranges. Summary of the Invention

[0006] This specification provides one or more embodiments of a heatmap display method, apparatus, and device to solve the following technical problem: the need for a heatmap display method that can optimize the display for specific click volume ranges.

[0007] To solve the above-mentioned technical problems, one or more embodiments of this specification are implemented as follows: This specification provides a method for displaying a heat map through one or more embodiments, including: Obtain heat values ​​for each point on the target page, and obtain page snapshot data of the target page; wherein, the heat values ​​are generated by the user's click operations on each point on the target page; The receiving and monitoring terminal generates a heat value filtering range based on the interface sliding controls. Based on the heat value filtering range, the heat values ​​at each point are processed; On the page structure corresponding to the page snapshot data, the processed heat values ​​of each point are rendered to generate a target heat map.

[0008] This specification provides one or more embodiments of a heat map display device, comprising: The acquisition module acquires heat values ​​for each point on the target page and obtains page snapshot data of the target page; wherein, the heat values ​​are generated by the user's click operations on each point on the target page; The range generation module receives the heat value filtering range generated by the monitoring end based on the interface sliding control; The heat value processing module processes the heat value of each point according to the heat value filtering range; The heatmap rendering module renders the processed heat values ​​of each point on the page structure corresponding to the page snapshot data to generate the target heatmap.

[0009] This specification provides one or more embodiments of a heat map display device, comprising: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to: Obtain heat values ​​for each point on the target page, and obtain page snapshot data of the target page; wherein, the heat values ​​are generated by the user's click operations on each point on the target page; The receiving and monitoring terminal generates a heat value filtering range based on the interface sliding controls. Based on the heat value filtering range, the heat values ​​at each point are processed; On the page structure corresponding to the page snapshot data, the processed heat values ​​of each point are rendered to generate a target heat map.

[0010] The above-described at least one technical solution adopted in the embodiments of this specification can achieve the following beneficial effects: By receiving and applying heatmap value filtering ranges defined by the sliding controls on the monitoring interface, click behavior can be freely scaled and observed within different heatmap value filtering ranges. This filters out interfering heatmap values, highlighting abnormal clicks diluted in a large-scale global view or valuable low-frequency business clicks, improving the efficiency and accuracy of identifying potential problems or optimizing displays from heatmaps. After generating the heatmap value filtering range, the corresponding heatmap values ​​are rendered, achieving real-time two-way binding between the interface sliding controls and the heatmap, reducing rendering latency. On the page structure corresponding to the page snapshot data, the processed heatmap values ​​at each point are rendered to generate the target heatmap, ensuring that the processed heatmap values ​​correspond one-to-one with the actual page elements, avoiding heatmap misalignment issues caused by page structure changes or rendering differences. Attached Figure Description

[0011] To more clearly illustrate the technical solutions in the embodiments or prior art of this specification, the drawings used in the description of the embodiments or prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. In the drawings: Figure 1 A flowchart illustrating a method for displaying thermal data provided in one or more embodiments of this specification; Figure 2 A system architecture diagram for displaying thermal data in one or more embodiments of this specification; Figure 3 This is a flowchart illustrating the display of thermal data in one or more embodiments of this specification. Figure 4 A schematic diagram of a thermal data display device provided for one or more embodiments of this specification; Figure 5 This is a structural schematic diagram of a thermal data display device provided for one or more embodiments of this specification. Detailed Implementation

[0012] This specification provides a method, apparatus, and device for displaying thermal data.

[0013] To enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this specification, and not all embodiments. Based on the embodiments of this specification, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this specification.

[0014] Figure 1 This is a flowchart illustrating a method for displaying heatmap data provided in one or more embodiments of this specification. This method can be applied to various business areas, such as internet products, enterprise applications, internet finance, and e-commerce live streaming. Specifically, in the internet product field, e-commerce platforms, content platforms, and utility applications can use the solution provided in the embodiments of this specification to filter head click data from massive amounts of click data, highlighting tail anomalies and accurately identifying invalid clicks, malicious clicks, and other abnormal click behaviors. Furthermore, the solution provided in the embodiments of this specification can focus on specific heatmap value ranges required by the business, enabling analysis and identification of specific heatmap value areas. In the enterprise application field, heatmap analysis can be performed on the number of clicks on different functional points presented in high-traffic or highly interactive interfaces, thereby assisting in the functional iteration and permission control of enterprise applications. In the internet finance field, it can be applied to wealth management apps, online banking pages, etc. By adjusting the heatmap range through custom range adjustment, abnormal click behavior on the page can be identified, improving transaction security control capabilities in the internet finance field. In the e-commerce live streaming field, this technology can be applied to live product pages. By filtering out high-click-through-rate distractions for top-selling items, it highlights click-through rates for long-tail products or interactive features, helping to optimize live stream interface interactions or product recommendation strategies. This process can be executed by relevant computing devices (e.g., servers or clients for internet product businesses), and certain input parameters or intermediate results can be manually adjusted to improve accuracy.

[0015] Figure 1 The process may include the following steps: S102: Obtain the heat values ​​of each point on the target page, and obtain the page snapshot data of the target page; wherein, the heat values ​​are generated by the user's click operations on each point on the target page.

[0016] For high-traffic websites in certain business scenarios, such as e-commerce sales websites during major promotional events, massive click events are generated every second. In such scenarios, if the data for generating heatmaps is obtained based on traditional backend processing methods, the click data generated by user clicks collected from the frontend needs to be transmitted to the server over the network. Then, after data cleaning and aggregation on the server side, it is associated with another independent page snapshot service. However, this process suffers from long data processing links and high latency, which further prevents this method from supporting subsequent real-time heatmap generation. If the asynchronous decoupling method of existing third-party heatmap components, such as Leaflet Heatmap, is used for data acquisition before heatmap rendering, then the collection of click data and the capture of the target page's page structure will be separated in terms of time and source. This may result in the heatmap values ​​determined based on click data not being able to be associated with the target page's Document Object Model (DOM) structure in real time, thus failing to meet the need for rapid location of abnormal points in dynamic business scenarios such as major promotional events.

[0017] Therefore, in the embodiments of this specification, the heat values ​​of each point on the target page are obtained, and the page snapshot data of the target page are also obtained, so as to ensure the consistency of data and view at the beginning of heat map rendering.

[0018] The heatmap values ​​are derived from user clicks on various points on the target page, such as buttons, input boxes, links, and pop-up components. When a user clicks on these points, not only are the basic click counts collected, but also their coordinates on the main page, inline frames, and DOM node IDs are recorded as raw heatmap data. After obtaining the raw heatmap data, it is immediately processed according to the heatmap value conversion formula and preprocessing procedures to obtain the heatmap values. This preprocessing includes filtering outlier data and identifying boundary points for heatmap value injection, thereby improving the reliability of the subsequent heatmap rendering range and preparing standardized data for subsequent millisecond-level re-rendering.

[0019] Page snapshot data is the real-time capture and storage of the Hypertext Markup Language (HTML) structure of a target page, including its DOM structure and content state. The DOM structure provides a content access model for the entire target page, treating its content as a tree structure where each node represents a page tag or a text item within a tag. The DOM structure precisely describes the interrelationships between tags in HTML. In one embodiment, obtaining page snapshot data involves: building a simulated real-device environment on the server; passing the target page's access address to this environment; and then loading and rendering page resources according to the real user access process to ensure consistency with a real device. Through the application programming interface (API) of the simulated real-device environment, the document object model (DOM) structure and content state of the target page are synchronously collected. The collected DOM structure and content state information are then serialized, such as using JSON serialization, mapping hierarchical relationships to a tree structure, converting attribute information into standard key-value pairs, and identifying status information with status codes. This generates standardized page snapshot data, providing accurate page structure support for subsequent heat map calculations and location analysis.

[0020] Furthermore, the target page may have varying structural complexity in different business scenarios. For example, in the business scenario of an e-commerce promotional page, it might have a main page consisting of a top navigation bar and a search box, a first inline frame page consisting of a product category filter bar on the left, and a second inline frame page consisting of a waterfall list of main products in the middle. When a user clicks on the "Home Appliances" option in the first inline frame page and simultaneously clicks on a product in the second inline frame page, if only a coordinate based on the browser viewport is recorded, this coordinate will become invalid after the page scrolls. This will further cause the heatmap value of the "Home Appliances" option to be incorrectly rendered to the bottom of the page or other frames during subsequent heatmap rendering. Therefore, in order to accurately determine the heatmap values ​​of each point corresponding to the user's click operation in a complex page environment, in one embodiment, obtaining the heatmap value of the target page can be achieved through the following process: The system acquires raw heatmap data for the target page within a preset statistical period. This raw heatmap data no longer records only single viewport coordinates but includes at least: the main page coordinates, inline frame coordinates, click count, and clicked element type for each point on the target page where the user performs click operations. Here, it can be understood that the main page coordinates represent the position of the click operation within the browser window, while the inline frame coordinates represent the relative position of the click operation within its direct container, the inline frame. After obtaining the raw heatmap data, to filter out abnormal heatmap data caused by collection errors, script anomalies, or browser compatibility issues, such as negative coordinate values ​​or exceeding boundaries, the system filters the raw heatmap data located outside the inline frame boundary data based on the target page's inline frame boundary data, thus obtaining the target page's heatmap data. After obtaining the filtered heatmap data, the system calculates the final heatmap value for each point based on a preset heatmap value conversion formula and the click count of the filtered heatmap data.

[0021] In the above process, when mapping the heatmap data to obtain the heatmap values ​​for each point, the conversion is performed directly according to a preset heatmap value conversion formula after obtaining the filtered heatmap data. However, in some business scenarios, business events can cause a surge in clicks at certain points on the target page. In this case, the rendered heatmap appears as a concentrated and clearly defined color block, making it difficult to clearly distinguish whether user clicks are concentrated at the precise center of the button or evenly distributed across the entire area, thus making it difficult to determine the user's focus of interest. Therefore, to solve these problems, in a feasible embodiment, the above-mentioned data mapping of heatmap data to obtain the heatmap values ​​for each point can also be performed in the following way: In a target page containing multiple inline frames, each inline frame is an independent document with its own coordinate system. The coordinates (10, 20) within the left and middle inline frames, while the coordinate data is the same, actually point to two completely different locations. Therefore, to prevent click-based heatmap values ​​from being rendered or matched to incorrect points, leading to subsequent heatmap rendering errors, it's necessary to transform the inline frame coordinates in the heatmap data to the main page coordinate system based on the inline frame boundary data, obtaining globally unified coordinate data for all heatmap data. For example, after determining the specific location and space occupied by the frame in the main page coordinate system based on the inline frame boundary data, the inline frame coordinates in the heatmap data are superimposed with the starting position determined by the inline frame boundary data to obtain globally unified coordinate data for that point in the global coordinate system. Specifically, the horizontal and vertical coordinates of the inline frame page can be superimposed with the distance from the left edge of the inline frame page to the left side of its parent container, and the distance from the top edge of the inline frame page to the top edge of its parent container, respectively, to obtain the globally unified coordinate data of that point in the global coordinate system.

[0022] Then, to obtain a heatmap with a unified coordinate system, a two-dimensional matrix corresponding to the resolution of the target page can be obtained. The aforementioned globally unified coordinate data is then matched with the corresponding positions in this two-dimensional matrix. Based on the position matching results, the heatmap data is mapped onto this two-dimensional matrix to obtain the initial heatmap distribution data. Next, to address the issue of certain points on the target page experiencing a surge in clicks due to key events, resulting in sharply defined color blocks in the rendered heatmap and making it difficult to determine user interest focus, a diffusion process, such as Gaussian diffusion, is applied to the initial heatmap distribution data based on key events corresponding to the target page within a preset statistical period. It should be noted that key events are determined based on the time stamp of the business scenario, including events such as flash sales, new feature launches, and site-wide promotions. After obtaining the heatmap distribution data, the maximum and minimum click values ​​for the target page within the current statistical period need to be filtered out. The maximum click value is the highest number of clicks among all points, reflecting the peak interaction of the current page, while the minimum click value is typically 0. Then, based on the minimum and maximum value standardization method, the number of clicks at each point is standardized and mapped to obtain a standardized heat value matrix. The heat value of each point is determined based on the value of each point in the heat value matrix.

[0023] If heatmaps directly map colors to pixels corresponding to heat values, functional page elements like the "Back to Top" button on the target page might receive more clicks than elements like the "Buy Now" button due to their fixed position. This could cause high-traffic, low-value areas on the target page to overshadow important areas of interest in the current business scenario. To avoid this problem when the initial heatmap distribution data is directly converted into heat values, a feasible implementation divides the page into different element regions based on the click element type at each point after obtaining the heatmap distribution data. This determines the local maximum / minimum clicks for each element region in the heatmap distribution data. Then, using these local maximum / minimum clicks as a benchmark, the heatmap distribution data for different element regions is segmented and mapped to obtain a standardized heatmap value matrix. In other words, the heatmap value within each element region is standardized and mapped according to its proportion relative to the maximum / minimum clicks in that region to determine the heatmap value for each point on the target page. For example, in an e-commerce page in a certain application scenario, the "Back to Top" button receives 10,000 clicks, representing a local maximum / minimum click for its region. The "Buy Now" button received 5,000 clicks, which is also the local maximum in its region. After segmenting and mapping the local maximums of each region, these two buttons have the same heat value after subsequent segmenting and mapping based on the local maximums of each region, because their relative heat is the highest in their respective regions. Therefore, they can also be mapped to the same color space value on the heatmap.

[0024] Furthermore, in the above embodiments, to address the issue that in certain business scenarios, some points on the target page experience a surge in clicks due to key event points, resulting in distinct color blocks in the subsequently rendered heatmap and making it difficult to determine the user's focus of interest, the initial heatmap distribution data is diffused based on key event points corresponding to the target page within a preset statistical period to obtain heatmap distribution data. However, if this process involves indiscriminate expansion of the initial heatmap distribution data on the target page—that is, diffuses the initial heatmap distribution data of all points within the preset statistical period—it may mask the true level of user attention to different areas of the target page during non-key event periods. Moreover, this mechanical global diffusion of all points does not consider the physical boundaries of the page structure, easily leading to inaccurate spatial distribution calculations of heatmap values ​​and causing visually misleading results in the subsequently rendered heatmap. Therefore, to achieve selective diffusion and improve the reliability and visual accuracy of the heatmap, the diffusion processing of the initial heatmap distribution data based on key event points corresponding to the target page within a preset statistical period to obtain heatmap distribution data in the above embodiments can also be achieved in the following ways: Different business scenarios have different key event points. For example, a business scenario may have key event points including, but not limited to, pop-up activities, limited-time promotional entry displays, and important information update prompts. These key time points are events that may trigger concentrated user clicks on the page, and each key event point has a clearly recorded occurrence time and duration. In this case, based on the preset statistical period and the occurrence time and duration of each key event point, it is possible to determine whether there is any overlap between the time range of the preset statistical period and the occurrence period of any related key event point, thereby determining whether the target page's corresponding key event point is included within the preset statistical period.

[0025] If a key event point corresponding to the target page is identified within a preset statistical period, then to determine which click behaviors at which points are driven by that key event point, this embodiment of the specification acquires historical heatmap data of the target page. By comparing the historical heatmap data with the initial heatmap data, the click count difference set for each point is determined. The statistical period corresponding to the historical heatmap data does not include the key event point. Furthermore, the historical heatmap data should be as consistent as possible with basic characteristics such as traffic volume within the preset statistical period to improve the reliability of the comparison. After determining the click count difference set for each point, points with abnormal changes are selected based on the click count difference set and a preset change threshold. These points are considered candidate points affected by the key event point. It should be noted that the preset change threshold includes: a change threshold capable of capturing points showing a significant increase in click quantity, and a relative change rate threshold capable of capturing points showing a significant increase in relative proportion.

[0026] If it is determined that there are no key event points corresponding to the target page within the preset statistical period, then to avoid the problem of the heat map signal of the real interest points at the edge of the target page being masked in natural interaction scenarios without key event points, for example, in a certain scenario, the daily click base of edge points is low, but the click volume increases significantly during a specific period. However, because the click volume of the surrounding core area is extremely high or the click volume of adjacent areas is scattered, this results in the scattered distribution of the data of the point, and it is difficult to identify the heat map data. Therefore, the embodiments of this specification determine the edge points based on the initial heat map distribution data, compare the click count of the edge points with the preset click count threshold, and thus filter the edge points whose click count is greater than the preset click count threshold as candidate points.

[0027] After obtaining candidate points through the above process, to address the issue of traditional diffusion ignoring the physical boundaries of the page, the page structure of the target page can be obtained, thereby clarifying the coordinate range, border attributes, and other physical boundary data of each functional module within the target page. Then, for each candidate point, combined with the size and interaction attributes of its respective functional module, a corresponding preset diffusion radius is matched to ensure that the diffusion range is compatible with the element scale. Based on the page structure model, the diffusion range of the candidate points is restricted to the physical boundaries of their respective functional modules, forming diffusion constraint boundaries to prevent heat values ​​from spreading across module boundaries to irrelevant areas. Within the constraint boundaries, a Gaussian diffusion algorithm can be used to distribute the click counts of candidate points: with the candidate point as the center, the heat value decreases in a gradient according to the diffusion radius, with points closer to the center receiving higher heat values ​​and edge points receiving lower heat values. For example, if a candidate point is clicked 500 times and has a diffusion radius of 10 pixels, within the constraint boundaries, the center point retains 100 base heat values, and the remaining 400 are distributed to surrounding points according to the distance gradient, ultimately generating heat distribution data. The heat distribution data obtained in this way helps to eliminate the problem of concentrated color blocks obscuring the heat map during the subsequent rendering process, and can also accurately reflect the true distribution characteristics of user clicks on the page.

[0028] S104: The heat value filtering range generated by the receiving monitoring end based on the interface sliding control.

[0029] In high-stakes promotional scenarios, some target pages may contain numerous click-through points. This massive volume of click data dilutes the detection of abnormal user behavior. If operations personnel suspect bot clicks or accidental user clicks on flash sale buttons, they need to quickly and dynamically adjust the observation scope, such as only checking clicks with a frequency between 100 and 500. Traditionally, while users can set heatmap filtering ranges, this is often done through numeric input boxes. Users must repeatedly and precisely enter numbers, and confirmation is usually required for the changes to take effect. Users cannot intuitively grasp the changing trends of different heatmap ranges through interactive actions. This is especially problematic in high-stakes promotional scenarios where rapid detection of abnormal clicks is crucial. These shortcomings make it difficult for operations personnel to efficiently pinpoint issues by dynamically adjusting the observation scope. Therefore, this embodiment provides a sliding control on the monitoring interface to obtain the heatmap filtering range generated by the receiving monitoring end based on this control. This method achieves millisecond-level adjustment range and binds the adjusted heatmap value range to the target page's heatmap. This allows the target page's heatmap to change in real time based on the heatmap value filtering range, helping operations personnel quickly pinpoint areas of concentrated abnormal clicks and meeting the business needs of dynamic troubleshooting. It should be noted that... Figure 2The sliding control shown in the interface can be a Slider component. A Slider component is a user interface element, also known as a slider, slider bar, or range selector, that allows users to select a value or a set of values ​​by dragging a slider along a fixed track. This component replaces traditional input boxes or dropdown selections with intuitive visual feedback and convenient operation, improving user interaction efficiency in scenarios involving continuous value selection. Furthermore, the Slider component can define minimum and maximum heat values, determine the adjustment unit and default value of the heat value, and display a free slider to the user, allowing them to adjust the range of heat values ​​they want to observe.

[0030] Specifically, the heat value filtering range generated by the receiving monitoring terminal based on the interface sliding control includes: In the user interface layer of the monitoring terminal, set up interface sliding controls. For example, Figure 2 The interface slider control shown has two sliders, each corresponding to a continuous heat value axis. This heat value axis represents the theoretical range of heat values ​​for all points on the current target page, defaulting to [0, 1000]. The leftmost end of the slider is mapped to the minimum value 0, and the rightmost end to the maximum value 1000. To determine the user-defined heat value filtering range in real time, the server receives dragging operations from the monitoring terminal on the first and second sliders of the interface slider control. The first slider sets the lower threshold of the heat value filtering range, while the second slider sets the upper threshold. Based on the total length of the sliders and the range of the axis, the slider positions can be converted into corresponding heat values. Then, based on the current positions of the first and second sliders on the heat value axis, the heat value filtering range of the target page can be determined. For example, if the heat value corresponding to the current position of the first slider is L, and the heat value corresponding to the second slider is U, then the heat value filtering range of the target page is [L, U].

[0031] This process allows for customized range adjustment of the heatmap filtering range. For example, focusing only on the click heatmap of the last 20% of the heatmap data can make anomalies more prominent. Compared to the traditional multi-step operation based on input confirmation in input boxes, this process is simplified to a single drag-and-drop operation. This allows operators to quickly traverse multiple heatmap ranges within seconds, meeting the dynamic troubleshooting needs for rapid anomaly location in emergency scenarios. Furthermore, the heatmap filtering range determined by the interface sliding control is linked to subsequent heatmap rendering, enabling real-time rendering of the heatmap corresponding to the filtering range. This allows users to intuitively observe the heatmap's changes as the filtering range changes through continuous dragging, helping to identify anomalous click data at the tail of large volumes of click data that is influenced by the initial data.

[0032] Previously, the click heat distribution range differed greatly between a sparse target page and a densely populated e-commerce promotion homepage. A fixed range might render most of the scrolling area ineffective on a sparse page, while insufficient on a dense page. Furthermore, different key events have different click volumes and accuracy requirements, making a fixed-step, fixed-frequency interface scrolling control method unsuitable for different event investigation needs. Therefore, this method also includes: determining the configuration information of the interface scrolling control based on the page structure corresponding to the page snapshot data and the key event points corresponding to the target page. Based on this configuration information, the interface scrolling control is initialized to adapt to different business scenarios, improving analysis efficiency and accuracy. Specifically, determining the configuration information of the interface scrolling control based on the page structure corresponding to the page snapshot data and the key event points corresponding to the target page is achieved through the following process: Based on the page structure corresponding to the page snapshot data, the layout attribute information of the interface slider can be obtained. That is, by obtaining the page structure, the element density of the target page can be determined, and the layout complexity of the target page can also be determined based on the number and nesting level of its inline frames. Based on this determined page structure information, when the target page is a simple list or form page, the interface slider can be set to a horizontally compact type and placed at the bottom of the page to avoid occupying too much space. However, if the page is a complex dashboard or e-commerce homepage, the interface slider can be set to a horizontally loose type and placed in the view sidebar. Therefore, based on the page structure corresponding to the page snapshot data, layout decisions can determine the layout attribute information of the interface slider suitable for the current target page, including but not limited to the control's coordinate position on the page, display size, trigger area boundaries, and display mode.

[0033] The type of critical event points directly determines the magnitude and accuracy requirements of the thermal analysis. Therefore, to ensure that the adjustment dimensions of the interface sliding control align with the needs of the critical event points, the adjustable configuration data of the interface sliding control is determined based on the type of critical event point. The correspondence between the adjustable configuration data and the type of critical event point is pre-stored in a data table by the operator based on historical experience. The adjustable data includes: the initial range of the thermal value axis, the sliding step size, and the request frequency, etc. Based on the layout attribute information obtained above and the matched adjustable configuration data, the configuration information of the interface sliding control is generated. This configuration information facilitates the initialization of the interface sliding control, enabling it to adapt to the structural differences of different pages and meet the analysis needs of different business scenarios.

[0034] S106: Process the heat values ​​at each point according to the heat value filtering range.

[0035] Large volumes of click data are easily affected by the header data, causing abnormal data at the tail to be masked, which has a more obvious impact on heatmaps. Therefore, after obtaining the heatmap value filtering range that needs to be focused on based on the above step S104, in order to ensure that the rendered heatmap can respond synchronously with the above heatmap value filtering range, so that users can intuitively observe the process of the heatmap changing with the heatmap value filtering range by continuously dragging the interface sliding control. For example, when only focusing on the click heatmap situation of the last 20% of the heatmap value data, the heatmap value corresponding to this range will be obtained for subsequent heatmap rendering, thereby making the abnormal situation within this range more prominent. In one embodiment of this specification, the heatmap value of each point will be processed according to the heatmap value filtering range. Specifically, the heatmap value open interval corresponding to the heatmap value filtering range will be determined, thereby filtering the heatmap value outside the heatmap value open interval, and obtaining the processed heatmap value of each point; wherein, the processed heatmap value includes the zero point value.

[0036] By using open-range heatmap filtering, it is ensured that only heatmap values ​​within the filtered range are visible in the rendered result. This avoids the problems of heatmap values ​​suddenly appearing or disappearing due to user adjustments at the boundary points in closed-range filtering, as well as flickering or jumping in the heatmap at the boundaries, resulting in a disjointed visual experience. By preserving zero-point values, the stability of the data structures in subsequent WebGL rendering buffers or other rendering engines is ensured, so that the mapping relationship between each point and the target page position remains unchanged, preventing rendering errors.

[0037] S108: On the page structure corresponding to the page snapshot data, render the processed heat values ​​of each point to generate a target heat map.

[0038] Currently, when rendering heatmaps using third-party libraries such as Leaflet Heatmap, it essentially involves overlaying a heatmap layer onto a geographic coordinate map or a static image. These libraries lack the ability to perceive the webpage's DOM structure. When applied to webpage analysis, they cannot capture and correlate the precise page DOM structure at the time of a user click. Therefore, if the page experiences asynchronous content loading or layout changes, this post-rendered heatmap is prone to hotspot misalignment, meaning hotspots are rendered in incorrect positions, failing to accurately reflect the user's click behavior on the target page. To address this issue, this embodiment renders the processed heatmap values ​​for each point on the page structure corresponding to the page snapshot data, generating the target heatmap. The target heatmap is obtained by mixing the page snapshot data (HTML snapshot) with the processed heatmap values ​​from WebGL. In a certain application scenario, this can be achieved based on the following steps: Creating a WebGL context: through HTML5... <canvas>Element obtains a WebGL rendering context, ensuring the basis for 3D graphics rendering; Define shader programs: write vertex shaders and fragment shaders to define the rendering logic of 3D graphics; Vertex shaders process vertex data, while fragment shaders process pixel colors; Prepare graphics data: upload vertex data, textures, and material information of 3D models to GPU memory for rendering; Rendering loop: perform rendering operations through the WebGL API, including clearing the canvas, binding shader programs, drawing graphics, and other steps. This process is usually repeated in each frame to achieve dynamic effects.

[0039] In a feasible embodiment, the processed heat values of each point are rendered on the page structure corresponding to the page snapshot data to generate a target heat map, specifically including the following steps: To ensure accurate coordinate reference for subsequent heat value rendering and avoid misalignment of heat points and page elements, the embodiments of the present specification render the page snapshot data as a background layer. Then, on the already rendered background layer, the WebGL rendering environment initialization process is started to create a WebGL frame buffer object with a transparent channel. The hardware acceleration feature of WebGL in this process can improve the rendering efficiency of large-scale heat data, and the transparent channel of the WebGL frame buffer object ensures that the subsequent heat color superposition does not block the original content of the background layer, and clearly presents the heat distribution, achieving layered visualization of page elements and heat effects.

[0040] Then, the processed heat values of each point are transmitted to the WebGL buffer in the graphics processor memory based on the WebGL frame buffer object. That is, by directly utilizing the parallel computing capability of the graphics processor, the serial processing of the CPU is replaced, greatly improving the speed of subsequent color mapping and rendering, making it more suitable for rendering scenarios such as e-commerce homepages with dense elements and multiple heat points. Based on the pre-defined heat gradient mapping information, the heat values in the WebGL buffer are dynamically mapped to corresponding color space values one by one. It should be noted that the pre-defined heat gradient mapping information is a continuous correspondence between defined heat values and colors. The mapping process is efficiently executed through the shader program of WebGL, ensuring that each heat value can be accurately matched to the corresponding color space value. The mapped color space values are accurately superimposed and rendered on the background layer according to the coordinate positions of each point on the page snapshot background layer. The final target heat map not only retains the original structure and content of the page, but also visually presents the heat distribution of user clicks through color depth.

[0041] In traditional heatmaps, the shader program fixes the correspondence between heat values ​​and colors. If it is necessary to adjust the color gradient, such as different key events requiring different color schemes (e.g., red-orange gradient for promotional events, blue-green gradient for functional testing), the shader code needs to be rewritten, making it difficult to quickly adapt to multiple scenario requirements. Therefore, in a feasible embodiment, based on a pre-built heatmap algorithm, the heat values ​​of the WebGL buffer are dynamically mapped to the corresponding color space values ​​sequentially, specifically including the following process: Pre-defined thermal gradient mapping information defines a continuous mapping relationship from thermal values ​​to color space values. Therefore, after obtaining this information, the mapping rules are automatically converted into shader-recognizable code logic. Based on this logic, the fragment shader and vertex shader programs are updated. The vertex shader is responsible for locating the coordinates of thermal points on the page, ensuring accurate color mapping. The fragment shader is responsible for the core color calculations, converting thermal values ​​into specific colors. The WebGL rendering pipeline processes a set of data through a series of stages to ultimately generate an image and display it on the screen. After obtaining the updated fragment shader and vertex shader programs, they are bound to the corresponding rendering pipeline in the WebGL buffer according to the WebGL specification, establishing a connection between thermal data, shaders, and thermal map rendering output. This binding process ensures that the rendering pipeline prioritizes the updated shader program, avoiding color mapping errors caused by older shader versions. It also allows the graphics processor to directly read the program and data in the pipeline, laying the foundation for parallel computing. After binding is complete, the graphics processor initiates parallel computing through the rendering pipeline. The updated fragment shader program and the updated vertex shader program calculate each heat value in the WebGL buffer one by one to obtain the color space value.

[0042] Based on the preceding explanation, more intuitively, Figure 3 This is a flowchart illustrating the display of thermal data in one or more embodiments of this specification, representing an application scenario. After the monitoring user (here, the user is the operator) initiates an interactive operation via a sliding control on the interface, the server will detect whether the user's operation on the sliding control causes a change in the thermal value filtering range. If no change occurs, the process returns to the user's operation of the sliding control on the interface. If a change occurs, the process proceeds to the next step. The server will send the changed thermal range parameters to the data processing module. Then, the data processing module, based on the received thermal range parameters, will... Figure 2 The real-time data filtering engine shown filters the original click data and converts the data into a format recognizable by the WebGL engine. The target page snapshot data previously acquired and stored is called to ensure that the background layer of the heat rendering is accurately aligned with the page structure. According to the WebGL rendering process described above, the heat map is generated. The target heat map rendered is presented to the user, intuitively showing the distribution of page interaction heat. This process detects whether the interface sliding control triggers a change in the heat value filtering range, triggering data processing and rendering only when the change occurs, avoiding unnecessary repeated calculations and improving system response speed. By filtering the heat value based on the heat value filtering range, the rendered heat map focuses on the heat value range of interest to the user, helping to identify abnormal click behavior. Loading snapshots combined with WebGL rendering for target heat map rendering reduces the complexity of WebGL rendering by preprocessing the data structure of the snapshots.

[0043] Further, in the actual scene of high concurrency such as e-commerce promotion and ticket sales, the problem of page abnormal clicks is that the low-frequency detection attack is extremely disguised, aiming to map the page structure, find unpublished interfaces or verification code trigger boundaries, and such behavior is easily mixed with normal user noise and ignored by traditional risk control rules. The second is a high-frequency intensive attack, which tries to squeeze normal user resources or trigger system logic vulnerabilities through high-frequency clicks. The traditional detection model based on total amount threshold cannot distinguish human operation rhythm, often resulting in false positives or delayed responses. Moreover, after obtaining the target heat map, the heat map of a complex target page may contain thousands of hotspots. Therefore, if the operation or security personnel need to rely on experience to distinguish which are normal user clusters and which are suspicious abnormal behavior. The efficiency of this process is extremely low and prone to omissions, and is highly dependent on personnel experience. Therefore, to solve the above problems and realize timely intervention for abnormal click behavior, in one embodiment, the method further includes the following process: Clustering algorithms are used to identify target heatmaps to distinguish between densely clustered click regions and isolated anomalous click regions on the target page. Densely clustered click regions are areas where clicks are highly concentrated, forming continuous heatmap patches, typically corresponding to interactive page elements such as buttons and links. Isolated anomalous click regions are areas far from the main heatmap areas, forming isolated points or small clusters. Then, it is determined whether the isolated anomalous click region is located in a non-interactive functional area of ​​the page. This non-interactive functional area is pre-determined based on the page structure and does not contain clickable elements. In some embodiments, determining whether an isolated anomalous click region is located in a non-interactive functional area involves first determining the position coordinates of each clickable element based on the target page's page structure document, and then obtaining the center coordinates of the isolated anomalous click region. If the center coordinates do not fall within the coverage area of ​​any clickable interactive element, then the isolated anomalous click region is confirmed to be located in a non-interactive functional area. If the isolated anomalous click region is determined to be located in a non-interactive functional area, and the number of clicks in the isolated anomalous click region is greater than the historical false click rate, then the corresponding click behavior is classified as the first anomalous click behavior. The first abnormal click behavior typically indicates exploratory operations by web crawlers, vulnerability detectors, or automated tools. For identified densely clustered click areas, the click frequency of these areas within a preset time window is determined based on their time-series click data. If this click frequency exceeds a preset threshold for normal behavior, the corresponding click behavior is classified as the second abnormal click behavior. The second abnormal click behavior typically indicates machine script fraud, time-limited subscription cheating, or DDoS attacks. After identifying the first and second abnormal click behaviors, corresponding intervention strategies are implemented. For example, for the first abnormal click behavior, the session that generated the click may be marked, increasing the verification level of its subsequent operations, or temporarily restricting access to certain sensitive interfaces by the IP address or session corresponding to the first abnormal click behavior. For the second abnormal click behavior, subsequent requests from the IP address of the second abnormal click behavior are immediately blocked to protect the backend business system.

[0044] Based on the same idea, one or more embodiments of this specification also provide apparatus and devices corresponding to the above methods, such as... Figure 4 , Figure 5 As shown.

[0045] Figure 4 This specification provides a schematic diagram of the structure of a thermal data display device according to one or more embodiments, the device comprising: The acquisition module 402 acquires heat values of each point of a target page and acquires page snapshot data of the target page; wherein the heat value is generated by a click operation of a user on each point of the target page; The range generation module 404 receives a heat value filtering range generated by a monitoring terminal based on an interface sliding control; The heat value processing module 406 processes the heat value of each point according to the heat value filtering range; The heat map rendering module 408 renders the processed heat value of each point on a page structure corresponding to the page snapshot data to generate a target heat map.

[0046] Optionally, the acquisition module 402 includes a heat value acquisition module 4021 and a page snapshot data acquisition module 4022. The heat value acquisition module 4021 acquires original heat data of the target page in a preset statistical period; the original heat data at least includes main page coordinate data, inline frame page coordinate data, click frequency and click element type corresponding to the click operation of the user on each point of the target page. The abnormal heat data of the original heat data is filtered according to the inline frame page boundary data of the target page to obtain heat data of the target page. The heat data is mapped to obtain the heat value of each point.

[0047] Optionally, the heat value acquisition module 4021 acquires initial heat distribution data according to coordinate data of each heat data. The initial heat distribution data is processed by diffusion based on a key event point corresponding to the target page in the preset statistical period to obtain heat distribution data; wherein the key event point is determined based on a time mark of a business scenario. The click frequency of each point is mapped according to the click maximum value of the heat distribution data to obtain a standardized heat value matrix to determine the heat value of each point.

[0048] Optionally, the heat value acquisition module 4021 processes the initial heat distribution data by diffusion based on a key event point corresponding to the target page in the preset statistical period to obtain heat distribution data, specifically including: It is determined whether the key event point corresponding to the target page is included in the preset statistical period; If yes, the historical heat distribution data of the target page is acquired; the statistical period corresponding to the historical heat distribution data does not include the key event point. Compare the historical thermal distribution data with the initial thermal distribution data to determine candidate locations based on a preset change threshold; If not included, candidate locations are determined based on the spatial distribution characteristics of the initial thermal distribution data; Based on the page structure and the preset diffusion radius, the diffusion constraint boundary of each candidate point is determined. Within the diffusion constraint boundary, the candidate points are subjected to diffusion processing to generate thermal distribution data.

[0049] Optionally, the range generation module 404 sets an interface sliding control in the user interface layer of the monitoring end; wherein the interface sliding control has two sliders and corresponds to a continuous thermal value axis. The receiving monitoring terminal performs drag operations on the first slider and the second slider in the interface sliding control; wherein, the first slider is used to set the lower threshold of the thermal value filtering range, and the second slider is used to set the upper threshold of the thermal value filtering range. The heat value filtering range of the target page is determined based on the current positions of the first slider and the second slider on the heat value numerical axis.

[0050] Optionally, the device further includes: a control configuration module 410; The control configuration module 410 determines the configuration information of the interface sliding control based on the page structure corresponding to the page snapshot data and the key event points corresponding to the target page. The interface sliding control is initialized according to the configuration information.

[0051] Optionally, the control configuration module 410 determines the layout attribute information of the interface sliding control based on the page structure corresponding to the page snapshot data; Based on the type of the key event point, determine the adjustable configuration data of the interface sliding control; wherein, the adjustable configuration data includes: the initial range of the heat value axis, the sliding step size, and the request frequency; Based on the layout attribute information and the adjustable configuration data, the configuration information of the interface sliding control is generated.

[0052] Optionally, the thermal value processing module 406 determines the thermal value open interval corresponding to the thermal value filtering range; Filter the thermal values ​​located outside the open range of the thermal values ​​to obtain the processed thermal values ​​at each point; wherein, the processed thermal values ​​include zero-point values.

[0053] Optionally, the heatmap rendering module 408 renders the page snapshot data as a background layer; On the background layer, initialize the WebGL rendering environment and create a WebGL framebuffer object with a transparency channel; The processed thermal values ​​of each point are passed to the WebGL buffer in the graphics processor memory based on the WebGL frame buffer object; Based on the preset thermal gradient mapping information, the thermal values ​​of the WebGL buffer are dynamically mapped to the corresponding color space values ​​in sequence. The color space values ​​are overlaid and rendered onto the background layer to generate a target heatmap.

[0054] Optionally, the heatmap rendering module 408 updates the fragment shader program and the vertex shader program according to the preset thermal gradient mapping information; wherein, the preset thermal gradient mapping information defines a continuous mapping relationship from thermal values ​​to color space values. Bind the updated fragment shader and vertex shader to the WebGL buffer's rendering pipeline; The updated fragment shader program and the updated vertex shader program are used to calculate each thermal value in sequence to obtain the color space value.

[0055] Optionally, the device further includes: an anomaly detection module 412; The anomaly identification module 412 identifies densely clustered click regions and isolated abnormal click regions of the target page based on the target heatmap. Based on the spatial location information of the isolated abnormal click area, identify the first abnormal click behavior of the isolated abnormal click area; Based on the time-series click data of the densely clustered click regions, identify a second abnormal click behavior in the densely clustered click regions; Implement intervention strategies corresponding to the first abnormal click behavior and the second abnormal behavior.

[0056] Optionally, the page snapshot data acquisition module 4022 loads and renders the target page in a real device simulation environment built on the server. The document object model structure and content status of the target page are obtained through the application programming interface of the real device simulation environment. The document object model structure and content state are serialized to obtain page snapshot data.

[0057] Figure 5 A schematic diagram of a thermal data display device provided for one or more embodiments of this specification, the device comprising: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, which, when executed by the at least one processor, enable the at least one processor to: Obtain heat values ​​for each point on the target page, and obtain page snapshot data of the target page; wherein, the heat values ​​are generated by the user's click operations on each point on the target page; The receiving and monitoring terminal generates a heat value filtering range based on the interface sliding controls. Based on the heat value filtering range, the heat values ​​at each point are processed; On the page structure corresponding to the page snapshot data, the processed heat values ​​of each point are rendered to generate a target heat map.

[0058] In the 1990s, improvements to a technology could be clearly distinguished as either hardware improvements (e.g., improvements to the circuit structure of diodes, transistors, switches, etc.) or software improvements (improvements to methodology). However, with technological advancements, many methodological improvements today can be considered direct improvements to hardware circuit structures. Designers almost always obtain the corresponding hardware circuit structure by programming the improved methodology into the hardware circuit. Therefore, it cannot be said that a methodological improvement cannot be implemented using hardware physical modules. For example, a Programmable Logic Device (PLD) (such as a Field Programmable Gate Array (FPGA)) is such an integrated circuit whose logic function is determined by the user programming the device. Designers can program and "integrate" a digital system onto a PLD themselves, without needing chip manufacturers to design and manufacture dedicated integrated circuit chips. Furthermore, nowadays, instead of manually manufacturing integrated circuit chips, this programming is mostly implemented using "logic compiler" software. Similar to the software compiler used in program development, the original code before compilation must be written in a specific programming language, called a Hardware Description Language (HDL). There are many HDLs, such as ABEL (Advanced Boolean Expression Language), AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, and RHDL (Ruby Hardware Description Language). Currently, the most commonly used are VHDL (Very-High-Speed ​​Integrated Circuit Hardware Description Language) and Verilog. Those skilled in the art should also understand that by simply performing some logic programming on the method flow using one of these hardware description languages ​​and programming it into an integrated circuit, the hardware circuit implementing the logical method flow can be easily obtained.

[0059] The controller can be implemented in any suitable manner. For example, it can take the form of a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro)processor, logic gates, switches, application-specific integrated circuits (ASICs), programmable logic controllers, and embedded microcontrollers. Examples of controllers include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicon Labs C8051F320. A memory controller can also be implemented as part of the control logic of the memory. Those skilled in the art will also recognize that, in addition to implementing the controller in purely computer-readable program code form, the same functionality can be achieved by logically programming the method steps to make the controller take the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers. Therefore, such a controller can be considered a hardware component, and the means included therein for implementing various functions can also be considered as structures within the hardware component. Alternatively, the means for implementing various functions can be considered as both software modules implementing the method and structures within the hardware component.

[0060] The systems, devices, modules, or units described in the above embodiments can be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, a computer can be, for example, a personal computer, laptop computer, cellular phone, camera phone, smartphone, personal digital assistant, media player, navigation device, email device, game console, tablet computer, wearable device, or any combination of these devices.

[0061] For ease of description, the above devices are described in terms of function, divided into various units. Of course, in implementing this specification, the functions of each unit can be implemented in one or more software and / or hardware.

[0062] Those skilled in the art will understand that the embodiments of this specification can be provided as methods, systems, or computer program products. Therefore, the embodiments of this specification can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the embodiments of this specification can take the form of a computer program product implemented on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0063] This specification is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this specification. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, produce a machine for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0064] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0065] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0066] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0067] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0068] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using 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 technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0069] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0070] This specification can be described in the general context of computer-executable instructions that are executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform a specific task or implement a specific abstract data type. This specification can also be practiced in distributed computing environments, where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0071] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the embodiments of apparatus, devices, and non-volatile computer storage media are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0072] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0073] The above description is merely one or more embodiments of this specification and is not intended to limit this specification. Various modifications and variations can be made to the one or more embodiments of this specification by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principle of one or more embodiments of this specification should be included within the scope of the claims of this specification.< / canvas>

Claims

1. A method for displaying thermal data, the method comprising: Obtain heat values ​​for each point on the target page, and obtain page snapshot data of the target page; wherein, the heat values ​​are generated by the user's click operations on each point on the target page; The receiving and monitoring terminal generates a heat value filtering range based on the interface sliding controls. Based on the heat value filtering range, the heat values ​​at each point are processed; On the page structure corresponding to the page snapshot data, the processed heat values ​​of each point are rendered to generate a target heat map.

2. The method as described in claim 1, wherein obtaining the heat value of the target page specifically includes: Obtain the raw thermal data of the target page within a preset statistical period; The original heatmap data includes at least: the main page coordinates, inline frame page coordinates, number of clicks, and type of clicked element corresponding to the user's click operation on each point of the target page; Based on the inline frame page boundary data of the target page, the abnormal heat data of the original heat data is filtered to obtain the heat data of the target page; The thermal data is mapped to obtain the thermal values ​​at each point.

3. The method as described in claim 2, wherein data mapping is performed on the thermal data to obtain the thermal values ​​at each point, specifically including: Based on the coordinate data of each of the aforementioned thermal data, the initial thermal distribution data is obtained; Based on key event points corresponding to the target page and a preset statistical period, the initial heat distribution data is diffused to obtain heat distribution data; wherein, the key event points are determined based on the time stamp of the business scenario. Based on the maximum and minimum click values ​​of the heat distribution data, the number of clicks at each point is mapped to obtain a standardized heat value matrix, and the heat value at each point is determined.

4. The method as described in claim 3, wherein the initial heat distribution data is subjected to diffusion processing based on key event points corresponding to a preset statistical period and the target page to obtain heat distribution data, specifically including: Determine whether the preset statistical period contains key event points corresponding to the target page; If included, then obtain the historical heat map data of the target page; the statistical period corresponding to the historical heat map data does not include the key event point; Compare the historical thermal distribution data with the initial thermal distribution data to determine candidate locations based on a preset change threshold; If not included, candidate locations are determined based on the spatial distribution characteristics of the initial thermal distribution data; Based on the page structure and the preset diffusion radius, the diffusion constraint boundary of each candidate point is determined. Within the diffusion constraint boundary, the candidate points are subjected to diffusion processing to generate thermal distribution data.

5. The method as described in claim 1, wherein the heat value filtering range generated by the receiving monitoring end based on the interface sliding control specifically includes: In the user interface layer of the monitoring terminal, an interface sliding control is provided; wherein, the interface sliding control has two sliders and corresponds to a continuous thermal value axis; The receiving monitoring terminal performs drag operations on the first slider and the second slider in the interface sliding control; wherein, the first slider is used to set the lower threshold of the thermal value filtering range, and the second slider is used to set the upper threshold of the thermal value filtering range. The heat value filtering range of the target page is determined based on the current positions of the first slider and the second slider on the heat value numerical axis.

6. The method of claim 1, further comprising: Based on the page structure corresponding to the page snapshot data and the key event points corresponding to the target page, the configuration information of the interface sliding control is determined. The interface sliding control is initialized according to the configuration information.

7. The method as described in claim 6, based on the page structure corresponding to the page snapshot data and the key event points corresponding to the target page, determines the configuration information of the interface sliding control, specifically including: Based on the page structure corresponding to the page snapshot data, determine the layout attribute information of the interface sliding control; Based on the type of the key event point, determine the adjustable configuration data of the interface sliding control; wherein, the adjustable configuration data includes: the initial range of the heat value axis, the sliding step size, and the request frequency; Based on the layout attribute information and the adjustable configuration data, the configuration information of the interface sliding control is generated.

8. The method as described in claim 1, wherein the thermal values ​​at each point are processed according to the thermal value filtering range, specifically including: Determine the open interval of the thermal value corresponding to the thermal value filtering range; Filter the thermal values ​​located outside the open range of the thermal values ​​to obtain the processed thermal values ​​at each point; wherein, the processed thermal values ​​include zero-point values.

9. The method as described in claim 1, wherein on the page structure corresponding to the page snapshot data, the processed heat values ​​of each point are rendered to generate a target heatmap, specifically including: Render the page snapshot data as a background layer; On the background layer, initialize the WebGL rendering environment and create a WebGL framebuffer object with a transparency channel; The processed thermal values ​​of each point are passed to the WebGL buffer in the graphics processor memory based on the WebGL frame buffer object; Based on the preset thermal gradient mapping information, the thermal values ​​of the WebGL buffer are dynamically mapped to the corresponding color space values ​​in sequence. The color space values ​​are overlaid and rendered onto the background layer to generate a target heatmap.

10. The method as described in claim 9, wherein the thermal values ​​of the WebGL buffer are dynamically mapped to corresponding color space values ​​sequentially based on a preset thermal gradient mapping algorithm, specifically including: The fragment shader program and the vertex shader program are updated according to the preset thermal gradient mapping information; wherein, the preset thermal gradient mapping information defines a continuous mapping relationship from thermal values ​​to color space values; Bind the updated fragment shader and vertex shader to the WebGL buffer's rendering pipeline; The updated fragment shader program and the updated vertex shader program are used to calculate each thermal value in sequence to obtain the color space value.

11. The method of claim 1, further comprising: Based on the target heatmap, identify densely clustered click regions and isolated abnormal click regions on the target page; Based on the spatial location information of the isolated abnormal click area, identify the first abnormal click behavior of the isolated abnormal click area; Based on the time-series click data of the densely clustered click regions, identify a second abnormal click behavior in the densely clustered click regions; Implement intervention strategies corresponding to the first abnormal click behavior and the second abnormal behavior.

12. The method as described in claim 1, wherein obtaining the page snapshot data of the target page specifically includes: In a real device simulation environment built on the server, the target page is loaded and rendered; The document object model structure and content status of the target page are obtained through the application programming interface of the real device simulation environment. The document object model structure and content state are serialized to obtain page snapshot data.

13. A device for displaying thermal data, comprising: The acquisition module acquires heat values ​​for each point on the target page and obtains page snapshot data of the target page; wherein, the heat values ​​are generated by the user's click operations on each point on the target page; The range generation module receives the heat value filtering range generated by the monitoring end based on the interface sliding control; The heat value processing module processes the heat value of each point according to the heat value filtering range; The heatmap rendering module renders the processed heat values ​​of each point on the page structure corresponding to the page snapshot data to generate the target heatmap.

14. The apparatus of claim 13, wherein the acquisition module comprises: Heat value acquisition module and page snapshot data acquisition module; The heat value acquisition module acquires the original heat data of the target page within a preset statistical period; the original heat data includes at least: the main page coordinate data, inline frame page coordinate data, number of clicks, and type of clicked element corresponding to the user's click operation on each point of the target page; Based on the inline frame page boundary data of the target page, the abnormal heat data of the original heat data is filtered to obtain the heat data of the target page; The thermal data is mapped to obtain the thermal values ​​at each point.

15. The apparatus of claim 14, wherein the thermal value acquisition module acquires initial thermal distribution data based on the coordinate data of each of the thermal data; Based on key event points corresponding to a preset statistical period and the target page, the initial thermal distribution data is subjected to diffusion processing to obtain thermal distribution data; wherein... The key event points are determined based on the time stamps of the business scenario; Based on the click element type at each point, determine the local maximum click value for each element region of the heat distribution data; By segmenting and mapping the thermal distribution data using the local maximum and minimum values, a standardized thermal value matrix is ​​obtained, and the thermal value of each point is determined.

16. The apparatus of claim 15, wherein the thermal value acquisition module, based on a preset statistical period and key event points corresponding to the target page, performs diffusion processing on the initial thermal distribution data to obtain thermal distribution data, specifically including: Determine whether the preset statistical period contains key event points corresponding to the target page; If included, then obtain the historical heat map data of the target page; the statistical period corresponding to the historical heat map data does not include the key event point; Compare the historical thermal distribution data with the initial thermal distribution data to determine candidate locations based on a preset change threshold; If not included, candidate locations are determined based on the spatial distribution characteristics of the initial thermal distribution data; Based on the page structure and the preset diffusion radius, the diffusion constraint boundary of each candidate point is determined. Within the diffusion constraint boundary, the candidate points are subjected to diffusion processing to generate thermal distribution data.

17. The apparatus of claim 13, wherein the range generation module provides an interface sliding control in the user interface layer of the monitoring end; wherein, The interface sliding control has two sliders and corresponds to a continuous thermal value axis. The receiving monitoring terminal performs drag operations on the first slider and the second slider in the interface sliding control; wherein, the first slider is used to set the lower threshold of the thermal value filtering range, and the second slider is used to set the upper threshold of the thermal value filtering range. The heat value filtering range of the target page is determined based on the current positions of the first slider and the second slider on the heat value numerical axis.

18. The apparatus of claim 13, further comprising: Control configuration module; The control configuration module determines the configuration information of the interface sliding control based on the page structure corresponding to the page snapshot data and the key event points corresponding to the target page. The interface sliding control is initialized according to the configuration information.

19. The apparatus of claim 18, wherein the control configuration module determines the layout attribute information of the interface sliding control based on the page structure corresponding to the page snapshot data; Based on the type of the key event points, determine the adjustable configuration data of the interface sliding control; wherein, The adjustable configuration data includes: the initial range, sliding step size, and request frequency of the thermal value axis; Based on the layout attribute information and the adjustable configuration data, the configuration information of the interface sliding control is generated.

20. The apparatus of claim 13, wherein the thermal value processing module determines the thermal value open interval corresponding to the thermal value filtering range; Filter out heat values ​​outside the defined heat value open range to obtain the processed heat values ​​for each point; wherein... The processed thermal value includes a zero-point value.

21. The apparatus of claim 13, wherein the heatmap rendering module renders the page snapshot data as a background layer; On the background layer, initialize the WebGL rendering environment and create a WebGL framebuffer object with a transparency channel; The processed thermal values ​​of each point are passed to the WebGL buffer in the graphics processor memory based on the WebGL frame buffer object; Based on the preset thermal gradient mapping information, the thermal values ​​of the WebGL buffer are dynamically mapped to the corresponding color space values ​​in sequence. The color space values ​​are overlaid and rendered onto the background layer to generate a target heatmap.

22. The apparatus of claim 21, wherein the heatmap rendering module updates the fragment shader program and the vertex shader program according to preset thermal gradient mapping information; wherein, The preset thermal gradient mapping information defines a continuous mapping relationship from thermal values ​​to color space values; Bind the updated fragment shader and vertex shader to the WebGL buffer's rendering pipeline; The updated fragment shader program and the updated vertex shader program are used to calculate each thermal value in sequence to obtain the color space value.

23. The apparatus of claim 13, further comprising: Anomaly detection module; The anomaly detection module identifies densely clustered click regions and isolated abnormal click regions on the target page based on the target heatmap. Based on the spatial location information of the isolated abnormal click area, identify the first abnormal click behavior of the isolated abnormal click area; Based on the time-series click data of the densely clustered click regions, identify a second abnormal click behavior in the densely clustered click regions; Implement intervention strategies corresponding to the first abnormal click behavior and the second abnormal behavior.

24. The apparatus of claim 14, wherein the page snapshot data acquisition module loads and renders the target page in a real device simulation environment constructed on the server side; The document object model structure and content status of the target page are obtained through the application programming interface of the real device simulation environment. The document object model structure and content state are serialized to obtain page snapshot data.

25. A device for displaying a heat map, comprising: At least one processor; as well as, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to: Obtain heat values ​​for each point on the target page, and obtain page snapshot data of the target page; wherein, the heat values ​​are generated by the user's click operations on each point on the target page; The receiving and monitoring terminal generates a heat value filtering range based on the interface sliding controls. Based on the heat value filtering range, the heat values ​​at each point are processed; On the page structure corresponding to the page snapshot data, the processed heat values ​​of each point are rendered to generate a target heat map.

Images