Visual Experience Composer のオプション

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

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

編集

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

テキスト／HTML edit-text-html

要素の HTML コード（テキスト領域、ボタン、リンクのテキストなど）を変更します。

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

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

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

背景色

カラーピッカーを使用して、背景色を選択または設定します。カラースウォッチを選択して、RGB 値またはカラー 16 進コードを使用して調整できます。カラーピッカーの赤 x は、背景を透明にします。

注意： ​背景画像が設定されている要素に対しては、このオプションは利用できません。

スタイル styles

スタイルパネルを使用すると、選択した要素の既存のスタイルの値を表示または編集できます。その他のスタイルを追加することもできます。

次の手順で スタイル パネルで、VEC 内からページ要素をクリックし、 編集 > スタイル.

スタイルパネルは VEC の右側に表示されます。このパネルには、編集または選択した要素に追加できるスタイルのリストが含まれています。リアルタイム CSS エディターを使用すると、カスケーディングスタイルシート（CSS）を使用している場合や開発者からコードを受け取った場合に、変更を表示したりスタイルを追加したりできます。

異なるスタイルを適用する場合、 元に戻す アイコン スタイル パネルを使用して、任意のセクションを変更できます。 クリック 元に戻す アイコンは、現在のセクションのパネルで行った変更をすべて元に戻します。

後述のように、各セクションを展開して、スタイルを編集または追加します。変更を保存するには、 戻る パネル上部のアイコンをクリックしてパネルのメイン表示に戻り、 保存.

様々なセクションパネルの各オプションの横にあるメインパネル上の青いドットは、対応するスタイルが変更されたことを示します。 この視覚的インジケーターを使用すると、クリックする前に変更を簡単に確認できます 保存.

CSS クラス

要素で使用する事前定義 CSS クラスを指定します。複数の要素が選択されている場合は、複数の CSS クラスをスペースで区切ります。

A/B、Automated Personalization、多変量分析の各テストアクティビティで使用できます。

リンク

リンクの URL を変更します。

「リンクを編集」を使用して、同じ画像要素を指定するセレクターを更新します。ただし、異なる画像要素へのリンクはサポートされていません。異なる画像要素にリンクするには、コードエディターから元のアクションを削除し、Visual Experience Composer を使用して別の画像要素に対するアクションを適用します。

前に挿入

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

オファーの決定

を追加します。 作成されたオファー Adobe Journey Optimizer を使用して、顧客に最適なオファーとエクスペリエンスを提示するoffer decisioning。

注意： このオプションは、編集または作成時に使用できます 手動 A/B テスト または エクスペリエンスのターゲット設定 (XT) アクティビティのみ。 このオプションは、他のアクティビティタイプでは使用できません。

詳しくは、 オファーの決定を使用.

画像, HTML、および テキスト

既存のコンテンツの変更に加えて、ページに任意の種類の要素を追加します。テキスト、コード、リストなどを追加して、テストにまったく異なるエクスペリエンスを作成できます。

ページの要素を選択し、「前に挿入」をクリックして、画像、HTML、テキストのどれを挿入するかを選択します。挿入された要素は、選択した要素の前に表示されます。

挿入された要素の動作はページの構造、CSS、その他のページ設定オプションに応じて異なります。ページが正しく表示されるためには、有効な HTML を指定する必要があります。アイテムを挿入した後は、必ずページをテストして、想定どおりに表示されることを確認してください。

Recommendations では、DIV タグ、SECTION タグ、ARTICLE タグのコンテンツの前に挿入がサポートされています。

注意： ​画像を挿入するには、画像ライブラリにアクセスできるように Adobe Scene7 Publishing System が有効になっている必要があります。

推奨

A/B テスト（自動配分および自動ターゲットなど）およびエクスペリエンスのターゲット設定（XT）アクティビティ内に Recommendations を含めます。詳細については、「オファーとしての Recommendations」をご覧ください。

エクスペリエンスフラグメント

Adobe Experience Manager（AEM）Targetで作成したエクスペリエンスフラグメントをアクティビティに挿入して、最適化やパーソナライゼーションを支援します。詳細については、「AEM エクスペリエンスフラグメント」をご覧ください。

後ろに挿入

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

オファーの決定

を追加します。 作成されたオファー Adobe Journey Optimizer を使用して、顧客に最適なオファーとエクスペリエンスを提示するoffer decisioning。

注意： このオプションは、編集または作成時に使用できます 手動 A/B テスト または エクスペリエンスのターゲット設定 (XT) アクティビティのみ。 このオプションは、他のアクティビティタイプでは使用できません。

詳しくは、 オファーの決定を使用.

画像, HTML、および テキスト

既存のコンテンツの変更に加えて、ページに任意の種類の要素を追加します。テキスト、コード、リストなどを追加して、テストにまったく異なるエクスペリエンスを作成できます。

ページの要素を選択し、「後ろに挿入」をクリックして、画像、HTML、テキストのどれを挿入するかを選択します。挿入された要素は、選択した要素の後に表示されます。

挿入された要素の動作はページの構造、CSS、その他のページ設定オプションに応じて異なります。ページが正しく表示されるためには、有効な HTML を指定する必要があります。アイテムを挿入した後は、必ずページをテストして、想定どおりに表示されることを確認してください。

Recommendations では、DIV タグ、SECTION タグ、ARTICLE タグのコンテンツの後ろに挿入がサポートされています。

注意： ​画像を挿入するには、画像ライブラリにアクセスできるように Adobe Scene7 Publishing System が有効になっている必要があります。

推奨

A/B テスト（自動配分および自動ターゲットなど）およびエクスペリエンスのターゲット設定（XT）アクティビティ内に Recommendations を含めます。詳細については、「オファーとしての Recommendations」をご覧ください。

エクスペリエンスフラグメント

Adobe Experience Manager（AEM）Targetで作成したエクスペリエンスフラグメントをアクティビティに挿入して、最適化やパーソナライゼーションを支援します。詳細については、「AEM エクスペリエンスフラグメント」をご覧ください。

コンテンツを置換

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

オファーの決定

を追加します。 作成されたオファー Adobe Journey Optimizer を使用して、顧客に最適なオファーとエクスペリエンスを提示するoffer decisioning。

注意： このオプションは、編集または作成時に使用できます 手動 A/B テスト または エクスペリエンスのターゲット設定 (XT) アクティビティのみ。 このオプションは、他のアクティビティタイプでは使用できません。

詳しくは、 オファーの決定を使用.

Image

コンテンツライブラリから別の画像を選択します。スワップに利用できる画像には、Experience Cloud アセットフォルダーまたは Target のコンテンツライブラリにアップロードされた画像が含まれます。

最初のアクティビティ作成時に表示される URL は、配信に使用される URL とは異なります。この URL は、アクティビティの同期時に実稼動用 Scene7 URL に更新されます。

例えば、最初の URL は次の例のように表示されます。

https://test.marketing.adobe.com/content/dam/mac/scholasticinc/Aug_MBM.jpeg?ch_ck=1470774943867

アクティビティの同期後、配信 URL は次の例のように表示されます。

http://s7d2.scene7.com/is/image/TargetTest/Aug_MBM?tm=1470768352933&fit=constrain&hei=173&wid=300

Recommendations では、DIV、SECTION、ARTICLE の各タグで「次で置換」をサポートしています。

注意： ​画像を置き換えるには、Adobe Scene7 Publishing System アカウントが必要です。

HTML オファー

コンテンツライブラリから別のオファーを選択します。

注意： HTML オファーは Target サーバーに格納されます。

HTMLオファーは最大 256 KB です。

推奨

A/B テスト（自動配分および自動ターゲットなど）およびエクスペリエンスのターゲット設定（XT）アクティビティ内に Recommendations を含めます。詳細については、「オファーとしての Recommendations」をご覧ください。

エクスペリエンスフラグメント

Adobe Experience Manager（AEM）Targetで作成したエクスペリエンスフラグメントをアクティビティに挿入して、最適化やパーソナライゼーションを支援します。詳細については、「AEM エクスペリエンスフラグメント」をご覧ください。

レイアウト

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

整列

要素を、同じ親要素または DIV 内の別の場所にドラッグします。再配置される要素用の場所を空けるために、他の要素の位置が調整されます。

注意:クリックの追跡は、再配置されたアイテム上では機能しません。

現在、特定の VEC アクション ( 並べ替え および 移動の場合、ソースと宛先の親要素の兄弟要素が完全に読み込まれているとします。 親 DOM 要素（ソースまたは宛先）の下で遅延読み込みが発生した場合、これらの VEC アクションによって動作に不整合が生じる可能性があります。 アドビでは、遅延読み込みされた DOM 要素で VEC アクションを機能させるための、より信頼性の高いアプローチに取り組んでいます。 一時的な回避策として、 カスタムコード （エクスペリエンスをレンダリングする場合）。

サイズ変更

ページの要素のサイズを変更します。次を選択した場合： サイズ変更の場合は、要素の右下隅にハンドルが表示され、その隅をドラッグしてサイズを変更できます。 Shift キーを押しながら操作すると、縦横比が維持されます。

注意： ​インライン要素はサイズ変更できません。

移動 move

ページ上の要素を移動します。「整列」オプションとは異なり、「移動」では、移動される要素用の場所を空けるために別の要素の位置が調整されることはありません。移動を細かく調整するには、矢印キーを使用します。( 計画された機能強化：は、移動した要素が他の要素の背後に隠れないようにするためのサポートです )。

特定の状況（CSS の制限により要素を親要素内に置いておく必要がある場合など）では、要素を親要素の外側に移動することはできません。 CSS プロパティ overflow: hidden を持つコンテナの外側に要素を移動することはできません。

詳しくは、 並べ替え 以下との一貫性のない動作に関する詳細は、以下を参照してください。 移動 および 並べ替え DOM 要素の遅延読み込みによるアクション。

非表示

要素を非表示にします。空白は残りますが、コンテンツは削除されます。

削除

要素を削除します。画像の背後の空白が削除され、要素のあった領域が折りたたまれます。

注意：「従来」の mbox（Target Classic キャンペーンで作成した mbox）内の項目は、このオプションを使用して削除することができません。

セクションを展開

現在選択している要素に加えて、親要素を選択します。親要素を選択しているときは、その要素のすべての子が自動的に選択されます。選択の拡張は繰り返し実行できます。

このリンクに移動

リンク先を開きます。

取り消し/やり直し

編集セッション中にアクティビティにおこなった変更を取り消します。以前に取り消した変更をやり直すこともできます。

注意点 considerations

カスタム要素のサポート custom

VEC はをサポートしています。 Web コンポーネント を使用すると、カスタム要素およびカスタム要素内の要素に対して、パーソナライズされたエクスペリエンスとオファーを作成およびテストできます。 この機能は、VEC ですべての Target アクティビティのタイプ。

ほとんどの VEC アクションは、カスタムイベントとカスタムイベント内でサポートされますが、次の例外があります。

次のアクションは、カスタム要素では使用できません。

次のアクションは、カスタム要素内では使用できません。

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

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

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

VEC で DOM パスの上にマウスポインターを置くと、対応する要素が青色のボックスで強調表示されます。その要素をクリックすると、要素がオレンジ色のボックスで強調表示され、前述のように VEC オプションメニューが表示されます。

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

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