[AEM Assets]{class="badge positive" title="AEM Assetsに適用）。"}

インタラクティブビデオ interactive-videos

ビデオから直接コンバージョンを推進するインタラクティブビデオ（ショッパブルビデオとも呼ばれます）を簡単に作成できます。視聴者は、ビデオプレーヤーの横にあるサイドパネルを通じてエンゲージします。 ビデオが項目をハイライト表示すると、パネルに関連するサービス、情報、製品のサムネールが表示されます。 顧客は、サービスまたは詳細なweb ページに直接移動するサムネールを選択できます。 また、商品をカートに追加して、すぐに購入することもできます。

ビデオが終了すると、コールトゥアクションを促すために、すべての商品の概要が視覚に訴えて表示されます。顧客は、ここで欲しい商品を選択することもできます。こうしたすぐに行動に移すことができる具体的なエクスペリエンスが顧客のエンゲージメントとコンバージョンを高めます。

インタラクティブ画像 も参照してください。

実際のインタラクティブビデオ interactive-video-in-action

インタラクティブなショッパブルビデオの動作を確認するには、「ライブデモ」を選択し、ページの「ショッパブルメディア」見出しまでスクロールして、ショッパブルビデオを選択して再生を開始します。

Dynamic Media でのインタラクティブビデオの使用 も参照してください。

インタラクティブビデオの作成方法を見る watch-how-interactive-videos-are-created

インタラクティブビデオの作成方法に関するガイド（7 分 30 秒）を視聴します
（このビデオガイドの対象は Assets on Demand ですが、原則や手順は Adobe Experience Manager Assets のインタラクティブビデオにも対応しています）。

クイックスタート：インタラクティブビデオ quick-start-interactive-videos

次の詳しいワークフローの説明は、Dynamic Media でインタラクティブビデオをすぐに開始することを目的としたものです。

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

「例」では、Web サイトにインタラクティブビデオを統合する手順が説明されています。

最後の「例」節のチュートリアルを終えると、インタラクティブビデオと完全統合された最終的なデモ Web ページの表示はこのようになります。

インタラクティブビデオの手順：

（オプション）クイックビュー変数の特定 optional-identifying-quickview-variables

最初に、インタラクティブビデオの作成プロセス中に製品サムネールを対応する製品クイックビューにマッピングできるように、既存のクイックビューの実装で使用している動的変数を特定します。

ビデオに時間セグメントを追加する際に、セグメントに追加する各サムネールに SKU（Stock Keeping Unit）と任意の追加の変数を割り当てます。こうした変数は、適切な製品クイックビューを表示するために後で使用されます。

商品クイックビューを一意にトリガーするために必要な変数を適切に特定することが重要です。

既存のクイックビュー実装を担当している IT 担当者に問い合わせれば済む場合もあります。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 となります。この場合、Adobe Experience Manager でサムネールをインタラクティブビデオの時間セグメントに追加するのに必要なデータは製品の SKU 値のみです。

より複雑なシナリオの場合、クイックビューのURLは、カテゴリ IDやカラーコードなど、製品SKUの外部にフィールドを追加します。 その場合は、それぞれの要素が Adobe Experience Manager のサムネールデータ定義で個別の変数になります。

次のクイックビュー URL と、その結果のサムネイルの変数の例を考えてみます。

例

前述の方法をサンプルの Web サイトに適用すると、いくつの製品サムネールが含まれる Web ページが生成され、「SEE MORE」ボタンが表示されます。

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=ja

そのページのすべての製品クイックビューをアクティベートすると、バックエンドに対して次のリストのクイックビューリクエストが作成されます。

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

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

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

こうした分析に基づいて、サムネールには categoryId と SKU の 2 つの変数を使用できるという結論が得られます。

これで、ビデオおよび関連するサムネールアセットをアップロードできます。

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

デフォルトの標準のインタラクティブビデオビューアプリセットタイプ Shoppable_Video_darkまたはShoppable_Video_lightのいずれかを使用する場合は、このタスクをスキップして、次のタスクに進むことができます。

オーサリング環境でサムネールを選択すると、クイックビューダイアログボックスのプレビューが表示されます。

必要に応じて、独自のカスタムインタラクティブビデオビューアプリセットを作成できます。 特に、ビデオプレーヤーのスタイル、インタラクティブサムネイル、ビデオの最後に表示されるサムネイルのグリッド表示を指定できます。

インタラクティブビデオビューアプリセットは、追加したビデオとすべてのタイムラインセグメントを適切にレンダリングします。 また、プレビューモードで製品のサムネールを選択すると、デフォルトのサンプルクイックビューが使用されるので、公開前にインタラクティビティをテストできます。

ビューアプリセットを保存すると、ビューアプリセットページでそのプリセットのステータスが自動的にオンに設定されます。このステータスは、そのプリセットが Dynamic Media コンポーネントに表示され、ビデオのプレビュー時に必ず使用されることを意味します。また、新しいビューアプリセットも忘れずに手動で公開してください。

独自のインタラクティブビデオビューアプリセットを作成するには、​ ビューアプリセットの作成を参照してください。

ビデオおよび関連するサムネールアセットのアップロード uploading-a-video-and-its-associated-thumbnail-assets

ビデオとサムネールアセットを既にアップロードしている場合は、ビデオへのインタラクティブ機能の追加に進んでください。

誤ったビデオや画像をアップロードした場合、または必要でなくなったアップロード済みビデオや画像を削除したい場合は、アセットの削除を参照してください。

ビデオおよび関連するサムネイルアセットのアップロード

ビデオへのインタラクティブ機能の追加 adding-interactivity-to-your-video

インタラクティブビデオを作成ページのインプレースビジュアルエディターを使用して、ビデオにタイムラインセグメントを追加します。

タイムラインセグメントを追加した後、各セグメント内にサムネイル画像を追加します。 追加したサムネイルごとに、アクションを適用します。例えば、サムネイルにクイックビューを適用したり、サムネイルにハイパーリンクやエクスペリエンスフラグメントを割り当てたりすることができます。

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

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

インタラクティブビデオを保存すると、ビデオがすぐにプレビューで開きます。そこから、インタラクティブなビデオビューアプリセットを選択してビデオを再生し、顧客に対してどのように表示されるかを概算で確認できます。

ビデオにインタラクティブ機能を追加するには：

インタラクティブビデオアセットの公開 publishing-interactive-video-assets

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

インタラクティブビデオの Web サイトへの統合 integrating-an-interactive-video-with-your-website

ビデオをアップロードし、タイムラインセグメントを追加して、インタラクティブビデオを公開したら、既存の Web サイトにビデオを追加する準備は完了です。

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

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

例

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=ja

なお、次のビデオ埋め込みコードが標準で用意されています。

<style type="text/css">
 #s7video_div.s7videoviewer{
   width:100%;
   height:auto;
 }
</style>

<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
 var s7videoviewer = new s7viewers.VideoViewer({
  "containerId" : "s7video_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Video",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 }).init();
</script>

統合は、ビデオ埋め込みコードを削除して、Adobe Experience Manager のインタラクティブビデオ埋め込みコードで置き換えるだけで簡単にできます。次の URL で結果を確認できます。ページにインタラクティブビデオが表示されますが、既存のクイックビューにはまだ統合されていません。

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-1.html?lang=ja

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

このプロセスの最後の手順は、Web サイトで使用されている既存のクイックビュー実装にインタラクティブビデオを統合することです。すべてのケースで機能する統合のソリューションはありません。クイックビューの実装はすべて一意です。そのため、フロントエンド IT 担当者の支援を受けた個別のアプローチが必要になります。

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

ページロジックは、これらを任意のポイントでパブリック API エンドポイントとして直接呼び出すことはありません。 むしろ、次の手順が前の手順の最後のフェーズ（コールバック）に隠されているような連鎖的な呼び出しになっています。

インタラクティブビデオはステップ 1とステップ 2の一部に置き換わりますが、ビューアはビデオ内のサムネール選択を処理します。 ビューアは、Adobe Experience Manager に以前に追加されたすべてのサムネールデータを含む Web ページに、イベントを返します。

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

さらに、インタラクティブビデオビューアはフルスクリーン操作モードをサポートしています。 ユーザーがサムネールを選択すると、全画面表示から離れることなく、クイックビューがトリガーされます。この機能を実現するには、クイックビューのモーダルダイアログボックスがビューアのコンテナにアタッチされるようにフロントエンドコードを変更します。ビューアがフルスクリーンモードの場合に使用できないドキュメント BODYやその他のweb ページ要素を追加しないでください。 このジョブを実行するコードは、ビューアがページに読み込まれた後で送信されるもう 1 つのビューアコールバックをリッスンします。

Experience Managerから返される埋め込みコードには、既にすぐに使用できるイベントハンドラーが実装されています。 次のハイライトされたコードスニペットのように、コメントアウトされています。

<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 /* // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
    //To pass other parameter from the hotspot, you need to add custom parameter during the hotspot setup as parameterName=value
    loadQuickView(sku); //Replace this call with your quickview plugin
    //See your quickviewer plugin for the quickview call
    },
"initComplete":function() {
    //--- Attach quickview pop-up to viewer container so pop-up works in fullscreen mode ---
    var popup = document.getElementById('quickview_div'); // get custom quickview container
    popup.parentNode.removeChild(popup); // remove it from current DOM
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(popup); //Attach custom quickview container to viewer
    }
   });
 */
 s7interactivevideoviewer.init();
</script>

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

標準の埋め込みコードには、2 つのデフォルトコールバックハンドラー、quickViewActivate と initComplete が含まれています。quickViewActivate ハンドラーがトリガーされるのは、ビューアでサムネールが選択されるときです。これを使用して、ビューアをクイックビューのアクティベートロジックに統合します。initComplete ハンドラーは、ビューアがページに読み込まれるときに 1 回だけトリガーされます。このハンドラーは、Web ページ DOM でのクイックビューダイアログボックスの位置を調整するために使用されます。

クイックビュー URL の作成プロセスは、このトピックで既に説明したサムネイルの変数を識別するためのプロセスと逆になります。前に特定したクイックビュー URL の例を使用して、クイックビュー URL の各ケースでの作成方法を確認できます。

クイックビュー URL をトリガーしてクイックビューパネルをアクティベートするための最後の手順では、フロントエンドの IT 担当者のサポートが必要になる可能性が高くなります。彼らは、すぐに使用できるクイックビューURLを持つ、適切なステップからクイックビューの実装を正確にトリガーする方法を最もよく知っています。

これらの手順をデモ web サイトに適用して、完全にインタラクティブなビデオをクイックビューコードと統合する方法を確認できます。 このトピックでは先ほど、クイックビュー URL の構造を次のように特定しました。

/datafeed/$CategoryId$-$SKU$.json

quickViewActivateで、次のように、ビューアが提供するinData.categoryIdおよびinData.sku フィールドからURLを再構築します。

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

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

loadQuickView(quickViewUrl);

最後に、クイックビューダイアログボックスがビューアのコンテナ要素にアタッチされていることを確認します。埋め込みコードのデフォルトでは、この機能を実現するためのサンプル手順が用意されています。 ビューアのコンテナ要素への参照を取得するには、次のコード行を使用できます。

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);

ここで、inner_container が、ビューアによって管理される DIV 要素への参照です。ダイアログボックスをこの DIV の子にしようとしています。

モーダルダイアログボックス要素を見つけ、上記のコンテナに添付する手順は、大文字と小文字が区別されます。 ここでも、必要なクイックビュー実装に詳しいフロントエンド開発者の助けを借りることをお勧めします。

サンプル Web サイトの場合、クイックビューモーダルダイアログボックスは DIV として実装され、クイックビューモーダル ID がドキュメント BODY に直接アタッチされています。したがって、このダイアログボックスをビューアのコンテナに移動するコードは、次のように簡単です。

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));

完全なソースコードは次のとおりです。

<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
     var categoryId=inData.categoryId; //categoryId
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   "initComplete":function() {
    //--- Attach quickview pop-up to viewer container so pop-up works in fullscreen mode ---
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(document.getElementById("quickview-modal"));
    }
   });
 s7interactivevideoviewer.init();
</script>

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-3.html?lang=ja

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

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