Visual Experience Composer のオプション

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

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

Edit

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

Text/HTML edit-text-html

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

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

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

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

Background Color

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

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

Styles styles

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

Styles パネルにアクセスするには、VEC 内からページ要素をクリックして、Edit/Styles をクリックします。

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

異なるスタイルを適用する場合は、任意のセクションを変更した後に、Styles パネルの右上隅に表示される Revert アイコンをクリックすることで、いつでも変更を元に戻すことができます。 Revert アイコンをクリックすると、現在のセクションのパネルに対するすべての変更が元に戻ります。

後述のように、各セクションを展開して、スタイルを編集または追加します。変更を保存するには、パネルの上部にある「Back」アイコンをクリックしてパネルのメインディスプレイに戻り、「Save」をクリックします。

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

CSS Class

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

A/B、Automated Personalization、Multivariate Test の各アクティビティで使用できます。

Link

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

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

Insert Before

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

Offer Decision

offer decisioningを使用して顧客に最高のオファーとエクスペリエンスを提供する で作成したオファー Adobe Journey Optimizer を追加します。

メモ： このオプションは、 手動 A/B Test または Experience Targeting （XT）アクティビティを編集または作成する場合にのみ使用できます。 このオプションは、他のアクティビティタイプでは使用できません。

詳しくは、「 オファー決定の使用を参照してください。

Image、HTML および Text

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

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

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

Recommendations は、DIV、SECTION および ARTICLE タグのコンテンツの Insert Before をサポートしています。

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

レコメンデーション

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

Experience Fragment

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

Insert After

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

Offer Decision

offer decisioningを使用して顧客に最高のオファーとエクスペリエンスを提供する で作成したオファー Adobe Journey Optimizer を追加します。

メモ： このオプションは、 手動 A/B Test または Experience Targeting （XT）アクティビティを編集または作成する場合にのみ使用できます。 このオプションは、他のアクティビティタイプでは使用できません。

詳しくは、「 オファー決定の使用を参照してください。

Image、HTML および Text

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

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

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

Recommendations は、DIV、SECTION および ARTICLE タグのコンテンツの Insert After をサポートしています。

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

レコメンデーション

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

Experience Fragment

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

Replace Content

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

Offer Decision

offer decisioningを使用して顧客に最高のオファーとエクスペリエンスを提供する で作成したオファー Adobe Journey Optimizer を追加します。

メモ： このオプションは、 手動 A/B Test または Experience Targeting （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 Offer

Content Library ージから別のオファーを選択します。

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

HTMLオファーのサイズは最大 256 KB です。

レコメンデーション

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

Experience Fragment

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

Layout

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

Rearrange

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

メモ：並べ替えられた項目では、クリックの追跡は機能しません。

現在、Rearrange や Move などの特定の VEC アクションでは、ソースと宛先の親要素の兄弟要素が完全に読み込まれることを前提としています。 遅延読み込みが親 DOM 要素（ソースまたは宛先）の下で発生した場合、これらの VEC アクションによって動作に一貫性がなくなる可能性があります。 私たちは、遅延読み込みされた DOM 要素で VEC アクションを機能させるための、より信頼性の高いアプローチに取り組んでいます。 一時的な回避策として、これらのシナリオで Custom Code を使用して、エクスペリエンスをレンダリングできます。

Resize

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

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

Move move

ページ上の要素を移動します。Rearrange オプションとは異なり、Move は移動する要素の場所を確保するために他の要素を移動しません。 移動を細かく調整するには、矢印キーを使用します。（計画的な機能強化：移動された要素が他の要素の背後に隠れないようにするサポート）

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

DOM 要素の遅延読み込みによる Move アクションと Rearrange アクションの動作が一貫していない場合の詳細は、上記の Rearrange を参照してください。

Hide

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

Remove

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

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

Expand Section

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

Navigate to Link

リンク先を開きます。

Undo／Redo

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

注意点 considerations

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

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

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

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

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

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

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

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

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

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

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