カルーセルバナーを使用すると、マーケターは、インタラクティブで回転するプロモーションコンテンツを簡単に作成し、任意の画面に配信することで、コンバージョンを促進できます。
プロモーションバナーで特集するコンテンツの作成と変更には時間がかかり、新しいコンテンツをすばやく公開したり、ターゲットを絞り込んだりできなくなる可能性があります。 カルーセルバナーを使用すると、回転するバナーをすばやく作成または変更したり、インタラクティブ機能(製品の詳細や関連リソースへのホットスポットリンクなど)を追加したりできます。任意の画面に配信できるので、新しいプロモーションコンテンツをより迅速に市場に出すことができます。
カルーセルバナーには「CAROUSELSET」と表示されます。
Web サイトではカルーセルバナーは次のように表示されます。
ここで、ユーザーが番号を選択して画像を切り替えることができます。また、カスタマイズできる間隔に基づいて自動的にスライドを切り替えることもできます。カルーセルバナーの画像は、ホットスポットと画像マップの両方をサポートします。ユーザーは、選択してハイパーリンクに移動するか、クイックビューウィンドウにアクセスできます。
この例では、ユーザーは画像マップを選択して、手袋のクイックビューウィンドウにアクセスしました。
カルーセルバナーの作成方法に関するガイド(10 分 33 秒)を視聴します。また、カルーセルバナーのプレビュー、編集および配信方法についても説明します。
管理者以外のユーザーは、カルーセルバナーを作成または編集できるように、dam-users グループに追加される必要があります。作成や編集で問題が発生した場合、dam-users グループにユーザーを追加できるシステム管理者に確認してください。
すぐに使い始めるには:
ホットスポットと画像マップの変数を識別します(Adobe Experience Manager Assets と Dynamic Media の両方を使用するユーザーのみ)。
既存のクイックビュー実装で使用される動的変数を特定して開始します。これにより、Experience Manager Assets でカルーセルバナーを作成する際に、ホットスポットと画像マップのデータを正しく入力できます。
オプション:必要であれば、カルーセルセットビューアプリセットを作成します。
管理者は、独自のカルーセルビューアプリセットを作成して、カルーセルの動作と外観をカスタマイズできます。主な利点は、複数のカルーセルに対してこのカスタムビューアプリセットを再利用できることです。ただし、ユーザーがカルーセルを作成するときに、カルーセルの動作や外観を直接カスタマイズすることもできます。カルーセルで特定のデザインが求められるケースではこの方法が適しています。
インタラクティブにする画像バナーをアップロードします。
カルーセルセットでは、ユーザーはバナー画像を切り替え、ホットスポットまたは画像マップを選択して関連するコンテンツにアクセスします。
Assets でカルーセルセットを作成するには、「作成」を選択し、「カルーセルセット」を選択します。アセットをスライドに追加し、「保存」を選択します。エディター内で、カルーセルの外観と動作を直接編集することもできます。
1 つ追加以上のホットスポットまたは画像マップを画像バナーに表示します。次に、各アクションをリンク、クイック表示、エクスペリエンスフラグメントなどのアクションに関連付けます。ホットスポットまたは画像マップを追加した後、カルーセルセットを公開して、このタスクを完了します。 公開によって埋め込みコードが生成されます。これは、コピーして Web サイトのランディングページに適用するために使用できます。
(オプション)カルーセルバナーのプレビューを参照してください(オプション)。必要に応じて、カルーセルセットの表示を確認して、インタラクティビティをテストすることができます。
他のアセットと同じようにカルーセルセットを公開します。Assets でカルーセルセットに移動し、選択して「公開」を選択します。カルーセルセットを公開すると、URL と埋め込み文字列がアクティベートされます。
次のいずれかの操作を行います。
Web サイトページへのカルーセルバナーの追加Web サイトページにカルーセルバナーの URL またはコピーした埋め込みコードを追加できます。
Experience Manager で Web サイトにカルーセルバナーを追加します。Experience Manager Sites のお客様は、インタラクティブメディアコンポーネントを使用して、カルーセルセットを AEM 内のページに直接追加できます。
カルーセルセットを編集する必要がある場合は、カルーセルセットの編集を参照してください。を参照してください。また、カルーセルセットのプロパティを表示および編集することができます。
既存のクイックビュー実装で使用される動的変数を特定して開始します。この方法を使用すると、Experience Manager Assets でカルーセルセットを作成する際に、ホットスポットまたは画像マップデータを正しく入力できます。
バナー画像にホットスポットまたは画像マップを追加する場合は、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 となります。その場合、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 Sites のユーザーである場合は、製品ピッカーアイコン(虫眼鏡)を選択して、製品を選択ページを開きます。カルーセルバナーエディターに戻るには、使用する製品を選択し、ページの右上隅のチェックマークを選択します。
Experience Manager Sites のお客様でない場合:
変数を定義します。ホットスポットの変数の識別を参照してください。
次に、SKU 値を手動で入力します。「SKU 値」テキストフィールドに、製品の SKU(Stock Keeping Unit)を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力した SKU 値によって、クイックビューテンプレートの変数部分が自動的に設定されます。選択したホットスポットを特定の SKU のクイックビューに関連付けられるようになりました。
(オプション)クイックビュー内で製品をさらに識別するために必要な他の変数がある場合は、「汎用変数を追加」を選択します。テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Mens などと指定します。
詳しくは、セレクターの操作を参照してください。
「ハイパーリンク」を選択します。
Adobe Experience Manager Sites のユーザーである場合は、サイトセレクターアイコン(フォルダー)を選択して URL に移動します。
インタラクティブコンテンツに相対 URL のリンク(特に Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
スタンドアロンユーザーの場合は、「href」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。
このリンクを新しいブラウザータブで開く(推奨のデフォルト)か同じタブで開くかを指定してください。
詳しくは、セレクターの操作を参照してください。
「エクスペリエンスフラグメント」を選択します。
Adobe Experience Manager Sites のユーザーである場合は、検索アイコン(虫眼鏡)を選択してエクスペリエンスフラグメントページを開きます。ホットスポット管理ページに戻るには、使用するエクスペリエンスフラグメントを選択し、ページの右上隅にある「選択」を選択します。
エクスペリエンスフラグメントを参照してください。
エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。
カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされないことに注意してください。
この点を回避するには、ソーシャルメディア共有ツールのないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
カルーセルバナーの外観をプレビューすることもできます。(オプション)カルーセルバナーのプレビューを参照してください。
「保存」を選択します。
カルーセルセットを公開します。 公開によって、Web サイトのページで使用できる、埋め込みコードまたは URL が生成されます。Experience Manager Sites のユーザーの場合は、カルーセルセットを直接 Web ページに追加します。
アセットの公開を参照してください。
Web サイトランディングページへのカルーセルセットの追加を参照してください。
管理者以外のユーザーは、カルーセルバナーを作成または編集できるように、dam-users グループに追加される必要があります。作成や編集で問題が発生した場合、dam-users グループにユーザーを追加できるシステム管理者に確認してください。
カルーセルセットには、次のような様々な編集タスクを実行できます。
カルーセルセットを編集するには:
次のいずれかの操作を行います。
カルーセルセットアセットの上にマウスポインターを置き、編集(鉛筆アイコン)を選択します。
カルーセルセットアセットの上にマウスポインターを置き、選択(チェックマークアイコン)を選択したあと、ツールバーの「編集」を選択します。
カルーセルセットアセットを選択し、ページの左上隅にある「編集」(鉛筆アイコン)を選択します。
カルーセルセットを編集するには、次のいずれかの操作を行います。
ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。
プレビューを使用して、カルーセルバナーがユーザーにどのように表示されるかを確認できます。また、プレビューを使用すると、カルーセルバナーのホットスポットと画像マップをテストして、期待どおりに動作するかを確認できます。
カルーセルバナーの設定が完了したら、このカルーセルバナーを公開できます。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。Web アプリケーションへの URL のリンクを参照してください。インタラクティブコンテンツに相対 URL のリンク(特に Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。ページへの Dynamic Media アセットの追加を参照してください。
カルーセルバナーは、カルーセルエディター(推奨)またはビューアリストでプレビューできます。
(オプション)カルーセルバナーをプレビューするには:
Assets で、作成したカルーセルバナーの場所に移動し、選択して開きます。
「編集」を選択します。
ツールバーの右隅にあるビューアプリセットリストで、カルーセルバナーをプレビューするビューアを選択します。
プレビューを選択します。
関連するアクションをテストするには、画像上のホットスポットまたは画像マップを選択します。
ビューアリストでカルーセルバナーをプレビューするには:
カルーセルを使用するには、そのカルーセルを公開する必要があります。カルーセルセットを公開すると、URL と埋め込みコードがアクティベートされます。これにより、スケーラブルで効率の良い配信を実現するため、CDN と統合された Dynamic Media クラウドにもカルーセルが公開されます。
ホットスポットを含む既存のインタラクティブ画像をカルーセルバナー用として使用する場合は、カルーセルバナーを公開した後で、そのインタラクティブ画像を別に公開する必要があります。
また、カルーセルバナーで使用している公開済みインタラクティブ画像を変更する場合は、そのインタラクティブ画像を公開します。その後、変更がカルーセルバナーに反映されます。
カルーセルバナーの公開方法については、Dynamic Media アセットの公開を参照してください。
バナー画像をアップロードしてカルーセルを作成した後、バナーにホットスポットや画像マップ、またはその両方を追加します。カルーセルセットが公開されました。これで、既存の Web サイトページに追加する準備が整いました。
Experience Manager Sites のユーザーである場合は、インタラクティブメディアコンポーネントをページにドラッグすることにより、カルーセルバナーをページに直接追加できます。ページへの Dynamic Media アセットの追加を参照してください。
ただし、スタンドアロンの Experience Manager Assets を利用している場合は、カルーセルバナーを Web サイトのランディングページに手動で追加できます。
公開済みのカルーセルバナーの埋め込みコードをコピーします。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。
Experience Manager Assets から Web ページにコピーした埋め込みコードを追加します。
コピーされた埋め込みコードはレスポンシブです。つまり、ページの埋め込み領域に自動的に適合します。
注意:この手順はスタンドアロンの Experience Manager Assets のユーザーのみに適用されます。
このプロセスの最後の手順は、カルーセルバナーを web サイトの既存のクイックビュー実装に統合することです。すべてのクイックビュー実装は固有であり、フロントエンド IT 担当者の支援を受けた特別なアプローチが必要になります。
既存のクイックビュー実装は一般的に、Web ページ上で以下の順に発生する、相互に関連するアクションの連鎖となっています。
これらの呼び出しは、必ずしもそれぞれ独立した、Web ページのロジックから任意の手順で呼び出すことができるパブリックな API 呼び出しを表すわけではありません。むしろ、次の手順が前の手順の最後のフェーズ(コールバック)に隠されているような連鎖的な呼び出しになっています。
カルーセルバナーが手順 1 と(部分的に)手順 2 を置き換えます。それに加えて、ユーザーがカルーセルバナー内のホットスポットまたは画像マップを選択したときに、そのユーザー操作がビューアによって処理されます。ビューアは、以前に追加されたすべてのホットスポットまたは画像マップのデータを含む Web ページにイベントを返します。
そのようなイベントハンドラーでは、フロントエンドコードは次の処理を実行します。
Experience Manager Assets によって返される埋め込みコードには、すぐに使用可能なイベントハンドラーが既に含まれ、コメントアウトされています。
そのため、必要な処理は、このコードのコメントアウトを解除し、ダミーのハンドラー本体を、特定の Web ページ専用のコードに置き換えることだけです。
クイックビュー URL の作成プロセスは、先ほど説明したホットスポットと画像マップの変数を識別するためのプロセスとは逆のプロセスになります。
ホットスポットと画像マップの変数の識別を参照してください。
クイックビュー URL を起動してクイックビューパネルをアクティベートするための最後の手順では、おそらく IT 部門のフロントエンド IT 担当者の支援が必要になります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を含め、クイックビュー実装を適切な手順から正しく起動するための最適な方法について理解しています。
クイックビューを使用したカスタムポップアップウィンドウの作成を参照してください。