Skip to main content
menu-icon.png

 

x
Optimizely Knowledge Base

Troubleshooting: Can't Edit iframes in the Editor

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!

An inline frame is an HTML document embedded inside another HTML document on a website. It is usually recognized as a window on a web page. Inline frames (<iframe> tags) provide a way for websites to display static or 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).

Test variations of the iframe content:

To test different variations of the content that is displayed in your site's iframe, you will need to access the iframe's HTML to change the src attribute.

1. Create a new Element Change.

2. Select the iframe and click the Select Container tool which will expose all layered elements.

iframe.png

3. Select the immediate parent element (element that contains the iframe ) and the iframe HTML will be displayed.

iframe_src.png

4. Change the src attribute to the desired URL you wish to load in the iframe.

5. Click Save.

Event tracking:

If you want to edit or create click events on elements within the iframe you must meet two prerequisites:

1. You must have access to the iframe content's source code in order to add the Optimizely snippet.

2. The page being loaded in the iframe must be the same origin as the main page. Optimizely does not support cross origin tracking within iframe content. For example, if your experiment page is https://www.example.com you cannot track iframe elements if the iframe URL is https://www.shop.example.com or https://examples.com. You can learn more about cross origin tracking in this knowledge base article

Setting up a hybrid page to enable click tracking

1. Navigate to the Implementation tab in the left blue rail 

2. Create a new Page. This will be your "hybrid" page that lists both the URL where the experiment will run and the iframe URL.

3. Change Page Type to A Set of URLs and list both URLs.

Screen Shot 2018-04-30 at 5.53.51 PM.png

4. Save new page.

5. Open the page you created within the Implementation tab to create a click event using the steps listed this article.

To load the iframe URL in the Optimizely editor, click on Page Settings and change URL the Editor URL setting.

6. Add the click event created on the hybrid page as a metric to experiment.

Do not add the hybrid page to the "URL Targeting" or "Pages" settings when creating the experiment. The purpose of the hybrid page is to create the click event so you can to add it as a metric. 

Tracking Youtube and Vimeo videos

To track views on YouTube and Vimeo videos, implement the instructions in this knowledge base article.

Edit the iframe element on your page

Optimizely treats the iframe as it would any element so you will be able to the rearrange, remove and modify styling as any other element. You can find instructions on how to make visual changes in this article

Optimizely does not support visual changes made to the content loaded within the iframe.  

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.