[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

• Third-party cookies are blocked in the browser

• The AB Tasty tag is not present on the page

• The AB Tasty tag is installed twice in the page

• A Chrome extension is blocking the editor

• You haven’t applied the correct source code

• You have Content Security Policy (CSP) or 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 extension. 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/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.

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.

The AB Tasty tag is installed twice on the page

Sometimes, you can see that the AB Tasty editor will load successfully, but the sidebar on the right and/or the editor's header are not clickable or responsive.

This issue typically arises when the AB Tasty tag is installed twice on the page you are trying to load in the editor. The duplicate tag installations interfere with the editor's functionality, preventing elements from being clickable. This can also cause issues with data collection and the proper application of campaigns on the website.

How to fix the issue:

• The primary solution is to identify and remove the duplicate AB Tasty tag from the website's code. Ensure only one instance of the tag is present. For more details, read How to check if the AB Tasty Tag is installed on my website? or How to implement the Generic Tag?
• As a temporary measure, you can remove the &no_php=1 parameter from the end of the editor's URL. This sometimes allows the editor to load properly, even with the duplicate tag.

Example: Original URL (with issue): https://www.yourwebsite.com/?abtasty_editor=XXXXXX&no_php=1 Modified URL (workaround): https://www.yourwebsite.com/?abtasty_editor=XXXXXX

Removing the &no_php=1 parameter is not a permanent fix. It's crucial to locate and remove the duplicate tag to ensure accurate data collection and campaign execution. This workaround should only be used to provide temporary access to the editor while the duplicate tag issue is being resolved.

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.

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).

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 allowlisted 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

AB Tasty requires two sets of policies for its two main parts that operate on your website: the tag and the editor.

Tag's policies

When running on your website, our tag will try to apply modifications on the DOM, download resources and connects to AB Tasty's servers to get and post data. A strict set of Content Security Policies will deny our tag to do all of these. To unlock the full usage of our tool, you are suggested to open up the following:

frame-src 'self'; 
connect-src *.abtasty.com; 
style-src 'unsafe-inline' try.abtasty.com;
img-src editor-assets.abtasty.com;

connect-src Our tag is also connecting to our CDN to download additional ressources, among them: dynamic imports (on the try.abtasty.com domain) or backend synchronization (on the dcinfos-cache.abtasty.com domain). style-src 'unsafe-inline Using our tool, you can inject custom CSS to apply on a campaign. The tag will use the unsafe-inline method to do so. img-src If you use our editor to inject an image from your computer, this ressource will be uploaded to our CDN, editor-assets.abtasty.com, and downloaded by your visitors. We strongly advise you only use ressources that are hosted on your own domains. This policy is not mandatory to allowlist if you are not planning on injecting images through AB Tasty. frame-src The QA Assistant will load into an iframe.

Finally, this is an example of what your CSP could look like:

Example of CSP for the tag
default-src 'self'; 
script-src 'self' 'unsafe-eval' try.abtasty.com; 
frame-src 'self'; 
connect-src 'self' *.abtasty.com; 
style-src 'self' 'unsafe-inline' try.abtasty.com;
font-src 'self';
img-src 'self' editor-assets.abtasty.com;

Editor's policies

Our editor encapsulates your website into an iframe to operate. Knowing that, you have two options: opening up the additional policies for the editor or using a third-party browser extension to bypass the CSP. For your information, our editor only loads when a query parameter, ?abtasty_editor{{testID}}, exists in the URL. Here are the policies to allowlist:

script-src 'unsafe-eval' 'unsafe-inline' blob: *.abtasty.com; 
frame-src 'self'; 
connect-src *.abtasty.com; 
img-src *.abtasty.com; 
style-src 'unsafe-inline' *.abtasty.com; 
font-src *.abtasty.com;

script-src 'unsafe-eval' 'unsafe-inline' blob: As for the tag, the editor will require to execute JavaScript on your website to render your modifications. connect-src The editor will also try to connect to remote AB Tasty services. image-src Our editor uses images and loads the images you host on our CDN. style-src 'unsafe-inline' As for the tag, the editor will require to inject CSS on your website to render your modifications. font-src Our editor is also using custom fonts. frame-src Our editor will load your website into an iframe.

And a complete example of what your CSP could look like:

Example of CSP for the editor
default-src 'self'; 
script-src 'self' 'unsafe-eval' 'unsafe-inline' blob: *.abtasty.com;
frame-src 'self';
connect-src 'self' *.abtasty.com; 
img-src 'self' *.abtasty.com; 
style-src 'self' 'unsafe-inline' *.abtasty.com; 
font-src 'self' *.abtasty.com;

Note that as the editor is using the tag to display and execute modifications, meaning that it requires the same minimum CSP allowlisting. Should you need to allowlist both tools, using the editor's one is enough.

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