以下のヒントで解決できるシナリオ
- 保存してシミュレートしたにもかかわらず、Graphic エディタで実験のバリアントに加えた変更が表示されない場合。
- 実験をライブにプッシュした後、Graphic エディタを使用してすべてのページに加えた編集が表示されない場合。
- Graphic エディタがロードされない場合。
グラフィックエディタはどのように動作するか?
Graphic エディタで変更を加えるのは簡単に見えますが、Web ページのアーキテクチャ(コーディング方法など)によって編集が複雑になることがあります。 実験を作成するために構築された他のビジュアルエディタと同様に、Kameleoon の Graphic エディタは CSS セレクター パスを使用して、編集する要素を識別します。セレクターは、Graphic エディタで実行するあらゆるアクションの基礎です。 Kameleoon は 2 種類の CSS セレクターパスを使用します。- 要素の一意の ID などのシンプルセレクター: 一意であるため、ページ上で繰り返したり、同じページ上の別の要素に割り当てたりすることはできません。したがって、Graphic エディタでこの要素に加えた変更は、その要素に限定されます。
- コンビネータセレクター: 要素は、親要素との特定の関係に基づいて選択されます。
- Kameleoon が選択した要素の ID を見つけた場合: Kameleoon はデフォルトで ID を使用してページのロード時に要素を識別し、変更を適用します。
- Kameleoon が選択した要素の ID を見つけられない場合: Kameleoon は ID を持つ最も近い親要素からコンビネータセレクターを作成します。たとえば、商品名要素に ID がなくてもヘッダーに ID がある場合、Kameleoon はヘッダー要素から商品名要素までの一意のパスを作成します。
問題の原因は何か?
一般的に、シングルページアプリケーション 上の要素に割り当てられた ID は動的に生成されるため、その値とセレクターパスは絶えず変化します。ただし、Kameleoon はこれらの変更を追跡できます。トラッキングオプションを有効にするには、カスタム属性を示すことでページ上の要素選択方法を設定する必要があります。これを行うには:- Admin > Project をクリックします。
- 編集したいプロジェクトの 鉛筆 アイコンをクリックします。
- Configuration メニューで、General をクリックします。
- Advanced settings で、Enable support for dynamic websites (Single Page App, Progressive Web App…) を ON に切り替えます。
- Set a custom attribute (optional) で、目的のカスタム属性(たとえば、
data-id、data-qa)を定義します。
使用されているセレクターパスが要素を正確に選択できない
すべての要素に ID があるわけではありません。ID がない場合、Kameleoon は ID を持つ最も近い親要素から変更したい要素までの一意のパスを生成します。 これは、商品サムネイル画像を含むブロックを識別するセレクターパスの例です:#ProductSection-product-template > div:first-child > div:first-child > div:nth-of-type(6) > div:first-child > ul:nth-of-type(1) > div:first-child。
このパスは、親ブロック ProductSection-product-template から始まり、サムネイルブロックに到達するまでに 5 つの他の子ブロックを通過します。したがって、セレクターは Product section template > block1 > block2 > block3 > block4 > block5 > thumbnail に従います。
一般的に、セレクターパスが広範であるほど、セレクターが Web サイト上のすべてのユースケースをカバーできない可能性が高くなります。各 Web サイトは独自のものであるため、セレクターの制限はグラフィックエディタにとって明確な課題を提示します。
商品ページは、異なるレイアウト(異なる HTML マークアップなど)を持つ可能性があり、そのため異なるセレクターを必要とします。たとえば、一部の商品ページには評価のブロックがあるかもしれませんが、他のページにはありません。要素の存在の不一致は、Kameleoon がバリアントを作成したときに見つけた元のセレクターパスを壊します。
実験内で要素の変更が一貫しないリスクは、Kameleoon が識別するセレクターパスの長さと幅に比例して大きくなり、商品 Web ページレイアウトの動的な性質に依存します。リスクが大きすぎる場合は、階層ツールバーから Kameleoon が提供する他の選択オプションを使用してください。より安全に使用できる HTML クラスが見つかったり、開発者や CSM に CSS セレクターを作成または選択を検証するよう依頼したりできます。
または、AI に要素のパスを生成させることもできます。
- 要素を選択します。
- 左側のサイドバーで、Edit selector をクリックします。
- AI generation > Validate をクリックします。
競合する変更
グラフィックエディタが人気で広く使われている理由の 1 つは、コードなしで実験を簡単に開始できることです。Graphic エディタでは変更が簡単ですが、バリアントに競合する変更を導入することには注意が必要です。 競合する変更とは、一般的に親要素への編集を上書きする子要素への編集を指します。例として、テキスト要素(子)の色を編集してから、親を選択して再度色を変更することが挙げられます。子要素への変更が先にレンダリングされるため、Kameleoon は変更を正しく適用または表示しません。 競合する変更を避けるには、以下のルールに従ってください。- 結果を正確に理解していない限り、Graphic エディタの他のネイティブ編集機能と HTML コードを組み合わせないでください。
- 同じ要素に変更を加える予定の場合は、常に同じ CSS セレクターで要素を選択するようにしてください。複数の要素から構成される要素には注意してください。
Graphic エディタがロードに失敗する
Graphic エディタがロードに失敗する理由はいくつかあります。Graphic エディタが誰に対してもロードに失敗する
ステップ 1:Kameleoon スクリプトのインストールを確認する
Graphic エディタがロードされず、ログインページまたは別の宛先にリダイレクトされる場合、Kameleoon スクリプトがページに正しくインストールされているかどうかを確認します。これを行うには:- ブラウザの開発者ツールを開きます。
- Mac では、Command + Option + I を押します。
- Windows では、Control + Shift + C を押します。
- Elements タブに移動して Command + F(Mac)または Control + F(Windows)を押し、DOM 内で Kameleoon を検索します。
- Network タブを開きます。
- ページを更新した後、Kameleoon でフィルタリングして、スクリプトがロードされているかどうかを確認します。
- Kameleoon スクリプトが存在する場合: 次のトラブルシューティングステップに進みます。
- Kameleoon スクリプトが存在しない場合: 続行するには、Web サイトにスクリプトをインストールする必要があります。
- 開発者ツール で、二重矢印 > Kameleoon をクリックします。
- Dev tools > Tag injection をクリックします。
- Sitecode to inject にサイトコードを入力します。
- Inject tag をクリックします。
ステップ 2:ドメインとサブドメインの構成を確認する
ドメインとすべての関連するサブドメインが Kameleoon に正しく構成されていることを確認します。- Admin > Project をクリックします。
- 関連するプロジェクトの Setup を選択します。
- Modify setup をクリックします。
- Domain configuration セクションに移動し、必要なドメインとサブドメインをすべて追加します。
- サブドメインの場合、アスタリスク(
*)を使用します。たとえば、*.mywebsite.com。
- サブドメインの場合、アスタリスク(
- 必要なドメインを追加した後、構成を検証します。
- ページの上部で、必要に応じてドメイン URL を変更するため、プロジェクトタイトルの横にある 鉛筆 アイコンをクリックします。
ステップ 3:CORS ポリシーエラーを確認する
Graphic エディタが正しく機能することを保証するため、ブラウザのコンソールで CORS(Cross-Origin Resource Sharing)ポリシーエラーをチェックします。- 次のショートカットを使用してコンソールを開きます。
- Mac の場合:
Command + Option + J - Windows の場合:
Control + Shift + J
- Mac の場合:
- 下の画像に示すように、赤色の CORS 関連エラーを探します。
*.kameleoon.com*.kameleoon.eu*.kameleoon.io
Graphic エディタは一部のユーザーに対してロードされるが、他のユーザーに対してはロードされない
ステップ 1:キャッシュをクリアする
古いバージョンの Web サイトを表示しているために、Graphic エディタのロードを妨げている可能性があります。この問題を解決するには:オプション 1:キャッシュを空にする
- 次のショートカットのいずれかを使用してブラウザインスペクターを開きます。
- Mac の場合:
Command + Option + I - Windows の場合:
Control + Shift + C
- Mac の場合:
- ブラウザの更新ボタンを右クリックして、キャッシュを空にしてハードリロード を選択します。
オプション 2:プライベートブラウジング(シークレットモード)を使用する
キャッシュされたファイルが干渉していないことを確認するため、プライベートブラウジングウィンドウで Graphic エディタを開いてみることもできます。ステップ 2:サードパーティクッキーを許可する
Graphic エディタが正常に動作するためには、サードパーティクッキーが不可欠であるため、ブラウザがそれを許可していることを確認します。 サードパーティクッキーを有効にするには:- ブラウザの 設定 に移動します。
- プライバシーとセキュリティ に移動します。
- サードパーティクッキー セクションを見つけて、許可されていることを確認します。
ステップ 3:広告ブロッカーを無効にする
広告ブロッカーは Graphic エディタの正しい機能を妨げることがあります。この問題を解決するには、次のいずれかの解決策を試してください。- 広告ブロッカーを無効にして、Graphic エディタを再起動します。
- 広告ブロッカーがアクティブでない可能性のあるプライベートブラウジングウィンドウを開き、Graphic エディタを再起動します。
- 広告ブロッカーのない別のブラウザを試して、そこで Graphic エディタが動作するかどうかを確認します。
ステップ 4:その他のブラウザ拡張機能を無効にする
Graphic エディタの正しいロードを妨げる可能性のあるブラウザ拡張機能がアクティブになっているかどうかを確認します。プライバシー関連(Ghostery など)やパフォーマンス最適化(uBlock Origin など)の拡張機能は、エディタが正しくロードされるのを妨げることがあります。ステップ 5:VPN を無効にする
VPN アプリケーションの設定またはタスクバーでアクティブな接続を確認し、有効になっている場合はオフに切り替えます。 VPN から切断すると、別のサーバー経由でルーティングせずにネットワークに直接アクセスできるため、Kameleoon Graphic エディタを正しくロードするのに役立つ可能性があります。ステップ 6:異なる Wi-Fi ネットワークに切り替える
それでも Graphic エディタが起動しない場合、ネットワーク関連の問題がある可能性があります。別のネットワークに接続して、エディタを再起動してみてください。ステップ 7:Chrome Dev ブラウザを使用する
Chrome Dev ブラウザは、Kameleoon Graphic エディタなどのツールとの互換性が高い場合がよくあります。標準の Chrome ブラウザで問題が発生している場合は、Chrome Dev に切り替えてください。ステップ 8:Graphic エディタ拡張機能をインストールする
Kameleoon Graphic エディタ拡張機能 をインストールすると、CORS ポリシーの問題などの一般的なエラーを回避し、エディタのロードパフォーマンスを向上させることができます。ステップ 9 – ファイアウォールやセキュリティツール(Edgesuite や WAF など)を確認する
会社でファイアウォール、Web Application Firewall(WAF)、Edgesuite/Akamai などのプロキシツールを使用している場合、Kameleoon Graphic エディタのリクエストがブロックされている可能性があります。 これを解決するには: IT チームに連絡し、ファイアウォール/WAF 構成で Kameleoon のドメインをホワイトリストに追加するよう依頼してください。 FAQ 記事 にリストされているドメインとサブドメインにアクセスできる必要があります。 これらのドメインへの HTTPS トラフィック(GET、POST、OPTIONS)と WebSocket 接続の両方が許可されていることを確認してください。 ファイアウォール構成を更新した後、Graphic エディタを再起動して問題が解決されているか確認します。