Tracking heatmap implementation

[martondani1]

Hello everyone!

Have you ever used any sort of heatmap library with SAP UI5? I tried to use Hotjar, but the recording is not showing the styled elements, only the plain HTML elements so the page looks broken on the recording.
At first try I injected the tracking code snippet to the App.controller.js, but I have a feeling that it shuold be placed somewhere else. It seems like the elements are showing before the renderer does it's job, so that's why I think it should be placed somewhere else.

Here is a picture about the recording which should be a calendar:

If you have any idea, I'm open to anything.

[martondani1 · Accepted solution]

Nevermind, I've figured it out.
In case you would like to add hotjar snippet to your UI5 application, you have to place the code snippet into the Component.js file's init function and the recording will be saved normally.

[ookennyoo · Accepted solution]

Hello Daniel,

I’m very interested by this subject.
could you please provide us an example of implementation in the component ?

Thanks a lot for your help !

Best regards

Anthony

[martondani1 · Accepted solution]

Hi Anthony!

I was wrong about thinking that it works because it's kind of in between. Let me explain.
A few things came up after I tought it works. Turns out, that hotjar only can get the CSS data, when their servers are able to reach the app of yours to build a snapshot of the app in question.
Hotjar has 2 kind of features where you can see a screenshot of your app. One of it is the recording of a specific login, and the other when they make a heatmap of all the recordings.

Basically if you can sign in to your app, it will show properly on the recording because it can load the css back from your local cache for display.

This is great and everything, but the heatmap works differently and if you have the app behind an authentication sercive, they can't build a screenshot because they can't reach the css of your app.
I have asked the hotjar supprt if it's possible to load in css from an externas source, (since UI5 is available globally) but they said, it's not possible because their script tries to fetch it from the url you have provided to them.

Long story short, If you login first, you can watch recordings, but if you want to add heatmaps, it wont work until you have an open app without authentication.

I also tried a workaround with an oAuth service but I wasn't able to make it work.

If you find any info please comment here. 😄