ナビゲート

概要

Navigate インタラクションを使用すると、ユーザーがコンポーネント（例: ボタン）とやり取りしたときのナビゲーションアクションを定義できます。この機能により、さまざまなページタイプへのスムーズなリダイレクトが可能になり、ユーザーのエンゲージメントを高め、サイト全体で滑らかな閲覧体験を作成します。

主な機能

• 複数のページ参照タイプに対応

• カスタマイズ可能なナビゲーションアクション

• サイトのナビゲーションフローを改善

ユースケース

• 商品ページ: 詳細な製品仕様ページへリダイレクトします。

• サポートページ: ヘルプ記事や問い合わせフォームへ移動します。

• コミュニティページ: メンバープロフィールやディスカッションスレッドにリンクします。

• イベントページ: イベント登録フォームへ直接誘導します。

• ランディングページ: キャンペーン詳細ページへ案内します。

• プロフィールページ: 関連する連絡先レコードへナビゲートします。

設定

Experience Cloud サイトのページ上のコンポーネント（例: ボタン）に Navigate インタラクションを追加し、Experience Builder の Interactions タブで構成します。

利用可能なナビゲーションタイプ

これらのページ参照タイプは、ユーザーがどこに誘導されるかを定義します。

ベストプラクティス: ターゲットに基づいてタイプを選択します（例：レコードにはレコードページ）。プレビューでナビゲーションをテストしてください。

特定のページへのナビゲーションの設定

特定のページやリソースへのナビゲーションを設定するには、ユースケースに応じて次の手順に従ってください：

名前付きページに移動

1. ボタンコンポーネントを追加して、 インタラクション タブに移動します。

2. を選択します ナビゲート し、次を選択します 名前付きページ.

3. ページ名： ターゲットページのAPI名を入力します（例：Content_Document__c）。

4. なぜこれか？ Experience Builderで定義された内部ページ（例：コンテンツドキュメントページ）にユーザーを直接誘導します。

レコードページに移動

1. を選択します ナビゲート し、次を選択します レコードページ.

2. オブジェクトAPI名： オブジェクトを入力します（例：Contact）。

3. レコードID： リダイレクト先の正しいレコードIDフィールドを選択します。通常は「Record: Id」です。

4. アクション名： 表示（詳細のデフォルト）に設定します。

5. なぜこれか？ 特定のレコードの詳細ページ（例：取引先担当者のレコード）にユーザーを移動させます。

外部ウェブページに移動

• 設定： を選択し、 ナビゲート インタラクションを選択して ウェブページ オプションを選びます。

• ターゲットURL： 次のいずれかを行えます：

  • リダイレクト先を動的に設定するために、URLを格納するレコード上の式フィールドなどのフィールドを選択します。

  • または、 カスタム を選択して外部URLを手動で入力します（例：https://www.example.com）。

• なぜこれか？ このオプションはユーザーを外部のウェブサイトやリソースにリダイレクトし、サイトの連携性を高めます。

• トラブルシューティング： ナビゲーションが機能しない場合は、URLまたは選択したフィールド値が有効であることを確認し、ユーザーがターゲットサイトにアクセスするための適切な権限を持っているか確認してください。

名前付きページへのナビゲートでURLパラメータを渡す

この機能により、動的データ（例：レコードID）をターゲットページに送信して、ユーザーのコンテキストに基づいてコンテンツをカスタマイズできます。新しいページで特定のレコード詳細を表示するなど、パーソナライズされた体験を作成するのに最適です。

1

ターゲットページの設定

ターゲットページ（例：CustomerDetails）にAvonni Record Detailのようなコンポーネントを追加します。その「Record ID」属性で、URLパラメータ名recordIdを取得するために式 {!Route.recordId} を使用します。

2

ボタンの設定

ソースページ（例: ホームページ）で、Avonni ボタンを追加します。設定内で、 ナビゲート を選択し、 名前付きページ API 名（例: CustomerDetails）を入力します。

3

パラメータを追加

• 名前: ターゲットコンポーネントの属性と一致する recordId を入力します。

• 値: フィールド（例: {!Record.Id}）を選択するか、渡す特定のレコード ID を入力します。

4

この機能が役立つ理由

この機能により、動的データ（例: レコード ID）をターゲットページに送信して、その内容をカスタマイズできます。例えば、ホームページのボタンをクリックすると、渡された recordId に基づいて特定の取引先責任者の情報を表示する CustomerDetails ページにユーザーを移動させることができます。

5

例え話

手紙の宛先のように考えてください—「名前付きページへのナビゲート」は封筒で、URL パラメータ（例: recordId）は住所のようなもので、システムにどこへ行きどのデータを持ってくるかを伝えます。

6

トラブルシューティング

ターゲットページが正しく読み込まれない場合、recordId パラメータがターゲットコンポーネントの属性と一致していること、そして ID が有効であることを確認してください。

ナレッジ記事へ移動

1. を選択します ナビゲート し、次を選択します ナレッジ記事.

2. Url 名: 式を入力します {{Record.UrlName}} で、現在のレコードに関連するナレッジ記事へ動的にリンクします。

3. なぜこれか？ 現在のレコードの UrlName フィールドに基づいて特定のナレッジ記事ページにユーザーを誘導し、サポートコンテンツへのアクセスを簡素化します。

4. ヒント: この {{Record.UrlName}} 式は LWR 構文を使用してナレッジ記事の一意の URL 名（例: 関連レコードから）を取得します。レコードに有効な UrlName フィールドが入力されていることを確認してください。

5. トラブルシューティング： ナビゲーションが失敗する場合は、 UrlName フィールドが存在し、有効なナレッジ記事の URL セグメント（例: article-title）を含んでいるかを確認し、記事にアクセスするためのユーザー権限をチェックしてください。

例

例 1: サポートページへ移動

この例では、Experience Cloud サイトのサポートページへ移動するボタンを追加します。

1. ボタンの構成:

   • ラベル: "サポートを受ける"

   • アイコン名: utility:help

   • バリアント: ニュートラル

   • なぜこれか？ ユーザー支援のためのヘルプボタンを作成します。

2. リンクをインタラクションに設定:

   • ナビゲート:

     • タイプ: 名前付きページ

     • ページ名： Customer_Support__c

     • なぜこれか？ Experience Builder で定義された CustomerSupport ページへリダイレクトします。

結果: ユーザーは任意のページでボタンをクリックすると、サポートページへ移動します。

重要な考慮事項

• ターゲットの正確性: ページ名や ID が正確に一致していることを確認してください。

• パフォーマンス： ナビゲーションのターゲットは軽量に保ってください。

• アクセシビリティ： ボタンのフォーカスとコントラストをテストしてください。

• セキュリティ： 問題を防ぐために外部URLを検証してください。

一般的なトラブルシューティング

• ナビゲーションが機能しない： 選択されたタイプとターゲット（例：正しいページ名やレコードID）を確認し、権限を検証してください。

• ページが見つからない： Experience Builder に指定されたページやオブジェクトが存在することを確認してください。

• 動的IDが失敗する： レコードIDのソース（例：{!Record.Id}）が有効であることを確認してください。

• 問題が続く場合： サポートチームにお問い合わせください： [email protected] 支援のために。

概要

Avonni Navigate コンポーネントは、カスタマイズ可能なナビゲーションアクションで Experience Cloud サイトを強化します。ユーザーをページやリソースに案内するのに最適です