🛠️ [Troubleshooting] Why is the editor not loading and how can I force it to open?

If your editor isn’t loading properly, it may be due to one of the reasons mentioned in this article.

 

 

You haven’t used the AB Tasty Chrome add-on

 

If the editor doesn’t load, you should try using the AB Tasty Chrome add-on. This extension forces your page to load fully before applying the editor, which solves a lot of common problems encountered with loading the editor. The add-on is available in the Chrome web store. You can download it here.

 

To use the Chrome add-on, follow these steps: 

  1. Go to the URL you want to load in the editor
  2. Open the AB Tasty Chrome add-on
  3. Select your campaign
  4. Ensure the Reset JS behaviors option is ticked
  5. Click Editor




Third-party cookies are blocked in the browser

 

The AB Tasty tag doesn’t require third-party cookies but loading the editor does. If you are having issues loading it, it might be due to third-party cookies being blocked.

 

How to find out and what to do

 

Paste the following address into your Chrome URL bar: chrome://settings/content/cookies and make sure that your browser accepts cookies or, at least, that HTTPS://[*.]app2.abtasty.com:443 is allowed to accept cookies.

 

image3.png

 

 

 

The AB Tasty tag is not present on the page

 

When setting up AB Tasty, you are required to add the tag, its asynchronous version, or the transaction tag.

 

How to check your tag 

 

To check whether or not the tag is installed, open the browser console, go to the Elements tab and search for try.abtasty.com. For more information, consult the following article: How to check whether AB Tasty’s tag is installed on your website.


image7.png

 

You can also make sure that the ABTasty command returns an answer in the console.


image10.png

 

If the tag is not present, add it, following the guidelines in our "All about tags" guide.




A Chrome extension is blocking the editor

 

A few Chrome extensions may prevent the editor from loading. Avoid using Ghostery, Insider, a VPN or Proxy, or an Ad Blockers.

 

How to check your extensions 

 

Paste the following address into your Chrome URL bar: chrome://extensions/ and disable or remove the Chrome extensions mentioned above.


image1.png


You haven’t applied the correct source code

 

Applying source code is the most effective way of loading funnel pages, cart pages with added products, or personalized dashboards. It’s also the best way of fixing editor-loading issues caused by authentication (on a client account, for example) or a page that requires session information (e.g. products to be displayed on the cart page).

 

There are two ways of applying the correct source code: 

 

👉With the AB Tasty extension


image4.png

 

👉With the OuterHTML

 

Copy the source code of the web page where you’re trying to load the editor using the Copy outerHTML command in the <html> tag (in the first line of the source code).


image8.png

 

Paste this source code into the dedicated input in the Main information step in AB Tasty:


image9.png

You can find more details on how to apply the source code here.




You have Content Security Policy (CSP) or console errors

 

CSP errors

 

If you notice CSP errors in the console when trying to load the editor, the server configuration is causing these problems. The security setting may be too high on your server. By default, many clients use a Content Security Policy that blocks everything on their website. This means that every external request has to be whitelisted in the server configuration.

 

How to check for CSP errors 

 

If you see the following kind of errors, these are caused by CSP errors:


image6.png

 

To resolve this issue

 

Please ask your system administrators or developers to whitelist the following domains:

      • Content-Security-Policy=
      • default-src 'none'
      • frame-src 'self'
      • script-src 'self' 'unsafe-eval' blob: *.abtasty.com *.googleapis.com
      • connect-src 'self' *.abtasty.com
      • img-src 'self' blob: *.abtasty.com *.amazonaws.com
      • style-src 'self' unsafe-inline: *.abtasty.com *.gstatic.com *.googleapis.com
      • font-src 'self' blob: data: *.abtasty.com *.gstatic.com *.googleapis.com

  • Default-src allows AB Tasty to keep strict security as none as the default for all other attributes but the ones we override
  • Frame-src allows AB Tasty to iframe your web app in its editor
  • Script-src allows AB Tasty to inject a <script> element in your web app once iframed in our editor
  • Connect-src allows AB Tasty to connect with APIs via XMLHttpRequest or Websocket fetch – we need it to communicate with our Symfony REST API (via XMLHttpRequest)
  • Img-src allows AB Tasty to call image URLs hosted on our domain or from AWS CDN
  • Style-src allows AB Tasty to inject inline styling or a <style> element
  • font-src allows AB Tasty to inject fonts, whether they come from our domain or the Google Fonts API

 

As a temporary solution, you can use the Disable Content Security Policy add-on. This extension should block the CSP errors and you should be able to load the editor again.

 

image5.png

Other console errors

 

You may find other errors in the console that block the editor. For instance, if you notice an error related to X-Frame Options, like this:


image2.png

 

To resolve this issue

 

Ask your back-end developers to change the server configuration accordingly. You can also temporarily use the Ignore X-frame headers extension to bypass this type of error.

 

image11.png

 

To allow this extension to read and change all your data on websites that you visit, select "On all sites"  from the site access drop-down list


Screenshot_2022-11-25_at_16.31.04.png

Was this article helpful?

/