Troubleshoot: Cannot edit iframes in the editor

  • Updated

This topic describes how to:

  • Figure out why pages might not load in the Editor
  • Load pages that use inline frames (iframes)
  • Test different variations of an iframe
 

Is your page loading incorrectly in Optimizely Web Experimentation 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 Web Experimentation allows site owners to modify certain aspects of the iframe on the page, within the Optimizely Web Experimentation 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 Web Experimentation 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 Web Experimentation does not support modifications to iframes that display ads. 

Site does not load within an iframe

Optimizely Web Experimentation 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 Web Experimentation 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 Web Experimentation 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 Visual Editor in Optimizely Web Experimentation and Optimizely Performance Edge.

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

Test variations of an iframe

When you test different variations of an iframe, think of the iframe as its own HTML page, independent of the parent page that it is loaded on. To create your experiment, you must be able to place the Optimizely Web Experimentation snippet in the source code of the iframe. Then, follow the same process that you 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 see only the content of the iframe. Create your experiment using the process that you follow in any other A/B test. 

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