Blog  Learn  Widget Demos  Developer Portal  Login to AB Tasty

Articles in this section

🛠️ [Troubleshooting] Why is the editor not loading and how to force its opening?

Avatar
Product Team
  • Updated
Follow

If your editor isn’t loading properly, it may be due to one of the following reasons:

  1. You haven’t used the AB Tasty Chrome Add-on 
  2. Third-party cookies are blocked in the browser
  3. The AB Tasty Tag is not present on the page
  4. Some Chrome extensions are blocking
  5. You haven’t applied the source code 
  6. You have Content Security Policy (CSP) errors
  7. You have console errors

 

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 allows your page to be fully loaded before applying the editor, solving a lot of the problems encountered with the editor’s loading. It is available in the Chrome web store and you can download it here.

To use it: 

  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. Make sure 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 this address into your Chrome URL input - 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.

cookies.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 find out and what to do?

In order to check whether or not the tag is installed, open the browser console, go to the "Elements" tab and search for "try.abtasty.com". You can also read this dedicated article on How to check if AB Tasty's tag is installed on your website?

inspector.png

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

console.png

If the tag is not present, add it by following the guidelines in this article.

 

Some Chrome extensions are blocking

A few extensions may prevent the editor from loading. Try to avoid using Ghostery, Insider, VPN/Proxy and Ad Blockers.

How to find out?

Paste this address into your Chrome URL input - chrome://extensions/ and make sure to disable or remove the Chrome extensions mentioned above.

extensions.png

 

You haven't applied the source code of the page

Applying source code is the most effective way of loading funnel pages, cart pages with added products or personalized dashboards. It’s the best way of getting around bad editor loading that is due to authentication (a client account, for example) or a page that requires session information (e.g., products to be displayed in the cart page).

There are 2 ways of applying the source code: 

With the AB Tasty extension

image7.png

With the OuterHTML

Copy the source code of the web page you want using “Copy outerHTML” (from the <html> tag (the first line of the source code)) to load the editor on and paste it in the dedicated input.image6.png

In the main information step in AB Tasty:

apply-source.png

More details on how to apply the source code here.

 

You have Content Security Policy (CSP) errors

If some of the errors you notice in the console are Content-Security-Policy errors (CSP errors) when trying to load the editor, the problem comes from the server configuration.

In short: the security setting is too high server-side. By default, many clients use a Content-Security-Policy blocking everything on their website. This means that every single external request has to be whitelisted in the server configuration.

How to find out?

If you see this kind of error, you are facing CSP errors:

Content Security Policy | Web Fundamentals | Google Developers

What can be done?

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 our 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 some inline styling or a <style> element.
  • font-src allows AB Tasty to inject fonts, whether they come from our domain or from 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.

 

You have console errors

How to find out?

In the console, if you notice an error related to “X-Frame Options”:image11.png

What can be done?

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.

Related articles

Comments

0 comments

Article is closed for comments.