Hotjar's Heatmaps cannot track iframes within your pages due to potential security problems inherent to how iframes work.
If you are unfamiliar with what an iframe is, you can think of it as a web page inside another web page. They are often used to add elements like chatbots, videos, or forms to your pages by third-party service. You can read more about iframes on the Mozilla Developer Network.
This means that any of the following content types embedded as iframes cannot be tracked, and may not show in your Heatmaps:
❌Chat bots.
❌Third-party form tools.
❌Embedded video players.
❌Third-party payment processors.
❌Embedded apps or pages you might have created.
There is an exception to this if you have the ability to edit the HTML of your iframe
If you have the ability to edit the HTML of your iframe, then you can place the Hotjar tracking code inside the iframe, instead of the parent page. With this option, you can only track the iframe or the parent page, but not both.
How do iframes appear in your Heatmap?
How an iframe will appear in your Heatmap depends a little on how the iframe works. If it's a static page, then you'll see the iframe appear in your Heatmap, though you will not see clicks against the iframe. You will see mouse over events, as these are tracked against the parent page.
If the iframe relies on JavaScript to run, you will see whatever the iframe looks like with JavaScript disabled. Very often, this means it will appear blank, or display a message indicating that JavaScript is disabled.
What limitations still exist after allowing iframes?
Before allowing an iframe, you should consider some of the limitations that still exist even after allowing the iframe.
We can track:
✔️ a static page delivered through an iframe can be displayed inside a Heatmap.
✔️ mouse over behavior is tracked, relative to the parent page.
We cannot track:
❌ clicks on elements inside an iframe.
❌ scroll events inside an iframe.
Additionally:
❌ JavaScript will not be executed.
How to create a Heatmap for a page within an iframe
Install the tracking code into the <head> element of the page within the iframe.
Only add the Tracking Code to the iframe to properly collect data
Make sure the Tracking Code is removed from the parent page. Due to current technological limitations, having the Hotjar Tracking Code on both the parent page and the iframe can cause Heatmaps of the page to fail and data collection to be skewed.
Start creating a new Heatmap.
Target the iframe URL in the page targeting section.
This is the URL of iframe page itself, not the page the iframe element is present on.
Save by clicking Create Heatmap.
Tracking iframes should work with Continuous Heatmaps
Depending on your plan, Heatmaps may be based on continuous capture instead of snapshots. If you have installed the Tracking Code within your iframe, you should be able to view a Heatmap by entering the iframe’s source URL. To learn more about Continuous Heatmaps and to find out if they are enabled on your plan, check out Continuous Heatmaps.