- Optimizely Feature Experimentation
- Optimizely Full Stack (Legacy)
- Optimizely Web Experimentation
- Optimizely Performance Edge
Have you tried other troubleshooting methods and cannot load your page into the editor correctly? Installing our Optimizely Experimentation Assistant Chrome extension may help you with loading your page. The Chrome extension does the following things:
- Injects your snippet on the page if Optimizely Experimentation cannot find it.
- Disables the editor from loading your page through our proxy server.
- Removes the X-Frame-Options header which may be preventing your site from loading in the Optimizely Experimentation editor.
Download Optimizely Experimentation Assistant Chrome extension
Make sure you are using a Chrome browser. go to the extension page in the Chrome webstore and click Add to Chrome. In the prompt, click Add extension. You can see all your extensions by going to chrome://extensions in your Chrome browser.
Is your page not loading correctly in Optimizely Experimentation for another reason? See Pages not loading in the editor.
Enable the extension
Installing and enabling the extension turns it on. You should see an Optimizely Experimentation icon in your extensions-bar to the right of your URL bar. If you click it, you can log in to use the extension.
Inject the snippet
If your snippet is not on the page yet but you want to start creating experiments, this extension injects a helper JavaScript snippet called innie.js that is normally included with the snippet. This enables communication between the editor and the customer’s site. The editor detects when you are hovering a cursor over different elements of your site, and when you click an element, the editor displays the blue border and context menu. Make sure that you implement the one-line snippet for Optimizely Experimentation on your page as soon as possible, because when you do, you can then run the experiments you created with the helper.
The editor might also have problems with finding your snippet if it is located in the body. If that is the case, you can use the extension to help load your page in the editor, but make sure to add the snippet to the top of your site’s <head> tag to ensure optimal performance.
Disable the editor from loading your page through a proxy server
The Optimizely Experimentation editor tries to load your page through HTTP or HTTPS first, but if both timeout, it tries to load your page through proxy. Loading through a proxy means that Optimizely Experimentation loads your page on our proxy server, injecting a placeholder snippet temporarily for Editor loading purposes. This will then show in the editor.
If Optimizely Experimentation loads your page through, it loses all session data for your page in the editor, so this might be why you might see an authentication error, even though you logged in or loaded your page in an adjacent tab. Your page might also have security measures against being loaded via a proxy which might cause you to see something like a 500 Internal Server error.
If the snippet is on the page and it is still loading through proxy, you can disable proxy loading by adding the optimizely_disable_proxy=true parameter to the Optimizely Experimentation experiment URL in the URL bar. This forces the Optimizely Experimentation editor to try loading your page through HTTP or HTTPS, and also increases the timeout before failing. The extension automatically adds this query parameter to the URL each time you load an Optimizely Experimentation experiment.
Remove the X-Frame-Options header
Some sites will not load in the editor due to a security setting called an X-Frame-Options header, which disallows other domains from loading it in an iFrame (for example, example.com can only be loaded in an iFrame on example.com, not on optimizely.com). The Optimizely Experimentation Chrome extension bypasses this security setting and lets those sites be iFramed on other domains, but only for users who have Optimizely Experimentation Assistant turned on for their browser.
How to find out if you site has an X-Frame-Options header set
Try opening your page in the Optimizely Experimentation editor in the Chrome browser. Open the Developer Tools, and click Console. Then click the filter icon in the left top part of the developer tools. Within the filter options, click Errors. Search for a line that says “Refused to display ‘<URL>’ in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’ or ‘DENY’." If you see that, it is likely your site has an X-Frame-Options header that prevents Optimizely Experimentation from loading it inside an iFrame.
Content Security Policies
The X-Frame-Options header is a deprecated security feature that is replaced by Content Security Policies (CSP) that allow for fine-grained control over which pages can iFrame yours, among many other features. So, if you replace your X-Frame-Options header with Content Security Policies, you will be able to allow-list app.optimizely.com. See Update your site's Content Security Policies (CSP).
If you are not using Content Security Policies for anything else yet, ask your developers to remove the X-Frame-Options header and replace it by the following CSP header:
Content-Security-Policy: default-src * 'unsafe-inline' 'unsafe-eval'; frame-ancestors 'self' app.optimizely.com;
This mirrors the security X-Frame-Options provided you.
If you are already using Content Security Policies for other purposes, you must merge your existing rules with the one above.
- To load your pages in the Optimizely Experimentation Editor, add the frame-ancestors directive for
app.optimizely.com. - To make sure all of Optimizely Experimentation's functionality for your visitors work correctly, make sure to allow unsafe-inline and unsafe-eval. In the meantime, the Optimizely Experimentation Assistant extension can help you load your page in the editor.
<%= heading %>