When Matomo (Piwik) records activities for heatmaps and session recordings, the HTML of your website is being recorded and shown when you view a heatmap or a recorded session. However, the CSS and images that your web page embeds will still be loaded from your website.
If you have removed CSS or image files from your website that are embedded within the recorded HTML, then the styles might not be shown anymore in the Heatmap or Session recording. However, any generated heatmap data or recorded session will be still correctly displayed, because we track activities in a special way with maximum accuracy. If you are loading cached CSS version with unique file names, such as
cache/223ks2j3jdmam4.cssyou can instruct Matomo to load the uncached CSS version or an always existing CSS file by change the HTML structure and setting a
<link href="cache/223ks2j3jdmam4.css" data-matomo-href="uncached.css">. In this case Matomo would load the
uncached.cssfile when viewing the heatmap.
If you have not removed CSS files but your heatmap or session recording is still not styled, your website might not support HTTPS. In this case, try to access your Matomo (Piwik) via “http://” instead of “https://”. We recommend that you keep using Matomo via “https://” and create a HTTPS certificate for your website in order to make sure the stylesheets are applied.
If you have not removed CSS files, and your website supports HTTPS, and some of your CSS or fonts or font icons are still not loaded in the Heatmap or Session recording, and your website is on a different domain name as your Matomo (Piwik) instance, the problem may be that your website does not allow cross domain requests (CORS). To confirm this is the issue, when viewing the heatmap or session recording, you can check your browser developer console (in the tabs ‘Console’ and ‘Network’), whether you see any error:
Access to Font at https://website.com from origin https://piwik.example.com has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://piwik.example.com' is therefore not allowed access.
If you see this error in the browser, the solution is to configure your website and enable CORS by outputting a HTTP header
Access-Control-Allow-Origin: *in your website responses. (Contact your webmaster for more information)
If the heatmap or session recording is still not styled, please contact us and we will investigate.