- 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 not loading correctly in Optimizely for another reason? Check our our article on Editor Loading for more solutions!
Inline Frames (<iFrame> tags) provide a way for websites to display interactive content from other pages inside the current page. These frames can load content from other pages on your own site, or from other sites entirely, for instance 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. Alternatively, if you wish to Edit or create Click Goals on elements within the iFrame, and you control the page that's referenced, you can run an Experiment on that referenced page.
Please note that due to technical and security considerations on cross-frame communication, Optimizely actions are only supported on the iFrame element itself and not the elements of the page within the iFrame, if you don't control that page. Due to the way that ads are served within iFrames, Optimizely does not support modifications to frames that display ads.
Edit the iFrame element on Your Page
To alter an iFrame element within a variation, click the element in the Visual Editor. Once it 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 than the one it normally would, within that variation.
In addition, the following generic actions are supported:
- Move and Resize
- Select Container
For more information on these actions, see the Visual Editor article.
When an iFrame is removed, Optimizely will remove the
srcdoc attributes from the element to avoid loading the content in the hidden frame.
Test Variations of an iFrame
When testing different variations of an iFrame, you should 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 have the ability 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.
- Create a new Experiment using the URL of the iFrame. This is the value in the
srcattribute of the iFrame.
- 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.
When testing variations of an iFrame, make sure that your URL Targeting settings target only the iFrame URL, not the parent page URL.