インタラクティブ画像 interactive-images

「ショッパブル」ホットスポットを画像にドラッグドロップすることで、静的な画像を、顧客にとってリッチで魅力的なエクスペリエンスに簡単に変えることができます。ショッパブルホットスポットは、製品やサービスに関する追加情報と、販売に直結する「買い物かごに追加」機能や「購入」機能を組み合わせています。顧客はこれらのホットスポットをタップして、製品やサービスに直接リンクしたり、買い物かごに追加したり、Web ページにリンクしたりできます。 直接的なエクスペリエンス（これらのエクスペリエンスにより、Web サイトでの顧客エンゲージメントとコンバージョンが増加します）。

次に、クイックビューポップアップを含むショッパブルバナーを示します。モデルの上の円（「ホットスポット」）をタップすると、クイックビューがアクティブになります。

この web ページの実際のインタラクティブ画像は、次の URL から参照してください。

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=ja

インタラクティブ画像バナーの作成方法をご覧ください。 watch-how-interactive-image-banners-are-created

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

クイックスタート：インタラクティブ画像 quick-start-interactive-images

次のワークフローの手順説明は、AEM Assetsのインタラクティブ画像をすばやく使い始めることを目的としています。

一部のクイックスタートタスク内には「例」という見出しがあります。これには、まだインタラクティブ画像が追加されていない次の Web ページの例に基づく、簡単なチュートリアルが含まれています。

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=ja

このチュートリアルでは、Web サイトにインタラクティブ画像を統合する手順を説明します。

インタラクティブ画像のワークフロー:

（オプション）ホットスポットの変数の識別 optional-identifying-hotspot-variables

まず、既存のクイックビュー実装で使用されている動的変数を識別します。こうすることで、ホットスポットデータを入力してインタラクティブ画像を作成できます。

AEM Assets 内でバナー画像にホットスポットを追加する場合は、各ホットスポットに SKU（Stock Keeping Unit。提供される個々の異なる製品やサービス用の一意の識別子）とオプションの追加変数を割り当てる必要があります。そのようなホットスポットの変数は、後でホットスポットとクイックビューコンテンツを対応付けるために使用されます。

重要なのは、ホットスポットデータに関連付けられる変数の数とタイプを正しく識別することです。バナー画像に追加するそれぞれのホットスポットに、既存のバックエンドシステム内で製品を一意に識別するための十分な情報がある必要があります。

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

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

クイックビュー実装の大部分では、次のパラダイムを使用しています。

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

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

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

次に、ネットワークログ内でクイックビューの 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 の次の例と、その結果として生成されるホットスポット変数について考えてみましょう。

例

上記の 3 つの例で使用されているのと同じアプローチを次のデモ Web ページに適用できます。

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=ja

デモ Web ページには複数の製品サムネールがあり、それぞれにクイックビューボタンのラベルが付いています 詳細を見る. Web ブラウザーのデバッグツールをアクティブにしたまま、各ボタンをクリックして、記録されたクイックビュー URL をメモします。 ページで使用可能な 4 つの製品クイックビューをすべてアクティベートすると、バックエンドに対して次のリストのクイックビューリクエストが作成されます。

これらのサーバー呼び出しを見ると、製品固有の情報がリクエストパスにのみ存在することがわかります。 また、クエリ文字列がまったく使用されていないこと、2 つの異なるタイプのデータが含まれることもわかります。

この情報に基づいて、全体的なクイックビュー URL は次のようなパターンであることがわかります。

/datafeed/$categoryId$-$SKU$.json

このような分析に基づいて、ホットスポットに対して categoryId と SKU を使用することになります。

これで、AEM Assetsのショッパブルインタラクティブ画像機能を使用して、画像バナーをアップロードし、そのバナーにホットスポットを追加する準備が整いました。

（オプション）インタラクティブ画像ビューアプリセットの作成 optional-creating-an-interactive-image-viewer-preset

デフォルトの標準提供インタラクティブ画像ビューアプリセット ( ) であるを使用するように選択できます。 Shoppable_Banner それはAEM Assetsに付属しています。 または、インタラクティブ画像で使用するために独自のカスタムビューアプリセットを作成できます。

カスタムインタラクティブ画像ビューアプリセットを作成する場合は、画像バナーのホットスポットの外観を決定できます。ビューアプリセットの作成中に、事前定義済みの画像ギャラリーからホットスポットのグラフィックを選択して使用できます。

ビューアプリセットを保存すると、 ビューアプリセット AEM Assetsのリストページ つまり、そのビューアプリセットは、インタラクティブメディアコンポーネントで、アセットを表示するときに常に表示されます。ただし、 配信 このビューアプリセットを含むインタラクティブバナー 公開 ビューアプリセットも同様に使用できます（これは、カスタムビューアプリセットまたは標準提供ビューアプリセットの場合に当てはまります）。

インタラクティブ画像ビューアプリセットを作成するには：:

画像バナーのアップロード uploading-an-image-banner

使用する画像を既にアップロードしている場合は、次の手順（画像バナーへのホットスポットの追加）に進んでください。

画像バナーをアップロードするには：:

画像バナーへのホットスポットの追加 adding-hotspots-to-an-image-banner

画像バナーにホットスポットを追加するには、 ホットスポット管理 ページ。

ホットスポットを追加する際に、クイックビューポップアップディスプレイ、ハイパーリンク、エクスペリエンスフラグメントとして定義できます。

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

ページの右上隅にある「取り消し」および「やり直し」オプションは、現在の作成／編集セッションの間で有効です。 ​ ​

インタラクティブ画像の作成が完了したら、 プレビュー を使用して、インタラクティブ画像が顧客にどのように表示されるかを確認できます。

（オプション）インタラクティブ画像のプレビューを参照してください。

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

（オプション）インタラクティブ画像のプレビュー optional-previewing-interactive-images

プレビューを使用して、顧客に対して示されるインタラクティブ画像の表示方法を確認し、画像のホットスポットをテストして動作が期待どおりであるかを確認することができます。

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

インタラクティブ画像をプレビューするには：:

インタラクティブ画像アセットの公開 publishing-interactive-image-assets

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

インタラクティブ画像の Web サイトへの統合 integrating-an-interactive-image-with-your-website

バナー画像をアップロードし、ホットスポットを画像に追加してインタラクティブ画像を公開したら、次に Web サイトページにその画像を追加できます。

AEM Sites のユーザーである場合は、インタラクティブメディアコンポーネントをページにドラッグすることによりインタラクティブ画像を追加できます。ページへの Dynamic Media アセットの追加を参照してください。

スタンドアロン AEM Assets のユーザーである場合は、この節で説明するようにインタラクティブ画像を手動で Web サイトに追加できます。

例

次のデモ Web サイトを例として使用します。

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=ja

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 を確認すると、ページ上に 3 つの円のホットスポットを伴うショッパブルインタラクティブ画像が表示されています。

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=ja

レスポンシブ環境用のショッパブルインタラクティブ画像に切り抜きを適用するには、インタラクティブ画像設定属性を含めます ZoomView.iscommand 道へ ZoomView は呼び出すコンポーネントで、は iscommand は、適用する crop 画像サービングコマンドです。

ZoomView.iscommand 設定属性を参照してください。

crop 画像サービングコマンドを参照してください。

これで、インタラクティブ画像を Web サイト上の既存のクイックビューに統合する準備が整いました。

インタラクティブ画像の既存のクイックビューへの統合 integrating-an-interactive-image-with-an-existing-quickview

このプロセスの最後の手順は、インタラクティブ画像を Web サイト上の既存のクイックビュー実装に統合することです。 すべてのケースで機能する統合のソリューションはありません。クイックビューの実装はすべて独自であり、最も多くの場合、フロントエンドの IT 担当者の支援を伴う具体的なアプローチが必要です。

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

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

ショッパブルインタラクティブ画像が手順 1 と手順 2 の一部を置き換えるのと同時に、ユーザーがショッパブル画像内のホットスポットをクリックすると、そのようなユーザー操作がビューアによって処理されます。 ビューアは、以前にAEM Assetsに追加されたすべてのホットスポットデータを含む Web ページにイベントを返します。

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

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 の各ケースでの構築方法を以下の例で確認できます。

クイックビュー URL をトリガーしてクイックビューパネルをアクティベートするための最後の手順では、フロントエンドの 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 サイトは、次のようになります。

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=ja

クイックビューを使用したカスタムポップアップの作成 using-quickviews-to-create-custom-pop-ups

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