Visual Experience Composer オプション

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

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

VEC UI の概要

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

Experiences レール

Experiences のレールが VEC の左側のレールに表示されます。

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

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

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

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

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

Design/Browse モード

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

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

Undo／Redo

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

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

Components レール

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

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

Modifications レール

Modifications レールを開くには、Show Modifications レールの 変更レールを表示 Components）をクリックします。

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）アクションが適切なメニューオプションにグループ化され、ジョブの迅速化と効率化を実現します。

Properties レール

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

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

Properties パネルは、右側のパネルで折りたたみ可能です。このパネルでは、デザインキャンバスを非表示にしたり、デザインキャンバスを拡大したりできます。 パネルの右側にある Show/Hide Properties アイコン ）をクリックして、Properties のパネルを折りたたんだり表示したりします。

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

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

画像オプション

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

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

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

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

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

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

テキストオプション

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

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

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

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

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

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

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

HTMLを編集

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

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

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

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

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

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

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

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

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

更新された UI に関する詳細情報