A background

At present, the buried point data of our page is collected manually, and basically every click behavior will add buried point data. With so much data collected, we thought, is there any other way to present this data besides lying on a table?

Naturally, we think of the thermal map of data visualization. The layout of the page is a canvas, and the user clicks on the graph constitute the click data for each location. We already have the click data, add a location dimension and it is natural to draw the thermal map of the page.

Two research

We have an idea and we start to implement it, but before we start, we need to investigate whether the current data can meet the conditions of our drawing.

The data we need has two conditions:

  1. clicks
  2. Click on the location

We have the number of hits, but we still need the location.

Some of the points we can click on correspond to the click position, but some of the points we can’t, such as the buried point of the loop element:

<template> <div v-for="(item, index) in list" :key="index" @click="itemClick(item, index)"> {{... }} </div> </template> <script> ... ItemClick (item, index) {// click log('item-click', {index}); }... </script>Copy the code

Like the above, each click burying point is the same, even if there is an index value, it is not easy to track the location of this element, plus the difference in the size of different devices, only when presented.

To solve this problem, we use the method of reporting click nodes together (the nodes can be xPath or CSS selector), and calculate the position of this point in the rendering stage, which not only solves the problem of circular element click collection, but also solves the problem of click position in different device sizes.

Iii. Data Processing

After the modification, our buried point collection tool can collect buried points and click nodes, but now the data is independent and not aggregated, so the next task is to calculate the data.

Faced with a pile of data, to determine which points are the same node, we need to specify the unique identifier of this point, so we choose page identifier +pageType+actionType+ node to mark a node, because multiple business scenarios will be applied after deployment, and it is obviously not enough to use a single click event identifier.

By calculating the click data of each point according to the above rules on a scheduled task every day, our thermal map data is finally ready.

The final step is to present.

Four drawing

There are many mature tools for mapping heat maps, but here we use lightweight HeatMapJS.

We directly display the thermal diagram on the terminal, and complete data acquisition, node location calculation, assembly and drawing of data and drawing through embedded scripts.

The effect is as follows:

Five summarizes

The final summary process is roughly as follows

In the data collection stage, the nodes at the click burying point are collected at the same time, and the unique value of the click node is determined in the post-processing data and then aggregated. In the drawing stage, node positions are calculated based on node attributes, and the thermal diagram is drawn.

Vi Follow-up Plan

At present, the scheme is relatively preliminary, mainly including single data collection, too much invalid data, and poor display effect caused by large data of single node in the thermal map, etc., which need to be optimized in the future.