1. How it works?
2. Customization

You should have the "CanSeeHeatmap" Role to be able to visualize the heatmap

When accessing the dashboard it will be asked to you to enter a URL, you must enter the URL of the page that you pretend to visualize

Additionally the last 5 URLs will be saved on your browser cache

After being redirect and after the page loads, you will need to select an identifier, those are loaded when you click on the dropdown
The tool uses the "RecordHeatmapJS" WBs to know which identifiers that page have

After you select an identifier the tool with load all the possible filters for that identifier, is advisable that you start from the first filters to the last, because some of the filters are based on the previous one

When only one configuration is match you will have the opportunity to press in "eye" icon button to visualize the heatmap

If you change the filters, then to see the new data you will need to close and open the heatmap, additionally you can close the heatmap by clicking on it

You can also move directly to the page by clicking on the "Exit Heatmap / Go To Page" button on the top of the filters

You can also control the zIndex of the Heatmap Canvas, if some elements the the target page have a higher zIndex than the canvas.

It uses the "ShowHeatmapJS" WB available at the core module, that have the following properties:

• TargetSelector (Text) (Mandatory)
• DataPoints (List) (Mandatory)
• MinimumMax (Integer)
• AdvancedProperties (Structure)
  • Radius (Integer)
  • BackgroundColor (Text)
  • Opacity (Decimal)
  • MaxOpacity (Decimal)
  • MinOpacity (Decimal)
  • Gradient (Text JSON)
  • Blur (Boolean)
  • UseDynamicMax (Boolean)
  • MaxQuartile (Decimal)

All the values except the Mandatory Values have Default Values, and all of those except the last two of the "AdvancedProperties" structure are value of the heatmap.js library.

When "UseDynamicMax" is true, the Max value of the will be calculated using a quartile, the default is 0.9 but you can change it using the "MaxQuartile" Property
Addicionaly if the calculated value of the Quartile is lower than the "MinimumMax", the "MinimumMax" will be the one taking effect

Currently by default the clicks have a value of x3, and smaller radius, this to make it easier to identify, it is possible to change this in the code at the "Heatmap_PrepareClickDatapoints" Server Action on the "HeatmapJS_CS" module

Check more at:

heatmap.js Documentation (patrick-wied.at)
Learn from heatmap.js examples (patrick-wied.at)

Please let me know if it missing any important point that need to be documented as well.
Happy monitoring!