エディターが読み込まれない
問題
エディターが適切に読み込まれない、開くにはどうしたらいいか
解決の手順
エディターが読み込まれない場合は、下記いずれかの理由が原因として考えられます。
ABTasty Chromeアドオンを使用していない場合
エディターが読み込まれない場合は、AB Tasty Chrome アドオンを使用してみてください。この拡張機能は、エディターを適用する前にページを強制的に完全にロードします。これにより、エディターのロード時に発生する一般的な問題の多くが解決されます。アドオンは Chrome ウェブストアで入手できます。ここからダウンロードできます。
Chromeアドオンを使用するには、次の手順に従います。
エディターでロードしたいURLに移動します。
ABTasty Chrome アドオンを開きます
キャンペーンを選択してください
「Reset JS behaviors（JS動作をリセット）」オプションがチェックされていることを確認します
エディターをクリックします
サードパーティCookieがブラウザでブロックされている
ABTastyタグにはサードパーティCookieは必要ありませんが、エディターを読み込むとサードパーティ Cookieが必要になります。読み込みに問題がある場合は、サードパーティCookieがブロックされていることが原因である可能性があります。
調べ方と対処法
ChromeのURL バーにアドレス chrome://settings/cookies を貼り付け、ブラウザが Cookie を受け入れるか、少なくともHTTPS://[*.]app2.abtasty.com:443が許可されていることを確認してください。
ABTastyタグがページに設置されていない
ABTastyを設定するときは、タグが設置されている必要があります。
タグを確認する方法
タグがインストールされているかどうかを確認するには、ブラウザ コンソールを開き、[要素（Elements）]タブに移動してtry.abtasty.comを検索します。詳細については、次の記事を参照してください: ABTastyのタグがWebサイトにインストールされているかどうかを確認する方法。
[コンソール（Console）]にwindow.ABTastyを打ち込み応答内容で確認することもできます。詳細はABTasty object | AB Tasty Developer Portalをご確認ください。
タグが存在しない場合は、タグ設置後に再度エディターを開いてみてください。
Chrome拡張機能がエディターをブロックしている
いくつかのChrome拡張機能により、エディターの読み込みが妨げられる場合があります。Ghostery 、Insider 、VPNまたはプロキシ、または広告ブロッカーの使用は避けてください。
拡張機能の確認方法
ChromeのURLバーにアドレスchrome://extensions/を貼り付け、上記のChrome拡張機能を無効にするか削除します。
正しいソースコードが適用されていない
登録や注文などのコンバージョンステップ（ファネル）ページ、商品追加されたカートページ、またはパーソナライズされたダッシュボードを読み込むには、ソースコードの適用が必要です。
また、この方法は認証 （クライアント アカウントなど） やセッション情報を必要とするページ (カート ページに表示される商品など) によって引き起こされるエディターの読み込みの問題を修正する方法でもあります。
正しいソース コードを適用するには 2 つの方法があります。
ABTasty拡張機能を使用する
OuterHTMLを使用する
<html> タグ (ソース コードの 1 行目) のCopy externalHTMLコマンドを使用して、エディターをロードしようとしているWebページのソース コードをコピーします。
※OuterHTML：要素とそのすべての子要素を含むHTMLコード全体を指します。
このソース コードをABTasty のMain information（メイン情報）ステップの専用入力に貼り付けます。
ソース コードを適用する方法の詳細については、こちらをご覧ください。
コンテンツセキュリティポリシー (CSP) またはコンソール エラーがある
CSPエラー
エディターをロードしようとしたときにコンソールにCSPエラーが表示された場合は、サーバー構成がこれらの問題の原因となっています。サーバーのセキュリティ設定が高すぎる可能性があります。
デフォルトでは、多くのクライアントは、Webサイト上のすべてをブロックするコンテンツセキュリティポリシーを使用しています。これは、すべての外部リクエストをサーバー構成のホワイトリストに登録する必要があることを意味します。
CSPエラーを確認する方法
次の種類のエラーが表示される場合は、CSPエラーが原因です。
この問題を解決するには
システム管理者または開発者に次のドメインを許可リストに登録するよう依頼してください。
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は、オーバーライドする属性以外のすべての属性について、厳格なセキュリティをデフォルトとして保持することを可能にします。
Frame-srcは、ABTastyがあなたのウェブアプリをエディタでiframe化することを許可します。
Script-srcは、エディターでiframe化した後、ABTastyがWebアプリに<script>要素を挿入できます。
Connect-srcは、ABTastyがXMLHttpRequestもしくはWebsocket fetchを介してAPIと接続することを可能にします - （XMLHttpRequestを介して）Symfony REST APIと通信するために必要です。
Img-srcは、ABTastyがドメインもしくは AWS CDN からホストされた画像 URL を呼び出すことを可能にします。
Style-srcは、ABTastyがインラインスタイルもしくは<script>要素を挿入することを許可します。
font-srcは、フォントが当社ドメインからのものであっても、Google Fonts APIからのものであっても、フォントを挿入できます。
一時的な解決策として、 Disable Content Security Policyアドオンを使用できます。この拡張機能によりCSPエラーがブロックされ、エディターを再度ロードできるようになります。
その他のコンソールエラー
エディターをブロックする他のエラーがコンソールで見つかる場合があります。例えば、次のようなX-Frame Optionsに関連するエラーに気付いた場合:
この問題を解決するには
バックエンド開発者に、それに応じてサーバー構成を変更するよう依頼してください。また、Ignore X-frame headers拡張機能を一時的に使用して、このタイプのエラーを回避することもできます。
問題が解決できない場合は、お手数ですが担当までご連絡ください。
※本ページは[原文：[Troubleshooting] Why is the editor not loading and how can I force it to open?]を翻訳・加筆修正しています。
Last updated