「埋め込み」テンプレートを使ったアクションが期待通りに表示されない場合に考えられる原因と、その対処法について説明します。
この問題は、主に以下の2つのケースに分けられます。
- アクションの表示が崩れる
- アクションが表示されない
それぞれのケースについて詳しく見ていきましょう。
Case.1 : アクションの表示が崩れる
このケースでよくある原因と、その確認方法を紹介します。以下のチェックポイントをご確認ください。
Check.1 : サイト側のCSSと干渉している
「埋め込み」テンプレートのアクションが、サイトに定義されているCSSの影響を受けることで、意図しないスタイルが適用され、表示が崩れる場合があります。
「埋め込み」テンプレートを構成するHTMLに適用されているCSSを確認し、サイトに定義されているCSSの影響を受けていないかどうか確認してください。
Case.2 : アクションが表示されない
このケースでよくある原因と、その確認方法を紹介します。以下のチェックポイントをご確認ください。
Check.1 : 接客サービスが配信されていない
次のチェックリストを参考に、接客サービスが配信されているかどうかを確認してください。
Check.2 : ブラウザのコンソールにエラーが表示されている
次のようなエラーがブラウザのコンソール上に表示されていないか確認してください。
エラー1 : karte.tracker error: DOMException: Failed to execute 'querySelectorAll' on 'Document': 〇〇 is not a valid selector.
埋め込み先となるCSSセレクタの記述方法自体に誤りがある場合に発生するエラーです。CSSセレクタの取得・検証をするを参考に正しいCSSセレクタを設定してください。
エラー2 : krt error: cant find target:〇〇
「埋め込み」テンプレートのアクションの [埋め込み設定 > 埋め込み先CSSセレクタ] に指定したCSSセレクタに対応する要素がページ上に存在しない場合に発生するエラーです。
考えられる原因は以下のとおりです。
- 要素が存在しない
- CSSセレクタの取得・検証をするを参考にCSSセレクタを設定し直してください
- 要素は存在する
- アクション配信時にまだ埋め込み先の要素がページ上に存在していない可能性があります
- 「埋め込み」アクションの埋め込み先要素が非同期に挿入される場合の対応をご確認ください
このエラーが出ている場合、KARTE Action Viewerやユーザーストーリー上ではmessage_open イベントが発生していても、アクションが表示されていない可能性があります。
Check.3 : 置き換えができないHTML要素を利用している
一部のHTML要素は、「埋め込み」テンプレートのアクションで置き換えができません。詳細は、埋め込みアクションで要素の書き換えに失敗するHTML要素をご確認ください。