Video tutorial
Webpage thermal analysis tutorial video
Overview of thermal analysis on the login page
The webpage heatmap analysis feature is based on the fully tracked $ pageview and $ WebClick events. The $ pageview event records page browsing behavior, while the $ WebClick event captures user clicks on the page. Data from these two events is crucial for generating the heatmap. Please be sure to enable the collection of these two events as instructed in the integration documentation .
Web page heatmap analysis is primarily used to analyze user clicks and engagement depth on web pages, presenting the data to users in a visually intuitive way. For more information on clickmap analysis applications, please refer to: How to Use Click Analysis to Optimize Product Experience.
Webpage Thermal Analysis Function Introduction
Original page
The following is an explanation of this page, regarding the clickable image:
- The displayed content is divided into two categories: original pages and page groups . Original pages are used to analyze the click behavior of a single page, while page groups are used to analyze the overall browsing and click behavior of a series of web pages with similar interface structures (for example, product detail pages on JD.com can be analyzed as a whole page group ).
- Event filtering criteria: Like all other analysis functions of Sensors Analytics, Webpage Heatmap Analysis can also be filtered based on event attributes, only showing events that meet the filtering criteria. It should be noted that the filtering criteria for click analysis are the common attributes of events
Web 元素点击 and Web 浏览. - User matching: Like all other analysis functions in Sensors Analytics, web page heatmap analysis can also be filtered according to user attributes.
- Select the occurrence time of event
Web 元素点击 to analyze only user clicks within that time period. - This area is sorted by page views by default, but it can also be sorted by the number of users who viewed the page and the number of clicks on elements. The page name refers to the title of the page we collected.
- Pageviews: The pageviews (PV) for this page, which is also the total number of times event
Web 浏览页面 has been viewed. - User count: The number of unique visitors (UV) who clicked on each interactive element on this page, which is also the number of users who triggered the event
Web 元素点击. - Click count: The total number of times each interactive element on this page has been clicked, which is also the total number of times event
Web 元素点击 has been executed.
Page group
The following is a description of this page:
- Define a name for the page group.
- Background page: Specify a specific page address to serve as the template page for the clickable image.
- Select the page address to add; you can use inclusion and regular expressions to match.
- You can select multiple filter criteria.
- Save this page group.
Click the image for instructions.
This section uses the Sensors Data website as a template (click data is simulated) to demonstrate the specific use of the click analysis function:
- This indicates the clicked interactive elements; the 24.70% displayed here is the click-through rate. Hovering the mouse over these clicked buttons will display a click details box. Clicking the interactive element will then trigger the corresponding interaction according to the original page logic.
- Current element content refers to the text content within this interactive element;
- Click count: How many times this button has been clicked;
- Click-through rate (CTR) is the number of clicks on this element divided by the total number of page views (PV).
- Click percentage: Number of clicks on this element / Total number of clicks on all visible elements on the entire page;
- Historical content refers to retrieving the most frequently occurring values from the button's history. For example, if it's news, the top news item changes daily.
- Click on the user list to see which specific users have clicked this button;
- Legend of click-through rate;
- Switch between display schemes for different screen sizes;
- Clicking on an interactive element on the current page will redirect the page; you can then click here to return to the previous page.
- Opening it in a new window and displaying the click graph directly on the original page makes the data look more natural.
- Drop-down menu to switch between click chart and reach rate chart;
- Switch between different clickable image schemes;
- Share this page;
- Refresh the data on the current page;
- Collapse the toolbar.
Click the image to switch between different versions (supported by version 1.12.1 and above).
(I) Differences between the two versions of the click image
First version of the click image
The style is modified on the element itself by adding pseudo-elements of "after" and "before", and all "a" tags will be styled as inline-block.
If the clickable elements on the page already have the `after` and `before` styles set, style conflicts may occur, resulting in some elements on the page not having clickable images, or changes to the page structure.
Second Edition Click Image
A click map is generated at the top layer of the page based on the relative position of the clicked element on the screen. The click map is re-rendered each time the scrollbar is scrolled or the page size is changed.
The second version of the clickable image will not modify the original style of the clickable element, which can effectively avoid style conflict issues.
The second version of the click map will not render hidden elements, but for some elements that are hidden by means of the parent element's overflow: hidden, it is impossible to determine whether they are hidden or displayed, and they will still be rendered.
(ii) Switching click image method
1. Switch between versions using the first/second version button in the upper left corner.
2. Switch using keyboard shortcuts.
Z key: First version click image
X key: Second version click image
How to refresh the click image
The second version of the click map renders the clicked element based on its relative position on the screen, so the click map will be re-rendered every time the scrollbar is scrolled or the window size is changed. For instructions on modifying the rendering delay, please refer to the relevant parameter `renderRefreshTime` in the JS SDK documentation.
The second version of the click map will only render elements that are not hidden. For some elements that are manually hidden/shown (such as drop-down menus), the click map needs to be refreshed manually when the element is displayed.
1. Refresh the page using the refresh button in the upper right corner to re-render the click graph data.
2. Use the 'r' key on your keyboard to refresh the click graph data.
Precautions
The second version of the click image can resolve the style conflicts of the first version (such as conflicts between the after and before pseudo-classes, style anomalies caused by inline-block, etc.).
The second version of the click map cannot determine whether certain elements are shown/hidden. For example, it cannot determine whether to show/hide certain elements by changing the position of child elements through the parent element's overflow: hidden, or by changing the height of the parent element to control the show/hide of child elements. The second version of the click map will render all elements that are determined to be shown on the page. Therefore, if the second version of the click map affects your page display, please switch to the first version of the click map.
Share button
Currently, the pre-built $WebClick click events collect data across various screen sizes on different devices, but the click analytics are displayed on a single screen (typically a PC).
Option 1: Click the share button, scan the QR code with your mobile phone, and view the click analysis on your mobile device. We will develop display solutions based on multiple screen sizes in the future, so please stay tuned.
Reach Rate Map User Guide
Effective dwell time: The webpage area remains unscrolled, but the mouse can be moved and clicked during this time.
Effective dwell time: The dwell time exceeds the specified time. The default value in the JavaScript SDK is 4 seconds. This parameter can be set.
If the page scrolls and the previous page stay was a valid stay, meaning it exceeded the default 4 seconds or a custom time, the JavaScript SDK will send a page stay event.
Reach rate refers to the proportion of users who ultimately reach a specific location on a webpage under current filtering conditions. Sensors Analytics calculates the page's reach depth by statistically analyzing the deepest location users reach on a page, generating a reach rate graph. The reach rate graph can be used to analyze the browsing depth of users on page types such as detail pages and landing pages, helping to optimize the design of page content and structure.
This section uses the Sensors Data website blog as a template (for simulated data) to illustrate reach rate analysis:
- This represents the percentage (in percentage) of users who have reached the current location under the current filtering conditions.
- This serves as the baseline for the current page's reach rate.
- Refresh the data on the current page.
- Collapse (drop-down) the operation toolbar.
The data in the reach graph is calculated based on UV (unique visitors), which is based on the maximum height a person can reach when viewing this webpage.
