Issue with my Angular Ionic app where the SCSS files aren't being properly tracked, which is causing the Heat Maps UI to be destroyed.

[tuhinkolese]

Hello everyone,

I am currently facing an issue while implementing ms-clarity in an Angular website and ionic Native (Android application) using Capacitor. While the clarity dashboard is successfully capturing data, the SCSS/CSS is not loading properly.

I kindly request your assistance in proposing a solution to this problem. Any input or advice would be greatly appreciated.

[ibradwan]

Hi tuhinkolese,

Could you please elaborate more whether you're using the ClarityJs script within your website or you're using the Clarity SDK for Ionic apps?

[tuhinkolese]

Hi Ibrahim, In our project, we utilize the Clarity SDK for Android. For the web portion of the project, we use the ClarityJS Script which is placed in the index.html head tag. For further reference, I have shared a code snippet for the web portion below.

........... ...........

Project Framework: We are using Ionic with Angular along with Capacitor for the Native part of the project.

[ibradwan]

Well, you should need to do so if you're using the Ionic package, because the package will capture both native and web content in the same session.

[tuhinkolese]

Well, I removed the script from HTML and used the ionic package but in the web, ClarityPlugin is not defined.

[tuhinkolese]

[ibradwan]

Yes that's a known issue with Capacitor + Ionic cordova based plugins. Please apply this condition and see:

[tuhinkolese]

The Problem is that SCSS files are not being properly tracked, which is causing the Heat Maps UI to be destroyed.

Would you be able to provide me with the necessary line of code for the web platform for Ionic? While the Android platform appears to be functioning correctly, and Tracked in Clarity DashBoard but CSS issue exists.

[tuhinkolese]

For Android implementations