Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

How Optimizely X loads pages in the Editor

 
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Full Stack
  • Optimizely X Mobile
  • Optimizely X OTT
THIS ARTICLE WILL HELP YOU:
  • Understand the workflow followed by the Editor
  • Troubleshoot and identify likely problems when page-loading errors occur in the Editor

Understanding the details of how Optimizely X loads pages in the Editor may help you determine exactly why your pages aren't loading in the Editor the way you expect them to. This article explains how the Editor loads pages, how it handles changes and reloading pages, and the general workflow Optimizely follows when it loads pages into the Editor.

Loading pages

Optimizely X tries loading pages over HTTP and HTTPS, with a timeout of 15 seconds for the page to register a “hello” message. If that timeout does occur, the pages are loaded over proxy.
Optimizely will then pre-load up to four pages in the Editor.

Handling changes and reloading pages

In Optimizely Classic, whenever you make changes in the Editor, Optimizely uses a clone of the DOM <body> element for the initial pageload, and then resets the <body> each time, applying your new change immediately afterwards. This method has one drawback, which is that the global Javascript context cannot be reset without reloading the entire page. When this happens, custom code changes are applied over and over again in the same global context, which can cause unexpected behavior.

The process is a bit different for Optimizely X. Optimizely keeps track of the changes you've made in a changelist. What happens next depends on the type of change you've just made:

  • If it's a visual change:

    • The changes are added to or updated in the changelist;

    • The changelist is sent down to the iFrame;

    • The previous changelist is undone, and the new changelist is applied in its place. This is possible because Optimizely stores the necessary information to undo all visual changes it applies.

  • If it's a custom code change:

    • Optimizely reloads the entire page and applies all your changes in order. This is required because it is not possible to “undo” a code change.

All changes execute in the order they appear in the sidebar, and each change will wait for the one immediately preceding it to complete before it executes. Changes currently cannot be re-ordered.

The Editor workflow: What's happening behind the scenes

As described above, when you open a page in the Editor, it attempts to load three different protocols (HTTP, HTTPS, and proxy) at the same time. If the protocol requested by the user (either HTTP or HTTPS) doesn’t load, Optimizely X will use the proxy load as its fallback option. The production client then begins loading Javascript files:

  • The first Javascript file to load - innie.js - identifies the version of the Editor being used.
  • Next, the production client loads the p13n_inner.js Javascript file. This is the file that contains all the core logic required to manipulate and interact with the pages on your site.

Once p13n_inner.js has loaded, it fetches the Editor client from the app's backend (the production client is too lean to run in the Editor). The Editor client then requests the Editor data for the specific project you're working in, and is then initialized.

The full paths for these Javascript files are:

  • app.optimizely.com/js/innie.js
  • app.optimizely.com/dist/js/p13n_inner.js

Troubleshoot Editor page-loading issues