Show Menu
トピック×

インタラクティブ画像

「買い物可能な」ホットスポットを画像にドラッグ&ドロップすることで、顧客の魅力を引き出し、静的な画像をリッチにすることができます。買い物可能なホットスポットは、製品やサービスに関する追加情報と、直接販売時点管理の「買い物かごへ」または「追加購入」機能を組み合わせています。 顧客は、これらのホットスポットをタップして、製品やサービスに直接リンクしたり、買い物かごに追加したり、Webページにリンクしたりできます。 顧客関与やWebサイト上のコンバージョンを増やすなど、直接的なエクスペリエンス。
次に、クイックビューポップアップを含むショッパブルバナーを示します。モデルの上の円(「ホットスポット」)をタップすると、クイックビューがアクティブになります。
この Web ページの実際のインタラクティブ画像は、次の URL から参照してください。

インタラクティブ画像バナーの作成方法

インタラクティブ画像バナーの作成方法 を示す 10 分 33 秒のガイドをご覧ください。ここでは、インタラクティブ画像バナーのプレビュー、編集、配信方法も説明します。

クイックスタート:インタラクティブ画像

次のワークフローの手順説明は、AEM Assets 内のインタラクティブ画像をすぐに使い始めることを目的としたものです。
一部のクイックスタートタスク内には「 」という見出しがあります。これには、まだインタラクティブ画像が追加されていない次のサンプル Web ページに基づく簡単なチュートリアルが含まれています。
このチュートリアルでは、Web サイトにインタラクティブ画像を統合する手順が説明されています。
インタラクティブ画像のワークフロー :
  1. (オプション)ホットスポットの変数の識別 - AEM Assets と Dynamic Media をスタンドアロンで使用している場合は、まず、既存のクイックビュー実装で使用される動的変数を特定し、インタラクティブ画像を作成するときにホットスポットデータを入力できるようにします。 (オプション)ホットスポットの変数の識別 を参照してください。
    ただし、AEM Sites または AEM eCommerce(あるいは両方)を使用している場合、この手順は必要ありません。
    AEM Assets での eCommerce の概念 を参照してください。
  2. (オプション)インタラクティブ画像ビューアプリセットの作成 - ホットスポットを表すために使用するグラフィック画像をカスタマイズします。独自のインタラクティブ画像ビューアプリセットの作成は、標準提供のインタラクティブ画像ビューアプリセット Shoppable_Banner を使用する場合には必要ありません。
  3. 画像バナーのアップロード — インタラクティブにする画像バナーをアップロードします。
  4. イメージバナーへのホットスポットの追加 - 1つ以上のホットスポットをイメージバナーに追加し、各ホットスポットをハイパーリンク、クイックビュー、エクスペリエンスフラグメントなどのアクションに関連付けます。 ホットスポットを追加した後は、インタラクティブ画像を公開するとタスクが終了します。
  5. WebサイトまたはAEMのWebサイトへのインタラクティブ画像の追加
    • AEMサイト、AEM eCommerceまたはその両方を使用する場合は、Interactive Mediaコンポーネントをページにドラッグして、インタラクティブ画像をAEMのWebページに直接追加できます。 ページへの Dynamic Media アセットの追加 を参照してください。
    • を参照してください。AEM Assets と Dynamic Media をスタンドアロンで使用している場合は、埋め込みコードを Web サイトにコピーしてから、既存のクイックビューに統合する必要があります。 インタラクティブ画像の Web サイトへの統合 を参照してください。
    • サードパーティの WCM(Web Content Manager)を使用している場合は、新しいインタラクティブビデオを、Web サイトで使用されている既存のクイックビュー実装に統合する必要があります。 インタラクティブ画像の既存のクイックビューへの統合 を参照してください。

(オプション)ホットスポットの変数の識別

このタスクが必要になるのは次に該当する場合のみです。
  • クイックビューをトリガーして、画像にインタラクティブ機能を追加する。
  • eコマースソリューション(IBM Websphere Commerce、Elastic Path、hybris、Intershop など)から AEM に製品データを取り出すために、AEM の実装が​** eコマース統合フレームワークを使用していない。 AEM Assets での eCommerce の概念 を参照してください。
AEM の実装で AEM eCommerce を使用している場合は、このタスクをスキップして次のタスクに進みます。
まず、既存のクイックビュー実装で使用されている動的変数を識別します。こうすることで、ホットスポットデータを入力してインタラクティブ画像を作成できます。
AEM Assets 内でバナー画像にホットスポットを追加する場合は、各ホットスポットに SKU(Stock Keeping Unit。提供される個々の異なる製品やサービス用の一意の識別子)とオプションの追加変数を割り当てる必要があります。そのようなホットスポットの変数は、後でホットスポットとクイックビューコンテンツを対応付けるために使用されます。
重要なのは、ホットスポットデータに関連付けられる変数の数とタイプを正しく識別することです。バナー画像に追加するそれぞれのホットスポットに、既存のバックエンドシステム内で製品を一意に識別するための十分な情報がある必要があります。
ホットスポットデータに使用する一連の変数を識別するには、様々な方法があります。
既存のクイックビュー実装を担当する IT スペシャリストに相談するだけで十分な場合もあります(通常、そのような IT スペシャリストは、システム内のクイックビューを識別するために必要な最小データセットを理解しています)。ただし、ほとんどの場合は、フロントエンドコードの既存の動作を分析するだけでもかまいません。
クイックビュー実装の大部分では、次の枠組みが使用されています。
  • ユーザーは Web サイト上の特定のユーザーインターフェイス要素をアクティベートします。For example, clicking a Quickview button.
  • Web サイトでは、必要に応じて、クイックビューのデータまたはコンテンツを読み込むための Ajax リクエストをバックエンドに送信します。
  • クイックビューのデータは、Web ページでのレンダリングに備えて、コンテンツに変換されます。
  • 最後に、フロントエンドコードによってそのコンテンツが画面上に視覚的にレンダリングされます。
次に、クイックビュー機能が実装されている既存の Web サイトの各領域にアクセスしてクイックビューをトリガーし、そのクイックビューのデータまたはコンテンツを読み込むために Web ページから送信される Ajax URL をキャプチャします。
通常、専門のデバッグツールを使用する必要はありません。最新の Web ブラウザーには、十分なタスクを実行できる Web インスペクターが備わっています。Web インスペクターが搭載されている Web ブラウザーの例を次に示します。
  • To see all outgoing HTTP requests in Google Chrome, press F12 to open the Developer Tools panel, and then click the Network tab.
    On a Mac, press Command+Option+I to open the Developer Tools panel, then click the Network tab.
  • In Firefox, you can either activate the Firebug plug-in by pressing F12 and use its Net tab, or you can use the built-in Inspector tool and its Network tab.
    On a Mac, press Command+Option+I to open the Developer Tools panel, then click the Inspector tab.
ブラウザーでネットワーク監視をオンにして、ページ上でクイックビューをトリガーします。
次に、ネットワークログ内でクイックビューの·Ajax·URL·を見つけ、記録された·URL·を今後の分析のためにコピーします。クイックビューをトリガーするとほとんどの場合、大量のリクエストがサーバーに送信されます。クイックビューの·Ajax·URL·は通常、そのリスト内の最初のほうにあります。この URL には複雑なクエリ文字列部分またはパスが含まれ、その応答の MIME タイプは text/html text/xml text/javascript のいずれかになります。
このプロセスの実行中は、様々な製品カテゴリや製品タイプが含まれる Web サイトの様々な領域にアクセスすることが重要です。なぜなら、クイックビュー URL には、ある特定の Web サイトカテゴリに共通するが、Web サイトの異なる領域にアクセスした場合にのみ変化する部分が存在する場合があるからです。
単純なケースでは、クイックビュー URL 内で変化する唯一の部分が製品 SKU となります。その場合、SKU の値が、ホットスポットをバナー画像に追加するために必要になる唯一のデータです。
一方、複雑なケースでは、クイックビュー URL に SKU 以外の様々な要素が含まれます(カテゴリ ID、カラーコード、サイズコードなど)。その場合、各要素は AEM Assets のショッパブルインタラクティブ画像機能において、ホットスポットデータ定義内の個別の変数になります。
次のクイックビュー URL の例と、その結果となるホットスポットの変数について見てみましょう。
単一の SKU(クエリ文字列内)
記録されたクイックビューの URL:
  • https://server/json?productId=866558&source=100
  • https://server/json?productId=1196184&source=100
  • https://server/json?productId=1081492&source=100
  • https://server/json?productId=1898294&source=100
この URL で変化する唯一の部分は productId= というクエリ文字列パラメーターの値であり、これが SKU 値であることは明白です。したがって、ホットスポットでは、 866558 1196184 1081492 1898294 などの値が入力された SKU フィールドのみが必要になります。
単一の SKU(URL パス内)
記録されたクイックビューの URL:
  • https://server/product/6422350843
  • https://server/product/1607745002
  • https://server/product/0086724882
パスの最後の要素が変化する部分であり、これがホットスポットの SKU 値( 6422350843 1607745002 0086724882 )になります。
SKU とカテゴリ ID(クエリ文字列内)
記録されたクイックビューの URL:
  • https://server/quickView/product/?category=1100004&prodId=305466
  • https://server/quickView/product/?category=1100004&prodId=310181
  • https://server/quickView/product/?category=1740148&prodId=308706
この場合、URL には変化する部分が 2 つあります。SKUは、パラメーターと prodId カテゴリIDに保存されます
categoryId
  • 305466 categoryId 1100004
  • 310181 categoryId 1100004
  • 308706 categoryId 1740148
この 3 つの例で使用されているものと同じアプローチを次のデモ Web ページに適用できます。
The demo web page has several product thumbnails, each having a Quickview button labeled See More . Web ブラウザーのデバッグツールをアクティブにしたまま各ボタンをクリックし、記録されたクイックビュー URL に注目してください。そのページの 4 つの製品クイックビューのすべてをアクティベートすると、バックエンドに対して次のリストのクイックビューリクエストが作成されます。
  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json
これらのサーバーコールを見ると、製品固有の情報がリクエストパスのみに含まれることがわかります。また、クエリ文字列がまったく使用されていないこと、2 つの異なるタイプのデータが含まれることもわかります。
  • 最初のタイプは Men または Women です。これは「製品カテゴリ」と呼ばれます。
  • 2 つ目のタイプは製品名(CamoPullover など)です。これは製品 SKU と考えることができます。
この情報に基づいて、全体的なクイックビュー URL は次のようなパターンであることがわかります。
/datafeed/$categoryId$-$SKU$.json
このような分析に基づいて、ホットスポットに対して categoryId SKU を使用することになります。
これで、画像バナーをアップロードし、AEM Assets のショッパブルインタラクティブ画像機能を使用して画像バナーにホットスポットを追加する準備ができました。

(オプション)インタラクティブ画像ビューアプリセットの作成

You can choose to use the default, out-of-the-box Interactive Image viewer preset called Shoppable_Banner that comes with AEM Assets. または、インタラクティブ画像で使用するために独自のカスタムビューアプリセットを作成できます。
カスタムインタラクティブ画像ビューアプリセットを作成する場合は、画像バナーのホットスポットの外観を決定できます。ビューアプリセットの作成中に、事前定義済みの画像ギャラリーからホットスポットのグラフィックを選択して使用できます。
After you save the viewer preset, it is automatically activated (turned on) on the Viewer Preset list page in AEM Assets. つまり、そのビューアプリセットは、インタラクティブメディアコンポーネントで、アセットを表示するときに常に表示されます。However, to deliver an interactive banner with this viewer preset, you must publish your viewer preset as well (this is true for custom or out-of-box viewer presets).
インタラクティブ画像ビューアプリセットを作成するには: :
  1. 左側のパネルで、 ツール/アセット/ビューアプリセット ​をタップします。
  2. ページの右上隅にある「 作成 」をタップします。
  3. In the New Viewer Preset dialog box, type a name to describe the interactive banner viewer preset.
    This is the title that will appear in the Viewer Preset list page after you save.
  4. In the Rich Media Type pull-down menu, select Interactive Image .
  5. 作成 」をタップします。
  6. On the Edit Viewer Preset page, tap the Appearance tab.
  7. 次のいずれかの操作をおこないます。
    • To upload your own hotspot image that you want to use on images, tap the Asset Picker icon. In the Select Content page, navigate to the hotspot image you want to use, select it, and then tap the Check Mark icon in the upper-right corner.
    • To select a predefined hotspot image, tap the Hotspot Gallery icon. On the hotspot gallery pallette, tap the hotspot image you want to use.
  8. ページの右上隅にある「 保存 」をタップします。
    新しいビューアプリセットを忘れずに公開してください。
    これで、画像バナーをアップロードできるようになりました。

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

使用する画像を既にアップロードしている場合は、次の手順( 画像バナーへのホットスポットの追加 )に進んでください。
画像バナーをアップロードするには:
  1. インタラクティブにする画像バナーをアップロードします。
    アセットのアップロード を参照してください。
    これで、画像バナーにホットスポットを追加する準備が整いました。この後のタスクを参照してください。

画像バナーへのホットスポットの追加

You can add hotspots to an image banner using the editor on the Hotspot Management page.
ホットスポットを追加する際に、クイックビューポップアップ表示、ハイパーリンクまたはエクスペリエンスフラグメントとして定義することができます。
エクスペリエンスフラグメント を参照してください。
ビューアをエクスペリエンスフラグメントに埋め込む場合、インタラクティブ画像のソーシャルメディア共有ツールはサポートされないことに注意してください。この問題を回避するには、ソーシャルメディア共有ツールのないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
ページの右上隅にある「取り消し」および「やり直し」オプションは、現在の作成/編集セッションの間で有効です。
When you finish creating your interactive image, you can use Preview to see a representation of how your interactive image will appear to customers.
インタラクティブ画像またはカルーセルバナーの画像にホットスポットを追加すると、インタラクティブ画像かカルーセルバナーかにかかわらず、ホットスポット情報が同じメタデータの場所(画像に対して相対的な場所)に格納されます。つまり、どちらのビューアでも、同じ画像を定義済みのホットスポットデータと一緒に簡単に再利用できます。
ただし、カルーセルバナーでは、画像上の画像マップ(ホットスポットを含むことができる)がサポートされることに注意してください。インタラクティブ画像ではサポートされません。同じ画像を使用するインタラクティブ画像またはカルーセルバナーを作成する場合には、このことに注意してください。同じ画像の別のコピーを使用してインタラクティブ画像とカルーセルバナーを作成することをお勧めします。
カルーセルバナー も参照してください。
ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。
画像バナーにホットスポットを追加するには:
  1. Assets ビューで、インタラクティブにする画像バナーに移動します。
  2. 次のいずれかの操作をおこないます。
    • Hover on the image, then tap [Select (checkmark icon). On the toolbar, tap [Edit .
    • 画像の上にマウスポインターを置き、 その他のアクション (3 つのドットのアイコン)/ 編集 ​をタップします。
    • Tap the image to open it in the Detail View page. On the toolbar, tap [Edit .
  3. Near the upper-left corner of the page, tap Add Hotspot (finger tap icon) to open the Hotspot Management page.
  4. ページの左上隅にある「 ホットスポット 」をタップします。
  5. a. Near the upper-left corner of the Hotspot Management page, tap Hotspot . b.画像上で、ホットスポットを表示する場所をタップします。 必要に応じて、ホットスポットをドラッグして場所を調整します。c.手順a追加とbを繰り返して、必要に応じて追加のホットスポットを追加します。d.(オプション)ホットスポットを削除するには、画像上でホットスポットを選択し、「ホットスポット」見出しの下にある「削除 (ごみ箱アイコン)」をタ ップします ​。
  6. In the Name text field, type the name of the hotspot. This name also appears in the Selected Hotspot drop-down list.
  7. 次のいずれかの操作をおこないます。
    • クイックビュー 」をタップします。
      • If you are an AEM Sites or eCommerce customer, tap the Product Picker icon (magnifying glass) to open the Select Product page. Tap the product you want to use, then tap Select in the upper-right corner of the page to return to the Hotspot Management page.
      • ** AEM Sites または AEM eCommerce のユーザーではない場合は次のようにします。
        • ホットスポットの変数の識別 を参照してください。これらの変数を定義する必要があります。
        • 次に、SKU 値を手動で入力します。In the SKU Value text field, type the product's SKU (Stock Keeping Unit), which is a unique identifier for each distinct product or service that you offer. 入力した SKU 値によってクイックビューテンプレートの変数部分が自動的に入力され、タップされたホットスポットが特定の SKU のクイックビューに関連付けられます。
        • (オプション)クイックビュー内で製品をさらに識別するために必要になる他の変数がある場合は、「 汎用変数を追加 」をタップします。テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Mens などと指定します。
    • ハイパーリンク 」をタップします。
      • If you are an AEM Sites customer, tap the Site Selector icon (folder) to navigate to a URL. インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
      • If you are a standalone customer, in the HREF text field, specify the full URL path to a linked web page.
      このリンクを新しいブラウザータブで開く(推奨のデフォルト)か同じタブで開くかを指定してください。
      詳しくは、 セレクターの操作 を参照してください。
    • エクスペリエンスフラグメント 」をタップします。
      • If you are an AEM Sites customer, tap the Search icon (magnifying glass) to open the Experience Fragment page. Tap the Experience Fragment you want to use, then tap Select in the upper-right corner of the page to return to the Hotspot management page.
        エクスペリエンスフラグメント を参照してください。
        ビューアをエクスペリエンスフラグメントに埋め込む場合、インタラクティブ画像のソーシャルメディア共有ツールはサポートされないことに注意してください。この問題を回避するには、ソーシャルメディア共有ツールのないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
      • エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。
  8. 保存 」をタップして作業内容を保存し、参照ページに戻ります。
  9. インタラクティブ画像を公開します。公開すると、バナーをクラウドで配信できるようになり、サードパーティの Web サイトに統合する必要がある場合は埋め込みコードが生成されます。
    アセットの公開 を参照してください。
    ホットスポットを追加してインタラクティブ画像を公開したら、次に既存の Web サイトにその画像を追加できます。
    ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。

(オプション)インタラクティブ画像のプレビュー

プレビューを使用して、顧客に対して示されるインタラクティブ画像の表示方法を確認し、画像のホットスポットをテストして動作が期待どおりであるかを確認することができます。
インタラクティブ画像の設定が完了したら、この画像を公開できます。 Web ページへのビデオビューアまたは画像ビューアの埋め込み を参照してください。 Web アプリケーションへの URL のリンク を参照してください。インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。 ページへの Dynamic Media アセットの追加 を参照してください。
インタラクティブ画像をプレビューするには: :
  1. Assets ビューで、作成した既存のインタラクティブ画像の場所に移動し、タップしてプレビューで表示します。
  2. Near the upper-left corner of the Preview page, in the Content drop-down list, tap Viewers .
  3. In the Viewers list, tap Shoppable_Banner or the name of the interactive image viewer preset you have created.
  4. 画像上のホットスポットをタップし、関連付けられたアクションをテストします。

インタラクティブ画像アセットの公開

インタラクティブ画像アセットの公開方法について詳しくは、 アセットの公開 を参照してください。

インタラクティブ画像の Web サイトへの統合

バナー画像をアップロードし、ホットスポットを画像に追加してインタラクティブ画像を公開したら、次に Web サイトページにその画像を追加できます。
AEM Sites のユーザーである場合は、インタラクティブメディアコンポーネントをページにドラッグすることによりインタラクティブ画像を追加できます。 ページへの Dynamic Media アセットの追加 を参照してください。
スタンドアロン AEM Assets のユーザーである場合は、この節で説明するようにインタラクティブ画像を手動で Web サイトに追加できます。
  1. 公開済みのインタラクティブ画像の埋め込みコードをコピーします。
  2. コピーした埋め込みコードを、Web ページ内の必要な場所に追加します。
    コピーされた埋め込みコードはレスポンシブ環境向けに設定されているので、追加された場所に自動的に適応します。
次のデモ Web サイトを例として使用します。
3 人の男性の写真には次のような静的 IMG タグが使用されています。
<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

統合は、 IMG タグを削除して AEM Assets からコピーした埋め込みコードに置き換えるだけで簡単にできます。結果は次のURLで確認できます。このURLは、3つの円のホットスポットを含むページ上のショップ可能なインタラクティブ画像を示します。
この時点では、デモ Web サイトのショッパブルインタラクティブ画像上のホットスポットは表示用のみで、まだ既存のクイックビューと統合されていません。
To apply a crop to a shoppable interactive image for a responsive environment, you can include the Interactive Image configuration attribute ZoomView.iscommand to the path—where ZoomView is the component to call and iscommand is the crop image serving command that you apply.
ZoomView.iscommand 設定属性を参照してください。
crop 画像サービングコマンドを参照してください。
これで、インタラクティブ画像を Web サイト上の既存のクイックビューに統合できるようになりました。

インタラクティブ画像の既存のクイックビューへの統合

このタスクはスタンドアロン AEM Assets のユーザーのみに適用されます。
このプロセスの最後の手順は、インタラクティブ画像を Web サイトの既存のクイックビュー実装に統合することです。すべてのケースで機能する統合のソリューションはありません。すべてのクイックビュー実装は固有であり、フロントエンド IT 担当者の支援を受けた特別なアプローチが必要になります。
既存のクイックビュー実装は一般的に、Web ページ上で以下の順に発生する、相互に関連するアクションの連鎖となっています。
  1. ユーザーは、Web サイトのユーザーインターフェイス内で、特定の要素を起動します。
  2. フロントエンドコードは、手順 1 で起動されたユーザーインターフェイス要素に基づいてクイックビュー URL を取得します。
  3. フロントエンドコードは、手順 2 で取得した URL を使用して Ajax リクエストを送信します。
  4. バックエンドロジックは、対応するクイックビューのデータまたはコンテンツをフロントコードに送り返します。
  5. フロントエンドコードは、そのクイックビューのデータまたはコンテンツを読み込みます。
  6. (オプション)フロントエンドコードは、読み込んだクイックビューのデータを HTML 表現に変換します。
  7. フロントエンドコードは、モーダルダイアログボックスまたはパネルを表示し、エンドユーザー向けに、画面上に HTML コンテンツをレンダリングします。
これらの呼び出しは、必ずしもそれぞれ独立した、Web ページのロジックから任意の手順で呼び出すことができるパブリックな API 呼び出しを表すわけではありません。むしろ、次の手順がすべて前の手順の最終フェーズ(コールバック)に潜むような連鎖的な呼び出しになっています。
ショッパブルインタラクティブ画像が手順 1 と(部分的に)手順 2 を置き換えるのと同時に、ユーザーがショッパブル画像内のホットスポットをクリックしたときに、そのユーザー操作がビューアによって処理されます。ビューアは、AEM Assets に以前に追加されたすべてのホットスポットデータを含む Web ページに、イベントを返します。
そのようなイベントハンドラーでは、フロントエンドコードは次の処理を実行します。
  • ショッパブルインタラクティブ画像から送出されるイベントをリッスンします。
  • ホットスポットデータに基づいてクイックビュー URL を作成します。
  • バックエンドからクイックビューを読み込み、画面上の表示用にレンダリングするプロセスを起動します。
AEM Assets によって返される埋め込みコードには、次のハイライトされたコードのように、既にすぐに使用可能なイベントハンドラーがコメントアウトされた状態で含まれています。
        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : { 
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/", 
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({ 
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 }, 
             });
        */
        s7interactiveimageviewer.init();

そのため、必要な処理は、このコードのコメントアウトを解除し、ダミーのハンドラー本体を、特定の Web ページ専用のコードに置き換えることだけです。
クイックビュー URL の作成プロセスは、基本的に先ほど説明したホットスポットの変数を識別するためのプロセスとは逆のプロセスになります。
ホットスポットの変数の識別 を参照してください。
以前のクイックビュー URL の例を使用した場合、クイックビュー URL の各ケースでの作成方法は次の例のようになります。
単一の SKU(クエリ文字列内)
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&amp;source=100"; }, });
単一の SKU(URL パス内)
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU とカテゴリ ID(クエリ文字列内)
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku; }, });
クイックビュー URL をトリガーしてクイックビューパネルをアクティベートするための最後の手順では、おそらく IT 部門のフロントエンド IT 担当者の支援が必要になります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を含め、クイックビュー実装を適切な手順から正しくトリガーするための最適な方法について理解しています。
これらの手順をデモ Web サイトに適用してショッパブルインタラクティブ画像をクイックビューのコードに統合する方法を確認できます。先ほど、クイックビュー URL の構造を次のように識別しました。
/datafeed/$categoryId$-$SKU$.json

この URL を quickViewActivate ハンドラー内で再構成するために、ビューアのコードからハンドラーに渡される inData オブジェクト内の categoryId フィールドと SKU フィールドを使用できます。
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

このデモ Web サイトは、単純な loadQuickView() 関数呼び出しを使用してクイックビューダイアログボックスを起動しています。この関数は、1 つの引数(クイックビューデータの URL)のみを受け取ります。したがって、ショッパブルインタラクティブ画像を統合するために必要な最後の手順は、 quickViewActivate ハンドラーに次のコード行を追加することです。
loadQuickView(quickViewUrl);

次に、ソースコード全体を示します。
 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : { 
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/", 
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({ 
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    }, 
   });
 s7interactiveimageviewer.init();

インタラクティブ画像が完全に統合された最終的なデモ Web サイトは次のようになります。

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