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

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

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

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

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

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

  • 再生中にビデオ内で製品が使用されると、同じ製品のサムネール画像が右側に表示されます。

  • ビデオを一時停止する場合は、サムネールを選択し、製品のクイックビューを開きます。例えば、ビデオ内の KitchenAid のサムネール画像を選択すると、このミキサーの 360 度のスピンビューを見たり、細部を拡大表示したりすることができます。

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

NOTE
ユーザーがサムネール画像を選択すると Web ページが開くようにインタラクティブビデオを作成した場合、一部のデバイスでは、ポップアップ Web ページがブロックされて開きません。そのようなケースでは、デバイスのポップアップブロック機能の設定を変更する必要があります。例えば、Apple iPhone 6 では、設定Safariポップアップのブロック ​に移動して、コントロールを​ オフ ​にスライドします。こうすると、インタラクティブビデオを再生してサムネールを選択したときに、ポップアップを開くかどうかを確認するメッセージが表示されます。同意すると Web ページが開きます。

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

インタラクティブビデオの作成方法に関する説明を視聴します(7分30秒)。
このビデオガイドのブランドは Assets on Demand ですが、原則や手順は Adobe Experience Manager Assets のインタラクティブビデオにも適用されます。

Adobe お客様ソリューションウェビナー 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

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

  1. (オプション)クイックビュー変数の特定 - まず、既存のクイックビュー実装で使用される動的変数を特定します。これらの変数を使用して、インタラクティブビデオを作成するときに、製品のサムネールを対応する製品のクイックビューにマッピングします。(オプション)クイックビュー変数を特定を参照してください。
    このタスクが必要になるのは、以下のすべてに該当する場合のみです

    • クイックビューをトリガーして、ビデオにインタラクティブ機能を追加する。
    • e コマースソリューション(IBM® WebSphere® Commerce、Elastic Path、Hybris、Intershop など)から Experience Manager に製品データを取り出すために、Experience Manager の実装が e コマース統合フレームワークを使用して​ いないExperience Manager Assets の e コマースの概念を参照してください。
  2. (オプション)インタラクティブビデオのビューアプリセットの作成 - プレーヤーを構成する様々なコンポーネント(ビデオスクラバーやインタラクティブサムネールなど)の外観と動作をカスタマイズします。独自のインタラクティブビデオビューアプリセットの作成は、標準提供のインタラクティブビデオビューアプリセット(Shoppable_Video_Light または Shoppable_Video_Dark)を使用する場合には必要ありません。ビューアプリセットの作成(オプション)とインタラクティブビューアプリセットの作成に関する注意事項を参照してください。

  3. ビデオおよび関連する画像アセットのアップロード - インタラクティブにするビデオと関連する画像をアップロードします。ビデオおよび関連するサムネールアセットのアップロードを参照してください。

    note note
    NOTE
    MXF ビデオ形式は、Dynamic Media のインタラクティブビデオでの使用は、まだサポートされていません。
  4. ビデオへのインタラクティビティの追加 - ビデオに 1 つ以上の時間セグメントを追加します。次に、それらの時間セグメント内で画像サムネールを関連付けます。各画像サムネールを、ハイパーリンク、クイックビュー、エクスペリエンスフラグメントなどのアクションに割り当てます(インタラクティブコンテンツに相対 URL のリンク(特に Adobe Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません)。インタラクティブビデオアセットを公開して作業は完了です。公開によって埋め込みコードまたは URL が生成されます。最終的には、このコードまたは URL をコピーして、Web サイトのランディングページに適用します。ビデオへのインタラクティビティの追加を参照してください。アセットの公開を参照してください。

  5. Web サイトまたは Experience Manager の web サイトにインタラクティブビデオを追加 - Experience Manager Sites または e コマース、あるいはその両方を使用している場合、インタラクティブビデオを web ページに追加できます。インタラクティブメディアコンポーネントを Experience Manager のページにドラッグします。ページへの Dynamic Media アセットの追加を参照してください。埋め込みコードまたは URL を使用して、インタラクティブビデオを Web サイトエクスペリエンスに統合します。インタラクティブビデオの Web サイトへの統合 を参照してください。サードパーティの WCM(Web Content Manager)を使用している場合は、新しいインタラクティブビデオを、Web サイトで使用されている既存のクイックビュー実装に統合する必要があります。インタラクティブビデオの既存のクイックビューへの統合 を参照してください。
    ページへの Dynamic Media アセットの追加

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

NOTE
このタスクが必要になるのは次に該当する場合のみです。
  • クイックビューをトリガーして、ビデオにインタラクティブ機能を追加する。
  • e コマースソリューション(IBM® WebSphere® Commerce、Elastic Path、Hybris、Intershop など)から Experience Manager に製品データを取り出すために、Experience Manager の実装が e コマース統合フレームワークを使用して​ いないExperience Manager Assets の e コマースの概念を参照してください。
Experience Manager の実装で eCommerce を使用している場合は、このタスクをスキップして次のタスクに進みます。

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

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

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

既存のクイックビュー実装を担当している IT 担当者に問い合わせれば済む場合もあります。IT 担当者は、システム内のクイックビューを特定するための最小限のデータセットを把握している可能性があります。ただし、フロントエンドコードの既存の動作を分析するだけでもかまいません。

ほとんどのクイックビュー実装では、次のような枠組みが使用されています。

  • ユーザーは Web サイト上の特定のユーザーインターフェイス要素をアクティベートします。例えば、「クイックビュー」ボタンを選択します。
  • Web サイトでは、必要に応じて、クイックビューのデータまたはコンテンツを読み込むための Ajax リクエストをバックエンドに送信します。
  • クイックビューのデータは、Web ページでのレンダリングに備えて、コンテンツに変換されます。
  • 最後に、フロントエンドコードによってそのコンテンツが画面上に視覚的にレンダリングされます。

そのため、このアプローチでは、クイックビューが実装されている既存の Web サイトの様々な部分にアクセスし、クイックビューをトリガーして、クイックビューのデータまたはコンテンツを読み込むために Web ページから送信された Ajax URL をキャプチャします。

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

  • Google Chrome で送信されるすべての HTTP リクエストを確認するには、F12(Windows)または Command+Options+I(Mac)を押して開発者ツールパネルを開き、「ネットワーク」タブを選択します。

  • Firefox では、F12 キー(Windows)または Command + Option + I キー(Mac)を押して Firebug プラグインを有効にして「[Net]」タブを使用するか、組み込みの Inspector ツールとその「Network」タブを使用します。

  • Internet Explorer では、F12 キーを押してデバッガーツールを起動します。

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

次に、ネットワークログ内でクイックビューの Ajax URL を見つけ、記録された URL を今後の分析のためにコピーします。通常、クイックビューをトリガーすると、多数のリクエストがサーバーに送信されます。クイックビューの Ajax URL は通常、そのリスト内の最初のほうにあります。この URL には複雑なクエリ文字列部分またはパスが含まれ、その応答の MIME タイプは text/htmltext/xmltext/javascript のいずれかになります。

このプロセスの実行中は、製品カテゴリや製品タイプが異なる、Web サイトの様々な領域にアクセスすることが重要です。クイックビューの URL には、特定の web サイトカテゴリに共通するものの、web サイトの異なる領域にアクセスした場合にのみ変化する部分が存在するからです。

最も単純なケースでは、クイックビュー URL 内で変化する唯一の部分が製品 SKU となります。この場合、Adobe Experience Manager でサムネールをインタラクティブビデオの時間セグメントに追加するのに必要なデータは製品の SKU 値のみです。

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

次のクイックビュー 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 値であることは明白です。そのため、サムネールでは、866558119618410814921898294 などの値が入力された SKU フィールドのみが必要になります。

単一の SKU(URL パス内)

記録されたクイックビューの URLとしては以下が挙げられます。

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

パスの最後の要素が変化する部分であり、これが Adobe Experience Manager サムネールの SKU 値(642235084316077450020086724882)になります。

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 が category= パラメーターに格納されています。

そのため、サムネール定義はペアになります。つまり、SKU 値と、categoryId という追加の変数です。結果のペアは次のようになります。

  • SKU が 305466categoryId1100004
  • SKU が 310181categoryId1100004
  • SKU が 308706categoryId1740148

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

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

ページで利用可能なすべての製品のクイックビューをアクティブ化すると、バックエンドに対して行われたクイックビューリクエストのリストが次のように表示されます。

  • datafeed/candles-233396346.json
  • datafeed/candles-233978050.json
  • datafeed/candles-234024346.json
  • datafeed/candles-234024356.json
  • datafeed/candles-234024359.json
  • datafeed/cushions-233939848.json
  • datafeed/cushions-234019477.json
  • datafeed/cushions-234019483.json
  • datafeed/furniture-231747479.json
  • datafeed/furniture-232625621.json
  • datafeed/furniture-232625626.json
  • datafeed/furniture-233939810.json
  • datafeed/furniture-233939825.json
  • datafeed/furniture-233939828.json
  • datafeed/furniture-233939853.json
  • datafeed/furniture-233940334.json
  • datafeed/glassware-000064007.json
  • datafeed/glassware-230722193.json
  • datafeed/glassware-233916550.json
  • datafeed/glassware-233916597.json

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

  • 1 つ目のタイプはキャンドル、クッション、家具、ガラス製品です。これは「製品カテゴリ」と呼ばれます。
  • 2 つ目のタイプは製品コード(233916597 など)です。これは「製品 SKU」と見なすことができます。

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

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

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

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

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

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

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

chlimage_1-21

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

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

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

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

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

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

NOTE
MXF ビデオ形式は、Dynamic Media のインタラクティブビデオでは、まだ使用できません。

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

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

  1. 目的のフォルダーに、ビデオおよび関連するサムネールアセットをアップロードします。

    アセットのアップロードを参照してください。FTP ジョブスケジューリングを使用したアセットのアップロードを参照してください。

    これで、ビデオにインタラクティブ機能を追加できます。

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

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

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

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

NOTE
インタラクティブビデオのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされません。この問題を回避するには、ソーシャルメディアでの共有ツールを持たないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
NOTE
インタラクティブコンテンツに相対 URL のリンク(特に Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。

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

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

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

  1. Assets ビューで、インタラクティブにするアップロード済みのビデオに移動します。

  2. 次のいずれかの操作を行います。

    • 画像の上にマウスポインターを置き、 選択 (チェックマークアイコン)を選択します。ツールバーの「編集」を選択します。

    • 画像の上にマウスポインターを置き、 その他のアクション (3 つのドットのアイコン)/編集 を選択します。

    • 画像を選択して、詳細ビューページで開きます。 ツールバーの「編集」を選択します。

  3. インタラクティブビデオを作成ページで、次のいずれかの操作を行います。

    • ビデオの再生を開始するには、「再生」ボタンを選択します。取り上げたい特定の製品、サービスまたは詳細が表示されたら、ツールバーの「セグメントを追加」を選択します。ビデオの最後に達するまで繰り返します。

      追加した各時間セグメントに 1 つまたは複数のサムネール画像を割り当て、それらのサムネールにリンクを設定し、顧客が購入するためのクイックビュー製品ページや詳細情報のための web ページにアクセスできるようにします。

    • ビデオの再生を開始するには、「再生」ボタンを選択します。取り上げたい特定の製品、サービスまたは詳細が表示されたら、「一時停止」を選択します。「セグメントを追加」を選択します。

      ビデオの最後に達するまで、セグメントを追加するタイムラインのポイントで、ビデオの再生と停止を続けます。

  4. (オプション)タイムラインスケールスライダー ​のバーを左にドラッグしてズームインするか、右にドラッグしてズームアウトし、追加したセグメントの表示レベルを調整します。

    chlimage_1-22

    ビデオの長さに応じた「セグメントの期間」のデフォルト値を次に示します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 html-authored no-header
    ビデオの長さ 「セグメントの期間」のデフォルト値
    3 分以上 60 秒
    2~3 分 30 秒
    1~2 分 20 秒
    30~60 秒 10 秒
    30 秒以下 5 秒

    ビデオタイムラインは、使用可能になったものと同じ量の画面領域を使用します。したがって、ブラウザーのサイズを変更しても、追加したセグメントは正しい幅を維持します。

    説明するために、次の 3 つのスクリーンショットでは同じビデオを使用しています。各セグメントの幅は、「タイムラインスケール」の設定に応じて変わります。

    chlimage_1-23

    スクリーンショット A

    上記のスクリーンショット A は 29 秒の製品ビデオのデフォルト表示です。タイムラインスケールはデフォルトの 5 秒に設定されています。

    chlimage_1-130

    スクリーンショット B

    上のスクリーンショット B では、タイムラインスケールのスライダーがデフォルトの 5 秒から 3 秒にドラッグされています。タイムラインスケールの各タイムスタンプが 3 秒間隔になっていることに注意してください。

    chlimage_1-25

    スクリーンショット C

    上のスクリーンショット C では、タイムラインスケール設定が 8 秒に移動されています。製品サムネイルを含むセグメントが縮小されたことに注意してください。この方法でズームアウトすると、長いビデオでページの幅に合う追加セグメントの概要を確認したい場合に便利です。

  5. (オプション)次のいずれかの操作を行います。

    • セグメントの開始時間と終了時間の調整

      セグメントを選択し、先頭または末尾の青い楕円形をドラッグして、開始時刻または終了時刻をそれぞれ調整します。表示されたビデオフレームは、調整内容に応じてビデオ内の適切な時間に移動します。タイムラインセグメントの移動は、タイムライン内の隣接するセグメントに基づいて制限されます。最小許容セグメント時間は 1 秒です。

      次のナビゲーションショートカットを使用すると、ビデオのセグメントを簡単にチェックして微調整することができます。

      • そのセグメントの先頭に直接移動するには、先頭の青い楕円を選択します。
      • そのセグメントの末尾に直接移動するには、末尾の青い楕円を選択します。
      • そのセグメントの先頭からビデオを再生するには、セグメント全体を選択します。

    chlimage_1-26

    タイムラインセグメントの末尾の再配置

    • セグメントを削除するには

      タイムライン上にある最後のセグメントを選択し、ツールバーの「セグメントを削除」を選択します。2 つ以上のセグメントを選択した場合、セグメントを削除 ​は使えません。

      削除できるのは最後のセグメントのみです。例えば、タイムライン上のすべてのセグメントを削除したい場合、常に最後のセグメントを選択して「セグメントを削除」を選択します。

  6. 1 つまたは複数のサムネール画像を関連付ける時間セグメントを選択します。

  7. ビデオの右側にある「コンテンツ」タブを選択します。

  8. 「コンテンツ」タブの下で「アセットを選択」を選択し、ビデオで使用するすべての画像アセットを参照して選択します。選択したアセットは「コンテンツ」タブのアセットセレクターパネルに追加されます。

  9. 「コンテンツ」タブの下にあるアセットセレクターで、次のいずれかの操作を行います。

    table 0-row-2 1-row-2 html-authored no-header
    選択したタイムラインセグメントへのサムネイルの関連付け

    右側のアセットセレクターパネルで画像を選択します。

    1 つのタイムラインセグメントに好きなだけサムネールを追加できます。選択した各画像について、アセットセレクターの画像の上にチェックマークが表示されます。

    選択したタイムラインセグメントからのサムネイルの削除

    次のいずれかの操作を行います。

    • アセットセレクターパネルで、チェックマークの付いている画像を選択して選択を解除します。画像アセットがタイムラインセグメントから削除されます。
    • 選択したタイムラインセグメントで画像を選択し、ツールバーの「製品を削除」を選択します。

    アセットピッカー

    アセットセレクターパネルで画像を選択すると、選択したタイムラインセグメントにその画像が追加されます。

  10. 1 つのタイムラインセグメント内のサムネール画像を 1 つ選択し、「アクション」タブを選択します。

  11. 次のいずれかの操作を行います。

    <

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 html-authored no-header
    選択したサムネイル画像のハイパーリンクへの関連付け

    「アクションタイプ」の下で「クイックビュー」を選択します。

    Adobe Experience Manager Sites または eCommerce のユーザーである場合:

    • 「SKU 値」テキストフィールドには、選択した製品の SKU(Stock Keeping Unit)が既に設定されています。SKU は、提供している製品またはサービスごとの一意の識別子です。この値は、Experience Manager Commerce で画像が製品に関連付けられると自動的に設定されます。
    • 設定済みの SKU が正しくない場合は、製品ピッカーアイコン(虫眼鏡)を選択して製品を選択ページを開きます。使用する製品を選択してから、ページの右上隅のチェックマークを選択して、インタラクティブビデオエディターに戻ります。

    Adobe Experience Manager Sites または eCommerce のユーザーで ない 場合は、次のようにします。

    • ホットスポットの変数の識別を参照してください。これらの変数を定義する必要があります。
    • デフォルトでは、この SKU フィールドでは画像アセットのファイル名を拡張子を付けずに使用します。ファイルが SKU に基づいた標準命名規則に従っている場合は、このファイル名を編集する必要は特にありません。
    • それ以外の場合は、デフォルト値を編集して、正しい SKU 値を入力します。「SKU 値」テキストフィールドに、製品の SKU(Stock Keeping Unit)を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力した SKU 値によってクイックビューテンプレートの変数部分が自動的に入力され、選択された画像が特定の SKU のクイックビューに関連付けられます。

    (オプション)クイックビュー内で製品をさらに識別するために必要な他の変数がある場合は、「汎用変数を追加」を選択します。テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Womens などと指定します。

    選択したサムネール画像をハイパーリンクに関連付けるには

    「アクションタイプ」の下の「ハイパーリンク」を選択して、次のいずれかを実行します。

    • Adobe Experience Manager Sites のユーザーである場合は、サイトセレクターアイコン(フォルダー)を選択して Web ページに移動します。インタラクティブコンテンツに相対 URL のリンク(特に Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
    • スタンドアロンの Dynamic Media ユーザーである場合は、「HREF」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。

    このリンクを新しいブラウザータブで開くか、現在のタブで開くかを必ず指定します。

    選択したサムネイル画像のエクスペリエンスフラグメントへの関連付け

    「アクションタイプ」の下の「エクスペリエンスフラグメント」を選択し、次のいずれかを実行します。

    • Adobe Experience Manager Sites のユーザーである場合は、検索アイコン(虫眼鏡)を選択してエクスペリエンスフラグメントページを開きます。使用するエクスペリエンスフラグメントを選択し、ページの右上隅にある「選択」を選択して、前のページのアクションパネルに戻ります。
      エクスペリエンスフラグメントを参照してください。
    • エクスペリエンスフラグメントがビデオに表示されるときの幅と高さを指定します。

    注意:インタラクティブビデオのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされません。この問題を回避するには、ソーシャルメディアでの共有ツールを持たないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。

    既にサムネール画像に割り当てられているアクションを編集するには タイムラインセグメント内で、テキストラベルの右側にチェーンリンクが表示されているサムネール画像を選択します。チェーンリンクは、アクションが割り当てられていることを示します。「アクション」タブを選択して、変更を加えます。
    サムネール画像のテキストラベルの変更

    デフォルトでは、テキストラベルはサムネイル画像の Title メタデータフィールドを使用します。Titleがない場合は、代わりにサムネール画像のファイル名が使用されますが、拡張子は付きません。

    サムネール画像のテキストラベルを変更するには、「アクション」タブで、表示される画像アセットのすぐ下に目的のテキストを入力します。以下のスクリーンショットを参照してください。

    新しいテキストラベルは、ビデオプレーヤー自体と、タイムラインセグメントに表示されているサムネールテキストでのみ使用されています。ラベルの変更は、サムネール画像の「タイトル」メタデータフィールドとファイル名には影響しません。

    変更を元に戻すには: ページの右上隅にある「取り消し」または「元に戻す」を選択します。

    experiencefragment_interactivevideos

    新しいテキストラベルがサムネイル画像に追加されます。

  12. 次のいずれかの操作を行います。

    • 手順 6~11 を繰り返して、ビデオのタイムラインセグメントにさらにサムネイル画像を追加します。
    • オプションの手順 13 を行います。
  13. (オプション)次のいずれかの操作を行います。

    • セグメントの結合:製品サムネイルが割り当てられているかどうかにかかわらず、隣接する 2 つのセグメントは 1 つのセグメントに結合することができます。

      タイムライン上で、1 つのセグメントに統合する 2 つ以上の連続したセグメントを選択します。以下のスクリーンショットでは、選択した 2 つのセグメントに青い楕円形のドラッグハンドルが表示されていません。

      ツールバーの「セグメントを統合」を選択します。

    chlimage_1-134

    選択した 5 秒のセグメント 2 つを 10 秒のセグメント 1 つに統合。

    • セグメントの分割:1 つのセグメントを 2 つの等しい時間のセグメントに分割できます。セグメントに既に製品サムネイルが割り当てられている場合、サムネイルは左側のセグメントに結合されます。

      タイムラインで、半分に分割したいセグメントを選択し、ツールバーで「セグメントを分割」を選択します。

      2 つ以上のセグメントを選択すると、「セグメントを分割」オプションは無効になります。

    chlimage_1-135

    選択した 10 秒のセグメントを 5 秒ずつのセグメント 2 つに分割。

  14. インタラクティブビデオを作成 ​ページの右上隅付近に、現在選択されてビデオで使用されているビューアプリセットの名前が表示されます。別のビューアプリセットを選択する場合は、この名前を選択します。

    例えば、Shoppable_Video_light ビューアプリセットでは、ビデオが再生されるときに横に白い表示領域が現れます。この表示領域には、選択可能なサムネール画像が再生中に表示されます。Shoppable_Video_dark ビューアプリセットでは、ビデオが再生されるときに横に黒い表示領域が現れます。

    インタラクティブビデオの独自のビューアプリセットを作成した場合は、そのプリセットもリストに表示されて選択できます。

    完了したら、「保存」を選択します。

    note note
    NOTE
    インタラクティブビデオを保存すると、関連付けられた .vtt ファイルも自動的に保存されます。.vtt ファイルは、アセット ​のルートにある _VTT フォルダーに保存されます。インタラクティブビデオが Web サイト上で正しく再生されるには、それらのファイルとフォルダーが必要です。したがって、_VTT フォルダーやフォルダーのコンテンツを移動したり、編集したり削除しないでください。
  15. インタラクティブビデオを公開します。公開によって埋め込みコードまたは URL が生成されます。最終的には、このコードまたは URL を Web サイトのエクスペリエンスにコピー&ペーストします。

    クイックビューとのインタラクティブ機能を追加した場合は、埋め込みコードのみを使用します。ハイパーリンクされた web ページとのインタラクティビティを追加した場合は、公開された URL を使用することもできます。ただし、インタラクティブコンテンツに相対 URL のリンク(特に Adobe Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。

    アセットの公開を参照してください。

    note note
    NOTE
    クイックビューを含むショッパブルビデオを公開するには、各ビデオに関連する画像アセットをコマース領域から個別に公開してください。

    タイムラインセグメントを追加し、インタラクティブビデオを公開したので、既存の Web サイトのランディングページにビデオを追加する準備が整いました。インタラクティブビデオの Web サイトへの統合 を参照してください。

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

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

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

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

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

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

  1. 公開済みのインタラクティブビデオの埋め込みコードまたは URL をコピーします。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。クイックビューとのインタラクティブ機能を追加した場合は、埋め込みコードのみを使用します。ハイパーリンクされた web ページとのインタラクティビティを追加した場合は、公開された URL を使用することもできます。ただし、インタラクティブコンテンツに相対 URL のリンク(特に Adobe Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。

  2. ターゲットの Web ページのコードで、静的なビデオの場所を特定します。

  3. 静的なビデオを削除し、Adobe Experience Manager Assets からコピーした埋め込みコードまたは URL でそのままコードを置き換えます。コピーされた埋め込みコードはレスポンシブ環境向けに設定されているので、静的なビデオが配置されていた領域に自動的に適合します。

NOTE
そのため、ハイパーリンクされた 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

NOTE
このタスクはスタンドアロン Adobe Experience Manager Assets のユーザーにのみ当てはまります。

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

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

  1. ユーザーは、Web サイトのユーザーインターフェイス内で、特定の要素を起動します。
  2. フロントエンドコードは、手順 1 で起動されたユーザーインターフェイスの要素に基づいてクイックビュー URL を取得します。
  3. フロントエンドコードは、手順 2 で取得した URL を使用して AJAX リクエストを送信します。
  4. バックエンドロジックは、対応するクイックビューのデータまたはコンテンツをフロントエンドコードに返します。
  5. フロントエンドコードは、クイックビューのデータまたはコンテンツを読み込みます。
  6. (オプション)フロントエンドコードは、読み込んだクイックビューのデータを HTML 表現に変換します。
  7. フロントエンドコードは、モーダルダイアログボックスまたはパネルを表示し、エンドユーザー向けに、画面上に HTML コンテンツをレンダリングします。

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

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

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

  • インタラクティブビデオから送出されるイベントをリッスンします。
  • サムネイルデータに基づいてクイックビュー URL を作成します。
  • バックエンドからクイックビューを読み込み、表示用に画面にレンダリングするプロセスをトリガーします。

また、インタラクティブビデオビューアでは、全画面操作モードもサポートされます。エンドユーザーが全画面表示を終了しないまま、サムネールを選択すると、クイックビューがトリガーされます。この機能を実現するには、クイックビューのモーダルダイアログボックスがビューアのコンテナにアタッチされるようにフロントエンドコードを変更します。ドキュメントの 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
    //See 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 つのデフォルトコールバックハンドラー、quickViewActivateinitComplete が含まれています。quickViewActivate ハンドラーがトリガーされるのは、ビューアでサムネールが選択されるときです。これを使用して、ビューアをクイックビューのアクティベートロジックに統合します。initComplete ハンドラーは、ビューアがページに読み込まれるときに 1 回だけトリガーされます。このハンドラーは、Web ページ DOM でのクイックビューダイアログボックスの位置を調整するために使用されます。

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

単一の SKU(クエリ文字列内)
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
単一の SKU(URL パス内)
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU とカテゴリ ID(クエリ文字列内)
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

クイックビュー 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 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

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2