インタラクティブビデオ

ビデオから直接コンバージョンを促すインタラクティブビデオを簡単に作成できます。ビデオに対する顧客のエンゲージメントは、ビデオプレーヤーと一緒に表示されるパネルでおこなわれます。パネルをスクロールすると、ビデオの内容に応じて、関連するサービス、情報、製品サムネールを表示できます。サムネールをタップすると、サービスに直接アクセスしたり、買い物かごに商品を追加してすぐに購入したり、詳細が記載されている Web ページにアクセスしたりできます。

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

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

インタラクティブビデオの使用例

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

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

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

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

メモ

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

インタラクティブビデオの作成方法を見る

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

アドビカスタマーサクセスウェビナー

「Experience Managerアセットでのインタラクティブビデオ、リンク共有、YouTube共有の使用」ウェビナーでは、インタラクティブビデオやその他の機能を使用して、コンバージョンに基づくイベントをビデオマーケティングコンテンツに関連付ける方法について説明します。

クイックスタート:インタラクティブビデオ

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

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

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

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

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

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

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

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

    この手順は、次のすべてに該当する場合にのみ必要です

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

    独自のインタラクティブビデオビューアプリセットの作成は、標準提供のインタラクティブビデオビューアプリセット(Shoppable_Video_Light または Shoppable_Video_Dark)を使用する場合には必要ありません。新しいビューアプリセットの作成(オプション)とインタラクティブビューアプリセットの作成に関する注意事項を参照してください。

  3. ビデオおよび関連する画像アセットのアップロード - インタラクティブにするビデオと関連する画像をアップロードします。

    ビデオおよび関連するサムネールアセットのアップロードを参照してください。

  4. ビデオへのインタラクティビティの追加 - ビデオに 1 つ以上の時間セグメントを追加します。次に、それらの時間セグメント内で画像サムネールを関連付けます。各画像サムネールを、ハイパーリンク、クイックビュー、エクスペリエンスフラグメントなどのアクションに割り当てます

    (インタラクティブコンテンツに相対 URL のリンク(特に Adobe Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません)。

    インタラクティブビデオアセットを公開して作業は完了です。公開によって埋め込みコードまたは URL が生成されます。最終的には、このコードまたは URL をコピーして、Web サイトのランディングページに適用します。ビデオへのインタラクティビティの追加を参照してください。

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

  5. WebサイトまたはWebサイトへのインタラクティブビデオのExperience Manager

    Experience Managerサイト、Experience Managereコマース、またはその両方を使用する場合は、インタラクティブメディアコンポーネントをページにドラッグして、Experience ManagerでWebページにインタラクティブビデオを直接追加できます。 ページへの Dynamic Media アセットの追加を参照してください。

    埋め込みコードまたは URL を使用して、インタラクティブビデオを Web サイトエクスペリエンスに統合します。インタラクティブビデオの Web サイトへの統合を参照してください。

    サードパーティのWCM(Web Content Manager)を使用している場合は、新しいインタラクティブビデオを、Webサイトで使用されている既存のクイックビュー実装に統合する必要があります。 インタラクティブビデオの既存のクイックビューへの統合を参照してください。

(オプション)クイックビュー変数の特定

メモ

このタスクが必要になるのは次に該当する場合のみです。

  • クイックビューをトリガーして、ビデオにインタラクティブ機能を追加する。
  • eコマースソリューション(IBM® WebSphere® Commerce、Elastic Path、hybris、Intershopなど)からExperience Managerに製品データを取り出すために、Experience Managerの実装がeコマース統合フレームワークを使用​して​いません。 Experience Managerアセットのeコマースの概念を参照してください。

Adobe Experience Manager の実装で Adobe Experience Manager eCommerce を使用している場合は、このタスクをスキップして次のタスクに進みます。

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

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

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

既存のクイックビューの実装を担当している IT 担当者に問い合わせれば済むこともあります。システム内のクイックビューを識別するために必要な最小データセットを把握することがよくあります。 ただし、フロントエンドコードの既存の動作を分析するだけでもかまいません。

ほとんどのクイックビュー実装では、次のパラダイムを使用します。

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

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

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

  • Google Chromeで、送信されるすべてのHTTPリクエストを表示するには、キーボードショートカットF12(Windows)またはCommand + Options + I(Mac)を使用して​デベロッパーツール​パネルを開き、「ネットワーク<a5/」タブをクリックします。

  • Mozilla Firefoxでは、キーボードショートカットF12(Windows)またはCommand + Options + 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?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 つの異なるタイプのデータが含まれることもわかります。

  • 最初のタイプは、candles、cushions、furniture、glassware です。これは「製品カテゴリ」と呼ばれます。
  • 2 つ目のタイプは製品コード(233916597 など)です。これは「製品 SKU」と考えることができます。

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

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

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

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

(オプション)インタラクティブビデオのビューアプリセットの作成

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

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

chlimage_1-127

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

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

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

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

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

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

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

ビデオおよび関連するサムネールアセットをアップロードするには:

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

    アセットのアップロードを参照してください。

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

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

ビデオへのインタラクティブ機能の追加

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

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

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

メモ

インタラクティブコンテンツに相対 URL のリンク(特に Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。

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

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

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

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

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

    • 画像の上にマウスポインターを置き、選択(チェックマークアイコン)をタップします。ツールバーの「編集」をタップします。
    • 画像の上にマウスポインターを置き、その他のアクション(3 つのドットのアイコン)/編集​をタップします。
    • 画像をタップして、詳細ビューページで開きます。 ツールバーの「編集」をタップします。
  3. インタラクティブビデオを作成​ページで、次のいずれかの操作を行います。

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

      追加した各時間セグメントに1つ以上のサムネール画像を割り当て、それらのサムネールをクイックビュー製品ページにリンクして、顧客が購入するか、詳細を確認するWebページにリンクします。

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

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

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

    chlimage_1-128

    ビデオの長さに応じて、「セグメントの期間」のデフォルト値は次のようになります。

    ビデオの長さ 「セグメントの期間」のデフォルト値
    3 分以上 60 秒
    2~3 分 30 秒
    1~2 分 20 秒
    30~60 秒 10 秒
    30 秒以下 5 秒

    ビデオのタイムラインは、使用できる最大限の画面領域を使用します。したがって、ブラウザーのサイズを変更しても、追加したセグメントの幅は正しく維持されます。

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

    chlimage_1-129

    スクリーンショット A

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

    chlimage_1-130

    スクリーンショット B

    上のスクリーンショットBで、タイムラインスケール​スライダーがデフォルトの5秒から3秒にドラッグされました。 個々の「タイムラインスケール」のタイムスタンプが、すべて3秒間隔で設定されていることに注意してください。

    chlimage_1-131

    スクリーンショット C

    上のスクリーンショットCでは、タイムラインスケール​の設定が8秒に移動されました。 製品サムネールを含むセグメントの表示が縮小されていることに注意してください。このような縮小表示が役立つのは、ビデオが長く、通常はページの幅に収まらないセグメントの概要を確認する場合です。

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

    • セグメントの開始時刻と終了時刻を調整します。

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

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

      • そのセグメントの先頭に直接ビデオをシークする場合は、先頭の青い楕円形をタップします。
      • セグメントの最後まで直接ビデオをシークする場合は、末尾の青い楕円形をタップします。
      • ビデオの再生をそのセグメントの最初に戻す場合は、セグメント全体をタップします

    chlimage_1-132

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

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

      タイムライン上にある最後のセグメントを選択し、ツールバーの「セグメントを削除」をタップします。2つ以上のセグメントを選択すると、「セグメントを削除」機能は無効になります。

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

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

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

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

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

    選択したタイムラインセグメントにサムネールを関連付けるには

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

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

    選択したタイムラインセグメントからサムネールを削除するには

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

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

    アセットピッカー

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

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

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

    <
    選択したサムネール画像をクイックビューに関連付けるには

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

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

    • 「SKU値」テキストフィールドには、選択した製品のSKU(Stock Keeping Unit)が事前に設定されています。SKUは、提供する製品やサービスごとの一意の識別子です。 このフィールドは、Adobe 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 ビューアプリセットでは、ビデオが再生されるときに横に黒い表示領域が現れます。

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

    完了したら、「保存」をタップします。

    メモ

    インタラクティブビデオを保存すると、関連付けられた .vtt ファイルも自動的に保存されます。.vtt ファイルは、アセット​のルートにある _VTT フォルダーに保存されます。インタラクティブビデオが Web サイト上で正しく再生されるには、それらのファイルとフォルダーが必要です。したがって、_VTT フォルダーやフォルダーのコンテンツを移動したり、編集したり削除しないでください。

  15. インタラクティブビデオを公開します。公開によって埋め込みコードまたは URL が生成されます。最終的には、このコードまたは URL を Web サイトのエクスペリエンスにコピー&ペーストします。

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

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

    メモ

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

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

インタラクティブビデオアセットの公開

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

インタラクティブビデオの Web サイトへの統合

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

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

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

インタラクティブビデオをWebサイトに統合するには:

  1. 公開済みのインタラクティブビデオの埋め込みコードまたはURLをコピーします。

    Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。

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

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

  3. 静的なビデオを削除し、Adobe Experience Manager Assets からコピーした埋め込みコードまたは URL でそのままコードを置き換えます。

    コピーされた埋め込みコードはレスポンシブ環境用に設定されているので、以前静的ビデオが占めていた領域に自動的に適応します。

メモ

そのため、ハイパーリンクされた Web ページのみを使用したインタラクティビティを追加した場合は、これで完了です。
ただし、クイックビューのトリガーにインタラクティビティを追加した場合、インタラクティブビデオの横に表示されるサムネールは表示専用です。既存のクイックビューとはまだ統合されていません。 その場合は、インタラクティブビデオをWebサイト上の既存のクイックビューに統合する必要があります。

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=ja?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?lang=ja

インタラクティブビデオの既存のクイックビューへの統合

メモ

このタスクはスタンドアロン 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
    //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 つのデフォルトコールバックハンドラー、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 担当者の支援が必要になります。フロントエンド 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?lang=ja

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

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

このページ