Hotjar's Recordings will report both clicks and mouse movements that happen within same-origin iframes. Clicks and mouse movement will show relative to the iframe element, not the page inside the iframe. Additional configuration to both your site, and in your Hotjar settings are both required in order to display the iframe page.
When it comes to cross-origin iframes, Hotjar will not be able to collect data and will show an error message.
- Displaying same-origin iframes inside your Recordings
- Cross-origin iframes inside your Recordings
- The difference between same-origin and cross-origin
Displaying same-origin iframes inside your Recordings
Enabling a same-origin iframe inside your Recordings is a two-step process.
Add data-hj-allow-iframe as an HTML attribute to the iframe.
You can do this by adding an attribute data-hj-allow-iframe to the same-origin iframe you wish to display.
<iframe src="/page.html" data-hj-allow-iframe=""></iframe> Whitelist the domain in the site’s Hotjar settings panel.
You can find your site settings by clicking Settings > Site List, and clicking on the cog icon next to the site you want to whitelist.
You will see a field where you can insert the domain name you wish to whitelist, under the heading Whitelisted Iframe Domains For Recordings.
When the Hotjar script encounters a whitelisted iframe on a web page, the actual interactions inside that same-origin iframe won't be recorded. Instead, the URL of the iframe will be saved and reloaded inside the Recording when it's being played back if we have access to the assets. User interactions will be tracked against the iframe element itself not the page inside it.
Workarounds for the current technological limitations with tracking iframes
User interactions (clicks, scrolls, etc.) will be logged against the parent page, not the contents of the iframe. If you'd like to get a Recording of interactions happening inside of an iframe, put the Hotjar Tracking Code inside the iframe but not on the parent page. Having the Hotjar Tracking Code on both the parent page and the iFrame can cause Recordings of the page to fail and data collection to be skewed.
Cross-origin iframes inside your Recordings
Cross-origin iframes, such as iframes loading a YouTube video or a third party extension, Hotjar will not be able to collect data or display the iframe. The element will instead show an error message.
The difference between same-origin and cross-origin
Same-origin means that the page loaded within the iframe is loaded from the same exact protocol and subdomain as the parent window.
Example: Site is on www.sub1.example.com and iframe is from www.sub1.example.com
Cross-origin policy applies when the page loaded within an iframe DOES NOT match the exact protocol and subdomain as the parent window.
Example: Site is on www.sub1.example.com and iframe is from www.example.com
Warning
The URL that the iframe points to is stored on our servers and reloaded every time a recording is played. This means that if the URL triggers some additional behavior on the server that the URL points to, other than just serving the iFrame content, this could cause unexpected and adverse results.