If your editor isn’t loading properly, it may be due to one of the following reasons:
- 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
- Some Chrome extensions are blocking
- You haven’t applied the source code
- You have Content Security Policy (CSP) and/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 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:
- Go to the URL you want to load in the editor.
- Open the AB Tasty Chrome add-on.
- Select your campaign.
- Make sure 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 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.
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?
You can also make sure that the "ABTasty" command returns an answer in the console.
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.
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
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.
In the main information step in AB Tasty:
More details on how to apply the source code here.
You have Content Security Policy (CSP) errors
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:
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.
Other console errors:
In the console, some other errors can be found and may block the editor. For instance if you notice an error related to “X-Frame Options”:
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.
Comments
0 comments
Article is closed for comments.