「買い物客」のホットスポットを画像にドラッグ&ドロップすることで、静的な画像をリッチで魅力的なエクスペリエンスに簡単にできます。買い物可能なホットスポットは、製品やサービスに関する追加情報と、直接販売時点に関する「買い物かごに追加」機能や「購入」機能を組み合わせています。 顧客はこれらのホットスポットをタップして、製品やサービスに直接リンクしたり、買い物かごに追加したり、Webページにリンクしたりできます。 顧客エンゲージメントやWebサイト上のコンバージョンを増やすなど、直接的なエクスペリエンス。
次に、クイックビューポップアップを含むショッパブルバナーを示します。モデルの上の円(「ホットスポット」)をタップすると、クイックビューがアクティブになります。
この Web ページの実際のインタラクティブ画像は、次の URL から参照してください。
インタラクティブ画像バナーの作成方法を示す 10 分 33 秒のガイドをご覧ください。ここでは、インタラクティブ画像バナーのプレビュー、編集、配信方法も説明します。
次のワークフローの手順説明は、AEM Assets 内のインタラクティブ画像をすぐに使い始めることを目的としたものです。
一部のクイックスタートタスク内には「例」という見出しがあります。これには、まだインタラクティブ画像が追加されていない次のサンプル Web ページに基づく簡単なチュートリアルが含まれています。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html
このチュートリアルでは、Web サイトにインタラクティブ画像を統合する手順が説明されています。
Interactive Imagesワークフロー:
(オプション)ホットスポットの変数の識別 - AEM Assets と Dynamic Media をスタンドアロンで使用している場合は、まず、既存のクイックビュー実装で使用される動的変数を特定し、インタラクティブ画像を作成するときにホットスポットデータを入力できるようにします。(オプション)ホットスポットの変数の識別を参照してください。
ただし、AEM Sites または AEM eCommerce(あるいは両方)を使用している場合、この手順は必要ありません。
AEM Assets での eCommerce の概念を参照してください。
(オプション)インタラクティブ画像ビューアプリセットの作成 - ホットスポットを表すために使用するグラフィック画像をカスタマイズします。独自のインタラクティブ画像ビューアプリセットの作成は、標準提供のインタラクティブ画像ビューアプリセット Shoppable_Banner
を使用する場合には必要ありません。
(オプション)インタラクティブ画像ビューアプリセットの作成を参照してください。
画像バナーのアップロード — インタラクティブにする画像バナーをアップロードします。
詳しくは、画像バナーのアップロードを参照してください。
イメージバナーへのホットスポットの追加 - 1つ以上の追加ホットスポットをイメージバナーに追加し、各ホットスポットをハイパーリンク、クイックビュー、エクスペリエンスフラグメントなどのアクションに関連付けます。ホットスポットを追加した後は、インタラクティブ画像を公開するとタスクが終了します。
WebサイトまたはAEMでのWebサイトへのインタラクティブ画像の追加
このタスクが必要になるのは次に該当する場合のみです。
AEM の実装で AEM eCommerce を使用している場合は、このタスクをスキップして次のタスクに進みます。
まず、既存のクイックビュー実装で使用されている動的変数を識別します。こうすることで、ホットスポットデータを入力してインタラクティブ画像を作成できます。
AEM Assets 内でバナー画像にホットスポットを追加する場合は、各ホットスポットに SKU(Stock Keeping Unit。提供される個々の異なる製品やサービス用の一意の識別子)とオプションの追加変数を割り当てる必要があります。そのようなホットスポットの変数は、後でホットスポットとクイックビューコンテンツを対応付けるために使用されます。
重要なのは、ホットスポットデータに関連付けられる変数の数とタイプを正しく識別することです。バナー画像に追加するそれぞれのホットスポットに、既存のバックエンドシステム内で製品を一意に識別するための十分な情報がある必要があります。
ホットスポットデータに使用する一連の変数を識別するには、様々な方法があります。
既存のクイックビュー実装を担当する IT スペシャリストに相談するだけで十分な場合もあります(通常、そのような IT スペシャリストは、システム内のクイックビューを識別するために必要な最小データセットを理解しています)。ただし、ほとんどの場合は、フロントエンドコードの既存の動作を分析するだけでもかまいません。
クイックビュー実装の大部分では、次の枠組みが使用されています。
次に、クイックビュー機能が実装されている既存の Web サイトの各領域にアクセスしてクイックビューをトリガーし、そのクイックビューのデータまたはコンテンツを読み込むために Web ページから送信される Ajax URL をキャプチャします。
通常、専門のデバッグツールを使用する必要はありません。最新の Web ブラウザーには、十分なタスクを実行できる Web インスペクターが備わっています。Web インスペクターが搭載されている Web ブラウザーの例を次に示します。
Google Chromeで送信されたすべてのHTTP要求を表示するには、F12キーを押してDeveloper Toolsパネルを開き、「ネットワーク」タブをクリックします。
Mac OSの場合は、Command+Option+Iキーを押してDeveloper Toolsパネルを開き、「ネットワーク」タブをクリックします。
Firefoxでは、F12キーを押してFirebugプラグインをアクティブにし、「Net」タブを使用します。または、組み込みのInspectorツールとNetworkタブを使用できます。
Mac OSの場合は、Command+Option+Iを押して開発ツールパネルを開き、「インスペクタ」タブをクリックします。
ブラウザーでネットワーク監視をオンにして、ページ上でクイックビューをトリガーします。
次に、ネットワークログ内でクイックビューの 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:
この URL で変化する唯一の部分は productId= というクエリ文字列パラメーターの値であり、これが SKU 値であることは明白です。したがって、ホットスポットでは、 |
単一の SKU(URL パス内) |
記録されたクイックビューの URL:
パスの最後の要素が変化する部分であり、これがホットスポットの SKU 値( |
SKU とカテゴリ ID(クエリ文字列内) |
記録されたクイックビューの URL:
この場合、URL には変化する部分が 2 つあります。SKUは
|
例
この 3 つの例で使用されているものと同じアプローチを次のデモ Web ページに適用できます。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html
デモWebページには複数の製品サムネールがあり、それぞれ詳細のラベルが付いたクイックビューボタンがあります。 Web ブラウザーのデバッグツールをアクティブにしたまま各ボタンをクリックし、記録されたクイックビュー URL に注目してください。そのページの 4 つの製品クイックビューのすべてをアクティベートすると、バックエンドに対して次のリストのクイックビューリクエストが作成されます。
/datafeed/Men-Windbreaker.json
/datafeed/Men-SimpleHenley.json
/datafeed/Men-CamoPullover.json
/datafeed/Women-QuiltedDownJacket.json
これらのサーバーコールを見ると、製品固有の情報がリクエストパスのみに含まれることがわかります。また、クエリ文字列がまったく使用されていないこと、2 つの異なるタイプのデータが含まれることもわかります。
この情報に基づいて、全体的なクイックビュー URL は次のようなパターンであることがわかります。
/datafeed/$categoryId$-$SKU$.json
このような分析に基づいて、ホットスポットに対して categoryId
と SKU
を使用することになります。
これで、画像バナーをアップロードし、AEM Assets のショッパブルインタラクティブ画像機能を使用して画像バナーにホットスポットを追加する準備ができました。
AEM Assetsに付属のShoppable_Bannerという初期設定の、標準搭載のインタラクティブ画像ビューアプリセットを使用するように選択できます。 または、インタラクティブ画像で使用するために独自のカスタムビューアプリセットを作成できます。
カスタムインタラクティブ画像ビューアプリセットを作成する場合は、画像バナーのホットスポットの外観を決定できます。ビューアプリセットの作成中に、事前定義済みの画像ギャラリーからホットスポットのグラフィックを選択して使用できます。
ビューアプリセットを保存すると、AEM Assetsのビューアプリセットリストページで、ビューアプリセットが自動的にアクティブ化(オンに)されます。 つまり、そのビューアプリセットは、インタラクティブメディアコンポーネントで、アセットを表示するときに常に表示されます。ただし、このビューアプリセットを使用したインタラクティブバナーを配信するには、ビューアプリセットも公開する必要があります(カスタムまたは初期設定のビューアプリセットでは同じです)。
インタラクティブ画像ビューアプリセットを作成するには::
左側のパネルで、ツール/アセット/ビューアプリセットをタップします。
ページの右上隅にある「作成」をタップします。
新しいビューアプリセットダイアログボックスに、インタラクティブバナービューアのプリセットを説明する名前を入力します。
これは、保存後にビューアプリセットリストページに表示されるタイトルです。
リッチメディアタイププルダウンメニューで、インタラクティブ画像を選択します。
「作成」をタップします。
ビューアプリセットを編集ページで、「外観」タブをタップします。
次のいずれかの操作をおこないます。
ページの右上隅にある「保存」をタップします。
新しいビューアプリセットを忘れずに公開してください。
追加したビューアプリセットの公開を参照してください。
これで、画像バナーをアップロードできるようになりました。
使用する画像を既にアップロードしている場合は、次の手順(画像バナーへのホットスポットの追加)に進んでください。
画像バナーをアップロードするには::
インタラクティブにする画像バナーをアップロードします。
アセットのアップロードを参照してください。
これで、画像バナーにホットスポットを追加する準備が整いました。この後のタスクを参照してください。
ホットスポット管理ページのエディターを使用して、イメージバナーにホットスポットを追加できます。
ホットスポットを追加する際に、クイックビューポップアップ表示、ハイパーリンクまたはエクスペリエンスフラグメントとして定義することができます。
エクスペリエンスフラグメントを参照してください。
ビューアをエクスペリエンスフラグメントに埋め込む場合、インタラクティブ画像のソーシャルメディア共有ツールはサポートされないことに注意してください。この問題を回避するには、ソーシャルメディア共有ツールのないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
ページの右上隅にある「取り消し」および「やり直し」オプションは、現在の作成/編集セッションの間で有効です。
インタラクティブ画像の作成が完了したら、プレビューを使用して、インタラクティブ画像がユーザーにどのように表示されるかを確認できます。
(オプション)インタラクティブ画像のプレビューを参照してください。
インタラクティブ画像またはカルーセルバナーの画像にホットスポットを追加すると、インタラクティブ画像かカルーセルバナーかにかかわらず、ホットスポット情報が同じメタデータの場所(画像に対して相対的な場所)に格納されます。つまり、どちらのビューアでも、同じ画像を定義済みのホットスポットデータと一緒に簡単に再利用できます。
ただし、カルーセルバナーでは、画像上の画像マップ(ホットスポットを含むことができる)がサポートされることに注意してください。インタラクティブ画像ではサポートされません。同じ画像を使用するインタラクティブ画像またはカルーセルバナーを作成する場合には、このことに注意してください。同じ画像の別のコピーを使用してインタラクティブ画像とカルーセルバナーを作成することをお勧めします。
カルーセルバナーも参照してください。
ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。
画像バナーにホットスポットを追加するには::
Assets ビューで、インタラクティブにする画像バナーに移動します。
次のいずれかの操作をおこないます。
ページの左上隅近くにある「追加ホットスポット」(指をタップしたアイコン)をタップして、ホットスポット管理ページを開きます。
ページの左上隅にある「ホットスポット」をタップします。
a.ホットスポット管理ページの左上隅近くにある「ホットスポット」をタップします。
b.画像上で、ホットスポットを表示する位置をタップします。 必要に応じて、ホットスポットをドラッグして場所を調整します。c.必要に応じて、手順aと手順bを繰り返して、追加追加のホットスポットを作成します。
d.(オプション)ホットスポットを削除するには、画像上でそのホットスポットを選択し、「ホットスポット」見出しの下にある「削除(ガベージカンのアイコン)」をタップします。
「名前」テキストフィールドに、ホットスポットの名前を入力します。 この名前は、「選択されたホットスポット」ドロップダウンリストにも表示されます。
次のいずれかの操作をおこないます。
「クイックビュー」をタップします。
AEM Sitesまたはeコマースのお客様の場合は、製品選択アイコン(虫めがね)をタップして、製品を選択ページを開きます。 使用する製品をタップし、ページの右上隅にある「選択」をタップして、ホットスポット管理ページに戻ります。
AEM Sites または AEM eCommerce のユーザーではない場合は次のようにします。
category=Mens
などと指定します。「ハイパーリンク」をタップします。
このリンクを新しいブラウザータブで開く(推奨のデフォルト)か同じタブで開くかを指定してください。
詳しくは、セレクターの操作を参照してください。
「エクスペリエンスフラグメント」をタップします。
AEM Sitesのお客様の場合は、検索アイコン(虫めがね)をタップして、エクスペリエンスフラグメントページを開きます。 使用するエクスペリエンスフラグメントをタップし、ページの右上隅にある「選択」をタップして、ホットスポット管理ページに戻ります。
エクスペリエンスフラグメントを参照してください。
ビューアをエクスペリエンスフラグメントに埋め込む場合、インタラクティブ画像のソーシャルメディア共有ツールはサポートされないことに注意してください。この問題を回避するには、ソーシャルメディア共有ツールのないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。
「保存」をタップして作業内容を保存し、参照ページに戻ります。
インタラクティブ画像を公開します。公開すると、バナーをクラウドで配信できるようになり、サードパーティの Web サイトに統合する必要がある場合は埋め込みコードが生成されます。
アセットの公開を参照してください。
ホットスポットを追加してインタラクティブ画像を公開したら、次に既存の Web サイトにその画像を追加できます。
インタラクティブ画像の Web サイトへの統合を参照してください。
ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。
プレビューを使用して、顧客に対して示されるインタラクティブ画像の表示方法を確認し、画像のホットスポットをテストして動作が期待どおりであるかを確認することができます。
インタラクティブ画像の設定が完了したら、この画像を公開できます。
Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。
Web アプリケーションへの URL のリンクを参照してください。インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
ページへの Dynamic Media アセットの追加を参照してください。
インタラクティブ画像をプレビューするには::
インタラクティブ画像アセットの公開方法について詳しくは、アセットの公開を参照してください。
バナー画像をアップロードし、ホットスポットを画像に追加してインタラクティブ画像を公開したら、次に Web サイトページにその画像を追加できます。
AEM Sites のユーザーである場合は、インタラクティブメディアコンポーネントをページにドラッグすることによりインタラクティブ画像を追加できます。ページへの Dynamic Media アセットの追加を参照してください。
スタンドアロン AEM Assets のユーザーである場合は、この節で説明するようにインタラクティブ画像を手動で Web サイトに追加できます。
公開済みのインタラクティブ画像の埋め込みコードをコピーします。
Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。
コピーした埋め込みコードを、Web ページ内の必要な場所に追加します。
コピーされた埋め込みコードはレスポンシブ環境向けに設定されているので、追加された場所に自動的に適応します。
例
次のデモ Web サイトを例として使用します。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html
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つの円のホットスポットを含むページ上で買い物かごが可能なインタラクティブ画像を表示します。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-1.html
この時点では、デモ Web サイトのショッパブルインタラクティブ画像上のホットスポットは表示用のみで、まだ既存のクイックビューと統合されていません。
レスポンシブ環境用のショップ可能なインタラクティブ画像に切り抜きを適用するには、パスにインタラクティブ画像設定属性ZoomView.iscommand
を含めます。ZoomView
は呼び出すコンポーネントで、iscommand
は適用する切り抜き画像サービングコマンドです。
ZoomView.iscommand 設定属性を参照してください。
crop 画像サービングコマンドを参照してください。
これで、インタラクティブ画像を Web サイト上の既存のクイックビューに統合できるようになりました。
このタスクはスタンドアロン AEM Assets のユーザーのみに適用されます。
このプロセスの最後の手順は、インタラクティブ画像を 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 の各ケースでの作成方法は次の例のようになります。
単一の SKU(クエリ文字列内) |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/json?productId=" + inData.sku + "&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 + "&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 サイトは次のようになります。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-3.html
クイックビューを使用したカスタムポップアップの作成を参照してください。