1. Overview
2. Record Setup
   1. Data Saving
3. Processing Under the hood
4. Maintainability/Utility

--1--

This application is composed by two modules:

• HeatmapJS_CS
  • Database/Model
  • Processes
  • Server Actions
  • Maintainability/Clean-Up
  • Utilities
• HeatmapJS_CW
  • RecordHeatmapJS (WB)
  • ShowHeatmapJS (WB)

Enable/Make sure that the Heatmap_CS module have the Light process execution activated on the Module under Operation tab

This will increase the performance significatly and won't leave unessary logs behind.

--2--

To start record data is required to drag the "RecordHeatmapJS" Webblock from HeatmapJS_CW to the pretended place.

This block have the following properties: (Check each property description on the code)

• TargetSelector (Text)
• Identifier (Text)
• CountMouseClick (Boolean)
• CountMouseMove (Boolean)
• AdvancedProperties (Structure)
  • MouseMoveTrackingDelay (Integer) (ms)
  • MininumMovesDataPointsToSave (Integer)
  • MininumClicksDataPointsToSave (Integer)
  • IsTrackUser (Boolean)

To record the whole page, if your page is based on the OutsystemsUI Layout you can use ".layout" as TargetSelector, but any selector is acceptable, just not forget to be specific, since only the first element found will be recorded.
Some Suggestion are scrollable elements, that you way to can have a full view of the use of the same

The Identifier must be unique per eSpace/Module.

It is possible to save data per user and all users, or just all users together, by using the "IsTrackUser" property.

Notes 

• By tracking both things will use more processing power and the database significantly increase.
• When the WB is destroyed, also the identifier and the window record events are removed from the DOM.
• When visualizing the page with the HeatmapJS Dashboard, no tracking will be done.
• The OnParametersChnage, won't initialize the object again, so the change on the following properties, won't take effect.
  • TargetSelector
  • CountMouseClick
  • CountMouseMove
  • MouseMoveTrackingDelay

--2.1--

The data will be saving every time that the user:

• Close the browser
• The WB is Destroyed
• OnParametersChange
• The Window size change
  • Windows Size is needed because the content and the positions of the elements is different by the browse window width size

The data save consists in:

1. Getting the data
2. Check if the minimum moves/clicks, 
3. Sent and store it on the server/database an entry, to be later processed asynchronously
4. Reset the data
   • In case of OnParametersChange and Window Size Change

--3--

Every time that a new day entry is registered on the database, a light BPT process will start.

Firstly is check if it is an entry to be processed, then the data to processed is fetched and also the already created related data (Day, Week and Month, per user/all users, per moves and clicks and screen size).

If the data wasn't created before for one set of data, this one will be created directly in the database, if already created, will be created a entry on the "Heatmap_Binary_ToProcess" table.

By creating a entry on this table, it will launch an light BPT process, that will merge the two set of data in one.

The merge of this data will help the heatmap load a lot faster.

--4--

In terms of Utility there, you can use the "TESTONLY_AddDays" (Integer) Site Property to test the store of the data in different dates, so if today is 06/07/2023, and the value of the Site Property is 1, then the data would be stored under 07/07/2023.
When the value of this Site Property is different than 0, an message will be displayed on the demo application mentioning which date the data will be stored.

In terms of Maintainability there are two timers that can be run, both timers look at the "TimerDeleteAll_ESpaceId" Site property, you can use this site property to select which eSpaceId should be clean, if the value is empty, all the eSpaces will be affected.

"Timer_DELETEALL" used to delete all data from the database
Additionally on the Heatmap Demo Application there is a button to delete all the data from the Demo eSpace only (This button won't look at the previous Site Property Mentioned)

"Timer_CleanUp" is an clean-up process that is active by default, and also by default it will run at 02:00, it will clear old data with more than 30 days, more than 12 weeks and more than 6 Month, it is possible to tweak those value on the Site Properties of the core module

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

1. Overview
2. Record Setup
   1. Data Saving
3. Processing Under the hood
4. Maintainability/Utility

--1--

This application is composed by two modules:

• HeatmapJS_CS
  • Database/Model
  • Processes
  • Server Actions
  • Maintainability/Clean-Up
  • Utilities
• HeatmapJS_CW
  • RecordHeatmapJS (WB)
  • ShowHeatmapJS (WB)

Enable/Make sure that the Heatmap_CS module have the Light process execution activated on the Module under Operation tab

This will increase the performance significatly and won't leave unessary logs behind.

--2--

To start record data is required to drag the "RecordHeatmapJS" Webblock from HeatmapJS_CW to the pretended place.

This block have the following properties: (Check each property description on the code)

• TargetSelector (Text)
• Identifier (Text)
• CountMouseClick (Boolean)
• CountMouseMove (Boolean)
• AdvancedProperties (Structure)
  • MouseMoveTrackingDelay (Integer) (ms)
  • MininumMovesDataPointsToSave (Integer)
  • MininumClicksDataPointsToSave (Integer)
  • IsTrackUser (Boolean)

To record the whole page, if your page is based on the OutsystemsUI Layout you can use ".layout" as TargetSelector, but any selector is acceptable, just not forget to be specific, since only the first element found will be recorded.
Some Suggestion are scrollable elements, that you way to can have a full view of the use of the same

The Identifier must be unique per eSpace/Module.

It is possible to save data per user and all users, or just all users together, by using the "IsTrackUser" property.

Notes 

• By tracking both things will use more processing power and the database significantly increase.
• When the WB is destroyed, also the identifier and the window record events are removed from the DOM.
• When visualizing the page with the HeatmapJS Dashboard, no tracking will be done.
• The OnParametersChnage, won't initialize the object again, so the change on the following properties, won't take effect.
  • TargetSelector
  • CountMouseClick
  • CountMouseMove
  • MouseMoveTrackingDelay

--2.1--

The data will be saving every time that the user:

• Close the browser
• The WB is Destroyed
• OnParametersChange
• The Window size change
  • Windows Size is needed because the content and the positions of the elements is different by the browse window width size

The data save consists in:

1. Getting the data
2. Check if the minimum moves/clicks, 
3. Sent and store it on the server/database an entry, to be later processed asynchronously
4. Reset the data
   • In case of OnParametersChange and Window Size Change

--3--

Every time that a new day entry is registered on the database, a light BPT process will start.

Firstly is check if it is an entry to be processed, then the data to processed is fetched and also the already created related data (Day, Week and Month, per user/all users, per moves and clicks and screen size).

If the data wasn't created before for one set of data, this one will be created directly in the database, if already created, will be created a entry on the "Heatmap_Binary_ToProcess" table.

By creating a entry on this table, it will launch an light BPT process, that will merge the two set of data in one.

The merge of this data will help the heatmap load a lot faster.

--4--

In terms of Utility there, you can use the "TESTONLY_AddDays" (Integer) Site Property to test the store of the data in different dates, so if today is 06/07/2023, and the value of the Site Property is 1, then the data would be stored under 07/07/2023.
When the value of this Site Property is different than 0, an message will be displayed on the demo application mentioning which date the data will be stored.

In terms of Maintainability there are two timers that can be run, both timers look at the "TimerDeleteAll_ESpaceId" Site property, you can use this site property to select which eSpaceId should be clean, if the value is empty, all the eSpaces will be affected.

"Timer_DELETEALL" used to delete all data from the database
Additionally on the Heatmap Demo Application there is a button to delete all the data from the Demo eSpace only (This button won't look at the previous Site Property Mentioned)

"Timer_CleanUp" is an clean-up process that is active by default, and also by default it will run at 02:00, it will clear old data with more than 30 days, more than 12 weeks and more than 6 Month, it is possible to tweak those value on the Site Properties of the core module

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