Cannot edit iframes in the editor

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 lets site owners 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 is 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 do not 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 cannot load the site's pages into the Visual Editor. 

Optimizely developed a Chrome extension to work around this 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 displays.

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, you can use the following actions:

• Move and Resize

• Rearrange

• Remove

• Custom JavaScript

• Select Container

See Visual Editor in Optimizely Web Experimentation and Optimizely Performance Edge.

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 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.