Visual Experience Composer のオプション

Adobe Target Standard/Premium 25.2.1 リリース(2015 年 2 月 17 日(PT))では、更新された Visual Experience Composer (VEC)が導入されています。 この記事では、更新された UI とそのオプションについて説明します。

IMPORTANT
更新された Visual Editing Composer には 🔗Chrome web ストアで利用可能な Adobe Experience Cloud Visual Editing Helper 拡張機能が必要です。

VEC は、既存のアクティビティを作成または編集すると表示されます。

Visual Experience Composer(VEC)

VEC UI の概要

次の節では、A/B Test アクティビティの更新された VEC で使用できるオプションについて説明します。 オプションは、アクティビティタイプによって異なります。

Experiences パネル

Experiences パネルが VEC の左側のパネルに表示されます。

エクスペリエンスパネル

エクスペリ Experiences ンスパネルを使用して、エクスペリエンスを表示、作成、名前変更または削除できます。

Experiences パネルでは、次のオプションを使用できます。

  • エクスペリエンスの表示:エクスペリエンスを表示するには、目的のエクスペリエンスをクリックして Design キャンバスに表示します。
  • エクスペリエンスを追加:エクスペリ Add ンス アイコン( 追加アイコン )をクリックして新しいエクスペリエンスを追加します。 必要に応じて、新しいエクスペリエンスを設定します。
  • エクスペリエンス名の変更:エクスペリ Rename ンス アイコン( 名前を変更アイコン )をクリックして、Rename Experience ダイアログボックスを表示します。 新しい名前を指定し、「Save」をクリックします。
  • エクスペリエンスの複製、削除またはリダイレクト:エクスペリ More Actions ンスのアイコン( その他のアクションのアイコン )をクリックし、DuplicateDelete または Redirect to URL を選択します。

アクティビティの設定/設定

Design キャンバスの上部に表示されている Configure アイコン 設定アイコン )をクリックして、アクティビティのプロパティメニューを表示します。

アクティビティ設定オプション

以下のオプションがあります。

  • Properties: アクティビティにプロパティを割り当てるか、アクティビティからプロパティを削除します。 Properties は(Target Premium 機能です。 詳しくは、Enterprise ユーザー権限を参照してください。
  • Page Delivery:サイトの類似のページに同じエクスペリエンスを組み込みます。 ページテンプレートを使用してページに構造を提供するか、ページに類似の要素が含まれている場合は、類似した構造のページ要素またはドメイン全体でのバリエーションをテストします。 詳しくは、 類似のページに同じエクスペリエンスを組み込むを参照してください。
  • Site Preferences: サイトの環境設定を設定して、Target が CSS セレクターを生成する方法を指定します。 詳しくは、Visual Experience Composer🔗 の設定の CSS セレクター を参照し ください。
  • 追加のページ:アクティビティにページを追加して、複数ページのアクティビティを作成します。このアクティビティでは、各ページに固有のデザインを使用して、複数ページにわたるストーリーを作成できます。 詳しくは、 複数ページアクティビティを参照してください。
  • 単一オーディエンス:アクティビティに単一のオーディエンスを使用します。
  • 複数のオーディエンス:アクティビティに複数のオーディエンスを割り当てます。 オーディエンスを追加アイコン( アイコンを追加 )をクリックし、リストから 1 つ以上のオーディエンスを選択します。 また、Add Audiences ダイアログボックスでは オーディエンスを組み合わせるまたは 新しいオーディエンスを作成することもできます。

Design/Browse モード

デザインキャンバスの上部に表示されている Design/Browse の切り替えを使用して、デザインモードと参照モードを切り替えます。

デザインと参照の切り替え

Browse モードを使用してサイトを移動し、更新するビューまたはページを選択します。 Design モードに戻って、変更を追加または編集します。

Undo/Redo

取り消しアイコン( 取り Undo しアイコン )をクリックして、加えた変更を取り消すことができます。

VEC の取り消しアイコン

アクションをやり直すには、「 取り消し/取り Redo し」ボタングループを展開し、「取り Redo し」を選択します。

Components パネル

Web ページに多数のコンポーネントを追加し、必要に応じて新しい Components パネルを使用して編集できます。

コンポーネントパネル

NOTE
この領域に Components パネルではなく Modifications パネルが表示されている場合は、Show Components アイコン( コンポーネントを表示アイコン )をクリックします。 Show Components アイコン( コンポーネントを表示アイコン )と Show Modifications アイコン( 変更パネルを表示 )は、適切なオプションを表示する切り替えとして機能します。

新しいコンポーネントをエクスペリエンスに追加するには:

  1. 追加するコンポーネントをクリックしてハイライト表示します。

    使用可能なコンポーネントは、次の論理コンテナにグループ化されます。

  2. コンポーネントを Design キャンバス内の既存のページ要素にドラッグします。

  3. を選択すると、選択した要素のの前にコンポーネントを挿入できます。

    以前の VEC バージョンと比較して、選択した要素をコンポーネントで置き換えることはできません。

Modifications パネル

Modifications パネルを開くには、Components パネルの Show Modifications アイコン( 変更パネルを表示 )をクリックします。

変更パネル

NOTE
Show Components アイコン( コンポーネントを表示アイコン )と Show Modifications アイコン( 変更パネルを表示 )は、適切なオプションを表示する切り替えとして機能します。

Modifications パネルには、Visual Experience Composer (VEC)内のページに加えられたすべての変更が表示され、追加の変更(CSS セレクター、mbox、カスタムコードなど)を行うことができます。

パネルヘッダーの More Options アイコン(その他のアクションアイコン )をクリックして、変更を追加したり、すべての変更を削除したり、無効な変更をすべて削除したりします。 一括操作を実行するには、「Select」をクリックします(Apply to All Pages または Delete)。

各変更の横にある More Options アイコン その他のアクションアイコン )をクリックして、情報を表示したり、変更を削除したり、変更をさらに表示したり可能にします。

Design キャンバス

Design キャンバスでは、画面に合わせる、Desktop、Tablet、Mobile Landscape、Mobile Portrait などのビューポートを選択できます。 デフォルトでは、キャンバスは、「 管理」セクションで定義されたビューポートと共に、ページを画面に合わせます。

ビューポート オプション

適切なアイコン( ズームインアイコン または ズームアウトアイコン )をクリックして、ズームインまたはズームアウトすることもできます。

Design キャンバスでページ要素をクリックすると、その要素タイプで使用できるオプションがメニューに表示されます。 さらに、ページの下部に DOM パスが表示されるので、ページ構造を簡単にナビゲートできます。

様々な Visual Experience Composer (VEC)アクションが適切なメニューオプションにグループ化され、ジョブの迅速化と効率化を実現します。

VEC オプションメニュー

NOTE
使用できるオプションは、作成または編集しているアクティビティタイプおよび要素によって異なります。 A/B Test アクティビティでの画像とオファーの編集について詳しくは、以下の Design キャンバスを使用した要素の編集を参照してください。

Properties パネル

Properties パネルを使用すると、ページ上で選択した要素のプロパティを変更できます。これらの要素がHTML要素であるか、レコメンデーションやオファーなど、Target ージに固有のオブジェクトであるかに関係なく、プロパティを変更できます。

プロパティパネル

パネルの上部にあるアイコンをクリックして、HTML コードを編集したり、要素を削除、複製、非表示にしたりします。 変更が Modifications ールパネルに表示されます。

Properties パネルは、右側のパネルで折りたたみ可能です。 パネルの右側にある Show/Hide Properties アイコン プロパティアイコン )をクリックして、Properties のパネルを折りたたんだり表示したりします。

Design キャンバスを使用した要素の編集 design

次の節では、Design キャンバスで画像とテキストを編集する方法について説明します。 デザインキャンバスは、コンポーネント パネル、変更パネル、プロパティパネルと共に、アクティビティのエクスペリエンスを容易に作成できる強力なツールを提供します。

画像オプション

A/B Test アクティビティの画像をクリックすると、VEC は次の図のようになります。

画像を選択した VEC

左側の Components フレームからコンポーネントを選択して、次の要素を挿入します。

画像上部のメニューでは、次の操作を実行できます。

  • リンクを挿入します( リンクを挿入アイコン )。
  • 画像を変更します( 画像アイコンを選択 )。
  • パーソナライゼーションを追加( Personalizationを追加アイコン )。
  • 画像を削除します( 削除アイコン )。

右側の Properties パネルでは、画像のプロパティをさらに設定できます。

フレームの上部にあるアイコンを使用すると、次の操作を実行できます。

  • HTMLを編集します( HTMLを挿入アイコン )。 詳しくは、以下の HTMLの編集を参照してください。
  • 画像を複製します( 複製アイコン )。
  • 画像を削除します( 削除アイコン )。
  • 画像を非表示にします( 非表示アイコン )。

右側のフレームのオプションを使用すると、次の操作を実行できます。

  • CSS クラスを編集します。
  • 画像のプロパティ(ソース、タイトル、代替テキスト)を設定します。
  • リンク URL を編集します。
  • 画像のサイズ(高さと幅)を設定します。 「Show Advanced Options」をクリックして、画像の最小および最大サイズ、幅、高さ、オーバーフロー、オブジェクトのフィットを設定します。
  • ページ上の画像の位置(絶対パス、固定パス、相対パス、静的パス、スティッキーの各パス)を設定します。
  • 余白やパディングを含む、要素の間隔を設定します。
  • 要素の効果(不透明度)を設定します。 「Show Advanced Options」をクリックして、画像のセピア、グレースケール、コントラスト、明るさ、ブラーの値を設定します。 また、画像を反転または回転させることもできます。
  • 画像のインラインスタイルを設定します。

テキストオプション

A/B Test アクティビティでテキストをクリックすると、VEC は次の図のようになります。

テキストを選択した VEC

左側の Components フレームからコンポーネントを選択して、次の要素を挿入します。

Show Modifications アイコン( 変更を表示アイコン )をクリックして、エクスペリエンスの変更を表示します。

テキスト要素の上部にあるメニューを使用すると、次の操作を実行できます。

  • テキストのプロパティ(見出しレベル、段落、ブロック引用、等幅)を設定する
  • テキストのカラーを選択します( テキストカラーアイコン
  • テキストの属性(太字、斜体、下線、取り消し線)を設定します( テキスト属性を選択アイコン )。
  • テキストの整列(左、中央、右、両端揃え)( テキストの整列アイコン )を設定します。
  • リンクを挿入します( リンクを挿入アイコン )。
  • コンテンツをHTML オファー、 エクスペリエンスフラグメントまたは レコメンデーションに置き換えます。
  • HTMLを編集します( HTMLを挿入アイコン )。
  • パーソナライゼーションを追加( Personalizationを追加アイコン )。
  • 画像を削除します( 削除アイコン )。

右側の Properties パネルでは、テキストのプロパティをさらに設定できます。

フレームの上部にあるアイコンを使用すると、次の操作を実行できます。

  • HTMLを編集します( HTMLを挿入アイコン )。 詳しくは、以下の HTMLの編集を参照してください。
  • テキストを複製します( 複製アイコン )。
  • テキストを削除します 削除アイコン )。
  • テキストを非表示にします( 非表示アイコン )。

右側のフレームのオプションを使用すると、次の操作を実行できます。

  • CSS クラスを編集します。
  • テキストの背景色と画像を設定します。
  • テキストのタイポグラフィ(見出しスタイル、フォントサイズ、フォントの太さ、行の高さ、配置、テキストカラー、テキストスタイル(太字、斜体、下線、取り消し線))を設定します。
  • 箇条書き、番号付き、A、B、C などのリストを設定します。
  • 境界線のカラーを選択します。
  • テキストボックスのサイズ(高さと幅)を設定します。 テキスト ボックスの最小サイズ、最大サイズ、幅、高さ、オーバーフロー、およびオブジェクトの自動調整を設定するには、[Show Advanced Options] をクリックします。
  • ページ上のテキストボックスの位置(絶対、固定、相対、静的、固定)を設定し、上、右、下、左からのピクセル数を設定します。
  • 余白やパディングを含む、要素の間隔を設定します。
  • 要素の効果(不透明度)を設定します。 「Show Advanced Options」をクリックして、画像のセピア、グレースケール、コントラスト、明るさ、ブラーの値を設定します。 テキストを反転または回転することもできます。
  • インラインスタイルを設定します。

HTMLを編集

HTML コードだけでなく、カスタム JavaScript を編集および挿入することもできます。

A/B アクティビティと Experience Targeting アクティビティでテキストとHTMLを編集する際には、いくつかのリッチテキスト書式設定オプションを使用できます。 フォントの選択、フォントスタイルの選択、テキストの整列方法の変更およびその他の標準的なテキスト書式オプションの設定が可能です。HTMLを変更する際に、HTMLのコードビューとリッチ編集ビューを切り替えることができます。

次の HTML5 タグをネストできます。

タグ
ネスト可能なタグ
<a>
<h1-h6><p><ul><ol><menu><div><figure><figcaption>
<ins>
<h1-h6><p><ul><ol><menu>
<del>
<ul><ol><menu><h1-h6><p>
<label>
<p>

DOM パスを使用して要素をナビゲートする dom-path

ページで要素をクリックすると、VEC オプションメニューが表示されます。さらに、要素をクリックすると、対応する DOM パスがページの下部に表示されます。

DOM パス

DOM パスが表示されていない場合は、Show DOM アイコン( DOM アイコンを表示 )をクリックします。

DOM パスを使用すると、選択した要素に関する情報(タイプ、ID、クラス)をすばやく確認したり、DOM パスを上下に移動して目的の要素を選択したりできます。

DOM パスを使用すれば、VEC 内で任意の親要素、兄弟要素、子要素に容易に移動できます。

DOM パス機能は、クリックの追跡を設定するときにも使用できます。

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654