カルーセルバナー

カルーセルバナーを使用すると、回転するインタラクティブなプロモーションコンテンツをマーケティング担当者が簡単に作成して、任意の画面に配信できるようになり、コンバージョンを推進できます。

プロモーションバナーに表示するコンテンツの作成や変更には時間がかかるので、新しいコンテンツをすぐに公開したり、ターゲットを絞り込んだりする際に制約が生じます。カルーセルバナーを使用すると、回転するバナーをすばやく作成または変更できます。 製品の詳細や関連リソースにリンクするホットスポットなどのインタラクティビティを追加し、それらを任意の画面に配信できます。これにより、新しいプロモーションコンテンツをより迅速に市場に投入できます。

カルーセルバナーには、「CAROUSELSET」と表示されます。

Web サイトではカルーセルバナーは次のように表示されます。

ここでは、数字をクリックして画像間を移動できます。 また、カスタマイズできる間隔に基づいて自動的にスライドを切り替えることもできます。カルーセルバナーに追加する画像は、ホットスポットと画像マップの両方をサポートし、ユーザーは、選択、ハイパーリンクへの移動、またはクイックビューウィンドウへのアクセスを行うことができます。

この例では、ユーザーは画像マップをタップまたはクリックして、手袋のクイックビューウィンドウにアクセスしました。

カルーセルバナーの作成方法の視聴

カルーセルバナーの作成方法（10分33秒）を説明します。 また、カルーセルバナーのプレビュー、編集、配信方法についても説明します。

クイックスタート：カルーセルバナー

カルーセルバナーを使用してすばやく作業を開始するには、次の手順を実行します。

1. ホットスポットと画像マップの変数を識別します（ Experience Manager Assets と Dynamic Media の両方を使用するユーザーのみ）。

   まず、既存のクイックビュー実装で使用されている動的変数を識別します。これにより、Adobe Experience Manager Assetsでのカルーセルバナー作成プロセスで、ホットスポットと画像マップのデータを適切に入力できます。

   メモ

   Experience ManagerサイトまたはEコマースのお客様は、組み込み機能を使用して製品ページに移動し、製品カタログ内の既存のSKU(Stock Keeping Unit)を参照できます。 ホットスポットまたは画像マップの変数を手動で入力する必要はありません。eCommerce の設定に関する情報を参照してください。

   Experience ManagerAssetsとDynamic Mediaのユーザーである場合は、ホットスポットと画像マップのデータを手動で入力し、公開済みURLまたは埋め込みコードをサードパーティのコンテンツ管理システムと統合します。

2. オプション：必要であれば、カルーセルセットビューアプリセットを作成します。

   管理者は、独自のカルーセルビューアプリセットを作成して、カルーセルの動作と外観をカスタマイズできます。主な利点は、複数のカルーセルに対してこのカスタムビューアプリセットを再利用できることです。ただし、ユーザーがカルーセルを作成するときに、カルーセルの動作や外観を直接カスタマイズすることもできます。この方法は、特定のカルーセルに特定のデザインを必要とする場合に推奨される方法です。

3. 画像バナーのアップロードを参照してください。

   インタラクティブにする画像バナーをアップロードします。

4. カルーセルセットの作成を参照してください。

   カルーセルセットで、ユーザーはバナー画像間を移動し、ホットスポットまたは画像マップを選択して、関連するコンテンツにアクセスします。

   Assetsでカルーセルセットを作成するには、「作成」を選択し、「カルーセルセット」を選択します。 アセットをスライドに追加し、「保存」を選択します。 エディター内で、カルーセルの外観と動作を直接編集することもできます。

5. 画像バナーへのホットスポットまたは画像マップの追加を参照してください。

   1 つ以上のホットスポットまたは画像マップを画像バナーに追加し、それぞれにアクション（リンクやクイックビュー、エクスペリエンスフラグメントなど）を関連付けます。ホットスポットまたは画像マップを追加した後は、カルーセルセットを公開してタスクを終了します。公開によって埋め込みコードが生成されます。これは、コピーして Web サイトのランディングページに適用するために使用できます。

   （オプション）カルーセルバナーのプレビュー（オプション）を参照してください。 必要に応じて、カルーセルセットの表示を確認して、インタラクティビティをテストすることができます。

6. カルーセルバナーを公開します。

   他のアセットと同じようにカルーセルセットを公開します。Assetsでカルーセルセットに移動し、選択して「公開」を選択します。 カルーセルセットを公開すると、URL と埋め込み文字列がアクティベートされます。

7. 次のいずれかの操作を行います。

   • Web サイトへのカルーセルバナーの追加Web サイトページにカルーセルバナーの URL またはコピーした埋め込みコードを追加できます。

     • カルーセルバナーと既存のクイックビューの統合。サードパーティのWebコンテンツ管理システムを使用する場合は、新しいカルーセルバナーをWebサイト上の既存のクイックビュー実装に統合する必要があります。

   • Experience ManagerでWebサイトにカルーセルバナーを追加するExperience Managerサイトのお客様 は、インタラクティブメディアコンポーネントを使用して、Experience Manager内のページにカルーセルセットを直接追加できます。

カルーセルセットを編集するには、カルーセルセットの編集を参照してください。 を参照してください。また、カルーセルセットのプロパティを表示および編集することができます。

ホットスポットと画像マップの変数の指定

まず、既存のクイックビュー実装で使用されている動的変数を識別します。これにより、Experience Managerアセットでのカルーセルセット作成プロセス中に、ホットスポットまたは画像マップのデータを適切に入力できます。

Experience Managerアセットでホットスポットまたは画像マップをバナー画像に追加する場合は、各ホットスポットまたは画像マップにSKUとオプションの追加変数を割り当てます。 これらの変数は、後でホットスポットまたは画像マップをクイックビューコンテンツと照合するために使用されます。

重要なのは、ホットスポットまたは画像マップのデータに関連付けられる変数の数とタイプを正しく識別することです。バナー画像に追加するそれぞれのホットスポットまたは画像マップは、既存のバックエンドシステム内で製品を一意に識別するための十分な情報を保持する必要があります。同時に、各ホットスポットまたは画像マップに必要なデータ以上のデータを含めないでください。 必要以上のデータを含めると、データ入力プロセスが複雑になり、進行中のホットスポットまたは画像マップの管理でエラーが発生しやすくなるからです。

ホットスポットまたは画像マップのデータに使用する一連の変数を識別するには、様々な方法があります。

既存のクイックビューの実装を担当するIT担当者に相談するだけで十分な場合があります。 システム内のクイックビューを識別するために必要な最小限のデータセットは何かがわかる可能性が高くなります。 ただし、通常は、フロントエンドコードの既存の動作を簡単に分析することもできます。

ほとんどのクイックビュー実装では、次のパラダイムを使用します。

• ユーザーは Web サイト上の特定のユーザーインターフェイス要素をアクティベートします。例えば、クイックビュー​ボタンをタップします。
• Web サイトでは、必要に応じて、クイックビューのデータまたはコンテンツを読み込むための Ajax リクエストをバックエンドに送信します。
• クイックビューのデータは、Web ページでのレンダリングに備えて、コンテンツに変換されます。
• 最後に、フロントエンドコードによってそのコンテンツが画面上に視覚的にレンダリングされます。

次に、クイックビュー機能が実装されている既存のWebサイトの様々な領域にアクセスする方法を示します。クイックビューをトリガーし、クイックビューのデータまたはコンテンツを読み込むためにWebページから送信されるAjax URLを取り込みます。

通常、専門のデバッグツールを使用する必要はありません。最新の Web ブラウザーには、十分なタスクを実行できる Web インスペクターが備わっています。Web インスペクターが搭載されている Web ブラウザーの例を次に示します。

• Google Chromeで、送信されるすべてのHTTPリクエストを表示するには、F12キー(Windows)またはCommand + Option + Iキー(Mac)を押してデベロッパーツールパネルを開き、「Network」タブを選択します。
• Firefox では、F12 キー（Windows）または Command + Option + I キー（Mac）を押して Firebug プラグインを有効にして「Net」タブを使用するか、組み込みの Inspector ツールとその「Network」タブを使用します。

ブラウザーでネットワーク監視をオンにして、ページ上でクイックビューをトリガーします。

次に、ネットワークログ内でクイックビューの Ajax URL を見つけ、記録された URL を今後の分析のためにコピーします。通常、クイックビューをトリガーすると、サーバーに送信される多数のリクエストがあります。 クイックビューの Ajax URL は通常、そのリスト内の最初のほうにあります。この URL には複雑なクエリ文字列部分またはパスが含まれ、その応答の MIME タイプは text/html、text/xml、text/javascript のいずれかになります。

このプロセスの実行中は、製品カテゴリや製品タイプが異なる、Web サイトの様々な領域にアクセスすることが重要です。なぜなら、クイックビューURLには、特定のWebサイトカテゴリに共通するが、Webサイトの別の領域にアクセスした場合にのみ変化する部分が含まれるからです。

単純なケースでは、クイックビュー URL 内で変化する唯一の部分が製品 SKU となります。その場合、SKU の値が、ホットスポットまたは画像マップをバナー画像に追加するために必要になる唯一のデータです。

ただし、複雑なケースでは、クイックビューURLにSKU以外の様々な要素が含まれます（例：カテゴリID、カラーコード、サイズコード）。 その場合、各要素は、カルーセルバナー機能のホットスポットまたは画像マップのデータ定義内の個別の変数になります。

次のクイックビューURLの例と、その結果として生成されるホットスポットまたは画像マップの変数について考えてみましょう。

画像バナーのアップロード

使用する画像を既にアップロードしている場合は、次の手順（カルーセルセットを作成）に進んでください。 カルーセルで使用される画像をアップロードする前に Dynamic Media を有効にしておく必要があることに注意してください。

画像バナーをアップロードするには、アセットのアップロードを参照してください。

カルーセルセットの作成

カルーセルセットを作成するには：

1. Assetsで、カルーセルセットを作成するフォルダーに移動し、作成 / カルーセルセット​に移動します。

2. カルーセルバナーエディターページで、「タップしてアセットセレクター​を開く」を選択し、最初のスライドの画像を選択します。

   カルーセルバナーエディターページで、次のいずれかの操作を行います。

   • ページの左上隅付近にある「スライドを追加」アイコンを選択します。

   • ページの中央付近にある「タップしてアセットセレクター」を選択します。

   カルーセルセットに含めるアセットを選択します。 選択済みのアセットにはチェックマークアイコンが付いています。作業が完了したら、ページの右上隅付近にある「​​を選択」を選択します。

   アセットセレクターでは、キーワードを入力して Enter キーをタップまたはクリックすることで、アセットを検索することができます。フィルターを適用して、検索結果を絞り込むこともできます。パス、コレクション、ファイルタイプおよびタグでフィルタリングできます。フィルターを選択し、ツールバーの​フィルター​アイコンを選択します。 表示アイコンをタップし、列表示、カード表示、リスト表示​のいずれかを選択してビューを変更します。

   詳しくは、セレクターの操作を参照してください。

3. カルーセルセット内で回転させたい画像をすべて追加してしまうまで、スライドを追加し続けます。

4. （オプション）次のいずれかの操作を行います。

   • 必要に応じてスライドをドラッグし、画像をセットのリスト内で並べ替えます。

   • 画像を削除するには、画像を選択し、ツールバーの「スライドを削除」を選択します。

   • プリセットを適用するには、ページの右上隅付近にある「プリセット」ドロップダウンリストを選択し、セットに一度に適用するプリセットを選択します。

   スライドを削除するには、スライドを選択し、ツールバーで「スライドを削除」を選択します。 スライドを移動するには、並べ替えアイコンを選択し、押したまま目的の位置に移動します。

5. スライドに画像を追加した後で、ホットスポットまたは画像マップ（または両方）を画像に追加できます。画像バナーへのホットスポットまたは画像マップの追加を参照してください。

6. カルーセルセットの視覚的なデザインと動作を変更できます。「動作」タブと「外観」タブを選択し、カルーセルバナーの表示方法や特定のコンポーネントの動作を調整します。 ビューアエディターの使用方法について詳しくは、ビューアプリセットの管理を参照してください。

   メモ

   カルーセルバナーの場合は、次の項目を調整できます。

   * 1 つの画像が表示される時間。デフォルトでは、各画像は 9 秒間表示されます。
   * アニメーション.デフォルトでは、各スライドのトランジションはフェードです。これをスライドのトランジションに変更できます。
   * ボタンのスタイル。ユーザーは点または番号をタップしてバナーの画像を切り替えることができます。セットインジケーターボタンの表示位置（とスタイルが番号か点か）と大きさを変更できます。
   * 画像マップまたはホットスポットに使用されるアイコンのハイライトスタイルを変更します。
   * ビューアプリセットを編集する前に、プリセットの基にするスタイルを選択します。 スタイルを選択しない場合、ビューアプリセットの編集を開始すると、別のプリセットに変更した場合は、変更内容がすべて失われます。
   

   ビューアエディターの詳しい手順と詳細については、カルーセルバナーの特別な考慮事項を参照してください。

   カルーセルバナーの表示をプレビューすることもできます。 （オプション）カルーセルバナーのプレビューを参照してください。

7. 終了したら「保存」を選択します。

画像バナーへのホットスポットまたは画像マップの追加

カルーセルセットエディターを使用して、ホットスポットまたは画像マップをバナーに追加できます。

ホットスポットまたは画像マップを追加する際に、クイックビューポップアップ表示、ハイパーリンクまたはエクスペリエンスフラグメントとして定義することができます。

エクスペリエンスフラグメントを参照してください。

画像にホットスポットまたは画像マップを追加したら、忘れずに作業内容を保存してください。ページの右上隅にある「取り消し」および「やり直し」オプションは、現在の作成／編集セッションの間で有効です。

カルーセルバナーの作成が完了したら、プレビューを使用して、カルーセルバナーが顧客にどのように表示されるかを確認できます。

（オプション）カルーセルバナーのプレビューを参照してください。

画像マップの追加も参照してください。

画像バナーにホットスポットまたは画像マップを追加するには：

1. Assets ビューで、インタラクティブにするカルーセルセットに移動します。

2. カルーセルセットを選択し、「編集」を選択します。 カルーセルビューアエディターが開きます。

3. インタラクティブにするスライドを選択します。

4. ページの左上隅付近で、「ホットスポット」または「画像マップ」を選択します。

5. 次のいずれかの操作を行います。

   • ホットスポットの場合：画像上で、ホットスポットを表示する場所を選択します。
   • 画像マップの場合：画像上で、「 」を選択し、左上から右下にドラッグして、画像マップ領域を作成します。 画像マップのサイズを調整するには、隅をドラッグします。

   必要に応じて、ホットスポットまたは画像マップを別の場所にドラッグします。必要に応じて、他のホットスポットまたは画像マップを追加します。

   ホットスポットまたは画像マップを削除するには、「アクション」タブを選択します。 「マップとホットスポット」見出しの下にある「選択したタイプ」ドロップダウンメニューから、削除するホットスポットまたは画像マップの名前を選択します。メニューの横にある​ごみ箱​アイコンを選択し、「削除」を選択します。

6. 「名前」テキストフィールドにホットスポットまたは画像マップの名前を入力します。この名前は​マップとホットスポット​ドロップダウンリストにも表示されます。名前を指定すると、後で変更を加える際に、ホットスポットまたは画像特定しやすくなります。

7. 「アクション」タブで次のいずれかの操作を行います。

   • クイックビュー​を選択します。

     • SitesおよびEコマースのユーザーである場合は、Experience Managerピッカーアイコン（虫眼鏡）を選択して、製品を選択ページを開きます。 使用する製品を選択し、ページの右上隅にあるチェックマークを選択して、カルーセルバナーエディターに戻ります。

     • Adobe Experience Manager Sites または eCommerce のユーザーでない場合は、次のようにします。

       • これらの変数を定義する場合は、ホットスポットの変数の識別を参照してください。

       • 次に、SKU 値を手動で入力します。「SKU 値」テキストフィールドに、製品の SKU（Stock Keeping Unit）を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力した SKU 値によってクイックビューテンプレートの変数部分が自動的に入力され、タップされたホットスポットが特定の SKU のクイックビューに関連付けられます。

       • （オプション）クイックビュー内で製品をさらに識別するために使用する必要がある他の変数がある場合は、「汎用変数を追加」を選択します。 テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Mens などと指定します。

       • 詳しくは、セレクターの操作を参照してください。

   • ハイパーリンク​を選択します。

     • Sitesのユーザーである場合は、Experience Managerセレクターアイコン（フォルダー）を選択してURLに移動します。

       メモ

       インタラクティブコンテンツに相対 URL のリンク（特に Experience Manager Sites ページへのリンク）がある場合、URL ベースのリンク方法は使用できません。

     • スタンドアロンユーザーである場合は、「HREF」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。

   このリンクを新しいブラウザータブで開く（推奨のデフォルト）か同じタブで開くかを指定してください。

   詳しくは、セレクターの操作を参照してください。

   • 「エクスペリエンスフラグメント」を選択します。

     • Sitesのユーザーである場合は、検索アイコン（虫眼鏡）を選択してExperience Managerフラグメントページを開きます。 使用するエクスペリエンスフラグメントを選択し、ページの右上隅にある「選択」を選択して、ホットスポット管理ページに戻ります。
       エクスペリエンスフラグメントを参照してください。

     • エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。

       メモ

       カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされません。
       この問題を回避するには、ソーシャルメディア共有ツールを持たないビューアプリセットを作成します。 このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。

   

   カルーセルバナーの表示をプレビューすることもできます。 （オプション）カルーセルバナーのプレビューを参照してください。

8. 「保存」を選択します。

9. カルーセルセットを公開します。公開によって、Web サイトのページで使用できる、埋め込みコードまたは URL が生成されます。Sitesのユーザーである場合は、Experience ManagerセットをWebページに直接追加できます。

   アセットの公開を参照してください。

   Web サイトランディングページへのカルーセルセットの追加を参照してください。

カルーセルセットを編集

カルーセルセットには、次のような様々な編集タスクを実行できます。

• カルーセルセットにスライドを追加します。セレクターの操作も参照してください。
• カルーセルセット内のスライドを並べ替えます。
• カルーセルセットのアセットを削除します。
• ビューアプリセットを適用します。
• カルーセルセットを削除します。
• ホットスポットや画像マップを追加または編集します。セレクターの操作も参照してください。

カルーセルセットを編集するには：

1. 次のいずれかの操作をおこないます。

   • カルーセルセットアセットの上にマウスポインターを置き、編集（鉛筆アイコン）を選択します。

   • カルーセルセットアセットの上にマウスポインターを置き、選択（チェックマークアイコン）を選択して、ツールバーの「編集」を選択します。

   • カルーセルセットアセットを選択し、ページの左上隅にある「編集」（鉛筆アイコン）を選択します。

2. カルーセルセットを編集するには、次のいずれかの操作を行います。

   • スライドを追加するには、スライドを追加​アイコンを選択し、そのスライドに追加するアセットの場所に移動して、チェックマークを選択します。
   • スライドを並べ替えるには、スライドを新しい位置までドラッグします（並べ替えアイコンを選択して項目を移動します）。
   • ホットスポットまたは画像マップを追加するには、ホットスポットまたは画像マップのアイコンを選択し、ホットスポットと画像マップの追加を参照してください。
   • カルーセルセットの外観や動作を編集するには、「外観」タブまたは「動作」タブを選択し、必要なオプションを設定します。
   • ホットスポットまたは画像マップを編集するには、該当するスライドで、ホットスポットまたは画像マップを選択し、必要に応じて「アクション」タブで変更します。
   • スライドを削除するには、スライドを選択し、ツールバーの「スライドを削除」を選択します。
   • プリセットを適用するには、ページの右上隅付近にある「プリセット」ドロップダウンリストを選択し、ビューアプリセットを選択します。
   • カルーセルセット全体を削除するには、カルーセルセットの場所に移動して選択し、「削除」を選択します。
   メモ

   ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。

（オプション）カルーセルバナーのプレビュー

プレビューを使用して、カルーセルバナーが顧客にどのように表示されるかを確認し、カルーセルバナーのホットスポットと画像マップをテストして動作が期待どおりであることを確認できます。

カルーセルバナーの設定が完了したら、このカルーセルバナーを公開できます。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。Web アプリケーションへの URL のリンクを参照してください。インタラクティブコンテンツに相対 URL のリンク（特に Experience Manager Sites ページへのリンク）がある場合、URL ベースのリンク方法は使用できません。ページへの Dynamic Media アセットの追加を参照してください。

カルーセルバナーは、カルーセルエディター（推奨）または​ビューア​リストでプレビューできます。

カルーセルバナーをプレビューするには:

1. アセット​で、作成した既存のカルーセルバナーに移動し、選択して開きます。

2. 「編集」を選択します。

3. ツールバーの右隅にあるビューアプリセットリストで、カルーセルバナーをプレビューするビューアを選択します。

   

4. プレビュー​を選択します。

5. 画像上のホットスポットまたは画像マップを選択して、関連するアクションをテストできます。

ビューアリストでカルーセルバナーをプレビューするには:

1. アセット​で、作成した既存のカルーセルバナーに移動し、選択して開きます。
2. プレビューページの左上隅付近にあるコンテンツアイコンを選択します。
3. ページの左側のパネルにある​ビューア​リストで、使用するカルーセルバナービューアプリセットの名前を選択します。
4. 画像上のホットスポットまたは画像マップを選択して、関連するアクションをテストできます。

カルーセルバナーの公開

カルーセルを公開して使用できるようにします。 カルーセルセットを公開すると、URL と埋め込みコードがアクティベートされます。これにより、スケーラブルで効率の良い配信を実現するため、CDN と統合された Dynamic Media クラウドにもカルーセルが公開されます。

カルーセルバナーの公開方法について詳しくは、Dynamic Media Assetsの公開を参照してください。

Web サイトへのカルーセルバナーの追加

バナー画像をアップロードしてカルーセルを作成し、ホットスポットまたは画像マップ（あるいは両方）を画像に追加し、カルーセルセットを公開したら、次は既存の Web サイトページにカルーセルを追加できます。

ただし、スタンドアロンのExperience Managerアセットのお客様の場合は、この節で説明するようにカルーセルバナーを手動でWebサイトのランディングページに追加できます。

1. 公開済みのカルーセルバナーの埋め込みコードをコピーします。Webページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。

2. Webページに、Assetsからコピーした埋め込みExperience Managerを追加します。
   コピーされた埋め込みコードはレスポンシブなので、ページの埋め込み領域に自動的に適合する必要があります。

カルーセルバナーと既存のクイックビューの統合

このプロセスの最後の手順は、カルーセルバナーをWebサイト上の既存のクイックビュー実装に統合することです。 クイックビューの実装はすべて固有で、フロントエンドIT担当者の支援を必要とする具体的なアプローチが必要です。

既存のクイックビュー実装は一般的に、Web ページ上で以下の順に発生する、相互に関連するアクションの連鎖となっています。

1. ユーザーは、Web サイトのユーザーインターフェイス内で、特定の要素を起動します。
2. フロントエンドコードは、手順 1 で起動されたユーザーインターフェイス要素に基づいてクイックビュー URL を取得します。
3. フロントエンドコードは、手順 2 で取得した URL を使用して Ajax リクエストを送信します。
4. バックエンドロジックは、対応するクイックビューのデータまたはコンテンツをフロントコードに送り返します。
5. フロントエンドコードは、そのクイックビューのデータまたはコンテンツを読み込みます。
6. （オプション）フロントエンドコードは、読み込んだクイックビューのデータを HTML 表現に変換します。
7. フロントエンドコードは、モーダルダイアログボックスまたはパネルを表示し、エンドユーザー向けに、画面上に HTML コンテンツをレンダリングします。

これらの呼び出しは、必ずしもそれぞれ独立した、Web ページのロジックから任意の手順で呼び出すことができるパブリックな API 呼び出しを表すわけではありません。むしろ、次の手順が前の手順の最後のフェーズ（コールバック）に隠されているような連鎖的な呼び出しになっています。

カルーセルバナーが手順1と手順2の一部を置き換えるのと同時に、ユーザーがカルーセルバナー内のホットスポットまたは画像マップをタップすると、そのような操作がビューアで処理されます。 ビューアは、以前に追加されたすべてのホットスポットまたは画像マップのデータを含む Web ページにイベントを返します。

そのようなイベントハンドラーでは、フロントエンドコードは次の処理を実行します。

• カルーセルバナーから送出されるイベントをリッスンします。
• ホットスポットまたは画像マップのデータに基づいてクイックビューURLを作成します。
• バックエンドからクイックビューを読み込み、画面上の表示用にレンダリングするプロセスを起動します。

Experience ManagerAssetsから返される埋め込みコードには、既にコメントアウトされた使用準備済みのイベントハンドラーが含まれています。

そのため、必要な処理は、このコードのコメントアウトを解除し、ダミーのハンドラー本体を、特定の Web ページ専用のコードに置き換えることだけです。

クイックビューURLを作成するプロセスは、前述のホットスポットと画像マップの変数を識別するプロセスとは反対です。

ホットスポットと画像マップの変数の識別を参照してください。

クイックビュー URL をトリガーしてクイックビューパネルをアクティベートするための最後の手順では、おそらく IT 部門のフロントエンド IT 担当者の支援が必要になります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を含め、クイックビュー実装を適切な手順から正しくトリガーするための最適な方法について理解しています。

クイックビューを使用したカスタムポップアップの作成

クイックビューを使用したカスタムポップアップの作成を参照してください。