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
- 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 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:
- Go to the URL you want to load in the editor
- Open the AB Tasty Chrome add-on
- Select your campaign
- Ensure the Reset JS behaviors option is ticked
- 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.
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.
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.
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
👉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:
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:
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:
script-src 'unsafe-eval' try.abtasty.com;
frame-src 'self';
connect-src *.abtasty.com;
style-src 'unsafe-inline' try.abtasty.com;
img-src editor-assets.abtasty.com;
script-src 'unsafe-eval'
When you put a custom JavaScript in a campaign, you expect it to be executed on your website. Our tag is simply taking the String that compose your custom JS and execute it on runtime using the unsafe-eval method.
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:
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.
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