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

ビデオから直接変換を促すインタラクティブビデオを簡単に作成できます。 ビデオに対する顧客エンゲージメントは、ビデオプレーヤーの隣のパネルで行われ、関連するサービス、情報または製品のサムネールが、ビデオの特集に基づいてスクロール表示されます。顧客はサムネールをタップして、サービスを直接参照したり、買い物かごに商品を追加して即時に購入したり、Web ページを参照して詳細を確認したりできます。

ビデオが終了すると、コールトゥアクション（CTA）を促すために、画像を使用して、すべてのサービスの概要が表示されます。顧客は、ここで欲しい商品をタップすることもできます。このような実用的で具体的なエクスペリエンスにより、顧客エンゲージメントとコンバージョンが向上します。

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

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

インタラクティブでショッパブルなビデオを実際に表示するには、 ライブデモ、にスクロールします。 ショッパブルメディア 」見出しをクリックし、ショッパブルビデオをクリックします。

インタラクティブなショッパブルビデオからのビデオフレームキャプチャ。

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

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

アドビカスタマーサクセスウェビナー adobe-customer-success-webinar

「Experience Manager Assets でのインタラクティブビデオの使用、リンク共有および YouTube での共有」ウェビナーでは、インタラクティブビデオなどの機能を使用して、コンバージョン誘導イベントをビデオマーケティングコンテンツと連動させる方法を解説しています。

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

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

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

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

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

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

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

インタラクティブビデオのワークフロー：

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

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

ビデオに時間セグメントを追加する際に、セグメントに追加する各サムネールに 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 となります。この場合、Adobe Experience Manager でサムネールをインタラクティブビデオの時間セグメントに追加するのに必要なデータは製品の SKU 値のみです。

ただし、複雑なケースでは、クイックビュー URL に製品 SKU 以外の様々な要素が含まれます（カテゴリ ID やカラーコードなど）。 その場合は、それぞれの要素が Adobe Experience Manager のサムネールデータ定義で個別の変数になります。

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

例

上記の方法を例の Web サイトに適用すると、いくつかの製品サムネールを含む Web ページが作成され、それぞれに 詳細を見る ボタン：

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 サイトに統合するには：

例

次のデモ 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 ページ上で以下の順に発生する、相互に関連するアクションの連鎖となっています。

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

インタラクティブビデオが手順 1 と部分的な手順 2 を置き換えるのと同時に、ユーザーがインタラクティブビデオ内のサムネールをクリックすると、そのようなユーザー操作がビューアによって処理されます。 ビューアは、Adobe Experience Manager に以前に追加されたすべてのサムネールデータを含む Web ページに、イベントを返します。

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

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

Adobe 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
    //Please refer to your quickviewer plugin for the quickview call
    },
"initComplete":function() {
    //--- Attach quickview popup to viewer container so popup will work 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 担当者のサポートが必要になる可能性が高くなります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を用意し、クイックビューを適切な手順で正しく実装するための最適な方法を知っています。

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

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

この URL は quickViewActivate ハンドラー内で簡単に再構成できます。次のように、ビューアのコードを介してハンドラーに渡される categoryId オブジェクト内の sku フィールドと inData フィールドを使用します。

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 popup to viewer container so popup will work 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

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