This article will help you:
- Figure out why pages might not load in the Editor
- Figure out why you can't log into your page within the Optimizely Editor
- Load private, intranet, or gated pages behind a login
- Load session-specific content like a shopping cart
Is your page not loading correctly in Optimizely for another reason? Check our our article on Editor Loading for more solutions!
Are you unable to log into your gated or password-protected page within the Optimizely Editor?
If your site gates certain pages behind logins or requires session-specific information to access them, those pages will not immediately load in the editor. Some common examples are:
A page that requires session-specific information to load, such as a shopping cart
A page that is gated or available only to logged-in visitors
A staging site behind a firewall
An intranet page
The editor needs to be able to access the necessary session-specific information or cookies to load the page correctly.
Here's how to do it.
Load the page in the same (or adjacent) browser tab
Open your site in a browser tab and navigate to the page you wish to edit. This may entail logging in, adding an item to your cart, or completing a portion of a form. Take the exact steps that get you to the page into the state that you want to load in the Editor.
Next, copy the URL of the page you have open and load Optimizely in the same browser tab where you already had your page open. You may be able to use an adjacent browser tab, as well -- see the note on session-specific information below.
Create an experiment using the URL of the page you’d like to test (if you copied it in the last step, paste it in now).
Are you still seeing Optimizely's "Compatibility Mode" warning?
In the case that the page doesn't load correctly, or you see a mixed content or "Compatibility Mode" warning, follow the instructions in our article on enabling mixed content, then reload the page.
Why does this technique work? The Editor will load the page as it would appear if you went directly to the URL in another tab; once you can repeatedly load the page into a separate tab outside of Optimizely, then Optimizely should be able to load the page within the Editor.
What's going on behind the scenes? The key here is to allow Optimizely to retrieve session-specific information from the browser. If this information is passed through cookies, using an adjacent tab or the same tab will work. If the session-specific information is passed through Session Storage, you'll need to load the Editor in the same tab that you just loaded your page in.
This method requires your Optimizely snippet be installed on the page you are trying to load. If the snippet is not on your page, the Optimizely Editor will load your page through a proxy, injecting a placeholder snippet. This will cause it to also lose login and session data. If the snippet is on the page and it's still loading through a proxy, you can disable proxy loading by adding the &optimizely_disable_proxy=true parameter to the Optimizely experiment URL in the URL bar.
Have you made sure that your page can load in the same or an adjacent browser tab, but your page still doesn’t load? We have built a Chrome extension that helps with certain editor loading issues. Have a look at our article on our Optimizely Editor Loading Chrome extension.
You may follow the above steps and still not be able to see the page, including all session-specific information. For example, your cart is still empty in the Editor or you are not logged in.
If so, it could be that the session data on your site is not stored in cookies or session storage, so it is not available from within the Editor.
If you are also not able to use Interactive Mode to navigate to the page you wish to edit, you'll need to use an alternate method to create variation code:
Option 1: Separately host a static HTML version of the page and load that into the Editor (this will require developer assistance). You can then make changes to that page using the Visual Editor.
Option 2: If you are familiar with jQuery, use the developer console in your browser to make changes and see them reflected on your live page. Then, copy that jQuery into the experiment's variation code.
Both of these methods work because the Editor acts as a template for the changes you want make but does not dictate your experiment targeting. URL Targeting dictates exactly where the experiment will run.
This issue is extremely common in Single Page Applications. If your site is built on a SPA framework, check out our article on Optimizely and SPAs for additional points to look out for when testing on your site.