Product Tourの設計時に、ボタンやヘッダーなど特定のウェブサイト要素を選択してメッセージを指し示すことができます。IntercomはCSSセレクターを使ってこれらの要素を選択可能にしています。

要素を選択すると、ツアーは自動的にその要素を指し示すCSSセレクターを生成します。選択した要素のCSSは左下隅で確認できます。

いくつかの理由でCSSセレクターを手動で追加したい場合があります。この記事の後半で説明します。自動で選択されたCSSセレクターを手動で編集したい場合は、ウェブサイト要素を選択した後に「詳細」をクリックしてください。

ここで、選択したいCSSセレクターを手動で入力できます。

なぜツアーのCSSを編集するのか？

ウェブサイト要素を選択する際にCSSを編集したい理由はいくつかあります。

製品が変更された場合

ツアーを公開してから製品やサイトが変更された場合、元のCSSが機能しなくなることがあります。これは参照している要素が存在しなくなったか、かなり異なる場所に移動したためです。この場合、ツアービルダーで新しい要素を選択するか、新しいセレクターを手動で入力できます。

製品が動的に生成されたクラスを使用している場合

CSSはウェブサイトの要素にスタイルを適用するために使われます。いくつかのウェブフレームワークは動的にこれらのスタイルを適用するCSSクラスを生成します。つまり、CSSセレクターはユーザーが製品やサイトにアクセスするたびに変わる可能性があります。この場合、自動CSSセレクターを使ってツアーを作成できません。セレクターの一部をワイルドカードに編集して、動的に生成される部分を無視することができます。つまり、CSSを編集して、すべてのusersに共通する静的/一般的な部分だけを識別するようにします。以下の例では、button__2kbliではなくbutton__を探すようにセレクターを編集しています。これはそのCSS部分がすべてのusersに共通しているためです。

ツアーが正しく送信されることをどうやって保証できますか？

ツアーが正しく送信されることを保証する最良の方法は、Intercomが検出できる特別な属性でサイトのHTMLに注釈を付けることです。

注意: これを行うにはHTMLを編集する必要があります。

サイトのどの要素をツアーで使いたいか分かっている場合、これらの要素にdata-intercom-target="..."という特別なデータ属性を追加できます。

<div data-intercom-target="Login button">

 ...

</div>

例えば、ツアーでログインボタンを指し示したい場合、この要素にdata-intercom-target="Login button"を追加できます。このようにHTMLに注釈を付けることで、製品の小さな変更がツアーに影響を与えにくくなります。

上記のようにHTMLに注釈を付けると、ツアービルダーはdata-intercom-target注釈のある要素をハイライトできるため、ツアービルダーで選択可能になります。

高度な開発者主導のソリューション

ドロップダウンやサイドナビゲーションなどの複雑な問題に対して：

ドロップダウン: 個々のドロップダウン項目をターゲットにする代わりに、ドロップダウンメニュー自体をハイライトし、users向けの指示を提供します。選択後に新しいツアーを続けてください。
サイドナビゲーション: ページのCSSを更新してdata-intercom-target属性を含めます。例えば：
<div data-intercom-target="Side navigation button">Button Text</div> これはナビゲーションターゲットの安定性を提供し、Product Tourが意図した要素と一致することを保証します。
HTML要素に注釈を付ける: 主要な要素にdata-intercom-target属性を追加して、Intercomツアーとの安定性と互換性を確保します。
要素の可視性を確保する: ツアーでターゲットにする要素が表示されており、デフォルトで非表示になっていないことを確認してください。

Product Tourの要素ターゲティングに関する一般的な問題

Product Toursの設定時に要素ターゲティングの問題に遭遇することがあります。以下は一般的な問題とその原因です。

ウェブサイトの変更によるセレクターの破損: ウェブサイトの構造変更により既存のCSSセレクターが無効になり、機能しなくなることがあります。IntercomはFinderというライブラリを使ってこれらのセレクターを生成しますが、ウェブサイトのレイアウトや要素が変わると古くなります。
動的または一般的なセレクター: .d-xl-inlineのような一般的なセレクターや動的に生成されたセレクターを使うと、異なるセッションやページ読み込みで正しい要素を一貫して指し示せないため、ターゲティングに失敗することがあります。
欠落または非表示の要素: ターゲットにした要素が表示されていないか、ツアーステップ開始時にレンダリングされていない場合、ステップが失敗したり「element isn’t visible here」というメッセージが表示されることがあります。ターゲットにしたすべての要素が各ツアーステップ中に存在し、表示されていることを常に確認してください。
動的または非表示の要素: ターゲットにした要素が静的でDOM内に常に存在することを確認してください。動的な要素の場合は、ツアーフローを再設計するか、要素が読み込まれるまでステップを遅延させることを検討してください。
不正確または一般的なCSSセレクター: nth-childのような一般的なセレクターを、data-intercom-target属性のようなユニークで特定的なセレクターに置き換えて、正確なターゲティングを行ってください。
欠落または削除された要素: CSSセレクターを更新して、サイトのすべてのバージョンで普遍的かつ一貫した要素を指すようにしてください。[href='#/sheets/...']のようなセレクターは避け、より安定した代替手段を使いましょう。

トラブルシューティング手順

Product Tourの要素ターゲティングに問題が発生した場合、以下のトラブルシューティング手順に従ってください。

要素の可視性を確認する

「element isn’t visible here」というメッセージが表示された場合：

Product Tourビルダーでステップを再保存する。これによりターゲティングが更新されることがあります。
サイトのすべてのバージョンで要素が存在するか確認する。異なる画面サイズやusersの状態も含めて確認してください。
data-intercom-target属性を要素に追加する。これによりIntercomが要素をより確実にターゲットにできます。
セレクターを確認する: CSSセレクターがツアー開始時に常に存在する要素に一致しているか確認してください。
セレクターを編集する: 「Add Invoice Row」のような表示され安定した要素を指すようにセレクターを修正してください。
動的要素に対応する: ユーザー操作後に表示される要素がDOMに存在するか確認するか、ツアーフローを再設計してください。

ターゲティングエラーを解決する

CSSセレクターの一貫性を見直し更新する。一般的または動的なセレクターは不安定の原因となることが多いです。
壊れたセレクターを静的かつ普遍的な要素への参照に置き換える。例えば、[href='#/sheets/...']のようなセレクターを、変更されにくい永続的な要素に指すように更新してください。
高度なターゲティングを使用する: data-intercom-target属性を要素に追加し、ツアービルダーでセレクターを手動入力してください。
開発者と協力する: 開発チームと連携してページのCSSやHTMLを更新し、ターゲティングを改善してください。