カルーセルバナーを使用すると、回転するインタラクティブなプロモーションコンテンツをマーケティング担当者が簡単に作成して、任意の画面に配信できるようになり、コンバージョンを推進できます。
プロモーションバナーに表示するコンテンツの作成や変更には時間がかかるので、新しいコンテンツをすぐに公開したり、ターゲットを絞り込んだりする際に制約が生じます。カルーセルバナーを使用すると、回転するバナーをすばやく作成または変更したり、製品の詳細や関連リソースにホットスポットリンクなどのインタラクティブ機能を追加したりできます。 任意の画面に配信できるので、新しいプロモーションコンテンツをより迅速にマーケティングできます。
カルーセルバナーには「CAROUSELSET」と表示されます。
Web サイトではカルーセルバナーは次のように表示されます。
数字をクリックして画像間を移動できます。 また、カスタマイズできる間隔に基づいて自動的にスライドを切り替えることもできます。カルーセルバナーに追加する画像は、ホットスポットと画像マップの両方をサポートしています。ユーザーは、タップまたはハイパーリンクへの移動、またはクイック表示ウィンドウへのアクセスが可能です。
この例では、ユーザが画像マップをタップまたはクリックして、手袋のクイック表示ウィンドウにアクセスしました。
10 分 33 秒のカルーセルバナーの作成方法に関する説明を視聴してください。カルーセルバナーのプレビュー、編集、配信方法についても学習します。
管理者以外のユーザーは、カルーセルバナーを作成または編集できるように、dam-users グループに追加される必要があります。作成や編集に問題が発生した場合は、システム管理者に問い合わせて、dam-usersグループにユーザーを追加できます。
すぐに使い始めるには:
ホットスポットと画像マップの変数の特定 (Adobe Experience Managerアセット+Dynamic Mediaを使用しているお客様のみ)
既存のクイック表示実装で使用される動的変数を識別して開始します。 これにより、Experience Managerアセットでカルーセルバナーを作成する際に、ホットスポットと画像マップのデータを正しく入力できます。
オプション:必要であれば、カルーセルセットビューアプリセットを作成します。
管理者は、独自のカルーセルビューアプリセットを作成して、カルーセルの動作と外観をカスタマイズできます。主な利点は、このカスタムビューアプリセットを複数のカルーセルに再利用できる点です。 ただし、カルーセルの作成時に、カルーセルの動作と外観を直接カスタマイズすることもできます。 この方法は、任意のカルーセルに対して特定のデザインを必要とする場合に適しています。
インタラクティブにする画像バナーをアップロードします。
カルーセルセットでは、ユーザーはバナー画像を切り替え、ホットスポットまたは画像マップをタップして関連するコンテンツにアクセスします。
Assets でカルーセルセットを作成するには、「作成」をタップし、「カルーセルセット」を選択します。アセットをスライドに追加し、「保存」をタップします。エディター内で、カルーセルの外観と動作を直接編集することもできます。
1つ追加以上のホットスポットまたは画像マップを画像バナーに表示します。 次に、各アクションをリンク、クイック表示、エクスペリエンスフラグメントなどのアクションに関連付けます。 ホットスポットまたは画像マップを追加した後は、カルーセルセットを公開してタスクを終了します。公開によって埋め込みコードが生成されます。これは、コピーして Web サイトのランディングページに適用するために使用できます。
(オプション)カルーセルバナーのプレビューを参照してください。必要に応じて、カルーセルセットの表示を確認して、インタラクティビティをテストすることができます。
他のアセットと同じようにカルーセルセットを公開します。Assets でカルーセルセットに移動し、選択して「公開」をタップします。カルーセルセットを公開すると、URL と埋め込み文字列がアクティベートされます。
次のいずれかの操作をおこないます。
Web サイトへのカルーセルバナーの追加Web サイトページにカルーセルバナーの URL またはコピーした埋め込みコードを追加できます。
Experience Manager内追加のWebサイトのカルーセルバナー。Experience Managerサイトのお客様は、インタラクティブメディアコンポーネントを使用してカルーセルセットを直接ページに追加できます。
カルーセルセットを編集する必要がある場合は、カルーセルセットの編集を参照してください。を参照してください。また、カルーセルセットのプロパティを表示および編集することができます。
既存のクイック表示実装で使用される動的変数を識別して開始します。 この方法を使用すると、Experience Managerアセットでカルーセルセットを作成する際に、ホットスポットまたは画像マップデータを正しく入力できます。
バナー画像にホットスポットまたは画像マップを追加する場合は、SKU(Stock Keeping Unit)を割り当てます。 各ホットスポットまたは画像マップに、オプションで追加の変数を割り当てることもできます。 これらの変数は、後でホットスポットや画像マップをクイック表示のコンテンツと一致させるために使用されます。
重要なのは、ホットスポットまたは画像マップのデータに関連付けられる変数の数とタイプを正しく識別することです。バナー画像に追加する各ホットスポットまたは画像マップには、既存のバックエンドシステムで製品を明確に識別できるだけの情報が含まれている必要があります。 同時に、各ホットスポットまたは画像マップに必要以上のデータが含まれていないことを確認します。 必要以上のデータを含めると、データ入力プロセスが複雑になり、進行中のホットスポットまたは画像マップの管理でエラーが発生しやすくなるからです。
ホットスポットまたは画像マップのデータに使用する一連の変数を識別するには、様々な方法があります。
既存のクイック表示の導入を担当するITスペシャリストに相談するのに十分な場合があります。 システム内のクイック表示を識別するための最小データセットは何かを知っている可能性が高くなります。 ただし、フロントエンドコードの既存の動作を単純に分析することは可能です。
ほとんどのクイック表示の実装では、次のようなパラダイムが使用されます。
次に、クイック表示機能が実装されている既存のWebサイトの様々な領域を訪問します。 次に、クイック表示をトリガーし、Webページから送信されたAjax URLを取得して、クイック表示のデータまたはコンテンツを読み込みます。
通常、専門のデバッグツールを使用する必要はありません。最新の Web ブラウザーには、十分なタスクを実行できる Web インスペクターが備わっています。Web インスペクターが搭載されている Web ブラウザーの例を次に示します。
ブラウザーでネットワーク監視を有効にする場合は、ページのクイック表示をトリガーします。
次に、表示ログでクイックネットワークのAjax URLを探し、記録したURLをコピーして、分析を後で行います。 通常、クイック表示をトリガーすると、サーバーに送信される要求が多数あります。 通常、クイック表示のAjax URLはリストの最初のURLの1つです。 この URL には複雑なクエリ文字列部分またはパスが含まれ、その応答の MIME タイプは text/html
、text/xml
、text/javascript
のいずれかになります。
このプロセスでは、製品のカテゴリやタイプを変えて、Webサイトの様々な領域を訪問することが重要です。 クイック表示URLには、特定のWebサイトカテゴリに共通な部分がありますが、Webサイトの別の領域を訪問した場合にのみ変更されるためです。
最も単純なケースでは、クイック表示URLの唯一の変数部分が製品SKUです。 その場合、SKU の値が、ホットスポットまたは画像マップをバナー画像に追加するために必要になる唯一のデータです。
ただし、複雑な場合は、クイック表示URLにはSKUに加えて様々な要素があります。 カテゴリID、カラーコード、サイズコードなどが含まれる要素もあります。 その場合、各要素は、カルーセルバナー機能のホットスポットまたは画像マップのデータ定義内の個別の変数になります。
クイック表示URLの次の例と、その結果得られるホットスポットまたは画像マップ変数を考えてみましょう。
単一の SKU(クエリ文字列内) | 記録されるクイック表示URLは次のとおりです。
この URL で変化する唯一の部分は |
単一の SKU(URL パス内) | 記録されるクイック表示URLは次のとおりです。
変化する部分はパスの最後の部分にあり、ホットスポット/画像マップの SKU 値( |
SKU とカテゴリ ID(クエリ文字列内) | 記録されるクイック表示URLは次のとおりです。
この場合、URL には変化する部分が 2 つあります。SKU が そのため、ホットスポット/画像マップ定義はペアになります。つまり、SKU値と
|
使用する画像を既にアップロードしている場合は、次の手順(カルーセルセットの作成)に進んでください。カルーセルで使用する画像は、Dynamic Mediaが有効になった後にアップロードする必要があります。
画像バナーをアップロードするには、アセットのアップロードを参照してください。
管理者以外のユーザーは、カルーセルバナーを作成または編集できるように、dam-users グループに追加される必要があります。作成または編集に問題が発生した場合は、システム管理者に問い合わせて、ユーザーをdam-usersグループに追加できます。
カルーセルセットを作成するには
Assets で、カルーセルセットを作成するフォルダーに移動し、作成/カルーセルセットをタップします。
カルーセルバナーエディターページで「タップしてアセットセレクターを開く」をタップし、最初のスライドの画像を選択します。
カルーセルバナーエディターページで次のいずれかをおこないます。
ページの左上隅付近にある「スライドを追加」をタップします。
ページの中央付近にある「タップしてアセットセレクターを開く」をタップします。
カルーセルセットに含めるアセットをタップして選択します。選択したアセットには、チェックマークのアイコンが表示されます。 終了したら、ページ右上隅近くにある「選択」をタップします。
アセットセレクターでは、キーワードを入力して Enter キーをタップまたはクリックすることで、アセットを検索することができます。フィルターを適用して、検索結果を絞り込むこともできます。パス、コレクション、ファイルタイプおよびタグでフィルタリングできます。フィルターを選択し、ツールバーのフィルターアイコンをタップします。 表示アイコンをタップし、列表示、カード表示、リスト表示のいずれかを選択してビューを変更します。
詳しくは、セレクターの操作を参照してください。
カルーセルセット内で回転させたい画像をすべて追加してしまうまで、スライドを追加し続けます。
(オプション)次のいずれかの操作をおこないます。
必要に応じて、スライドをドラッグしてリスト内の画像を並べ替えます。
画像を削除するには、画像を選択し、ツールバーのスライドを削除をタップします。
プリセットを適用するには、ページの右上隅付近にあるプリセットドロップダウンリストをタップし、セットに一度に適用するプリセットを選択します。
スライドを削除するには、スライドをタップまたはクリックし、ツールバーの「スライドを削除」をクリックします。スライドを移動するには、順序変更アイコンをタップし、押したまま、目的の位置に移動します。
スライドに画像を追加した後で、ホットスポットまたは画像マップ(または両方)を画像に追加できます。ホットスポットまたは画像マップの追加を参照してください。
カルーセルセットの視覚的なデザインと動作を変更できます。 「動作」タブと「外観」タブをタップまたはクリックして、カルーセルバナーの外観や特定のコンポーネントの動作を調整します。 ビューアエディターの使用方法について詳しくは、ビューアプリセットの管理を参照してください。
カルーセルバナーでは、以下を調整できます。
カルーセルバナーの外観をプレビューすることもできます。 (オプション)カルーセルバナーのプレビューを参照してください。
終了したら「保存」をタップします。
カルーセルセットエディターを使用して、ホットスポットまたは画像マップをバナーに追加できます。
ホットスポットや画像マップを追加する際、それらをクイック表示ポップアップ表示、ハイパーリンクまたはエクスペリエンスフラグメントとして定義できます。
エクスペリエンスフラグメントを参照してください。
カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされません。
この問題を回避するには、ソーシャルメディア共有ツールを備えていないビューアプリセットを使用または作成します。 このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
画像にホットスポットまたは画像マップを追加したら、忘れずに作業内容を保存してください。ページの右上隅にある「取り消し」および「やり直し」オプションは、現在の作成/編集セッションの間で有効です。
カルーセルバナーの作成が完了したら、必要に応じて「プレビュー」を使用して、カルーセルバナーがユーザーにどのように表示されるかを確認できます。
(オプション)カルーセルバナーのプレビューを参照してください。
ホットスポットをイメージバナーに追加すると、ホットスポット情報は、画像の位置を基準にして、同じメタデータの位置に保存されます。 このポイントは、インタラクティブ画像かカルーセルバナーかに関係なくtrueになります。 つまり、どちらのビューアでも、同じ画像と、定義済みのホットスポットデータを簡単に再利用できます。
ただし、カルーセルバナーでは、画像上の画像マップ(ホットスポットを含むことができる)がサポートされることに注意してください。インタラクティブ画像ではサポートされません。同じ画像を使用するインタラクティブ画像またはカルーセルバナーを作成する場合は、この点に注意してください。 代わりに、同じ画像の個別のコピーを使用して、インタラクティブ画像とカルーセルバナーを作成することを検討してください。
ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。
画像バナーにホットスポットまたは画像マップを追加するには
Assets ビューで、インタラクティブにするカルーセルセットに移動します。
カルーセルセットを選択し、「編集」をタップします。カルーセルビューアエディターが開きます。
インタラクティブにするスライドを選択します。
ページの左上隅付近にある「ホットスポット」または「画像マップ」をタップします。
次のいずれかの操作をおこないます。
必要に応じて、ホットスポットまたは画像マップを別の場所にドラッグします。または、キーボードの矢印キーを使用して、選択したホットスポットの位置を制御します。 必要に応じて、追加より多くのホットスポットまたは画像マップが作成されます。
ホットスポットまたは画像マップを削除するには、「アクション」タブをタップします。マップとホットスポットの見出しの下の選択したタイプドロップダウンリストから、削除するホットスポットまたは画像マップの名前を選択します。 メニューの横にあるごみ箱アイコンをタップし、「削除」をタップします。
「名前」テキストフィールドにホットスポットまたは画像マップの名前を入力します。この名前はマップとホットスポットドロップダウンリストにも表示されます。名前を指定すると、ホットスポットや画像マップを変更した場合に、そのホットスポットや画像マップを識別しやすくなります。
「アクション」タブで次のいずれかの操作をおこないます。
クイック表示をタップします。
Experience Managerサイトのお客様の場合は、製品選択アイコン(虫めがね)をタップして、製品を選択ページを開きます。 カルーセルバナーエディターに戻るには、使用する製品をタップし、ページの右上隅のチェックマークをタップします。
Experience Managerサイトのお客様でない場合:
変数を定義します。 ホットスポットの変数の識別を参照してください。
次に、SKU 値を手動で入力します。「SKU 値」テキストフィールドに、製品の SKU(Stock Keeping Unit)を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力したSKU値によって、クイック表示テンプレートの可変部分が自動的に設定されます。 タップされたホットスポットを特定のSKUのクイック表示に関連付けることができるようになりました。
(オプション)クイック表示内に他の変数があり、それを使用して製品をさらに識別する必要がある場合は、追加汎用変数をタップします。 テキストフィールドで、追加の変数を指定します。 例えば、追加の変数として category=Mens などと指定します。
詳しくは、セレクターの操作を参照してください。
「ハイパーリンク」をタップします。
AEM Sites のユーザーである場合は、サイトセレクターアイコン(フォルダー)をタップして URL に移動します。
インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
スタンドアロンのお客様の場合は、hrefテキストフィールドに、リンクされたWebページの完全なURLパスを指定します。
このリンクを新しいブラウザータブで開く(推奨のデフォルト)か同じタブで開くかを指定してください。
詳しくは、セレクターの操作を参照してください。
「エクスペリエンスフラグメント」をタップします。
AEM Sites のユーザーである場合は、検索アイコン(虫眼鏡)をタップしてエクスペリエンスフラグメントページを開きます。ホットスポット管理ページに戻るには、使用するエクスペリエンスフラグメントをタップし、ページの右上隅にある「選択」をタップします。
エクスペリエンスフラグメントを参照してください。
エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。
カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされません。
この点を回避するには、ソーシャルメディア共有ツールを備えていないビューアプリセットを使用または作成します。 このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
カルーセルバナーの外観をプレビューすることもできます。 (オプション)カルーセルバナーのプレビューを参照してください。
「保存」をタップします。
カルーセルセットを公開します。公開によって、Web サイトのページで使用できる、埋め込みコードまたは URL が生成されます。Experience Managerサイトのお客様の場合は、カルーセルセットを直接Webページに追加します。
アセットの公開を参照してください。
Web サイトランディングページへのカルーセルセットの追加を参照してください。
管理者以外のユーザーは、カルーセルバナーを作成または編集できるように、dam-users グループに追加される必要があります。作成または編集に問題が発生した場合は、システム管理者に問い合わせて、ユーザーをdam-usersグループに追加できます。
カルーセルセットでは、次のような様々な編集タスクを実行できます。
カルーセルセットを編集するには
次のいずれかの操作をおこないます。
カルーセルセットアセットの上にカーソルを置き、編集(鉛筆アイコン)をタップします。
カルーセルセットアセットの上にカーソルを置き、選択(チェックマークのアイコン)をタップし、ツールバーの編集をタップします。
カルーセルセットアセットをタップし、ページの左上隅にある「編集」(鉛筆アイコン)をタップします。
カルーセルセットを編集するには、次のいずれかの操作をおこないます。
ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。
カルーセルバナーは、プレビューを使用して、ユーザーにとってどのような外観を持つかを確認できます。 また、プレビューを使用すると、カルーセルバナーのホットスポットと画像マップをテストして、期待どおりに動作するかを確認できます。
カルーセルバナーの設定が完了したら、このカルーセルバナーを公開できます。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。Web アプリケーションへの URL のリンクを参照してください。インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。ページへの Dynamic Media アセットの追加を参照してください。
カルーセルバナーは、カルーセルエディター(推奨)またはビューアリストでプレビューできます。
カルーセルバナーをプレビューするには
Assets で、作成したカルーセルバナーの場所に移動し、タップして開きます。
「編集」をタップします。
ツールバーの右隅のビューアプリセットリストで、カルーセルバナーをプレビューするビューアを選択します。
「プレビュー」をタップします。
関連するアクションをテストするには、画像上のホットスポットまたは画像マップをタップします。
ビューアリストでカルーセルバナーをプレビューするには
カルーセルを使用するには、そのカルーセルを公開する必要があります。 カルーセルセットを公開すると、URL と埋め込みコードがアクティベートされます。これにより、スケーラブルで効率の良い配信を実現するため、CDN と統合された Dynamic Media クラウドにもカルーセルが公開されます。
ホットスポットを含む既存のインタラクティブ画像をカルーセルバナー用として使用する場合は、カルーセルバナーを公開した後で、そのインタラクティブ画像を別に公開する必要があります。
また、カルーセルバナーで使用する、既に公開されているインタラクティブ画像を変更した場合は、インタラクティブ画像を公開して、その変更がカルーセルバナーに反映されるようにします。
カルーセルバナーの公開方法に関する情報については、Dynamic Media アセットの公開を参照してください。
バナー画像をアップロードしてカルーセルを作成した後、バナーにホットスポットや画像マップを追加したり、その両方を追加したりします。 カルーセルセットを公開しました。 これで、既存のWebサイトページに追加する準備が整いました。
AEM Sites のユーザーである場合は、インタラクティブメディアコンポーネントをページにドラッグすることにより、カルーセルバナーをページに直接追加できます。ページへの Dynamic Media アセットの追加を参照してください。
ただし、スタンドアロンのExperience Managerアセットをご利用の場合は、カルーセルバナーをWebサイトのランディングページに手動で追加できます。
公開済みのカルーセルバナーの埋め込みコードをコピーします。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。
Experience Manager追加アセットからWebページにコピーした埋め込みコード。
コピーされた埋め込みコードはレスポンシブなので、ページの埋め込み領域に合わせて自動的に調整されます。
注意:この手順は、スタンドアロンのAEM Assetsのお客様の場合にのみ適用されます。
このプロセスの最後の手順は、カルーセルバナーとWebサイト上の既存のクイック表示実装を統合することです。 すべてのクイック表示の実装は独自のものであり、通常はフロントエンドのIT担当者の支援を必要とする、特定のアプローチが必要です。
既存のクイック表示の実装は、通常、Webページ上で発生する相互に関連するアクションのチェーンを次の順序で表します。
これらの呼び出しは、任意の手順からWebページロジックによって呼び出すことのできる、独立したパブリックAPI呼び出しを表すものではありません。 むしろ、次の手順がすべて前の手順の最終フェーズ(コールバック)に潜むような連鎖的な呼び出しになっています。
カルーセルバナーがステップ1を置き換えるのと同時に、部分的にステップ2を行うのと同時に、ユーザがホットスポットまたは画像マップをクリックした場合、そのようなインタラクションはビューアで処理されます。 ビューアは、以前に追加されたすべてのホットスポットまたは画像マップのデータを含む Web ページにイベントを返します。
そのようなイベントハンドラーでは、フロントエンドコードは次の処理を実行します。
AEM Assets によって返される埋め込みコードには、すぐに使用可能なイベントハンドラーが既に含まれ、コメントアウトされています。
そのため、必要な処理は、このコードのコメントアウトを解除し、ダミーのハンドラー本体を、特定の Web ページ専用のコードに置き換えることだけです。
クイック表示URLを作成するプロセスは、前述のホットスポット変数と画像マップ変数を識別するプロセスとは逆です。
ホットスポットと画像マップの変数の識別を参照してください。
クイック表示URLをトリガーし、クイック表示パネルをアクティブにする最後の手順は、おそらく、IT部門のフロントエンドIT担当者の支援が必要です。ユーザーは、クイック表示の導入を正確にトリガーする方法を最もよく理解し、使いやすいクイック表示URLを適切な手順から取得できます。
「クイック表示を使用したカスタムポップアップウィンドウの作成」を参照してください。