This topic describes how to:
- Install our Optimizely Experimentation Assistant Chrome extension
Have you tried other troubleshooting methods and were not able to 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 our Optimizely Experimentation Assistant Chrome extension
Please make sure you are using a Chrome browser. Head over 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 navigating to chrome://extensions in your Chrome browser.
Using the extension
Installing and enabling the extension turns it on by default. 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.
Injecting 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 our Editor and the customer’s site. The Editor will know when you are hovering your cursor over different elements of your site, and when you click an element, the editor displays the blue border and context menu. Please make sure that you implement the Optimizely Experimentation snippet on your page as quickly as possible, as 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 please make sure to add the snippet to the top of your site’s <head> tag to ensure optimal performance.
Disabling the Editor from loading your page through our proxy server
The Optimizely Experimentation Editor tries loading your page through HTTP or HTTPS first, but if both timeout, it tries loading 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 will lose all session data for your page in the editor, so this might be why you might see, for example, 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 would 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.
Removing 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 (e.g., 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 will allow those sites to 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 has since been replaced by Content Security Policies 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 whitelist app.optimizely.com.
Here is how you can switch to Content Security Policies:
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 will mirror 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 be able to load your pages in the Optimizely Experimentation Editor, make sure to 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, our Optimizely Experimentation Assistant extension can help you load your page in the Editor.
<%= heading %>