Table of content:
1. The process of creating a heatmap
2. Primary Reasons for Differences Between Snapshot Images and Webpages
3. Solution: Procedure for Replacing the Snapshot
The process of creating a heatmap
A heatmap is produced by gathering data such as page views (PV) and click positions, and acquiring a snapshot image of the webpage. By overlaying these two components, heatmap data is displayed.
It's important to note that while data such as the number of page views and clicks are collected, the snapshot image might occasionally differ from the actual webpage.
Primary Reasons for Differences Between Snapshot Images and Webpages
A: Cases where the loading and reflection of files or web pages take time
→Given the nature of our system, which takes a snapshot of the webpage the moment it's opened, there may be instances where the snapshot is taken while the files are still in the process of loading. *This includes files like HTML, JavaScript, CSS, etc.
B: Webpages that exceed the maximum height limit (32,500 px) for displaying heatmaps
*For scenario B, while we are unable to address this due to the automatic snapshot feature's specifications, it is possible to upload in case of adopting the solution method listed in point 3.
For scenario A, it's possible to address the issue through code modifications, such as changes to JavaScript or CSS. However, we recommend preparing a separate snapshot and replacing the existing one.
Solution: Procedure for Replacing the Snapshot
- Use a plugin or similar tool to capture the webpage you wish to view.
- Upload the captured snapshot onto Mieruca.
*This solution is applicable for both scenarios A and B.
First, you will need to capture the webpage. Please use the following plugins or similar tools.
*This guide is intended for users utilizing Google Chrome.
Fireshot
https://goo.gl/9JNp30
1. Click inspect and open the developer tool on your webpage
2. Check the screen aspect ratio of the device you want to capture
For PC: Display width at 1280px
For Tablets: Display width at 768px
For Smartphones: Display according to the default screen aspect ratio that's set
*how to check the default screen aspect ratio for smartphones? check below:
For smartphone captures, either 360px or 375px will be shown on the pulldown.
3. Display the page according to the screen aspect ratio of the device you want to capture
Click the device icon in the Developer Tools and adjust the width to match the device from which you want to capture the snapshot.
4. Use a plugin to capture the snapshot.
Use a plugin to capture the entire webpage.
*Please refresh the page when switching between PC and mobile views.
5. Upload it on Mieruca
If the upload fails, trying again often resolves the issue.
Additionally, we recommend naming your image file using only alphanumeric characters (0-9, a-z, A-Z).