I’m trying to create a heatmap. When a user clicks anywhere on my website, I track the x/y coordinates and save them to the database. In my dashboard, I load the website inside an iframe and display those coordinates as a heatmap overlay.
The problem is that the entire website doesn’t fit inside the iframe at once, so scrolling throws off the coordinates. The iframe width also doesn’t match the original website’s width, so the points don’t appear in the correct positions.
What’s the best workaround for this? How can I accurately display the heatmap on the iframe without the coordinates getting messed up?
I track the x/y coordinates...might it be better to track the HTML elements they clicked on instead? Depends on the purpose of the heatmap I guess and what else you might do with the data, and how dynamic the site is