How to track iFrame content

Inline frames, better known as iFrames, complicate tracking for any analytics tools - Lucky Orange included. Here’s what you need to know.

What are iFrames?

An iFrame is an HTML document placed within another HTML document. Basically, it’s content (like a video) from a source (like YouTube) that is embedded into another source (like your website). Common iFrames include:

  • Social media feeds
  • Review platforms, such as Loox
  • Forms, including HubSpot forms on a non-HubSpot site
  • Advertising plugins

Note: Are you a Shopify merchant? Click here for a specific Shopify iFrame guide.

Why aren’t all iFrames tracked automatically? 

Because iFrames are typically through a third-party and not hosted directly on your website, tracking iFrames becomes an issue. It’s a blind spot that all conversion and analytics tools have due to the nature of iFrames. 

Here’s another way to think about it: In the digital world, you use Lucky Orange on your website to see what pages people visited, how long they stayed on each page and how they engaged with your elements.  

Let’s say instead of a website, you wanted to use Lucky Orange to record everything your guests did in your house. You wanted to see what rooms they entered, how long they stayed in each room and what items they touched. Because you are the homeowner, you have the authority to provide that accessibility.

An iFrame, in this case, would be like the house next door. You could see who was coming and going, but Lucky Orange wouldn’t have access or permission to track how guests interact with your neighbor’s house. 

Back in the digital world, it’s the same way. Lucky Orange’s tracking code recognizes that an iFrame is present but can’t tell you how people engage with it. 

What will I see if I use Lucky Orange on a website that has an iFrame?

For the most part, your analytics for your website will appear normal. On pages that include an iFrame, you will see some differences in three Lucky Orange tools: 

  • Session Recordings: You’ll see a gray box with a broken webpage icon.
  • Dynamic Heatmaps: You’ll see the iFrame content on the page, but no data will be populated.
  • Form Analytics: For forms in an iFrame, you will see that there is a form, but no data will be populated. You’ll also be unable to manually select form fields. 

In this video, you can see the visitor engage with the reviews, which are in an iFrame, and how it displays in a Session Recording: 

Are there iFrames that can be captured by Lucky Orange?

If you have access to the backend of an iFrame, such as a native video playing on your website or an app that allows you to amend the code with the iFrame, Lucky Orange can track this content.

Typically our system will automatically detect that you are using an iFrame that can be tracked. You’ll see engagement with the iFrame element, whether it’s through a Session Recording or Heatmap. In the rare case that this information isn’t automatically detected, you can add your tracking code to the backend of the iFrame. If you don’t have access to the iFrame code, you won’t be able to track the iFrame.

What do I do if I want to analyze iFrame content but I can't add the Lucky Orange tracking code? 

In most cases, the third party will provide you with analytics for the specific iFrame content, such as a YouTube video. To use Lucky Orange to evaluate how your visitors engage with the iFrame content, look at the web page’s overall click and scroll activity. 

If tracking the feature in the iFrame for this particular app is important to you, we highly recommend finding an alternative product or method that isn’t confined to an iFrame.

Again, this isn’t strictly a Lucky Orange limitation but is one that impacts all analytics and conversion optimization tools. Finding a non-iFrame option will provide additional analytics opportunities across the board. 

In rare cases, it’s possible to add the Lucky Orange tracking code within the iFrame itself. However, you must have access to the iFrame and be able to place code within it. Most third-party apps and plugins, including YouTube and Loox, don’t offer this customization.

If you can add the Lucky Orange tracking code to the iFrame itself, keep in mind that interactions within the iFrame are limited to just the iFrame and will be displayed separately from the original Session Recording or Dynamic Heatmap.

For example, let's say Visitor A is on your homepage and engages with your iFrame. When looking in Visitors, you will see a Session Recording for their homepage engagement and another separate Session Recording for their iFrame-specific engagement.