メインコンテンツにスキップ

なぜProduct Tourを作成できないのですか?

Tourビルダーが起動時に読み込まれない場合、役立ついくつかのヒントをご紹介します。

対応者:Beth-Ann Sher

Product Tourの設計時には、まず構築したいウェブサイトを選択する必要があります:

ウェブサイトを開いたときに、ツアービルダー(この青いバー👇)が表示されないことがあります。

Tourビルダーが見えない場合は、次の3つを確認してください:

Messengerがサイトにインストールされているか確認する

Product Tourを設計するには、Messengerが構築したいサイトにインストールされている必要があります。インストールされていない場合、Tourビルダーは読み込まれません。例えば、製品内でツアーを作成したいが、ログアウトした訪問者向けにのみMessengerがインストールされている場合、Tourビルダーは製品内に表示されません。

Messengerがインストールされていない場合は、以下のガイドを参照してください:

あなたのサイトはサードパーティのiframe内に埋め込まれていますか?

Product Toursは、あなたのサイトがサードパーティのiframe内に埋め込まれているページでは機能しません。

Intercom Messengerは常に独自のiframe内でレンダリングされますが、これは期待される動作で変更できません。ただし、あなたのサイトや製品自体がサードパーティのiframe内(例:Shopify AppやFigma Plugin)で読み込まれている場合、Messengerはiframeを含む親ページの情報にアクセスできません。

このような場合、Product Toursはサポートされません。

あなたのサイトはwindow.openerを変更していますか?

Tourビルダーはwindow.openerプロパティを使ってIntercomアプリと通信します。サイトのJavascript(または使用しているライブラリ)がこれを上書きしている場合、Tourビルダーは動作しません。

Cross-Origin-Opener-Policyヘッダーを確認する
MessengerがインストールされているにもかかわらずTooltipビルダーがサイト上でツールを読み込まない場合、Cross-Origin-Opener-Policyヘッダーを確認してください。このヘッダーはビルダーとMessenger間の通信をブロックする可能性があります。Cross-Origin-Opener-Policyヘッダーの値がデフォルトのunsafe-none以外の場合、window.openerの設定が妨げられ、Tourビルダーは読み込まれません。ヘッダーをunsafe-noneに更新するか削除して、ビルダーが正しく機能するようにしてください。

Cross-Origin-Opener-Policyは、Tourビルダーのツールが表示・機能するためにTour構築中のみ"unsafe-none"に設定する必要があります。そのため、Tour構築完了後は"unsafe-none"設定を好みの値に変更可能であり、サイトのCross-Origin-Opener-Policy設定はエンドユーザーへの"Live" Tourの表示に影響しません。

あなたのサイトはセッションストレージをクリアしていますか?

TourビルダーはIntercomアプリと通信するために、サイトのセッションストレージ(intercom.intercom-snippet__intersection-で始まるキー)にいくつかの値を保存します。ビルダーが開いている間にサイトがセッションストレージをクリアすると、例えばログアウト時だけでなくページ読み込み時にsessionStorage.clear()を呼び出す場合、要素ピッカーは以下のエラーを表示し、ステップを保存できません:

"要素ピッカーがエディターからの応答を受け取りませんでした。このウィンドウを閉じて再試行してください。"

確認するには、ビルダーが開いている間にブラウザのコンソールでObject.keys(sessionStorage)を実行してください。intercom.intercom-snippet__intersection-キーが表示されなければ、開発者にログアウト時のみセッションストレージをクリアするよう依頼してください。

正しいIntercom workspaceにいることを確認する

複数のIntercom workspace(例:異なるウェブサイト用)を持っている場合、Tourを設計しているworkspaceが、Tourを構築しているページにインストールされているworkspaceであることを確認してください。

確認するには、IntercomのProduct ToursページのURLにあるworkspace IDを見てください:

次に、Tourを構築しているページでブラウザのコンソールを開き、以下のコマンドを貼り付けます window.intercomSettings.app_id:

これらのIDが一致しない場合は、Intercomで正しいworkspaceに移動し、そこでTourの構築を開始してください。

注意:この方法は標準のJavaScriptインストールでのみ機能します。

IPアドレスでページにアクセスしていますか?

Product Tourビルダーを読み込むには、123.4.5.67のようなIPアドレスではなく、https://www.examply.comのような完全修飾ドメインでウェブサイトを開く必要があります。

モーダルやダイアログボックス内でツアーを作成していますか?

一部のモーダルウィンドウやダイアログボックス(ポップアップ)では、「フォーカストラッピング」により、Tourのメッセージ内での入力が不可能になることがあります。

ここで入力しようとすると:

フォーカスが別の要素にジャンプします。(これは目に見えない場合があります):

これはTourの構築体験にのみ影響し、顧客への表示方法には影響しません。Tourを構築するために一時的に「フォーカストラッピング」を無効にし、構築後に再度有効にすれば、問題なく顧客に送信されます。

フォーカストラッピングを使用しているかどうかを確認し、一時的に無効にするために、チームのエンジニアや開発者に相談する必要があるかもしれません。

まだ問題がありますか?

正しいworkspaceがサイトにインストールされていてもTourビルダーが読み込まれない場合は、Messengerでチャットしてください。喜んでお手伝いします。

こちらの回答で解決しましたか?