Website Not Loading Correctly in VWO Visual Editor

Problem Statement

When I load the website in Visual Editor, it either loads with broken content or VWO Editor throws the following error:

Resolution Steps

• Add the VWO Smartcode on the web pages so that VWO Editor loads up directly, and not through proxy. If VWO Smartcode is not installed on the test pages, VWO tries to open the website in the VWO Editor using proxy. Due to this, the website may not load properly, as there could be issues in fetching CSS/JavaScript files, completing AJAX requests, and so on.
• Clear existing cookies from the browser and refresh the page after making the changes.
• Make sure you have not installed Javascript blockers like AdBlocker with custom settings. If you have installed a JavaScript blocker plugin, ensure that VWO requests (coming from vwo.com and visualwebsiteoptimizer.com) are not blocked.
• Set the X-frame header to SAME ORIGIN on your website’s backend. You can ask your developer to add conditions to allow VWO server to bypass the X-frame header settings.
• Further, you may even install one of the standard browser plugins to disable x-frame headers in the test builder. For instance, there is a standard plugin in chrome for this purpose called “Ignore X-Frame headers”.
• Ensure that the test URL (primary URL) is the exact URL of the specific page. If you have entered group URLs or URL pattern, the page may not load.
• Enable third-party cookies in your browser settings. When creating tests for a website, VWO drops cookies from app.vwo.com to dev.vwo.com (third-party). Since the cookies in your website are created from dev.vwo.com, your website pages may fail to load if third-party cookies are disabled in the browser settings. Using the browser settings option, you can block the third party cookies but create an exception for these two domains. Click here to know how to enable or disable third-party cookies in your browser settings.
• There could be issues with loading page scripts in the editor because VWO does not load the site directly in the editor but via proxy servers. Download VWO plugin from Chrome store to resolve this issue.
• VWO Editor opens mobile website pages in an iframe. However, some responsive website may have restrictions on loading the iframe. To check whether a page will open in iFrame, execute the following code in the developer console on the page. If the page is broken, you may need to apply the fix on the page itself.

<iframe src="https://example.com" width="100%" height="100%"></iframe>

• Ensure that the VWO code is installed correctly on the test pages. To know how to add VWO code, click here.
• You can download VWO Chrome Extension  to troubleshoot the issue

Handling Frame buster issue on your website

If Frame buster is installed on your mobile responsive website, then VWO editor may not open the webpage inside the editor but the page opens on the browser instead. To resolve this issue, remove any frame buster script on your website or modify this script in such a way that it does not break the iframe of VWO editor.

You can use the following IF condition within frame buster script in your source code to add VWO as an exception and let VWO’s iframe to open your website:

if (document.referrer.indexOf('visualwebsiteoptimizer') == -1 && document.referrer.indexOf('vwo') == -1 && top.location != location);

Verify VWO Code Installation

Sometimes, the changes you made in the website fail to load because the VWO code is installed incorrectly. Please check for these issues to verify code installation:

1. Use a text comparison tool to make sure that the VWO code installed on your website is the same code present in your account admin dashboard. You can use online javascript beautifier to compare or format the code.
2. Verify if the code is installed correctly: In the developers tools of your browser, under Network, look up for j.php (for asynchronous code) or js_visitor_settings.php (for synchronous code). If the code is installed correctly, you will find the networks calls. Make sure to add the VWO code in the same format as provided in VWO app.
3. If you see the j.php/js_visitor_settings.php call more than once, it means that the code is added more than once on the page. Adding the code more than one in the same page will cause the page to flicker or go blank.
4. If you are unable to see j.php/js_visitor_settings.php network calls despite adding the code to the website, verify the syntax and code format. Look for the errors in the console of the browser. For example, some editors tend to remove the asterisk present following the line /* DO NOT EDIT BELOW THIS LINE */
5. If you are able to see the j.php/js_visitor_settings.php correctly but the page still does not load, make sure to verify that the account ID mentioned in the code is true.