relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations
  • Optimizely Classic

This article will help you:
  • Figure out why pages might not load in the Editor
  • Load pages that use inline frames (iframes)
  • Test different variations of an iframe
 
Tip:

Is your page loading incorrectly in Optimizely for a different reason—in other words, an issue that isn't related to iframes? Check out our troubleshooting articles about pages that won't load in the Editor or compatibility mode and mixed content for more solutions!

Inline frames (<iframe> tags) provide a way for websites to display interactive content from other pages inside the current page. These iframes can load content from other pages on your own site or from other sites entirely (for example, to show ads or third-party buttons).

Optimizely allows site owners to modify certain aspects of the iframe on the page, within the Optimizely Editor. This method treats the iframe as an element on the page. If you want to edit or create click events or goals on elements within the iframe instead, and you control the page that's referenced, you can run an experiment on the referenced page.

Due to technical and security considerations for cross-frame communications, Optimizely actions are only supported on the iframe element itself, not the elements of the page within the iframe, if you don't control the page. Due to the way that ads are served within iframes, Optimizely does not support modifications to iframes that display ads. 

Site does not load within an iframe

Optimizely loads pages into the Visual Editor as an iframe. Some sites do not allow themselves to be loaded as an iframe outside of their own domains. In these cases, Optimizely can't load the site's pages into the Visual Editor. 

Our team developed a Chrome extension to work around this specific issue when you need to load a page into the Visual Editor.

Edit the iframe element on your page

To alter an iframe element within a variation, click the element in the Visual Editor. When the element is selected, a menu will appear that shows the actions you can take.

Edit Element... > Edit iFrame: You can modify the iframe source (src) attribute when using Optimizely as an AB testing tool. This will cause the iframe to display a different page in that variation than the page it normally would.

In addition, we support the following generic actions:

  • Move and Resize

  • Rearrange

  • Remove

  • Custom JavaScript

  • Select Container

For more information on these actions, see the Visual Editor article.

 
Note:

When an iframe is removed, Optimizely will remove the src and srcdoc attributes from the element to avoid loading the content in the hidden frame.

Test variations of an iframe

When you're testing different variations of an iframe, think of the iframe as its own HTML page, independent of the parent page that it's loaded on. To create your experiment, you must be able to place the Optimizely snippet in the source code of the iframe. Then, follow the same process that you'd use to set up any other A/B test.

  1. Create a new experiment using the URL of the iframe. This is the value in the src attribute of the iFrame.

  2. In the Visual Editor, you should now be able to see only the content of the iframe. Create your experiment using the process that you'd follow in any other A/B test.   

 
Note:

When testing variations of an iframe, make sure that your URL Targeting settings target only the iframe URL, not the parent page URL.