relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations
  • Optimizely Classic

This article will help you:
  • Figure out why a page isn't loading in the Editor 
  • Diagnose and fix common editor-loading issues
  • Clear your browser cache and cookies

Are you seeing a message in the Editor: "Sorry, we were unable to load..."? Or having trouble accessing a certain page in the Editor? Maybe you see something that looks like this:


If pages aren't loading in the Editor the way you expect, this article will help you troubleshoot.

  • If you see the message, "We have loaded your site using compatibility mode," you may be encountering an issue with mixed content.

  • If you're trying to load content that's in an iframe, read about loading iframe content.

  • If the issue is loading pages that require session-specific information or logging in (like a shopping cart, intranet page, or password-protected content), check out this troubleshooting article.

  • If you use an X-Frame-Options header in Optimizely Classic, consider switching to the newer Content Security Policies header.

If you're seeing a different problem, keep reading to troubleshooting and resolve issues with page-loading in the Optimizely Editor.

The Optimizely Desktop App solves many common Editor loading issues, including those listed here. Consider installing it if you're having trouble with the web application.

Common Editor page-loading issues

Try these steps, one by one, to try to resolve some common page-loading issues.

  1. Confirm that your page loads consistently outside of Optimizely. Make sure you can reach the page in your browser, outside of Optimizely, multiple times in a row. If the page doesn't load outside of Optimizely, it may not load in Optimizely either.

  2. Clear your browser cache and cookies. Then, reload the page.

  3. Confirm that the Optimizely snippet is installed.

    In Optimizely Classic, check the Diagnostic Report to make sure the snippet is installed and properly configured.

    In Optimizely X, we're still working on the diagnostic report, so here's how to check for the snippet: open the developer console and type 'optimizely.' If the search returns an error, such as "optimizely is undefined," the snippet is not implemented correctly.



    Here's how to implement the snippet for Optimizely X Web and Classic. Make sure the snippet is installed synchronously at the top of your <head> tag.

Advanced Editor page-loading issues

Here are more steps to try when the steps to resolve common issues aren't successful:

  1. Check the JS console for errors that don't normally exist on the page.

    Filter the console output for error logs. If you see an error within bundle or client.js/[projectID].js, there may be a conflict.

  2. Confirm whether your site is configured to disallow parameters it doesn't expect and parameters that include raw URLs.

    To check this, try to load the page with an innocuous query parameter like "?test=true" and then a parameter that contains a raw URL.

    If your site disallows unexpected parameters, you need to whitelist Optimizely's Editor parameters. Contact support to learn more, or try the Optimizely Desktop App.

  3. Check whether the page loads outside the Editor within an arbitrary iframe.

    Some sites have frame-busting logic that prevents them from being iframed correctly. Try constructing an iframe on any page through the browser console to see if the page loads correctly. Here's an example:

     <iframe src='http://www.atticandbutton.us/' style='width:800px;height:600px'></iframe>

    If the page won't load in an arbitrary iframe, you may need to whitelist the Optimizely domain (https://app.optimizely.com) as a valid host. Or, try the Optimizely Desktop App.

The Optimizely X editor is more stable than the Classic editor but is still subject to the same loading issue.  Most issues will arise from NOT seeing a HELLO or READY response in the console logs.  Editor workflow can be found in Optimizely X Transition notes: https://docs.google.com/document/d/1Iqz09djw-PdY3Y3hLk3CC004Jl7cDgHYwfqTSnomZlI/edit#heading=h.c2es2kx2upz3


HELLO is sent as soon as p13n_inner.js establishes communication with editor_frame module and is still awaiting Editor client and its data

If you see:

[Loader] HTTP Failed to respond with HELLO after 15000ms
[Loader] HTTPS Failed to respond with HELLO after 15000ms
[Loader] PROXY Failed to respond with HELLO after 15000ms

Indication:

  • p13n_inner script may not have downloaded

  • Snippet may not be on page or is outdated

  • Look for innie.js loading in network 


READY is sent once p13n_inner.js has been initialized with Editor Client and its data

  • If you see HELLO,  but no editor data, look for:

Optly/Initialized with data 

  • If you see:  [Loader] Editor client bootstrapped - Editor client got its data and has been initialized 

  • Check the network requests for:

    • Production Client

    • innie.js

    • p13n_inner.js

    • Editor Client

    • Editor Data


Additional Notes: 

  •  Project JS conflicts can cause issues between p13n_inner and editor client/data

  • There is a 15000ms timeout for HELLO response but there is no time out for READY for HTTP or HTTPS (spins forever) - this might indicate one of these:

    • A fatal JS conflict

    • A page that loads the Optimizely snippet async and disables Optimizely when it fails to load within a certain timeframe

Load or hide modals in the Editor (Optimizely Classic)

If you're using Optimizely Classic, you may need to:

  • Edit a modal that doesn't show up in the Optimizely Editor.

  • Edit content that's hidden behind a modal. 

Editor-only code lets you display or hide modals in the Editor. Everything inside the editor_only code executes in the Optimizely Editor, but doesn't execute outside the Editor when the experiment is live.


/* _optimizely_evaluate=editor_only */
$("MODAL_SELECTOR_HERE").css(
{"display":"none"}
);
/* _optimizely_evaluate=end_editor_only */
// Write your variation code below
 
Tip:

If you tried the steps in this article, but still can't correctly load your page in the Editor, try our Optimizely Editor loading Chrome extension.