The iFrame guide for Shopify merchants

What are iFrames and what do they mean for Shopify merchants? Here’s what you need to know.

An introduction to iFrames

An inline frame, better known as iFrames, are essentially one website inside another website. It’s content (like a video) from a source (like YouTube) that is embedded into another source (like your Shopify store).

IFrames can include apps for:

  • Review platforms
  • Forms
  • Social media feeds
  • Advertising

Because the iFrame is hosted through a third-party and not hosted directly on your website, analytics and visitor behavior can be difficult to track. This isn't limited to Lucky Orange; it’s a blind spot for all conversion and analytics tools. 

What this means to you: Engagement with apps that require an iFrame - which include some apps available in the Shopify App Store - won’t be captured by Lucky Orange or any of your analytics tools unless the iFrame app gives you access to its code.

What happens to Lucky Orange if you use an iFrame

For the most part, your analytics for your website will appear normal. Your Dashboard will still show traffic, and your live chat will still launch for all visitors. 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:

What can you do: Reviews, social media feeds and videos

Over the course of helping 500,000 websites, including more than 50,000 Shopify stores, most iFrame content doesn’t impact your overall conversion strategy for social media feeds, reviews and embedded videos. 

Here’s why:

  1. The information from these apps play an important role in moving the visitor through the sales funnel but doesn’t necessarily impact the overall visitor experience. 
  2. Details on engagement with these apps are typically provided through the third party. For example, YouTube analytics will provide you with the necessary information needed to evaluate the success of your embedded video. 

Using Lucky Orange, you can also examine the general engagement with your webpage as well. Though clicks within the iFrame won’t be captured, you can still evaluate the page’s overall engagement through click and scroll Heatmaps. 

What can you do: Forms

When it comes to contact forms, finding an app that doesn’t require iFrames is crucial. Using Form Analytics to understand which fields have a high abandonment rate or take a long time to complete may impact your customer experience. 

You don’t want to lose a potential sale because the phone number field scared the visitor away. 

Alternative Shopify apps

The vast majority of Shopify apps available in the Shopify App Store use iFrames, including the popular review app Loox. That being said, there are apps that don’t require an iFrame. These include: 

These are just a few of the apps available without iFrames. When researching apps, we encourage you to ask the app developer for iFrame information. Most have live chat support available for assistance.  

Note: Lucky Orange doesn’t endorse these apps. We encourage you to research and test apps on your own store to ensure it meets your needs adequately. Our team is not regularly monitoring these apps for their iFrame contact but will update the document when necessary. The above mentioned apps don’t require an iFrame, providing more analytics capabilities. 

What you can do: If the app allows for tracking code to be added 

In rare cases, the third party/app may allow for tracking code to be added. If this is possible, Lucky Orange will typically automatically detect the iFrame and begin to track engagement. In rare cases, you may need to add the Lucky Orange tracking code within the iFrame itself.

To do this, you must have access to the iFrame and be able to place code within it. Many third-party apps and plugins, including YouTube and Loox, don’t offer this customization. 

If in doubt, check with the thid party/app developer for guidance. 

If you can add the Lucky Orange tracking code to the iFrame, 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.