Source code of Generating window scroll heatmap

 This software generates Window Scroll Heat Map by using recorded log at Replay visitor's actions. The implementation uses JavaConenctor and the source code's location is written at Scroll Heat map.

Location of the Source Code

 The source code of this function is in the "[ALINOUS_HOME]/admin/heatmap/" folder.

Window scroll heat map's source code

In this page, I'll explain how to generate the heat map of Window Scroll. By learning this contents, you can customize the detail of generating the Window Scroll Heat Map.

Create Window Scroll Heat Map

 You can generate the heat map by pushing "Create New Heat Map" button.

Create new Window scroll heatmap button

 Then the job to create a heat map is executed as the back ground job with progress bar. The "createHeatMap.anls" in the "new" folder is the source code. The structure of the program is simular to the Source code of Mouse Move Heat map.

source code of window heatmap generation job

The source code is below.

This function calls

  • HeatmapScroll.initRecords()
  • HeatmapScroll.makeScrollData()
  • HeatmapScroll.generateImage()


They are intialize the y coordinates value, calculate the data from the visitor's window-scroll log, and generate a image of the heat map.

Initialize the data

 The "HeatmapScroll.initRecords()" function initialize the data value for each y coordinate.

The data structure of window scroll heat map is very simple. It is because the data do not have information about x coordinate.

Calculate window scroll data

 The "HeatmapScroll.makeScrollData()" function calculate the data used in drawing heat map form the window-scroll action's log.

The "HeatmapScroll.analyzeOnePage()", which is called in this function, actually calculate the stayed time for a single access. This function uses functions whose prefix is "ScrollHeatmap". The are implemented by Java language. It is because Alinous-Core is not good at handle complex algorithm.

Create image from the calculated data

 The "HeatmapScroll.generateImage()" function creates and draws a heat map image by using Java program. After creating the heat map image, it encodes the image in Base64 format and store it into the "hm_scroll_result_image" table.

Go to Top