When analyzing traffic data, page traffic distribution is a very important topic. Especially for some pages with rich modules, the heat map will be a very good visualization method. On the one hand, when there are a lot of modules on the page, there is a certain memory cost to match the name of each module in the data with "who" in the real App; on the other hand, the location information of the module is also an important factor that affects the exposure and click indicators of the module itself. However, it is often not well displayed in the form of general charts.
For example, the home page of an app is a mobile number list product form that is very suitable for displaying data with a heatmap. This article will share how to build such a visual product based on a heat map kanban project that the author has experienced. The homepage of a travel app is used as an example to explain the solution (for example only). 2. Conventional methods in the industry The implementation of heatmaps in the industry is generally based on the technology of full burying, adding an event listener to the current page. When the user clicks, report the information of the clicked element (mainly including url and element path, click coordinate position and other information).
There are two options when presenting: Option 1 is to describe the distribution of user clicks on the page purely through the location information of clicks, and show which places have more clicks and which places have less clicks in the form of a real heat map. The advantage is that it is accurate to the pixel point. However, the disadvantages are also very obvious. Different resolutions and website layouts (centering, etc.) will lead to inaccurate results, and the clicked elements cannot be displayed correctly, and the page can be revised or distributed.