Due to the possible security vulnerabilities inherent to how iframes work, Hotjar's Heatmaps cannot track iframes within your pages.
If you are unfamiliar with what an iframe is, you can think of it as a web page inside another web page. You can read more about iframes on the Mozilla Developer Network. They are often used for things like:
- Chat bots.
- Third-party form tools.
- Embedded video players.
- Third-party payment processors.
- Embedded apps or pages you might have created.
Unfortunately, this means that any of these that are embedded as iframes cannot be tracked, and may not show in your Heatmaps.
There's one exception to this: 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. This does mean you can only track one or the other, 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.
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.