Visual Experience Composer のオプション

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

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

VEC オプションメニュー

NOTE
使用できるオプションは、作成または編集しているアクティビティタイプおよび要素によって異なります。 次の節では、画像とテキストの様々なオプションについて説明します。

画像オプション

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

画像を選択した VEC

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

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

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

右側のフレームを使用すると、画像のプロパティをさらに設定できます。

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

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

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

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

テキストオプション

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

テキストを選択した VEC

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

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

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

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

右側のフレームを使用すると、テキストのプロパティをさらに設定できます。

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

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

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

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

HTMLを編集 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