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.
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.
How to create a Heatmap for a page within an iframe
Install the tracking code into <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.