可視化體驗撰寫器選項

當您在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時，有數個RTF格式選項可供使用。 您可選擇字型、選取字型樣式、變更文字對齊方式，以及其他標準文字格式化選項。修改 HTML 時，您可在 HTML 的程式碼檢視和 RTF 編輯之間切換。

以下是可巢狀的 HTML5 標記:

Background Color

使用檢色器來選取或設定背景顏色。您可以選取一個色票，然後使用 RGB 值或色彩十六進位代碼調整它。檢色器中的紅色 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

新增在 Adobe Journey Optimizer🔗中建立的優惠方案，以使用offer decisioning向客戶呈現最佳優惠方案和體驗。

注意： ​此選項僅在編輯或建立手動A/B Test或Experience Targeting (XT)活動時可用。 此選項不適用於其他活動型別。

如需詳細資訊，請參閱使用優惠決定。

Image、HTML和Text

除了修改現有內容以外，新增任何類型的元素至您的頁面。新增文字、代碼、清單和更多內容來建立完全不同的體驗進行測試。

在頁面上選取元素，然後按一下「Insert Before」並選擇您要插入影像、HTML或文字。 插入的元素會出現在選取的元素之前。

所插入元素的行為取決於頁面、CSS 和其他頁面組態選項的結構。需要 HTML 才能讓您的頁面正確出現。在插入項目之後，請一律測試您的頁面，以確定它能如預期般顯示。

Recommendations支援Insert Before DIV、SECTION和ARTICLE標籤的內容。

注意: 插入影像需要啟用 Adobe Scene7 Publishing System 發佈系統，這樣您才會具備影像資料庫的存取權。

建議

包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊，請參閱以選件方式使用 Recommendations。

Experience Fragment

在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段，以輔助最佳化或個人化。如需詳細資訊，請參閱 AEM Experience 體驗片段。

Insert After

可使用下列選項:

Offer Decision

新增在 Adobe Journey Optimizer🔗中建立的優惠方案，以使用offer decisioning向客戶呈現最佳優惠方案和體驗。

注意： ​此選項僅在編輯或建立手動A/B Test或Experience Targeting (XT)活動時可用。 此選項不適用於其他活動型別。

如需詳細資訊，請參閱使用優惠決定。

Image、HTML和Text

除了修改現有內容以外，新增任何類型的元素至您的頁面。新增文字、代碼、清單和更多內容來建立完全不同的體驗進行測試。

在頁面上選取元素，然後按一下「Insert After」並選擇您要插入影像、HTML或文字。 插入的元素會出現在選取的元素之後。

所插入元素的行為取決於頁面、CSS 和其他頁面組態選項的結構。需要 HTML 才能讓您的頁面正確出現。在插入項目之後，請一律測試您的頁面，以確定它能如預期般顯示。

Recommendations支援Insert After DIV、SECTION和ARTICLE標籤的內容。

注意: 插入影像需要啟用 Adobe Scene7 Publishing System 發佈系統，這樣您才會具備影像資料庫的存取權。

建議

包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊，請參閱以選件方式使用 Recommendations。

Experience Fragment

在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段，以輔助最佳化或個人化。如需詳細資訊，請參閱 AEM Experience 體驗片段。

Replace Content

可使用下列選項:

Offer Decision

新增在 Adobe Journey Optimizer🔗中建立的優惠方案，以使用offer decisioning向客戶呈現最佳優惠方案和體驗。

注意： ​此選項僅在編輯或建立手動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 發佈系統帳戶。

HTML Offer

從Content Library中選取其他選件。

注意: ​Target HTML 選件會儲存在 伺服器上。

HTML選件最高可達256 KB。

建議

包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊，請參閱以選件方式使用 Recommendations。

Experience Fragment

在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段，以輔助最佳化或個人化。如需詳細資訊，請參閱 AEM Experience 體驗片段。

Layout

可使用下列選項:

Rearrange

將元素拖曳到相同上層元素內的另一個位置或 DIV。其他元素會移動位置，為重新排列的元素騰出空間。

注意：點選追蹤對重新排列的專案沒有作用。

目前，某些VEC動作（例如Rearrange和Move）假設來源和目的地父元素的同層級元素已完全載入。 如果在父DOM元素（來源或目的地）底下發生延遲載入，這些VEC動作可能會造成不一致的行為。 我們正在研究更可靠的方法，讓VEC動作在延遲載入的DOM元素中運作。 作為臨時因應措施，您可以在這些案例中使用Custom Code來呈現您的體驗。

Resize

在您的頁面上調整元素的大小。選取Resize時，元素右下角會出現控制代碼，可讓您拖曳該角調整大小。 按住 Shift 鍵來保持相同的外觀比例。

注意: 不能對行內元素調整大小。

Move move

在頁面上移動元素。與Rearrange選項不同，Move不會移動其他元素來騰出空間給要移動的元素。 使用方向鍵來微調此移動。（規劃的增強功能：支援確保移動的元素不會隱藏在其他元素後面。）

在某些情況下，例如當CSS限制需要元素保留在其上層元素內時，您無法將元素移出其上層之外。 元素無法移到有下列 CSS 屬性的容器之外: overflow: hidden。

請參閱上述Rearrange，以取得由於延遲載入DOM元素而導致Move和Rearrange動作不一致之行為的詳細資訊。

Hide

隱藏元素。白色空間會保留，但移除內容。

Remove

移除元素。影像背後的白色空間會移除，而元素所在位置的空間會折疊。

注意: 您無法使用此選項移除 "classic" mbox 內的項目 (在 Target Classic 促銷活動內建立的 mbox)。

Expand Section

除了原始選取的元素以外，請選取上層元素。選取任何上層元素時，系統會自動選取該元素的所有下層。您可以展開選取範圍多次。

Navigate to Link

開啟連結的目的地。

Undo/Redo

在編輯工作階段期間，還原您對活動所進行的變更。您也可以重做先前已還原的變更。

考量事項 considerations

自訂元素支援 custom

VEC支援Web元件，可讓您在自訂元素以及自訂元素內部的元素上建立和測試個人化體驗和選件。 此功能適用於所有Target活動型別。

大部分的VEC動作都可在自訂事件和內部自訂事件上支援，但下列例外情況除外：

下列動作不適用於自訂元素：

下列動作在自訂元素中無法使用：

使用DOM路徑導覽元素 dom-path

當您按一下頁面上的元素時，VEC 選項功能表隨即顯示。此外，當您按一下元素時，對應的 DOM 路徑會顯示於頁面底部。

您可以使用 DOM 路徑快速查看有關已選取元素 (類型、ID 和類別) 的資訊，然後向上或向下移動 DOM 路徑以選取想要的元素。

當您將游標暫留在 DOM 路徑上方時，藍色方塊隨即醒目提示 VEC 中的對應元素。當您按一下元素時，橘色方塊隨即醒目提示元素且 VEC 選項功能表隨即顯示 (如上所述)。

您可以使用 DOM 路徑，輕鬆導覽至 VEC 中的任何父項、同層級項目或子項元素。

設定點擊追蹤時，也可使用 DOM 路徑功能。